This week I want to get into some more details along the lines of last week’s info on creating emails for varied mail clients.
For starters, I got some statistics on email client popularity from CampaignMonitor.com. Here are the clients with more than 5% market share.
| Apple iPhone | 28% |
| Gmail | 27% |
| Apple iPad | 9% |
| Apple Mail | 8% |
| Yahoo! Mail | 6% |
One of the biggest problems email builders face is that Gmail doesn’t support any CSS except inline style attributes. With 7.02% of the market share, Gmail is too big to ignore. Unfortunately this means that every element must be styled manually. For the most part, that means a root element gets certain styling and its children will inherit that, but that’s not always the case. Outlook has a nasty habit of changing the font family and size within tables, which means that every table with text in it needs to have a reset to the email’s correct font settings.
Several other elements need styling each time. Links in particular will use the client’s default link color if it’s not specified each time, assuming CSS isn’t being used. CSS is also the only way to customize the hover styling of links, which of course leaves Gmail users out in the cold. Images inside of links will have borders by default in some clients, so border=”0″ should be used, or style=”border:0″.
Another big issue is Outlook’s lack of decent support for CSS positioning. Although older versions of Outlook had some more support, for some reason it’s been almost completely removed as of Outlook 2007. Therefore it’s highly recommended to use the dreaded nested table layout method. Background images should also be used carefully, as several major clients don’t support them well or at all. If they are used, a background color should be in place as a fallback.
Outlook has a great many problems with positioning and layout, often inserting nonsensical whitespace. For one thing it doesn’t handle padding on divs correctly. But if you use tables for every last little bit of layout, you should be able to avoid these problems. I know it’s a lot of extra tags to deal with, and it may go against every fiber of your web development experience, but unfortunately it’s also the most reliable way to get the job done in this case.
Although it may be tempting to just make your whole email a big image and be done with it, unfortunately that’s not usually much of a viable option. Many spam filters regard high image concentration as indication of spam, so some of your recipients would never see the message. Even if it gets through, most major clients block images by default, and many people will ignore a message that has no text in the body to identify what it’s about, never clicking the “show images” button to find out.
