HTML Email Newsletters Tips and Tricks
Making email newsletters can be cumbersome and frustrating at times, as you try to make a newsletter compatible with various browsers and email clients. Although I’m no expert on making them, I would like to share some tips and tricks that I have learned.
- Forget about using modern coding standards with CSS3 and responsive design. Styles written inside tags rather than in a separate stylesheet are the norm for creating HTML emails.
- Some email clients don’t allow for background images, so use solid colors. There are ways around this though they are not so stable.
- Tables are your friend. Do not use divs or p tags as you will have margin and padding problems, as in they will not work for Outlook and Live (used to be Hotmail).
- Use absolute paths and not relative paths for links.
- Do not use unordered or ordered lists. The margins and paddings will be messed up on various email clients.
- Media Queries is possible, but use with caution. They don’t always work and could mess up the rendering of content.
- Don’t use shortcuts when writing CSS.
- Do make a plain text alternative.
- Keeping the layout simple is a good rule to have.
- Test your email before sending it out by using different browsers, Gmail, Yahoo, Live, Outlook, and other places if you’d like. You may even check on a mobile device as more people are checking their mail on them these days.
Here’s a demo that experiments with various techniques.
Be sure to delete where it says
<!-- DO NOT ADD THIS -->
all the way until
<!-- END DO NOT ADD THIS -->
There are two instances of this. Also, use your own image paths. If you use mine on your site, I don’t think they will work since I disabled hotlinking.
Here are more details about the bullet points below:
Use Inline Styles
Writing the style each time, within the tags that you’re wanting the styles to appear makes the code harder to read and it makes styling the page take longer than a normal Web page. There is a tool called Premailer to help you generate inline styles and also create a plain text version of the email for email clients that have HTML disabled. I haven’t used it, but I may give it a try. Writing inline styles isn’t so bad if you have repeating elements that use the same styles. Just copy and paste and edit according to what’s different in terms of the content.
Avoid Background Images When Possible
Here is a way around the no background image problem. According to In The Box in an article called “Background Images in HTML Email: The Naked Truth“, testing was done by Litmus, across target email clients: AOL Mail, Hotmail, Gmail, Apple Mail 3, Apple Mail 4, Outlook 2000, Outlook 2002/XP, Outlook 2003, Outlook 2007, and Outlook 2010. Background images were tested on the email body, as well as at the table cell
level. HTML emails typically require a wrapper table of 100% width around all content since many web-based email clients take out the body tag. The background attribute was applied to both the body tag and the wrapper table tag.
<body background="example.jpg">
<table background="example.jpg" id="wrapper" width="100%" >
This is fine, but background images on tables and table cells can not be rendered in Outlook 2007 and Outlook 2010. The background image can be applied to the body only.
This hack works for Outlook 2007 and 2010, but the styles on elements within are not rendered.
<td bgcolor="#xxxxxx" background="example.jpg">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="example.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
<![endif]-->
<p>Text over background image.</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
Use Tables
We know that tables are cumbersome and divs are preferred when creating Web layouts. But tables are required when making HTML emails. This is because margins, paddings, and floats do not work on some email clients in terms of divs. Margins and paddings only work with tables and table cells. Also p tags are rendered differently across email clients, so it’s best to avoid them. Use table rows instead, to separate paragraphs. Here’s an example snippet:
<table width="450">
<tr>
<td style="padding-bottom:25px; font-family:Arial,Verdana,sans-serif; font-size:24px; color:#d71921;">
<img src="http://suefeng.net/demos/newsletter/header.jpg" alt="Newsletter">
</td>
</tr>
<tr>
<td style="padding-bottom:10px; font-family:Arial,Verdana,sans-serif; font-size:16px; color:#d71921;">
<strong>Weekly News: July 2013</strong>
</td>
</tr>
<tr>
<td style="padding-bottom:30px;">
<img src="http://suefeng.net/demos/newsletter/summer.jpg" alt="Enjoy Summer">
</td>
</tr>
<tr>
<td style="padding-bottom:20px;">
Here is a great way to enjoy summer. Enter paragraph 1.
</td>
</tr>
<tr>
<td style="padding-bottom:20px;">
Here's a second reason for enjoying summer. Enter paragraph 2.
</td>
</tr>
<tr>
<td style="padding-bottom:20px;">
Here's a third reason for enjoying summer. Enter paragraph 3.
</td>
</tr>
</table>
Use Absolute Paths for Images and Links
This is because your users are viewing the pages within their email clients, not from a page on your server. For instance, use http://example.com/images/header.jpg instead of /images/header.jpg.
Avoid Using Unordered and Ordered Lists
If you want to have lists, use tables in this way, with an image for the bullet:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="30">
<img src="http://example.com/images/bullet.gif" alt="" />
</td>
<td>
Your list item text
</td>
</tr>
<tr>
<td width="30">
<img src="http://example.com/images/bullet.gif" alt="" />
</td>
<td>
Your list item text 2
</td>
</tr>
<tr>
<td width="30">
<img src="http://example.com/images/bullet.gif" alt="" />
</td>
<td>
Your list item text 3
</td>
</tr>
</table>
For ordered lists, use numbers instead of images.
Media Queries
There are some email clients that support the use of media queries. For those that don’t support it, you can set a width of the container. You’ll have to use media queries in a special way though. See below:
@media screen and (max-width: 649px) {
*[class].container { width: 100%; }
*[id]#wrapper { width: 100%; }
}
The *[class] and *[id] is so Yahoo doesn’t render those CSS attributes while ignoring the media queries statement. If that happens, then no matter how wide the email page is, its width will always be 100%, ignoring the condition of if the max-width is 649px.
The iPhone mail client renders media queries. I’m not sure what else does though.
No Shortcuts
When writing the inline CSS, remember to write out each style attribute the long way. For instance, use padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; instead of padding: 5px;.
Plain Text Alternative
Remember to provide a non-HTML version of your email for people who don’t want to view emails with HTML in them or people who have it disabled.
Test Your Emails in Different Clients
It’s a good idea to test your layout in different browsers and email clients before sending it out. Most likely there will be something wrong with it on one client or another. If you have Mozilla Thunderbird, then you can send HTML emails through that, or if you prefer, use something like MailChimp. I haven’t used it though. You can send emails to [email protected], [email protected], etc. and test them in various browsers, Outlook 2007, Thunderbird and such. If you’re willing to pay to test in a faster way, Litmus is probably the best solution.
When in doubt, consult a chart such as this guide to CSS support in email by Campaign Monitor.
That’s it for my tips and tricks. If you have any in mind, feel free to share them below.