Dos and Don’ts of HTML Email Layout Coding
Text: Andy Chan | Content: Edward Soetiono
In this post, we share some of the challenges, tips, and resources we discovered when creating email layouts that are compatible across all major email clients.
Parents Gateway is a one-stop portal that strengthens school-home partnerships to support our children in their education journey.
Parents are able to receive and respond to their children’s school announcements, consent forms and parent-teacher meeting invitations. They can also opt-in to receive email notifications on top of what they receive on their PG application.
We recently updated our email notification templates to improve their readability and visual appeal. Here are some small tidbits of learnings from this exercise.
Learning 1: Use inline CSS
<p style="font-size: 16px; color: red;">Some text</p>Many email clients strip out CSS styles that are not inlined. Inline styles are styles that are applied directly to the HTML element. Though this can be time-consuming and repetitive to manage, it is the safest way to get consistent styling across various email clients.
Learning 2: Stick to tables for layouts
<div>
<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td>
<![endif]-->
<div>Page layout</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]-->
</div>When it comes to layouts, there are several options available. For example, you can use div, grid, table elements, etc. However, for older email clients like Microsoft Outlook, it is better to stick to the native table to avoid layout issues. We can use conditional statements that render “ghost” tables only on Outlook, while other clients still get the modern div-based layouts.
Learning 3: Always write the full CSS
If you run into margin issues on older email clients, it could be due to the use of CSS shorthands. For example, “margin-top: 10px;” works, while “margin: 10px 0 0 0;” may not, so avoid writing shorthand CSS when possible.
Learning 4: Fixing Layouts in Specific Email Clients
Sadly, there always seems to be that one email client that works differently from all the others. Even if our styling works for most other clients, we need to write CSS that targets the exceptional email client.
For example, to apply a style just for Yahoo mail, we can surround the CSS value with comment markers, which will be ignored by other clients. https://howtotarget.email/ is a great resource to go to if you need to target a specific email client.
.header {
background-color: /* yellow */; // only applied in Yahoo mail
}Learning 5: Gmail Issues
We encountered a few quirks while testing our emails on Gmail. Email content that is larger than 102KB gets automatically truncated. Each letter usually occupies approximately 1 to 2 bytes, but if we were to copy and paste a chunk of text in, the number of bytes it occupies may double under certain conditions. Be sure to check that the copy-pasting of text does not inadvertently double your message size and cause your email to get truncated.
Another quirk we encountered was because of a flaw in this line (can you spot it?):
@media screen and (max-width : 600px) {
...
} There is an extra space between max-width and colon, which caused Gmail to strip off the media style block entirely and cost us some precious time debugging.
Learning 6: Supporting Dark Mode
Many people like reading in dark mode to reduce eye strain in low-light conditions. However, email clients apply dark-mode renderings differently:
As such, you may need to target and apply workarounds for specific email clients so that all logos and images remain legible to the reader in dark modes.
The takeaway from this is to always test your HTML email at every stage of development to ensure it works across different email clients. It is also important to check if a CSS style is widely supported — https://www.caniemail.com/search/ is a great resource to check if a particular style can be used. There are also tools like Litmus that are able to render an email on multiple clients in real-time, but do note that they are expensive.
I hope you’ve taken away some learnings from this sharing! If you are keen to find out more about ESTL and the projects we work on, do visit our website here.
