How to Create an HTML Template That Email Clients Render Well

A developer can’t code an HTML email template using the same technologies and approaches as one would when building a web page. It may sound ridiculous, but it’s the truth. So, let’s try to figure out why this statement is still valid in 2018.

Email clients with no standards

While coding a web page, an engineer takes the following factors into consideration:

  • Operating system
  • Browser type
  • Screen size

When building an HTML email template, in addition to the operating system and screen size, one has to account for the email client.

There is a wide selection of email clients that encompasses several web and desktop solutions, where the way an email is displayed depends largely on the rendering engine a system uses.

Of course, a universal set of standards would be much easier for email clients to support and for developers to comply with. But, unfortunately, we don’t have any. Every email client plays by its own rules. That’s why the rendering of CSS by various email clients may differ significantly.

Top 10 email clients in 2018

In June 2018, Litmus released an Email Client Market Share report which was based on 1.04B email opens data they gathered worldwide. One can review this report to get an idea about the core market players and their shares in this area.

Email Client Market Share, 2018

Know what email clients your target audience prefers

Although having access to the general stats provided by Litmus is great, we would recommend you checking what devices and email clients your target audience uses. Having this information at hand will simplify the email development process by reducing the number of devices and email clients an engineer has to tailor an email for.

At Mailtrap, we use Mailchimp and Sendgrid to send HTML email campaigns. Both tools give access to the top email clients and devices our customers use to read our messages.

If you are using Mailchimp, go to List and check the following stats:

Email clients per sending list in Mailchimp
Email clients per sending list in Mailchimp

If you are using Sendgrid, go to Stats, and then Email Clients & Devices. Sendgrid will provide you with several respective categories: Top Devices, Top Webmail Clients, and Top Desktop Clients.

The top devices used to open Mailtrap email campaigns  in Sendgrid
The top devices used to open Mailtrap email campaigns in Sendgrid
The top webmail clients used to open Mailtrap email campaigns in Sendgrid
The top webmail clients used to open Mailtrap email campaigns in Sendgrid
The top desktop email clients used to open Mailtrap email campaigns in Sendgrid
The top desktop email clients used to open Mailtrap email campaigns in Sendgrid

Outlook email client

According to the Litmus Email Client Market Share report, Outlook ranks #5 with a 7% market share. However, not everyone knows that Outlook for Windows still uses the Microsoft Word engine for rendering. At the same time, Outlook for Mac supports almost any kind of HTML and CSS formatting.

Below are only some of the aspects a developer should bear in mind when adjusting an email template for an Outlook email client:

  • Outlook does not “understand” HTML bulleted list tags
  • Outlook uses Times New Roman as the default font
  • Outlook may add a page break to an email if it exceeds 1800px
  • Outlook cleans up paragraph and margin spacing
  • Outlook does not support background images

Of course, some of the above-mentioned cases may be solved by using a “table” tag structure in an email template, while others require special tricks and workarounds that engineers may apply to ensure correct email rendering.

The best ways to creating HTML emails

There are some aspects that one should consider when building HTML email templates. Let’s review the suggestions below.

Use simple design

We recommend developers keep the email design simple. Apply grid-based layers and stay away from the elements which include positioning or HTML floats.

Adjust HTML emails to different screen sizes

With Apple iPhone email client ranking #1 in the recent Litmus report, one can see clearly that it is crucial for an email template to display well not only on desktop but also on tablet and smartphone.
To succeed with this task, one can try using scalable, fluid, or responsive design. So, let’s dive a bit deeper into each type of design to choose the one which will suit your requirements best.

Scalable HTML email design

This type of design presumes the presence of a minimum number of structural elements in an email. That’s why it usually consists of one text column that can be easily scaled for all types of devices, one image, and a Call to Action (CTA) button.

Fluid HTML email design

The fluid design uses percentages to adjust to a recipient’s screen size by filling up all space in an email just like fluid would do in an empty container. However, to make sure an email’s content does not cover all the available screen area, it is recommended to configure the table’s maximum width. It’s a common practice to set the default width to 600px.

Responsive HTML email design

