Google Mail, Lotus Notes, and Outlook 2007 present their own unique coding challenges. Outlook 2007, believe it or not, has significantly less support for CSS than previous versions of Outlook!
Google Mail’s lack of support is a little more forgiveable — because the application runs in a browser, it cannot control the contents of the emails it displays. Consequently, Google’s engineers have had to take steps to ensure that their application displays properly regardless of the quality of the HTML or CSS in which emails are written.
As a result, Google Mail is a new web mail service that acts like an artifact of the early 1990s, when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted the services approach to rendering HTML email actually is.
For one thing, Google Mail deletes the CSS styles contained between any style tags, no matter where they appear in the email. And fonts displayed within HTML tables — the only alternative to using styles — have the odd habit of appearing larger than intended, no matter how the HTML email is structured.
The good news, however, is that if you code to account for the oddities of these email three applications, your HTML email code is more likely to display well in most, if not all, email clients. Here are some techniques that appear to work well in Google Mail and other older email software:
- Define the background color in a
td cell with the bgcolor attribute, not the CSS style.
- As noted above, use the
background attribute in the td cell for background images instead of using CSS. One side-effect of this approach is that the background image can be made as tall as needed — if the content used in your email template is likely to vary in size, using an extra-tall background image in this way allows the height of the email shrink or expand, depending on the height of the copy, from one email to the next. Remember, though, that Outlook 2007 ignores background images completely.
- If it works better, use the padding declaration to control margins within a td cell. The margin style does not work in these cells, but padding does.
- If you need a border around a
td cell, keep in mind that Google Mail displays a border around a td cell when it’s defined in a div, but not when it’s defined as a border style in a td tag.
- If you need a light-colored link against a dark background color, put the font definition in the
td cell (so it applies to p and a tags equally) then add a color: style to the a tag.
- If the
p and a fonts appear to be different sizes, wrap the a tag in a p tag.
- Google Mail aggressively uses the right-hand column of the Google Mail user interface, which squeezes the HTML email into the center panel. Be sure the padding style in the content tds is set to 10 pixels all round, so that text does not hit against the left and right edges.
- When testing an HTML email with a Google Mail account, it’s likely that you’ll find that one or more font styles are missing in the
td, h1, h2, p, a, and other tags. Inspect every font carefully to make sure Google Mail displays the fonts correctly.
Besides Google Mail, there’s another, less obvious hazard a programmer faces when creating HTML email: Lotus Notes. Many large corporations continue to support and upgrade their Notes installations (as of 2004, IBM reported that 95 million people used Notes).
Unfortunately, it’s impossible to tell which companies use Notes. The best approach is to follow the guidelines described in this article — the more primitive the code, the more likely it will work well, if not perfectly, with Notes.
That said, it’s quite possible that Notes will introduce to your HTML email quirks that are almost beyond belief. For example, the software can convert images to their proprietary formats, or simply ignore flawless basic HTML in one email, but display other HTML fine in another email.
A trial version of Lotus Notes is available for download if you need to test your mail in Notes — see the resource list at the end of the article. Here are a few tips that will help you convince Notes to display your HTML email properly:
- As we discussed previously, use a container table that contains all the internal layout tables (for example, for the header, content, and footer). This keeps the email together in one chunk of HTML, so pieces of the layout are less likely to wander when displayed in Notes.
- Create a gutter around the container table by setting the width to a percentage and/or using a cellpadding of at least 5.
- As I mentioned earlier, avoid using a
style declaration in your email’s head tag. It might be the approach that adheres to web standards, but Notes (like Google Mail) might delete your styles. Rely, instead, on inline styles within the table, td, h1, h2, p, a, and other tags.
- Use absolute URLs to images stored on a web server. You can’t do much about Notes converting images, but using remote images might help.
- Intra-email links, using named anchors, rarely (if ever) work in Notes. It’s simply best to avoid links that jump down the email to a specific piece of content.
- Avoid
colspans in your HTML tables. Notes — especially its earlier versions — can deal only with basic table layouts.
- Be sure that your
td cell widths are accurate. Unlike web browsers, which automatically set all cells to the widest-defined width, Notes sizes each td cell based on its defined width.
- Centering an email layout usually won’t work in Notes. Email layouts generally have to be left-aligned.
Using these techniques to achieve a successful render in Google Mail and Lotus Notes will ensure that your emails also display fine in Outlook 2007, which uses an older HTML rendering engine. Microsoft has published details about what their email software will and won’t display properly; more details can be found in the Resources section at the end of this article).
The Email Standards Project has additional details on CSS support in Outlook 2007, and Microsoft is one of the companies at which their lobbying efforts are targeted.
SUMMARY
Many people who receive email prefer HTML over text for a number of reasons. For programmers, though, the task of creating an HTML email that will display consistently appears both simple and horribly complex. This article has described many of the issues and strategies for creating markup that will work across email software.
What’s the best idea to take away from this article? If there’s a choice to be made between a simple email design and a more complex solution, simplicity is always the safest bet.
