How to mark up the cross-mailer newsletters in HTML format

How to mark up the cross-mailer newsletters in HTML format

4 38520
cross-mailer html newsletters

How to mark up the cross-mailer newsletters in HTML format

HTML newsletters is still very successful type of communication between readers and publishers. Publishers can track the different indicators of such letters, for example, reading the letter, forwarding, clickthroughs, as well as the interest of readers to the different products and topics. Readers absorb information like a regular web page as it is visually more appealing and more easily readable than text messages.

In this article I would like to share knowledges in creating of cross-browser and cross-mailer newsletters. This means – correct displaying of layout in all mail clients. I think that article is still quite relevant. Duty is a long time I was engaged with creating html layouts for newsletters around the world, and the following rules will cover the following mail client and web interfaces: Gmail, Yahoo Mail, Hotmail, MS Outlook, Thunderbird 2.0-3.0, Windows Live Mail, Apple Mail, AOL Mail, possible others.

Fundamentals

During coding HTML email biggest pain is that large amount of different programs are available for reading emails: from desktop programs (Eudora, Outlook, AOL, Thunderbird) to web services with own interface (Yahoo!, Hotmail, Gmail etc). If you thought it was difficult to ensure the cross-browser compatibility of your web sites, then get ready for the new game, since each of the above mentioned client can display the same email quite differently. And even when these tools will show everything is fine, you have to remember that readers can resize the window while reading, while there may be all sorts of trouble.

Block layouts? Will have to forget about it. Once we’ve set our sights on a very wide audience of subscribers, we will back to the best traditions of HTML 3 (or slightly worse). As a “skeleton” of our letter will a table. “Wow!”, you say? But this is so. Now the main feature, which applies not only to the tables, but to all inner elements: it is necessary to null all external and internal padding in tables, lists, paragraphs – commonly to all elements, which can have any paddings. Why? All because of the fact that every mail client have own opinion what default padding these elements have. But the saddest thing is that some clients do ignore the margin and padding. You can think – lets define few styles like:

*{ padding:0; margin:0; }

and put this into header area. But here is not so easy. Some developers of mail servers is smarty, and they understand that letters are needed for the text, not multicolored decorations, and just simply switched off supporting similar constructions. This means that the styles will be necessary hardcoded inline for each element. More, each table should turn off attributes like cellpadding and cellspacing, as well as collapse the table. We don`t will change paragraphs or lists – we don`t will use this, just imitate.

What to do with padding and margins

The situation does not look very nice – we will null both. Then, lets try to use blank.gif — one-pixel transparent GIF file which we will use to build layout. You will have to work with this little and tables and tables (again and again). Here are example of two-column layout in the 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>
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td>First paragraph text here | First paragraph text here | First paragraph text here</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Second paragraph text here | Second paragraph text here | Second paragraph text here</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Third paragraph text here | Third paragraph text here | Third paragraph text here</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Emulation of UL-LI elements - element number one</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>Emulation of UL-LI elements - element number two</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>Emulation of UL-LI elements - element number three</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
</tr>
</table>

As a result of this code we will have table with two columns. In the first column we can see a simulation of the paragraphs of the text on the right – these is an imitation of an ul list. All spaces (our margins/paddings) in the example provided by a set height / width of table cells, and also set the width / height of one pixel transparent image. This blank gives us “prop effect”, due to which editing nothing break.

Text Formatting

As mentioned above, the common styles for the our layout can’t be used and the design should be set inline for each element. We should forgot font tag at all. The reason is that before the mass mailing source code can get into the hands of cunning visual editors, which will break all font to span, and in its own way, that will adversely affect the whole result. The rule with font tag is not that crucial but suggested in most cases.

As we will have to void paragraph’s spaces, – editing text through style attribute of p tag also makes no sense, while we decide to imitate these paragraphs. Therefore, for the styling, we will use span and only span. In the style attribute we will specify parameters such as: font-family, font-size and color – always in HEX format (#xxxxxx) or literally, for example red. Not all postal servicecan correctly understand color of type #777, such constructions will simply ignored.
We can specify pitch, typeface etc via inline styles, but it also won’t be a mistake if you will use tags like b, i, u. strong etc. — no difference.

Hyperlinks

Every single link need to wrap in span, pointing out all the styles, and duplicate those styles into the style attribute of the link. Link may also be in the middle of the text, and, here are example of how to draw a link in the text:

<span style="font-family:verdana; font-size:12px; color:#404040;">This is single text, and </span> <span style="font-family:verdana; font-size:12px; color:#0077c0;"><a style="font-family:verdana; font-size:12px; color:#0077c0;" href="%%url%%">this is link</a></span> <span style="font-family:verdana; font-size:12px; color:#404040;"> inside our text</span>

We set the target attribute to _blank value for all links. Just because we don’t want to open pages in mailer’s window :) This is not rule, but it’s better to play safe.

Images

Images important too. Width and height of all images must be equal to actual width and height. You can implement it with using of attributes width and height, or via css in the style attribute of the img tag – there is no differency. 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 color can be specified for the document body, for our table and its cells in the format of #xxxxxx or literally, for example – red (blue, green …). The reason for this was explained above. Background images are restricted. Not so strict, of course, but better don`t use it. Most of the clients and interfaces simply do not support.

Here are few more advices:

  • Avoid the using JavaScript. In most cases they will be disabled mail clients.
  • Use attributes alt, height, and width for images. Set the values for these attributes, will get a great result display in GMail, and even if the images will be disabled, the entire pattern will be displayed well.

Conclusion

Summed up to the above we can say that building of letters will be more terrible than all of us adored Internet Explorer 6, though here it’s not dancing with a tambourine, but rather in the meticulousness and patience. Therefore, if you really like make up, you are not annoyed by monotone work, you do not neglect accuracy and attention and follow rules given in the article, your subscribers will be pleased. Good luck in your work and thank you for your attention!

SIMILAR ARTICLES


4 COMMENTS

  1. Great reference article! Thanks for sharing it! In case you don’t want the hassle of learning to code one that’s compatible with all email clients, check out http://niceemails.com. They let you choose from a series of fully designed customizable email templates all ready for immediate download!

  2. Nice selection of rules but i wouldn’t use background images in styles since most of mail clients block these. Neither i would use tables. I would stick to divs since they allow larger flexibility and set only important images like logo and promotional image via attachment.

  3. There a lot of easy to use free newsletter templates available, for example on http://www.emailwear.net/2011/10/17/free-newsletter-templates-emailwear/

Leave a Reply