In a recent venture into the world of HTML emails I discovered that all is not quite what it seems. I am of course talking about the vast differences between the ways some mail clients can display email. No matter how much of a CSS genius you are you will never get your beautiful designs to look exactly the same in all email clients, but below I have outlined you some tips that will help you minimise the differences.
- A lot of CSS properties (such as font, color and border) work fine across many of the most popular email clients. Get familiar with what works and what doesn’t by using campaign monitors Guide to CSS Support in email.
- When a CSS property doesn’t work so well, there are often workarounds (such as using cellpadding in tables instead of padding).
- When workarounds don’t exist, focus on graceful degradation.
- Your design will never look exactly the same across all email clients, no matter how you use CSS. Once you (and your clients) make peace with this, I guarantee you will sleep better at night.
- Keep it simple. The less complicated your design and layout, the less likely something will go wrong. Favour table layouts over divs, and make sure your message is readable (which means text, not images).
One of the most evident things you should realise after reading the guide to CSS in email is that most of your problems will come from Outlook 2010, Lotus Notes and Gmail. These browsers are playing hardball when it comes to CSS support. Fear not young designer, good will prevail and the darkness will be lifted in time.
Looking at the data from over 3 billion emails you can see that the use of mobile clients is on the constant up rise! In fact, one in five emails are now opened on a mobile device. This is good news!
Most mobile email clients including iOS (which accounts for 75% of mobile email) run off the webkit rendering engine. Webkit supports many CSS3 features such as animation and media queries. The latter can be extremely useful for re formatting emails to suite mobile devices. With apples mail on mac and iPhone we are able to format emails especially for iPhone users. See the example below.