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.
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:
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.
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 is smart enough to check your HTML email 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.
You can also validate your HTML email template for responsiveness and view how it will display on desktop, tablet, and smartphone devices respectively.
You can also access the HTML source.
Or check the HTML email text separately.
It’s also possible to download email’s RAW data and view its size.
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.
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 😉