How to Create an HTML Email that Email Clients Render Well

A developer can’t code an HTML email 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, 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
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 from.

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 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 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, 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 emails. Let’s review the suggestions below.

Use Simple Design

We recommend developers keep 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 the 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

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:

  • 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.

Development Tips for Building HTML Emails

Choose Tables to Structure your HTML Emails

Many email clients have difficulties with float properties rendering and, at the same time, are quite inaccurate with padding and margins.

For this reason, the use of “table” tags ensures that your message will keep its structure regardless of the email client your recipient uses. To entirely cover the message space, set the table width to 100%. It is also recommended to configure the margin and padding, as well as cellpadding and cellspacing, to zero to avoid an unnecessary space appearing in the table.

After that, one should configure another table, inside the core one, with the pixel width of up to 600. This is an optimized table width which enables correct email rendering for the majority of email clients and screens.

Let’s assume you have a simple email template like this:

Mailtrap's HTML email example
Mailtrap’s HTML email example

It has three main blocks: header, content, and footer. There is also some text and a button in the content block.

The table structure might look like this:

Simple HTML email campaign table structure code template
Simple HTML email campaign table structure code template

Add Padding and Cellpadding to Enable Spacing

Introducing cellpadding enables spacing in an email to be displayed across all email clients. This HTML attribute clearly identifies the space size in pixels between the cell content and the cell wall. To apply it, just write the HTML attribute: cellpadding=”10″. In addition, cellpadding allows you to create a guttering and place it around our email container. Adding spacing through the usage of margin and padding is also possible. However, a developer should note that margin might not work well in this particular case (in Outlook, for instance). So, it’s better to use padding and apply it to table cells.

Avoid JavaScript, Flash and other Complex CSS/HTML

We would advise you to refrain from using JavaScript and Flash due to insufficient support by the majority of email clients and choose a simple .gif instead. Although HTML5 and CSS3 have a limited support as well, they still may be used in some cases. For instance, Apple Mail is one of the rare email clients that supports HTML5 “video” and “audio” tags. So, if your target audience uses other email apps, there may be a risk that the embedded media won’t play in their inboxes at all.

Turn Email Images into “Retina-ready”

Some of the modern devices are already equipped with a “Retina” display, which automatically increases the number of pixels in the image to ensure a higher level of user experience. However, the display of non-Retina images on such devices may be not the best idea and result in quality deterioration. That is why we would recommend using extra-large or Retina-ready images when composing HTML emails.

Achieve Better HTML Email Rendering with Inline CSS

Some email clients are known to remove CSS from the HTML head or ignore external CSS files entirely.

So, when coding an email it is recommended to inline CSS into an HTML file. What does this mean? It means that instead of creating an external CSS file, one has to place it in between the “style” tags of the existing HTML file’s “head” section, as well as repeat them throughout the HTML document.

Additionally, inline CSS decreases the number of files a browser / email client has to load before displaying a web page / rendering your HTML email and, consequently, increases the loading speed.

Replicating styles over and over again throughout the HTML file is tiresome. That’s why we at Mailtrap are using Premailer to turn CSS into inline styles. You can find more information about other tools similar to Premailer in this blog post.

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, 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 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 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 a developer should be paying attention to when coding an email. In addition, we just wanted to remind you one more time how important HTML emails testing is 😉

P.S.
What are your “building an HTML email” recommendations? Feel free to share your best practices in the comments below.