Mobile ready CSS in HTML Email

HTML email has a reputation for being a particularly tough design medium. So tough, in fact, that many designers regard coding and testing even the simplest email design to be almost as bad as fixing display quirks in Internet Explorer 6, and only slightly better than a tooth extraction. So, it’s with much courage that I tell you today about using CSS in email newsletters: what works, where it’s going and what you should do next.

After reading this article, you will hopefully come away with a few ideas on how to start coding email designs with improved readability and usability when viewed in Web, mobile and email desktop clients alike. Also included are a variety of resources to get you on the right path with using CSS in email.

Then again, the shaky state of email standards today may convince you that plain-text email is the way to go. The choice is yours.

CSS In HTML Email: The Good, The Bad And The Mobile-Ready

If you’re about to embark on your first HTML email coding job, then you probably come from a Web background and are keen to flex a little CSS3 muscle, get a little JavaScript action happening, drop those shadows…

Not so fast. As any old hat to the email game can tell you, what works on the Web and what works in email are about as far apart as Sydney and Stockholm. For the most part, this is because pretty much every email client has its own way of doing things; while there are perhaps half a dozen browsers to test against when coding a Web page, there are literally dozens of email clients, many of which feature radically different CSS implementations.

But before you give up hope, here’s some advice to get you through the night:

• A lot of CSS properties (such as font, color and border) work fine across many of the most popular email clients. Once you know which ones they are, you can tailor your designs accordingly.
• 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. Favor table layouts over divs, and make sure your message is readable (which means text, not images).

At this point, you may be saying to yourself, “Well, this all just sounds too hard.” So, perhaps I should remind you how beautiful an HTML email can look, with just a sprinkling of CSS:

For a more realistic view of what this design will look like in the inbox, here’s the same email in Gmail and Outlook 2007. Both are notoriously tricky email clients to work with:

See? Ain’t so bad after all. But what’s more exciting is how you can use CSS to adapt an HTML email for optimal display on mobile devices. Here’s the same newsletter as viewed on the iPhone:

For comparison, let’s look at the same email newsletter without mobile-specific CSS:

The change might seem subtle, but applying a mobile-specific style sheet has improved the readability of the email considerably. It has also allowed us to remove a lot of visual clutter (like the “Widget August 2011 Newsletter” text) that would have taken up valuable real estate on a small screen.

So, we’ve gone from an email layout that requires a lot of pinching and zooming, to one that can be easily read with a linear scrolling motion, using CSS alone. We’ll look at how you can apply similar improvements to your email campaigns in a moment. But first, let’s start with some of the fundamentals of using CSS in your HTML email designs.