Code Quality Tools and Email Client Specific Targeting

by Mihály Sáróy

EDMdesigner blog has been offering in-depth tutorials on HTML email coding for the past few months. In this current article series, we have used and will continue to use frameworks and technologies exceeding the HTML & CSS system of email coding. They are great ways to help productivity, but as a refresher we will take a step back into our comfort zone and look at online tools and less code heavy examples.

In this post, we look at additional tools that help to secure the output. We'll see free online tools to validate the HTML code. Many visual testing services, including Litmus and Email on Acid provide these kind of tools, but if you don't use them or want to see a second opinion on a compound template, it makes sense to test with another service.

In the article before, we discussed code inspection with the browser Developer Tools in webmails. It's also a good way to come up with client specific targeting. You see, a specific class or the way the client processes your code with its pre-processor can be the basis of custom designs.

In the third part, we'll see how Thunderbird can be a good companion in workflow and see extensions at your hands when you work in the browser.

There are some important topics however that we wont't discuss in this article. One is testing call-to-action buttons. It's hard to test them as you have to do it manually. We had a post on a new line-height based button before and we had quite a few click tests with it so you know what to expect. There are standard button types, where you can also rely on documented click tests.

We also leave off spam testing. There are easy-to-use initiatives to help you. We had an article last year gathering the full spectrum of email quality testing. For the purposes of deliverability, like finding out your sender score, you can find great resources there. I also recommend checking things off this list before you send out a campaign.

In the next article, you can read about the special responsive layout technique of The Drop Calc Method developed at EDMdesigner. You can gain insights of its development background and how it was received in Litmus Live Conference. Sign up, if you don't want to miss it!

Code Quality Checking Tools

We saw visual testing by the web browser and testing services in the previous article. We emphasized how important visual testing is, but it's no secret that there's so much more to email quality testing, which you should check before you hit send.

As mentioned in the introduction, first we cover email code quality. You need to make sure that the code has valid links, all the HTML tags are closed and that your code best fits to the standards. Many problems may be avoided by obeying this simple rule.

Code Quality in Code Editors

During development, the standard help is syntax highlighting, but it misses many mistakes, so can't be relied on for the job.

A more accurate option is to set up an HTML linter for your code editor. You can find an HTML linter for every popular code editor, like Sublime Text or Visual Studio Code. The purpose of linter packages is to help identify where and what the problem is. In the image below it's clear that something is wrong even by syntax highlighting, but the list generated by the linter-package makes it child's play to resolve:

Online Code Validators

There are an ever-evolving number of tools to check if your code is confirm to the email best practices. They are easy to use, as the usual operation is just 3 steps:

  • open the online service
  • copy & paste the completed code to the validator's text area
  • run the validation process

For checking HTML validity, the most common go-to is the W3C validator. It's hard to follow every rule, but it can help to spot rookie mistakes. However you'll often find that legacy email development techniques are often filtered as well:

A more appropriate tool is HTMLemailcheck as it's designed specifically for email testing. The free plan covers HTML and CSS, but it has affordable price for additional tools like link checking and accessibility testing. You can validate and get actionable suggestions to fix the problems.

Accessibility gains an evolving importance in web and email design and the available tools help you produce code that works in screen readers.

Last but not least, you need to know about Can I Use in HTML Emails, where you can quickly review support for CSS properties among the most definitive clients. As Outlook remains the most advanced client to support with respect to allowed properties, you may decide to run a quick test with this tool depending on your users' email client segmentation.

Targeting Gmail and Inbox Email Clients

Most challenges in email development derive from knowing what to expect from particular clients. This enables us to tailor higher quality for state-of-the-art email clients. It's the basis of email client specific custom designs, like progressive enhancement.

For the purposes of this article, we played around with this very cool Gmail/Inbox targeting technique. We found it on FreshInbox Blog.

The code looks as follows:

<!DOCTYPE html>
<html><head>
<style>
    u + .body section .gmail {
        display:block !important;
    }
    u + .body > .inbox {
        display:block !important;
    }
</style>
</head>
<body class="body">
    <section>
        <div class="gmail" style="display:none;">
            THIS IS GMAIL</div>
        <div class="inbox" style="display:none;">
            THIS IS INBOX</div>
    </section>
</body>
</html>

