AzoftSpotlightA Guide to HTML Newsletter: Cross-browser and Cross-mailer Markup

A Guide to HTML Newsletter: Cross-browser and Cross-mailer Markup

By Arthur Koch on January 20, 2011

I'd like to share my experience in sphere of cross-browser and cross-mailer newsletter markup. Cross-mailer here means a correct displaying of editing in all mail clients. For a long time I professionaly engaged  on html newsletters markup for different customers around the world. The rules I mention here apply to the following mail clients and web-interfaces: MS Outlook 2003-2010, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.

Basis

Block editing? Forget about it. As we aim at very broad subscribers audience we have to come back to the best traditions of HTML 3.2 (or even worse). It may seem surprisinlgy but framework of our e-mail will be table. The main peculiarity which applies not only to tables but to all markup elements: you should void all external and internal padding for tables, lists, paragraphs – for everything what can have padding. Why? The reason is that each mail client has its own "opinion" about what default padding these elements have. But what is really sad is that some clients ignore margin and padding alltogether. You'll say, — What's the problem, just add into head:

<style>
*{
padding:0;
margin:0;
}
</style>

Unfortunately it's not that easy. What is more important in e-mails: text or decorations? Of course text, – most mailer developers will say. So they switched off styles support in construction above. And that means that you should write styles for each element inline. Therefore we should turn off cellpadding and cellspacing attributes for each table and collapse the table. You shouldn't turn off anything for paragraphs and lists, because we won't use them – only imitate.

What to do with padding

The situation doesn't look very nice – we void padding. What's next? Try blank.gif — one-pixel transparent .gif that can be taken as a basis. You'll have to work with this little and tables and tables once again. Look at the example of two-column markup with paragraphs and lists.

<table cellpadding="0" cellspacing="0" width="800" align="center" style="border-collapse:collapse;">
<tr>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- this column plays a role of space -->
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- this column plays a role of space --> 
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td valign="top" align="center" style="width:40px;"></td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;"></td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;"></td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- this column plays a role of space --> 
</tr>
</table>

This code  results in a table with two columns. In the first column there is an imitation of text paragraphs, in the right column there is an imitation of an ul list. All spaces in the example are made by setting height/width of cells in the table, and width/height of the transparent one-pixel image. This blank gives us  "prop effect", due to which editing won't fall apart.

Text editing

As I mentioned above, common styles for a whole file can't be used and layout must be specified inline for each element separately. Forget about font tag. The point is that before mass newsletters distribution source code can be changed by "crafty" visual redactor that will break all font to span, and in its own way, which will unfavorably influence the situation in general. The rule with font tag is not that crucial but suggested in most cases, as in big companies  (and in smaller ones) html-technologist is responsible only for code construction and not for email's way to addressee, where our e-mail can be stumbled upon by a visual redactor of a mass distribution service.

Editing text through style attribute of p tag also makes no sense, as you will have to void paragraph's spaces, while we decided to only imitate paragraphs. That's why span and only span must be responsible for initialization. We set such parameters in style attribute of our redactor as: font-family, font-size and color — always in #xxxxxx format or literally, e.g. red. Not all mailers can correctly understand color of type #990 such constructions are simply ignored.

Pitch, typeface etc can be specified via inline styles, but it also won't be a mistake if you use such tags as  b, i, u. strong etc. — it makes no differ.

Hyperlinks

Let's start with links editing first of all. Each single link must be wrapped in a  span (specify all necessary styles for the span), plus duplicate those  aforementioned styles into the style attribute of the link. The link can also appear in the middle of a text. To put it short I give you an example of how to format the link.

<span style="font-family:Arial; font-size:12px; color:#404040;">Neque porro quisquam est qui</span> <span style="font-family:Arial; font-size:12px; color:#0077c0;"><a style="font-family:Arial; font-size:12px; color:#0077c0;" href="%%url%%">dolorem ipsum quia</a></span> <span style="font-family:Arial; font-size:12px; color:#404040;">dolor sit amet, consectetur, adipisci veli</span>

 

We set the target attribute to _blank value  for all links. You don't want to open pages in mailer's window, do you? That's not always the case, but it's better to play safe.

Images

I won't tell much about images but this is also important. Width and height of all images must be equal to actual width and height. You can implement it with the help of attributes width and height, or via css in the style attribute of the img tag — there is no differ. Better not allow size distortions, as the result can be frustrating for most mailers. Please note that if an image is a link you should hide border for images via styles or the border attribute of the img tag, and for the link set text-decoration: none; otherwise the picture can be underlined.

Background

Background as a color can be set for document body, table and its cells in #xxxxxx format or literally, e.g. red. The reason was explained above. Background images are taboo. Not that strict one but still I would recommend you to avoid it. Most clients and interfaces do not support it. The same applies to absolute positioning of something as well as scripts – forget about them.

Summary

To sum up, newsletter markup is even worse than markup for Explorer 6, though it's rather about your pernickety and patience. Therefore if you really like to edit, you are not annoyed by monotone work, you don't neglect accuracy and attention and follow the rules above your subscribers will be happy. Good luck!


You can contact Arthur Koche, the author of this post by e-mail.

You can also follow him on Facebook


Enhanced by Zemanta