Email Evolution

If you ever wondered why all html newsletters look like something you saw once on a very old version of Internet Explorer, there is actually a reason why this is the case. Web designers need to follow certain guidelines when creating web layouts, and when they engage a client who wants to redesign their old email template, things start to get tricky. The word “impossible” gets thrown around, far more than when they’re designing a web page. They must follow strict rules in order to ensure their design isn’t ruined by some popular email clients, like Outlook, Thunderbird, Yahoo Mail, Gmail, and so on.

THE STORY BEGINS

Back in the day, the most popular business email client was Microsoft Outlook. (Early versions were free, and came bundled with Windows.) These clients employed a rendering engine based on the notorious Internet Explorer.

And that's the reason why newsletter design and development is frozen in amber: a large percentage of businesses are still dependant on old Outlook versions (2007, and in many cases even 2003) which display emails with an antique rendering engine from IE. In other words, Outlook 2003 is rendering html like Internet Explorer 6 used to.

WHAT, THEN, SHOULD WE DO TO CREATE PROPER LOOKING NEWSLETTERS?

Despite these limitations there is a list of guidelines that let us create pleasing designs.

• Simplicity is the word when it comes to newsletter design. Designers should use a grid so elements are positioned one below another, as in a table, because developers will use tables to create html from the design.
• Newsletter width should be up to 650px - 700px.
• The design should contain only common cross-platform system fonts like Arial, Tahoma, Verdana, and Times New Roman. If some design element contains custom fonts, it should be a bitmap image.
• The main goal with newsletters is to have as few graphics and images as possible. Those aren't visible the instant the user receives an email; they consume empty space that does not get filled until the email client downloads them.
• Rounded corners, gradients, images behind text -- these design frills require the creation of yet more bitmap content. This shouldn’t be created through code; it technically can be, but it will not be visible in all email clients in the same way. Rounded corners will be visible in one email client, and not in others, etc.
• Avoid implementing flash or video players in newsletters. Even animated gifts frequently will only show the first frame in many clients.
• Developers cannot implement scrolling on some elements, essentially because tables aren't supporting scrolling natively, and css rules they could theoretically achieve are simply not supported by the vast majority of email clients.
• It's not a good idea to place a large hero image at the beginning of the email, because when somebody receives that email, it will appear empty at first. Graphics are generally not downloaded automatically, but rather on user action.

SO, WHY ARE NEWSLETTERS RESOLVED THROUGH TABLE TAGS?

The reason is quite simple: the majority of email clients render tables the same way. More advanced tags, like divs, sections, and so on, are not supported by quite a few email clients. Those tend to be drawn incorrectly, or simply be ignored.

THINGS ARE MORE DIFFICULT WHEN IT COMES TO DEVELOPING

Developers will find themselves travelling through time when it comes to newsletter development. They will use html attributes like colspan, rowspan, cellpadding, cellspacing, and font. They will also use inline css a lot, to ensure that all, or nearly all, email clients behave the same. It may be that I’m being too hard on Outlook and Microsoft; even modern email clients have some ghosts in their closets. Gmail, for example, likes to add links to phone numbers and email addresses, breaking the design by changing text color to the default blue. Never user margin or padding to add some more spacing between elements, for Hotmail and Yahoo respectively ignore one of those. Use a table cell to insert some distance.

Responsive layout is still science fiction for some email clients. This doesn't mean that you should avoid using this technique, because smart, modern email clients will render emails properly. In newer clients this email will be responsive, whereas legacy clients will ignore the relevant tags and just show a basic version of the email. Just keep in mind that all css2 and css3 styles should be tested to ensure they work in the clients that you are targeting.

For testing purposes, you should first test your emails on browsers:

• Internet Explorer
• Firefox
• Chrome

After that, if everything looks good, you should test your emails on email clients:

• Outlook Office 2003
• Outlook Office 2007
• Yahoo Mail
• Hotmail (Online Outlook)
• Gmail

If everything looks good, the next thing you should do is to send the test email via:

• Sendblaster (a program that has to be installed on the sending device; or
• Mailchimp (sending online).

Good luck!