Common Email Formatting Issues
Despite massive advances in technology and web design standards, designing HTML email templates remains as much of a pain in 2020 as it did 10 years ago. Arguably even more so, as now we expect these templates to be fully responsive and render beautifully on our smartphones, but they still need to display correctly on traditional desktop browsers – especially the dreaded Microsoft Outlook.
The issue here of course is that while modern smartphones leverage up-to-date HTML and CSS methods to render email content almost identically to a website, Outlook still relies on the MS Word rendering engine, which is limited, to say the least.
So here are some common issues you will come across when designing responsive email templates, and how to get around them.
Tables
While divs are the element of choice for dictating layout on most websites these days, email templates still commonly use a table-based layout. This is again due to issues with Microsoft Outlook. You can still put divs into your template, but certain styles such as padding will not display correctly in Outlook when applied to a div, although it will for a table.
When you specify a table as a layout-based item, it’s recommended to give it some standard values so that it doesn’t go and add any additional pixels to your design. Specifically you will want to set cellpadding, cellspacing and border values to 0 as shown in the example below.
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td>Contents go here...</td>
</tr>
</tbody>
</table>Custom Fonts
Custom fonts are something else that won’t load in Outlook. Fortunately, there’s a workaround for this, which allows a custom font to be displayed in all modern browsers, with a safe fallback font specified for Outlook users.
The first step is to add the link to the custom font file you will be using, for instance if we wanted to use the Google Font “Open Sans”, add the following to the <head> of your template
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">Now we have to specify where this will be used, and what the fallback font will be. The way we will achieve this is by specifying the fallback font in the td where our text is, and also giving the td a class name – usually something simple related to the name of the custom font you’ll be using. For example:
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td class="open-sans" style="font-family: 'Arial', sans-serif">Contents go here...</td>
</tr>
</tbody>
</table>This means the contents of the td will be rendered as Arial in Outlook (this can be substituted for any other default system font). We can then use a CSS media query to override this with our custom font. The logic here is that any email client that can read a media query (Outlook can’t) can also handle custom fonts.
<style>
@media screen {
.open-sans {
font-family: 'Open Sans', sans-serif !important;
}
}
</style>Don’t forget to use !important, or this will not work. Please note as well that the safest way to do this is to apply this class name and default text style to EVERY td that you want to change the font for. In some cases it may work if you just apply this to the td of a parent table and let it trickle down, but the safest way is to apply this to all tds.
This is just a rough intro, I will add more of these as I think of them.
One reply on “Common Email Formatting Issues”
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.