Most people will prefer to use sites like Aweber and MailChimp to create and send HTML email newsletters. In fact, I have recently been using iContact for a client and I’ve found their email building templates to be easy to use and intuitive.
However large organisations prefer to do it all themselves. When this is the case you have to write HTML that will show the same newsletter across all browsers and all email clients (including Outlook). Note: this is not about sending an email from Outlook.
Marking up HTML email is totally different to marking up a website in HTML. Be warned, getting an email to look the same across all clients is actually more difficult than getting a website to look the same across all browsers.
I recently had to re-do an HTML email newsletter for a client as their emails were not displaying properly in Outlook 2007 and Outlook 2010. I ended up completely re-writing the HTML as there are so many elements that don’t work in the Windows XP mail client. The job was a complete nightmare but I was left with HTML that would render the same across all browsers and email clients. Here’s what I learned:
You are better off writing your HTML emails in XHTML 1.0 Transitional. There’s not much point in putting anything else in the <head> of the document but the “Content type” and the title, so here’s the basic structure of your HTML email.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Insert email subject here</title>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<table width="600" cellpadding="0" cellspacing="0" border="0" valign="top" align="center">
<!-- add your content here -->
The above creates an email centered with a 600 pixel width – don’t make them any wider.
Use tables for layout
We’re going back to the nineties here, as you can see above the layout is structured with tables. Use the table tag (
<table>) to begin with, then order the rows of the table with the table row tag (
<tr>) and then sort the individual cells of the table with the table data tag (
rowspan="2" to merge a cell (or a
td) over two rows and
colspan="2" to merge a cell or a
td over two columns.
Use percentages for widths
After you have specified the width of the whole of the email in pixels
table width="600" (and notice you only put
"600" and not
"600px"), specify all other widths of
tds as percentages. So use
<table width="50%"> or
<td width="33%"> to divide up your email into halves and thirds.
cellpadding to space text away from the edge of the
Always use absolute paths for images
Bring in images like this:
not like this:
Never use padding, margin or floats round images
This will not work in Outlook. Instead you can get an image to go on the left with
align="left" and put a “margin” around it so that text doesn’t butt up next to it with
hspace. So this code:
<td width="33%" valign="top" >
<img src="http://www.website.com/html-email/images/image.jpg" height="68" width="108" border="0" hspace="5" vspace="5" align="left">
<p style="font-size:12px; line-height: 14px; font-family:Arial, Helvetica, sans-serif; margin: 0; padding : 0 ; color:#356560;">This text will run around the image and underneath it in all browsers and across all email clients included Outlook 2007 and Outlook 2010.</p>
This is a limited solution as
hspace add equal space either horizontally or vertically and therefore don’t allow you to add space just on the right or just on the bottom.
An alternative solution to this problem is to put the image in a table, and provide an extra column (to the right or left) and an extra row (to the top or bottom) put in a spacer.gif (1px x 1px transparent gif) and set the width to 10px for the column and length to 10px for the row.
Another solution would be to add extra space to your image of the background color (usually white) to create the offset. Thanks to Christopher Szydelko in the comments below for these two alternative solutions to the space around images issue.
Don’t put CSS in the
It will be stripped out by several HTML clients so styles need to be inline like so:
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000;">This is sans serif, 12 pixel sized, black text</span>
Don’t use background images
You can, but they won’t be seen in Outlook. So whenever you specify a background image for a heading which can be seen by most of your newsletter subscribers, always make sure there is a background color as well so that Outlook subscribers see the same effect.
So, for example this HTML:
<td width="100%" background="http://www.website.com/html-email/images/image.gif" style="background-color: #00c5ca; height: 28px;">
<span style="font-weight: bold; color: #FFFFFF; font-size:14px; line-height: 28px; font-family: Arial, Helvetica, sans-serif;"> Headline to go here
will show the background image for most of the newsletter subscribers:
but will show the background color for the newsletter subscribers who use Outlook (because of the
background-color: #00c5ca in the inline style):
There are a couple of services that will provide you with screenshots of your emails on all the various Outlook incarnations as well as on Lotus Notes, AOL and the major online email services. It’ll cost you though.
Check your HTML
One of the most useful best practices I’ve learned whilst doing HTML email and websites is to validate the HTML wherever possible. You can paste in a link and the W3C Validator or the Premailer will tell you where you’re going wrong. Make sure there aren’t any open tags. Some browsers may do a decent job of displaying invalid HTML pages but Outlook and other email clients won’t be so forgiving. Use these tools with common sense as some errors will be OK with HTML emails.
Don’t get angry, get even
Don’t bang on the table, pull your hair out or write vitriolic attacks agains Microsoft in your Twitter feed like I did – it won’t get you anywhere. Instead have a cup of tea, breathe deeply and affirm “I will beat this. I will do this. I will finish this.”
When in doubt, print it out
If your eyes are squinting at the computer screen, try printing out the HTML (presuming you’re not short of paper or printer ink). When looking at the HTML on paper you can cross off the tab pairs which makes things easier to understand.
Other HTML email “rules”
You can’t do everything in an HTML email that you can do on a webpage. It is important that your client understands this. Here are a few more do’s and don’ts for HTML email:
- No CSS shorthand – don’t use “font: 12px/15px Arial, Helvetica” for example, see the example above for the long form of this CSS code
- No CSS hacks
- Use the alt, height, and width parameters with all images
- Obey the CAN SPAM Act, and sleep well
Have you created HTML emails?
How do you do them? I always try to set my clients up with a MailChimp or Aweber account so I don’t have to do this. However, clients often ask for them to be created. Have you ever had to do this? What tips do you have for creating an HTML email newsletter?