In the example we have inline styles hiding elements, and with a specialized CSS selector combination, we make them appear by display: block !important; property. For instance in Gmail, the class="gmail" is applied from the embedded CSS, while the class="inbox" is not.

The idea for this targeting is that in Inbox the section element gets removed, while GMAIL keeps it. It was our suspicion that the same rule applies to all HTML5 elements. It turned out mostly to be true (<details> or <summary> are invalid even in Gmail).

If you need to look up the CSS selectors, here are links for the Class selector ("."), Adjacent sibling selector(">"), Child combinator ("+"), and Descendant combinator (" ") used in the article.

Using Inbox, with the Developer Tools we can identify that HTML5 opening and closing tags are replaced with <u></u> HTML code. The nested content is raised to the same level as the <u> tags, thus making this specific targeting work.

However, it's clear from the above that based on this targeting we can achieve different client specific designs.

There's a very useful resource at this point, if you want to target email clients other than webmails (for these, you can always use the browser Developer Tools to inspect the HTML): Rémi Permantier shared a link on Litmus Blog about a collection of methods to retrieve email messages' source.

The Thunderbird Workflow for Email Testing

We chose to demonstrate Thunderbird because it has some really cool features. You could use it as a code editor or an email sending service, which makes it an invaluable addition to our current testing tools.

Mozilla Thunderbird is a free, open source, cross-platform email, news, RSS, and chat client. (source Wikipedia). It was developed by Mozilla Foundation and though there's a fork in the road of Thunderbird and Firefox development, and Thunderbird is migrating off Mozilla Corporation infrastructure, the effect is apparent in the software everywhere.

From the point of email development, we deal with Thunderbird because of its capabilities to:

  • show email source for inspection even though it's a desktop client

  • have the unique moz-text-html class, which provides client specific targeting option (see it also in the above image)

  • let you insert HTML code and use it as sending service for HTML emails

A possible workflow might look something like this:

  • You extract some raw code from your favorite code editor
  • Paste the HTML into the new message and send yourself a test
  • View the test to get a feel for the design and inspect with the smart wire-frames
  • Modify the code if necessary with the aid of ThunderHTMLEdit
  • Send another test, and repeat from the top if you need to

In this section you could see a complete testing workflow with Thunderbird and specific Thunderbird targeting with the moz-text-html property.

For a full collection on client specific targeting check out: tabletrtd.com's article. It's worth it to bookmark that page if you haven't done it yet. You can find actual email development gems there.

Browser Extensions for Google Chrome

In the previous section you could examine how an extension can add useful functionality to Thunderbird. In this section we'll boost the performance of our web browser in the same manner. We limit our selection to Google Chrome extentions, as Firefox is in the middle of transitioning their add-ons philosophy to the WebExtension system.

There are two extensions we would like to sell you on in particular, but feel free to leave recommendations about your favorite tools in the comment section below.

The first one is the Web Developer. As the name suggests it has functionalities exceeding our needs, but after you have installed it, it's just a click away to check in a completed template:

  • if you added alt text to all of the images:

  • inspect how your CSS works throughout the template:

and basically you can distinctly analyze any element or properties of your design. This flexibility to separate parts of your design can be really amazing. It's worth a try.

Our second recommendation is called Emmet Re:view. It's developed by the emmet.io team and is used to assist Responsive Design.

You may wonder why is it better than the Device Mode in Chrome:

Why we consider it a good addition to your toolset is its capability to show the design by the multiple breakpoints defined in the email's code:

You can also filter views based on device types, like 'tablets' or 'mobiles'.

In addition to introducing two extensions, it is worth mentioning that there are extensions for Email on Acid and Litmus. If you use these testing services, you can send code for full visual testing very easily. It can definitely help you speed up the testing process.

Summary

In this article we went over three topics:

  • code quality with online tools
  • client specific targeting
  • browser extensions

You could learn about a handful of ways to check your code, like installing HTML linter package to your code editor or using the validator services of W3C, HTMLEmailCheck and Accessible-email.org.

We hope you feel inspired and intrigued to start thinking on custom designs for Gmail, Inbox and Thunderbird for your next campaign.

Next time you need to inspect the web version of your template, you have the Web Developer and Emmet Re:view extensions to help you with your worries.

If you enjoyed the article join us next time as well. You'll hear about the Litmus Conference and EDMdesigner's part in it from Gyula Németh, CTO @ EDMdesigner. See you then!