Once you’ve got the basics of email marketing, you’ll want to push the (virtual) envelope and give your sends some extra pizzazz!
We’ve collected together 5 of our favourite bits of code which can make your emails more effective and more responsive. Use them to make sure your emails look their best wherever and whenever they are read.
1. Preheaders
Ever wish you could pack more into your subject line? You can with preheaders! Also known as super-subject lines, they are displayed beneath the subject line in the inbox. If you don’t specify anything, the space will be filled by the first line of text in your email.
We’ve written about the importance of preheaders already, and how you should use them. Here we’ll just go over how to add them to your design.
The snippet of code in question needs to go immediately after the opening <body> tag and before any <table> or <div> tags that typically constrain your email. It’s important to make sure that it doesn’t show in the body of your email. You do this by including the following:
“<!–[if !mso 9]><!–>
<span style=”display:none !important;visibility:hidden;opacity:0;color:transparent;height:0;width:0;”>
preheader text here
</span>
<!–<![endif]–>”
2. Outlook DPI Scaling
DPI, or Dots Per Inch, is a measure of how much content can fit on a given screen. DPI Scaling is a Windows tool designed for readers with visual impairments. It can display all content at 125% or 150% zoom, rather than the standard 100%.
Emails which haven’t been coded to take DPI scaling into account will look wrong in all sorts of ways: oversized fonts, broken tables and distorted images. This is because the tool converts some pixel values into points, but not all, so it does not scale every element in the same way. To make matters worse, DPI scaling operates slightly differently in Outlook 2007 than in 2010 or 2017. So even the problems will not be consistent across all users.
The first way to code around this issue is to set all your tables with percentage widths (where applicable), rather than pixels. These will scale properly as there is no conversion of units taking place.
If you need to specify a size, make sure to define the width and height of every element in pixels, as well as using the attribute. This method allows you to take control of how DPI scaling will affect your email and build it accordingly.
3. Ghost Columns
Outlook 2007, Outlook 2010 and Outlook 2013 and Outlook 2016 for Windows all have problems handling exact widths (as opposed to percentage widths). In emails designed with 2 side-by-side columns, you may find that the columns stack when hitting the inbox (display one above the other) while retaining their left and right alignment. This leaves your email with an ungainly zig-zag pattern.
The fix is to use a ghost table, also known as a hybrid table. These get their name from the fact that other email clients cannot see them, so they have no effect if there is no problem for them to solve.
The general idea behind the method is to wrap each column in a <mso> statement that reinforces the table structure we are trying to implement. Example below:
<table width=”600″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” class=”responsive-table”>
<tr>
<td>
<!–[if (gte mso 9)|(IE)]>
<table width=”600″ align=”center”>
<tr>
<td width=”300″>
<![endif]–>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”300″ align=”left” class=”left_column”>
<tr>
<td>
Left Column Content Goes Here
</td>
</tr>
</table>
<!–[if (gte mso 9)|(IE)]>
</td>
<td width=”300″>
<![endif]–>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”300″ align=”right” class=”right_column”>
<tr>
<td>
Right Column Content Goes Here
</td>
</tr>
</table>
<!–[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]–>
</td>
</tr>
</table>
4. Web Fonts
Your branding should be instantly recognisable and consistent across all platforms. Coding for web fonts allows you to use non-standard fonts in your email. We have found that this greatly helps with building trust and familiarity with your readers.
A word of warning, web fonts are not supported in all email clients! They are fully supported in Apple Mail, iOS Mail, Google Android, Samsung Mail (Android 8.0), Outlook for Mac and Outlook App. Gmail can support Google Sans and Roboto, but not other web fonts.
There are 3 ways of adding web fonts into your email.
@IMPORT
The simplest is to use @import and the URL of your chosen web font. The URL will be supplied by your web font service. @import is supported by all of the services where web fonts work, except an old version of Android (2.3/Gingerbread) which is hardly used anymore. The only downside of this method is that the web font will only load once all the HTML it is embedded in has loaded. As a result, it can be slightly slower to appear than the rest of your email.
<link>
Using <link> is largely the same as using @import. The main difference is that a web font inserted this way will load inline, at the same time as the content that surrounds it. Be aware that if your web font file is especially large, this can delay loading the entire email
@FONTFACE
The @font-face method is the only method that allows you to specifically choose what file format you’d like to import. This makes it the most bulletproof method for implementing web fonts.
Here’s a typical @font-face declaration for importing a web font into email using Google Fonts as our chosen web font service:
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 400;
src: local(‘Open Sans Regular’), local(‘OpenSans-Regular’), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format(‘woff2’);
If you are using web fonts, you also need to specify a fallback font. This will make sure your email can still be read on a device where fonts are not supported. You can specify this using the “font-family” stack.
font-family: ‘Open Sans’, Arial;
Arial is a safe choice, as it is supported on virtually every device. However, fallback fonts are not supported in Outlook 2007/10/13/16 so you need to back it up with the following:
<!–[if mso]> <style type=”text/css”> td { font-family: Arial; } </style> <![endif]–>
5. Media Queries
Mobile has overtaken desktop as the preferred platform to open emails. Furthermore, 26% of people now say they always read emails on a mobile device first. This group also say they scan email on mobile to decide which need further attention when they are at their desks.
Media Queries are the way to make sure your emails render beautifully across different screen resolutions/sizes. The essence of this is to add a class to your HTML content so that widths which are a fixed number of pixels convert seamlessly to percentages on a smaller screen.
Once you get confident, media queries can even be used to embed video in your emails! But we’ll leave that for another time.
@media only screen and (max-width: 600px) {
.responsive-table {
width: 100%;
}
}
The End Result
Once you’re confident with these 5 code snippets, you’ll have emails which perfectly match your brand, contain as much information as possible, and look great on any size screen.
Before you hit “Send” grab a copy of our Ultimate Campaign Send Checklist and make sure you’re all good to go. Then sit back and watch the leads roll in.