Say the words “Build me an email” to a developer and watch the expression on their face drop. Yes, HTML emails are old school, but there’s no need to don a loin cloth and start chipping out code from a stone tablet.
Email has come on leaps and bounds within the last few years, and with open rates frequently increasing on mobile devices, there are a few tips and tricks you can use for responsive emails.
Here are a few favourites to keep you building successful, responsive emails:
1). Keep inline
If you have tried building an email before, you have probably heard of this one. This is basically adding any style changes you make to the containing table of your content.
For example:
<td style=”font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000;”>Hello World</td>
The main benefit behind using this styling is that some email clients will strip out embedded CSS in the <head>, leaving your email with as much style as socks and sandals.
Email developers have already started trialing emails with no inline CSS, which are not 100% foolproof yet, but with a large percentage of global email clients supporting embedded CSS, there is hope for cleaner emails in the future.
2). Query your media
Let’s say you want that image smaller, or a different font for that block of text, or you need that column to stack on mobile… not a problem! Media query to the rescue. Media queries are the CSS3 commands that allow you to change your viewpoint depending on your screen resolution, meaning that your imagery and content will display differently on different devices… thus making your content fully responsive.
Within the <head> of any email there will be a minimum width set, for instance 480px which will control and sometimes constrain how your media is displayed. But, if you add a media query to your style command, any styles that you set within that media query will take over when the screen resolution drops below the minimum width.
For example:
<style type=”text/css”>
body {width: 680px; background-color:#000000;}
@media only screen and (max-width:480px) {
body {width:100% !important; background-color:#ffffff !important;}
}
</style>
This means your image can be any size, the font family can styled differently for each resolution, and you can stack your columns all day long. Happy days!
3). Stacking
We briefly mentioned stacking columns in the last tip. As you’d expect, this coding command allows you to stack columns on top of one another by setting them as .stackonmobile {display:block;} for mobile. This coding tip helps with mobile optimisation by making sections of your email more visible and legible on smaller screen resolutions, instead of trying to squash them into one column.
The default for stacking was left to right for a long time, however more recently we can now reverse stack, by setting the containing tables text direction as right to left.
For example:
<table width=“600” dir=“rtl”>
<tr>
<th width=“300” dir=“ltr” class=“stackonmobile”>World</th>
<th width=“300” dir=“ltr” class=“stackonmobile”>Hello</th>
</tr>
</table>
Note that we need to redirect the sub-tables back to left to right for text alignment. Also the html layout will be reversed, right column first, which is why ‘World’ is before ‘Hello’ in the example above.
Also note that we have used <th> instead of <td> for Android compatibility, as they dropped the use of display:block on td’s.
4). Min vs Max
With screen resolutions getting bigger and bigger, is it a good idea to make our emails wider?
When I started in email builds (back in the dark ages of blackboards and chalk written HTML), the width was 585px. This slowly grew to a standard 600px, which seems to still be the acceptable size. Most of the emails we produce today are anywhere between 600px & 720px. Occasionally a 1000px email rears it’s oversized head, but these are usually for big occasions with large hero images for impact.
What we need to remember is that emails will still be framed by the email clients furniture i.e. the inbox list, the search and edit tools, sender details etc. So an oversized email might end up stretching beyond the width of the screen, which results in an ugly horizontal scroll bar at the bottom… and nobody wants that.
So remember, size does matter. Always aim for the optimal image size depending on the platform or device being used to ensure your emails remain mobile responsive.
5). Bring it to the Table
With email development, it’s all about the tables. Below you’ll find an example of an email HTML table.
Example:
<table width=“100%”>
<tr>
<td align=”center”>
<table width=“700”>
<tr>
<td align=”center”>
<table width=“100%”>
<tr>
<td align=“center”>Hello</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
The first outer table is set at 100% width to ensure the table is centred within the main body of the email itself. Then the body table is set at your desired email width (i.e. 700px as above) with a 100% media query class. By setting the tables within the body to 100%, this helps to ensure the content flows responsively when scaled down to a smaller screen resolution.
Handy tip: When building emails using tables, make sure you repeat your inline styles. A table within a table will lose styling in some email clients, especially background colour and font attributes.
And another handy tip: Try and make sure you nest your tables, and avoid using colspans in your email code. Outlook has a nasty habit of ignoring colspans and rowspans, so nesting your tables will give you more control over your code, making you a happier developer.
6). A font by any other name
Be on the lookout in Outlook, your font might not be the font you wanted!
Having a backup or fallback font within your email code is exceptionally useful to ensure your emails always look the way you want them to, even if the email provider doesn’t have your first choice font.
However… Outlook 2007/10/13 has other ideas, and will automatically apply their own fallback font or Times New Roman. Even if you set fallback fonts in your code, Outlook ignores them. Cheers Outlook.
But wait, there is a fix.. phew!
<!–[if mso]>
<style type=”text/css”>
body, table, td {font-family: Arial, sans-serif, Helvetica !important;}
</style>
<![endif]–>
Drop this code into the <head> of an email and Outlook will pick up the web safe fonts first, so you can safely steer clear of Times New Roman.
Font-astic!
7). Does my article look big in this?
A bit of extra padding never did anyone any harm, but adding Padding and Margins to your table styles could harm the way your email looks, as some email clients might ignore them.
Spacer images used to be the way to use padding in emails. Developers would use transparent 12px x 12px gifs and fit them into every nook and cranny of their emails… sounds tedious doesn’t it?
Luckily there is an alternative which is much more efficient to implement, and works across all email clients successfully… A non-breaking space ( ) – just add font size, line height and a width/height depending on the space you require:
<td style=”font-size:20px; line-height:20px;” height=”20″> </td>
So now your emails and tables will always be lean and evenly spaced…no padding required.
8). The (Alt)ernative
When your emails load quickly, you get to display every image and aspect of you email in all its glory. But what happens when you’re a slow connection speed or your email client is blocking images by default?
You could end up with empty spaces where your images used to be, but hopefully you will see the Alt text – the alternative text that’s displayed when an image can’t display.
Some email clients won’t load images automatically, so without any Alt text you could get a blank looking email. 🙁
Example Alt text:
<img src=“images/hello-world-title.jpg” width=”200″ height=”40″ alt=“Hello World”/>
Another alternative is to actually style your Alt text so that it’s less bland if it gets displayed. Add a font-family, font-size, font-colour or text-decoration, so you try and match the image style, and get your email looking good if the images don’t load.
Example stylised Alt text:
<img src=“images/hello-world-title.jpg” width=”200″ height=”40″ alt=“Hello World” style=“font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#ffffff;”/>
9). Hamburger to go please
Now that emails have further CSS3 support, it’s allowed many developers to start introducing some great responsive features to their email code.
The Hamburger Menu (so called because it looks like a little burger between a bun) is one example of this.
Those long menus on an email don’t need to be stacked half way down your mobile screen anymore, they can be tucked away neatly in a clickable, drop down menu, making your email more mobile-friendly and more visually appealing. Just need the fries to go with it now!
10). Give yourself a fighting chance
Make sure you are putting yourself in the best possible position for email building. One of the ways you can do this is to get the right software. Lucky for you, we’ve put together a list of our favourite email development tools, from design right through to deployment.
Check them our Email Tools blog and start getting the best results out of your emails.
Whatever you do, keep experimenting with your HTML/CSS emails, even if you end up with Frankenstein’s monster there might be a small part that works really well, or another that will give you a further understanding of where to go next.
Happy coding!