If you’re one of those who’ve had the harrowing experience of coding an HTML E-newsletter, and spent hours trying to figure out what you’ve done wrong that’s causing the design to render differently on different email clients, this blog post is an effort to simplify things a bit.
Before we go any further, it is most important to understand that coding for HTML newsletters is vastly different from coding an HTML web page. Browser compatibility, coupled with email clients’ compatibility, creates a unique challenge to programmers coding for HTML newsletters. The reason for this is that various email clients have different levels of CSS Support.
Pixel perfect or not, email newsletters are an important ingredient in the digital marketing strategy that speaks directly to the target audience. They are here to stay and so, while email clients may take years adapting themselves to the changing html and CSS standards, it is us, programmers who will have to pull up our socks and find innovative solutions to design outstanding email newsletters that send the message across effectively and beautifully.
Email services like Gmail, Lotus Notes & Outlook 2007 are most restrictive and therefore it is imperative that we code for these clients first. If the newsletter renders consistently on each of these platforms, there’s a high likelihood that it’ll work on most other email clients too.
Here are some of my top tips that I’ve picked up … some through my experience, some from websites like Campaign Monitor and still others from forums and other blog posts:
HTML Coding
- Use table layouts instead of the div layout, since divs and floats are not supported by all the email services.
- Always nest the entire e-newsletter layout in a table cell.
- Each table cell should specify width and height parameters to ensure they render exactly the same on all the email agents.
- Specify cell spacing, cell padding, padding and margins to all cells for consistent looking designs on all email services.
- Avoid colspans, since some older email services do not support these.
STYLES
- Don’t use styles in the head section, use inline styles instead for every element.
- CSS Shorthands do not work in an html email newsletter.
- Do not use external style sheets with the link element. These do not work.
- Deprecated HTML tags like <font> need not be used. The font styles work fine, so long as they are applied inline to the elements.
IMAGES
- Always use display=”block” for all images, to avoid extra white spaces after the images which is a common problem in Outlook.
- Always specify height and width parameters for all images to avoid stretching of images.
- Always give absolute paths (online paths of images stored on a server) for images, email services like yahoo do not display images on relative paths.
- Always provide alt tags for images, to ensure that the newsletter is still readable if images are blocked.
Email Services & their quirks
- Hotmail auto-left aligns the table. To fix this, add the following code to the head:
.ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;} - To add background images to a td, apply the image as a background on a new HTML table that encases all of the table rows and columns that would display parts of your background image. Here is how a background is implemented to a table cell, courtesy Campaign Monitor.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<body style=”margin:0; padding:0; width:100% !important;”>
<table width=”600″ cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<!– Backup background color is #DDDDDD –>
<td bgcolor=”#DDDDDD” style=”background-image: url(‘image path’);” background=”image path” width=”600″ height=”120″ valign=”top”>
<!–[if gte mso 9]>
<v:rect style=”width:600px;height:120px;” strokecolor=”none”>
<v:fill type=”tile” color=”#DDDDDD” src=”image path” /></v:fill>
</v:rect>
<v:shape id=”theText” style=”position:absolute;width:600px;height:120px;”>
<![endif]–>
<p>If you can see this over the image, background images are successful.</p>
<!–[if gte mso 9]>
</v:shape>
<![endif]–></td>
</tr>
</table>
- Yahoo! Mail also has a knack for picking keywords in emails and linking them to advertising popups (look for the blue, dotted links). Unfortunately, there’s no known way to disable this behavior, despite it being potentially distracting or confusing to your subscribers.
The only way to get around this is to style the links to colors that blend with your design. The class applied to these links is: ‘yshortcuts’. So, style these in the <head> section of your document like below:
<style>
.yshortcuts { color: #CCCCCC } /* Body text color */
.yshortcuts a span { color: #00FF00 } /* Link text color */
</style>
GENERAL GUIDELINES:
- Do not use scripts as these are always disregarded by the Email clients.
- Avoid too many images.
- Ensure that the newsletter looks fine and makes sense even if the images are not displayed.
- Always provide an online HTML copy of the newsletter.
- Always provide unsubscribe links for the user.
- Call to action buttons should ideally be text and not images, to ensure it is visible even if images are not displayed.
- The general rule of thumb is to design mainly for Google & Outlook since these are most restrictive. If your newsletter renders fine on these agents, chances are high that they will look good on most others too.
While pixel perfect HTML newsletters that render exactly the same on every email client are a myth; given the restrictive email client support of the new HTML & CSS Standards, most of the above steps result in some form of consistency in terms of display on different platforms and client services. It is always worthwhile however, to test the newsletter on different browsers to check for browser compatibility and then test them on various platforms and various email services.
Similarly, it is worthwhile to note that while fancy HTML newsletters look great, it isn’t worth the effort and resources spent, if it looks like that only to 10% of your customer base. A simple readable HTML that renders well and sends your message across to your target audience with a clear message and call to action is what makes the impact!
Abhishek is a part of the Ethinos search team and helps client with various search techniques.