Love them or hate them, most web designers will at some point be asked to design and code them.
They are HTML Emails.
Is there really any difference between coding a web page and a HMTL email? They’re both HTML documents that we view on our computers, right? Well yes, but that is just the tip of the ice berg!
Below is a wealth of information collected from and article by Tim Slavin on www.sitepoint.com.
The biggest pain is that so many different software tools are available for reading email, from desktop software such as Eudora, Outlook, AOL, Thunderbird, and Lotus Notes, to web-based email services such as Yahoo!, Hotmail, and Google Mail. If you thought it was difficult to ensure the cross-browser compatibility of your web sites, be aware that this is a whole new game — each of these email software tools can display the same email in vastly different ways. And even when these tools do display an HTML email properly, accounting for variances in, for example, the widths at which readers size their windows when reading emails makes things even trickier.
This article describes the results of my own hands-on experience creating HTML email newsletters for clients, as well as bits of technical information from the Internet. This is actually a revision of an article that was written and published on sitepoint.com in 2004, and includes new, up-to-date material that will help you ensure that your HTML email newsletters meet the requirements of today’s email clients.
Step 1: Use HTML Tables for Layout
That’s right: tables are back, big time! Web standards may have become the norm for coding pages for display in web browsers, but this isn’t the Web, baby. Mail clients are light years behind the eight-ball in terms of CSS support, which means that we must resort to using tables for layout if we really want our newsletters to display consistently for every reader (see the reading list at the end of this article for some excellent resources on CSS support in mail clients).
So put your standards-compliant best practices and lean markup skills aside: we’re about to get our hands dirty!
The first step in creating an HTML email is to decide what kind of layout you want to use. For newsletters, single column and two-column layouts work best, because they control the natural chaos that results when a large amount of content is pushed into such a small space as an email.
Step 2: Add CSS Styles
Did I say CSS support was poor in mail clients? Well, it is. But you can (and should) still utilize CSS for the styles in your email once your nested table layout is in place. There are just a few things to watch out for. Here are the steps that I use.
This includes table, td, p, a, and so on. Do not use the CSS style declaration in the HTML head tag, as you might when authoring web pages. Google Mail, in particular, looks for any style in the email and (helpfully) deletes it. Also, don’t bother using the link element to reference an external style sheet: Google Mail, Hotmail, and other email software will ignore, modify, or delete these external references to a style sheet.
For your container table — the one that houses the header, content, and footer tables — set the table width to 98%. It turns out that Yahoo! mail needs that 1% cushion on either side in order to display the email properly. If side gutters are critical to your email’s design, set the width to 95% or even 90% to avoid potential problems. Of course, the tables inside the container table should be set to 100%.
Put general font style information in the table td, closest to the content. Yes, this can result in repetitive style declarations within multiple td cells. Put font style definitions into heading (e.g. h1, h2), p, or a tags only when necessary.
With ideas and text from Tim Slavin, http://www.sitepoint.com/ 2006