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 create 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 that 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 the 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 alike. In the end, a desktop version of an email may include more or different components than a mobile version and vice versa, which makes this type of design universal for all devices and screen sizes (existing and newly introduced).
Media queries, 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.
Think 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 and some users may amend their inbox settings to block images if the client isnât doing it. 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 the image 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 images 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 come 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 will get delivered to recipients or end up marked as spam, as well as getting some email rendering advice.
For this, we recommend using a solution such as Mailtrap Email Sandbox, which provides you with a safe environment for inspecting and debugging testing emails, so you donât accidentally end up spamming recipients.
Mailtrap Email Sandbox comes in especially handy for testing HTML emails as it provides a range of features intended specifically for this purpose. So, once you send your first test email to Mailtrap Email Sandbox (process described in detail here), you will be able to:
- View how your email is rendered by a browser and check its responsiveness in the HTML tab.