Utilizing responsive design, in turn, allows sending customized HTML email templates that may automatically adjust not only the size but also content depending on a recipient’s device and screen size. The desktop and the mobile version of an email may differ significantly from each other or may be all alike. In the end, a desktop version of an email may include more or different components from those of a mobile and vice versa, which makes this type of design universal for all devices and screen sizes (existing and newly introduced).

Media queries, that have been introduced in CSS3, empower responsive design. The top email clients are well aware of what media queries are. However, it’s worth keeping in mind that there are still email clients that won’t succeed with their rendering at all.

Remember about mobile users

Working with HTML email design one should remember the golden rule – mobile design goes first. I.e., a mobile version should be checked first to decrease the loading time on small devices. For instance, the first condition may be set as “larger than 768 pixels”.

Choose the right fonts

Many email clients won’t be able to render Google Fonts properly. In this case, one should opt for the common fonts that the major email clients interpret well. Such as Times New Roman, Arial, Georgia, and Verdana.

Take images seriously

Some email clients block images by default, where users may amend their inbox settings and block images as well. So, it is best to follow the advice below when coding an email template:

  • Accompany your image header with text to make sure that a user will still understand what the email is about even if it gets blocked.
  • Don’t build HTML emails that consist of one or two large images only. If one of them or both are not displayed properly, it will ruin the entire email campaign.
  • Keep your emails simple by adding just enough images and text to guarantee that your message still makes sense even if all pictures are blocked.
  • If your email includes a call to action (CTA) in the form of a button, don’t use an image to format the CTA. Instead, you can try to create a padding-based button. This simple method uses both HTML and CSS for button building.

Last but not least: keep in mind the email size. The maximum file size limits for emails are pretty high, but the recommended size of the email body should not exceed 250KB.

For more development tips and code samples, check our guide on building HTML Email.

Otherwise, you can try using an HTML email builder. They usually go with a set of customizable email templates, which can be used in any email sending system. In this post, we have reviewed the ten tools suitable for both developers’ and marketers’ needs.

HTML Email Testing

Before sending out an HTML email campaign, it is worth checking whether your emails get delivered to recipients, as well as getting some email rendering advice.

To do this, create a Mailtrap account, use SMTP credentials to configure an inbox, and start testing.

Of course, you may use Mailtrap to focus on testing the email sending feature only.

However, since this article is devoted to coding an HTML email and its rendering, we would like to draw your attention to the HTML-related capabilities of Mailtrap.

For example, the HTML preview allows you to see how your email is rendered by a web browser. In other words, to perform email browser testing.

Mailtrap's HTML preview
Mailtrap’s HTML preview

Mailtrap is smart enough to check your HTML code and provide recommendations on how to improve it. The Check HTML feature will generate a list of issues (related to CSS and HTML) and mention the exact email clients (and even their version) that may have trouble rendering your email.

Finding HTML and CSS related issues with Mailtrap
Finding HTML and CSS related issues with Mailtrap

You can also validate your HTML email template for responsiveness and view how it will display on desktop, tablet, and smartphone devices respectively.

Mailtrap's HTML email check for responsiveness
Mailtrap’s HTML email check for responsiveness

You can also access the HTML source.

Mailtrap's HTML source
Mailtrap’s HTML source

Or check the HTML email text separately.

HTML email text retrieval by Mailtrap
HTML email text retrieval by Mailtrap

It’s also possible to download email’s RAW data and view its size.

Mailtrap's HTML email RAW data
Mailtrap’s HTML email RAW data

Mailtrap can also analyze email’s Spam Score (aka spam checker) and provide recommendations on how to decrease it. In addition, it leverages email blacklist testing by generating a Blacklist Report based on the IP address resolved from the sender’s domain.

Mailtrap’s Spam and Blacklist report
Mailtrap’s Spam and Blacklist report

So, once these checks are done, an engineer can be confident that the email he/she has been working on is good to go.

That’s it, folks!

Conclusion

We hope that this blog post addressed some of the core aspects you should be paying attention to when crafting an email template. In addition, we just wanted to remind you one more time how important HTML emails testing is 😉