If you have ever tried your hand at building an HTML email you may have quickly discovered that a lot of the techniques you use for the desktop/mobile web simply don’t work. Designing HTML formatted emails these days, and have them work on the plethora of email clients out there flawlessly, is quite a chore. It makes you feel like you are designing with one arm tied behind your back and blind folded. In this article I want to go over a few tips that have helped me create some pretty robust and solid HTML emails. Hopefully you will find them useful the next time you are asked to create such emails.
Structure – When designing for HTML emails, you are going to find that the process is like designing for the web back in 1999. Most of the older clients are not going to handle modern CSS or even div tags well. Floating elements is almost never supported and using CSS selectors is pretty much a crap shoot that should probably be avoided. Knowing these things, it is safe to say that the best way to structure your email, and to reach the widest audience possible, is using a HTML table…. *CRINGE*. Now since these emails are not actually web pages, things like meta tags, JavaScript linking and other head elements are simply not applicable here. This HTML is really going to be basic and use some pretty arcane methods. So plan your designs accordingly! Keep your emails relatively simple. If you are in doubt if it is going to work on all clients, leave it out.
Limited CSS Support – Many of the popular CSS styles are not recognized or only have limited support across all the various email clients. These email clients are desktop apps like Microsoft Outlook 2003-2013, web based clients like Gmail / Yahoo / Outlook.com and even some apps which are on things like the iPad. We will need to address this by finding out which CSS styles are supported across the various clients and stick to those. One site I found that has helped me a lot for this is the Guide to CSS support in email. This chart is excellent for showing you which styles are supported for which clients.
Limited Linking Support – We now know that we will probably want to create a table based structure followed by limited CSS styling. Ok, is there a trick to linking in the styles? Well, again the email clients are not going to really like external style sheets. According to our chart, at the link above, most of the web based clients don’t support linking to CSS files in the head or body so that leaves us with inline styling for elements. My experience has told me inlining all the styles using the <style> tag, or inline to the element itself, is the way to go. This means you want the least amount of style definitions as possible and have them as efficient as possible to reduce the complexity.
Limited Width – Another thing that most web developers take for granted is the page width for which they can design on. You have to remember that when people open this email they are usually going to open it in some kind of pane that is much smaller than the width of their entire screen. Some people may even have the email client itself open with a size that is smaller than the width of their screen. This means we will want to keep the width of our email’s HTML content narrow so that all of it will be seen as soon as they open it. I have found that the magic range seems to be 600 – 750 pixels and it works pretty well. Any larger and you run the risk that some of your email’s content will stretch outside the bounds of the user’s email pane and will be missed.
Tricky Imagery – There is a lot to be said on the use of images for HTML emails. First, many email clients will simply block images from immediately appearing in the emails they receive, for security reasons of course. This means you shouldn’t put any content, instructions or call to action text in images that is not somewhere else in plain text form. If you want the user to see the incredible price of your product, put it on an image but also make sure it is somewhere in the text where they can see it. That way if the image is never loaded, they still see what the email is about. In addition, what if the user is having their email read to them? The email reader is not going to read the images.
The second limitation to images is that they can’t be used for backgrounds if you plan on targeting people with Outlook 2003-2013. These users make up a huge chunk of people. These people also tend to be business people who might read your email from their desktop computers at work. My recommendation is to use clever use of solid color background colors. If you want to still use an image as a background, try putting a solid background color first and have the image sit on top of it. That way if the image never loads, at least they see a nice chosen background color rather than plain old white.
The third limitation is where the images come from. I found that the best method is to simply put the images on a web server and then put the full URL to the image in the email. The beauty of this is that if you want to change an image you can do so even if you have already sent out the email to thousands of people. While you are at it, also make sure you specify the width and height of the image so that web clients will properly set aside the amount of space needed for the image. This is opposed to any kind of “embedding” images into the email options you might run into.
Fonts – Font support in HTML emails is not too bad. According to our linked chart we can see that styling for fonts is well supported. But given this, you want to stick with well known fonts that are more than likely going to be on the target user’s machine. These are fonts like Arial, Helvetica, Calibri, Verdana, Times New Roman etc. My favorite has been Calibri backed up with a generic sans-serif font family. I have also used Arial and had real no issues. But as long as you stick to mainstream fonts, you should be on pretty good footing.
If we apply many of the rules above we can put together a relatively simple template that will give us many options for designing the email. As part of my designs I try to think of the rows of content I would have. The first row being the header, 1 or more rows of text/image content and lastly a row for the footer. Below is the basic structure I use for many of my HTML email designs and it has served me well.
<html>
<head></head>
<body style="background-color: #f4f4f4;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="652" style="border: #c0c0c0 solid 1px; font-family: Calibri, sans-serif;">
<tbody>
<!-- Header Setup To Span 2 columns -->
<tr style="background-color: #ffffff;">
<td colspan="2">
<img src="http://www.example.com/logo.png"/>
</td>
</tr>
<!-- Beginning of Row 1 (one cell)-->
<tr>
<td colspan="2" style="padding: 15px; background-color: #fcfed0;">
<!-- Main promo content -->
Promo content!
</td>
</tr>
<!-- Beginning of Row 2 (one cell)-->
<tr style="background-color: #ffffff;">
<td colspan="2" style="padding: 15px;">Full width cell</td>
</tr>
<!-- Beginning of Row 3 (2 cells) -->
<tr style="background-color: #ffffff;">
<td width="50%" style="padding: 15px;">Column 1</td>
<td width="50%" style="padding: 15px;">Column 2</td>
</tr>
<!-- Footer -->
<tr>
<td colspan="2" style="padding: 15px;">Footer Content</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
This simple template above shows you a 5 row setup. We have a header where we can put a logo, or any other headline content, a row that we have highlighted in yellow for promo content, a row where we show a full width cell fit for great paragraphs or nested tables which might also contain graphics, a row containing two cells for list content or side-by-side images, and lastly a row for the footer where we would put links to our site, copyright etc.
As you can see we have put in some styling inline to the elements themselves but you could certainly create definitions in a <style> tag (recommended if you are going to do a lot of styling). You want to avoid using classes and IDs since those may not and probably will not work for various email clients. Just keep the styling and structure simple and you should not have too much headaches. Keep in mind that designing for email is like you were designing for the web long long ago and stick with the styles and techniques that you might have found back in 1999.
If you are looking for some more resources for designing HTML emails, consider visiting the Ultimate Guide to HTML Emails and read up on more articles for designing great emails.
Happy email designing! 🙂
