| In some ways, coding HTML email has become easier | | | | - Even if the design of your email doesn't include a |
| -- several email software providers, such as Google | | | | border around your table, you might find it helpful |
| Mail, have improved their support for CSS. However, | | | | during development to set border="1" to help with |
| at the same time, Outlook 2007 has taken HTML | | | | the debugging of any problems that arise with the |
| email backwards: last year Microsoft substituted the | | | | internal alignment of tr and td tags. Change it back to |
| original HTML rendering engine used by Outlook for | | | | border="0" for testing and production. |
| an engine that is inferior in terms of CSS support. | | | | While this approach might offend purists who prefer |
| Other advances in HTML email in the last couple of | | | | to code using the latest standards, it is the only |
| years include the formation of the Email Standards | | | | approach that's viable at this point. But the fact that |
| Project, which aims to test the compliance of email | | | | we're using tables for layout doesn't mean we need |
| software to HTML and CSS standards and to lobby | | | | to resort to old-school methods entirely. For example, |
| for improvements; the emergence of services for | | | | no matter how poorly Lotus Notes displays HTML |
| testing how HTML email renders in various desktop | | | | email, you should never have to resort to using the |
| and web-based email applications; and the availability | | | | font tag. And while Outlook 2007's HTML rendering |
| of HTML email templates that you can either use "as | | | | engine is less than perfect, it does display basic HTML |
| is" or customize to your preferences. We'll look at | | | | tables just fine. |
| some of these services and templates in this article. | | | | There are some caveats, though; let's take a look at |
| Despite these advances, coding HTML email can be a | | | | styling our text next. |
| mix of misery and pain for programmers. This article | | | | |
| will bring you up to date on how to code HTML email | | | | Step 2: Add CSS Styles |
| so that it will display well in most email software. | | | | The fact is that CSS support is poor in mail clients. |
| | | | | But you should still utilize CSS for the styles in your |
| HTML Email Fundamentals | | | | email once your nested table layout is in place. There |
| The biggest pain when coding HTML email is that so | | | | are just a few things to watch out for. Here are the |
| many different software tools are available for | | | | steps that you should follow: |
| reading email, from desktop software such as | | | | First, use inline styles to store all of your style |
| Eudora, Outlook, AOL, Thunderbird, and Lotus Notes, | | | | information, as shown here: |
| to web-based email services such as Yahoo!, Hotmail, | | | | This includes table, td, p, a, and so on. |
| and Google Mail. If you thought it was difficult to | | | | Do not use the CSS style declaration in the HTML |
| ensure the cross-browser compatibility of your web | | | | head tag, as you might when authoring web pages. |
| sites, be aware that this is a whole new ball game -- | | | | Instead, place your style declaration right below the |
| each of these email software tools can display the | | | | body tag -- Google Mail, in particular, looks for any |
| same email in vastly different ways. And even when | | | | style in the email and (helpfully) deletes it. Also, don't |
| these tools do display an HTML email properly, | | | | bother using the link element to reference an |
| accounting for variances in, for example, and the | | | | external style sheet: Google Mail, Hotmail, and other |
| widths at which readers size their windows when | | | | email software will ignore, modify, or delete these |
| reading emails makes things even trickier. | | | | external references to a style sheet. |
| Whether you choose to code your HTML email by | | | | For your container table -- the one that houses the |
| hand (my personal preference) or to use an existing | | | | header, content, and footer tables -- set the table |
| template, there are two fundamental concepts to | | | | width to 98%. It turns out that Yahoo! mail needs |
| keep in mind when creating HTML email: | | | | that 1% cushion on either side in order to display the |
| 1. Use HTML tables to control the design layout and | | | | email properly. If side gutters are critical to your |
| some presentation. You may be used to using pure | | | | e-mail’s design, set the width to 95% or even |
| CSS layouts for your web pages, but that approach | | | | 90% to avoid potential problems. Of course, the |
| just won't hold up in an email environment. | | | | tables inside the container table should be set to |
| 2. Use inline CSS to control other presentation | | | | 100%. |
| elements within your email, such as background | | | | Put general font style information in the table td, |
| colors and fonts. | | | | closest to the content. Yes, this can result in |
| The quickest and easiest way to see how HTML | | | | repetitive style declarations within multiple td cells. Put |
| tables and inline CSS interact within an HTML email is | | | | font style definitions into heading (e.g. h1, h2), p, or a |
| to download some templates from Campaign Monitor | | | | tags only when necessary. |
| and Mail Chimp. When you open up one of these | | | | Use divs sparingly to float small boxes of content |
| templates, you'll notice a few things that we'll discuss | | | | and links to the right or left inside a table's td cell. |
| in more detail later: | | | | Google Mail, for one, seems to ignore the CSS float |
| - CSS style declarations appear below the body tag, | | | | declaration (yet Yahoo! and Hotmail cope with it just |
| not between the head tags. | | | | fine). Sometimes it's better to code a more complex |
| - No CSS shorthand is used: instead of using the | | | | table layout than to rely on the float declaration. Or, |
| abbreviated style rule font: 12px/16px Arial, Helvetica, | | | | since it's all too easy to clutter up an email, ask your |
| you should instead break this shorthand into its | | | | designer to put the floated content in the narrow |
| individual properties: font-family, font-size, and | | | | side column instead. Flaky support for floats is one |
| line-height. | | | | issue that may cause an email design to be |
| - spans and divs are used sparingly to achieve | | | | reworked. |
| specific effects, while HTML tables do the bulk of the | | | | While divs appear to be barely useful, spans appear |
| layout work. | | | | to work almost every time, because they're inline |
| - CSS style declarations are very basic, and do not | | | | elements. In some cases, spans can be used for |
| make use of any CSS. | | | | more than just coloring or sizing text: they can be |
| Step 1: Use HTML Tables for Layout | | | | used to position text above or below content. |
| That's right: tables are back, big time! Web standards | | | | Note that some email delivery services will unpack |
| may have become the norm for coding pages for | | | | style definitions to make them more explicit and, |
| display in web browsers, but this isn't the Web, baby. | | | | therefore, more readable by all email software. For |
| Mail clients are many years behind the eight-ball in | | | | example, the CSS shorthand style="margin: 10px 5px |
| terms of CSS support, which means that we must | | | | 10px 0;" may be expanded into the long style |
| resort to using tables for layout if we really want our | | | | declaration shown earlier. Test each email and look to |
| newsletters to display consistently for every reader. | | | | see what happens to the email code. Start with CSS |
| So put your standards-compliant best practices and | | | | shorthand because, in the worst case, it appears to |
| lean markup skills aside: we're about to get muddy! | | | | work well with all email software. |
| The first step in creating an HTML email is to decide | | | | If you've downloaded and studied the email |
| what kind of layout you want to use. For | | | | templates from Campaign Monitor and MailChimp, |
| newsletters, single column and two-column layouts | | | | you'll see that they treat the container table as if it |
| work best, because they control the natural chaos | | | | were the html body tag. The Campaign Monitor team |
| that results when a large amount of content is | | | | refers to this table as the "BodyImposter," which is a |
| pushed into such a small space as an email. | | | | great way to think about the frame or wrapper |
| A single-column layout typically consists of: | | | | table. From a CSS perspective, the container table |
| 1. a header, containing a logo and some (or all) of the | | | | does what the html body element would do if |
| navigation links from the parent web site to reinforce | | | | services like Google Mail didn't disable or ignore the |
| the branding and provide familiarity for site visitors | | | | body tag. |
| 2. intra-email links to stories that appear further down | | | | Step 3: Adopt Best Practices |
| in the email | | | | Knowing that you've created valid HTML email using |
| 3. a footer at the bottom of the email, which often | | | | the guidelines we've suggested is only part of the |
| contains links that are identical to the top navigation, | | | | solution -- there are several best practices that you |
| as well as instructions for unsubscribing | | | | should follow to ensure that your email is well |
| Two-column emails also use a header and footer. Like | | | | received. |
| a two-column web page, they typically use a narrow, | | | | The next step is to test your HTML email in a |
| side column to house features and links to more | | | | variety of email clients. Often this will identify |
| information, while the wider column holds the body | | | | problems that require workarounds. |
| content of the email. | | | | The first test tools to use are the Firefox and |
| Promotional emails follow similar rules but contain | | | | Internet Explorer web browsers. If the email displays |
| much less in the way of content and links. They | | | | well or perfectly in both browsers, there's a good |
| often include one or two messages, and sometimes | | | | chance that testing the email in Outlook, Yahoo!, |
| make use of one big image with small explanatory | | | | Google Mail, and other services will reveal only minor |
| text and some links below the image. | | | | problems. We'd also recommend testing your email in |
| All of these email layout possibilities can be created | | | | Internet Explorer 6 -- this should give you a good |
| easily, using HTML tables to divide up the space into | | | | indication of how your email will render in Outlook |
| rows and columns. In fact, using HTML tables is the | | | | 2003. Once the email appears fine in those two web |
| only way to achieve a layout that will render | | | | browsers, use an email delivery service to send the |
| consistently across different mail clients. | | | | email to a range of test email accounts. Ideally, this |
| No matter how your email is designed, it's important | | | | should include accounts with the Yahoo!, Hotmail, and |
| to remember that the most important content should | | | | Google Mail Services. The test accounts you use |
| appear at or near the top of the email, so it is visible | | | | should, of course, be determined by the domain |
| immediately when a reader opens your email. The | | | | names in the mailing list of people who will receive |
| top left of an email message is often the first place | | | | the email. For example, if there are no AOL |
| people look when they open an email. | | | | subscribers on this list, it's probably a waste of time |
| The following is the approach that you should use to | | | | and money to set up, and test with, an AOL email |
| create HTML emails: | | | | account. |
| - For a two-column layout, create one table each for | | | | Here are the most common codes that we've found |
| the header, the two center content columns, and the | | | | necessary during this test phase: |
| footer -- that's three tables in all. Wrap these tables | | | | - Sometimes, a switch from percentage widths to |
| into another container table. Use the same approach | | | | fixed widths is needed. While this is not ideal -- |
| for single-column layouts, but give the content table | | | | because readers can and do resize their email |
| one column. This approach is especially suitable if the | | | | windows while reading -- sometimes, using a fixed |
| design of your email contains images that are broken | | | | width is the only way to have a layout to display |
| up over multiple table cells. Otherwise, a single table | | | | properly in multiple email clients. |
| with td rows for its header (with colspan="2" if the | | | | - If there's a spacing issue with the columns in the |
| design uses two columns), content, and footer should | | | | email design, first tweak the cellpadding and |
| display fine in all but Lotus Notes email software. | | | | cellspacing attributes of the HTML tables. If that |
| - Use the attributes within the table and td tags to | | | | doesn't work, apply CSS margin and padding |
| control the table's display. For example, setting | | | | attributes. HTML spacing works better with older |
| border="0", valign="top", align="left" (or center, if that | | | | email software. |
| suits the design), cellpadding="0", cellspacing="0", and | | | | - Image displacement can occur when a td cell is |
| so on. This primarily helps older email clients to display | | | | closed right below an img tag. This is an ancient |
| the email in a (barely) acceptable way. | | | | HTML problem. |