Big CSS guide update including mobile email clients

{title}

During a busy afternoon a few weeks back I was working on some design tweaks to the monthly Campaign Monitor newsletter. One change I wanted to make was best suited to a background image. I started coding this up, then realized I was probably treading on shaky ground. Did they even work in Gmail? I was sure Outlook 2007 had a strong dislike for them too. And how will this look on that fancy new Palm Pre everyone was talking about.

To make the matter even more complex, I realized there are literally five or six different ways to code a background image. Should I use the background-image CSS property, or can I get away with some CSS shorthand. What about using good old fashioned background= value on the table cell.

Rather than muck around with trial and error, I turned to our trusty CSS guide to see what advice it had for me. In no time at all I had my answer (try to avoid background images, but if you must use the old school approach). While we’re often told by designers just how handy the CSS guide is, it wasn’t until my recent experience that I realized how right they were. But while the guide was useful, it was now a full year old, was missing some CSS properties and didn’t include any testing on mobile email clients.

This week a few of us have been hard at work overhauling the CSS guide to meet all these shortcomings. We combined our own ideas for improvement with some other great suggestions from a number of customers over Twitter. The new guide now includes the following updates.

  • Mobile email clients - Support for mobile clients was the biggest thing missing form the existing guide. Inspired by the initial testing of Gregg Oldring, we took the iPhone, Android, BlackBerry, Palm Pre and Palm Treo for a spin. A huge thanks to our own Diana Potter, as well as Aidan Haylock, Adam Lein, Rob Jones and Dustin Davisson who volunteered their time to help test on their own phones.
  • Focus on the most popular clients - Armed with our new reports on email client popularity, we decided to simplify the web-based version of the report to focus on the 10 most popular email clients. The downloadable version of the guide includes the results for all 23 email clients tested.
  • CSS shorthand - Shorthand is a handy way to specify several CSS properties in a single property. We tested the shorthand support for the font, background, padding, margin and border properties.
  • Smarter grouping - Instead of listing all CSS properties alphabetically, we’re now grouping them into categories like “text and fonts” and “color and background” to make it easier to see related properties and find what you’re looking for.
  • Partial support indicated - Email clients like Outlook 2007 offer partial support for some properties such as margin. Sometimes it works, sometimes it doesn’t. Traditionally we’ve listed this as no support, but we now indicate partial support to let you know it might require more testing. We plan on expanding this to explain when it does and doesn’t work soon.
  • Older clients scrapped - We removed redundant email clients like Eudora and older versions of Hotmail that are no longer in use.

The mobile email client results have been extremely interesting so far. I plan on writing a more detailed analysis of the CSS support in the mobile email world soon where I can expand on some of the discoveries we made.

Check out the all new CSS Guide. We hope it helps you as much as it’s helped us.

Posted by David Greiner

15 Comments

  • Emil
    7th August

    Wow useful guide! If you combine this grid with e-mail client usage from CM if would be totally awesome. Let’s say I want to use the background property and it could tell me “This will work on 67% of your current subscribers e-mail clients.”

  • David Greiner
    7th August

    Emil, that’s something we’ve been considering for a while now and I agree it could be very useful information when importing your campaign creative. Would anyone else find this sort of functionality useful?

  • Trav
    7th August

    Love it! I used to work with HTML Email for business and always check out your charts. I still have the previous version hanging in my cubicle as I occasionally sub in for another co-worker who still does email creation.

    I just have to say, long live CSS standards in email, and hopefully someday Microsoft will stop screwing everyone over with Outlook’s rendering engine. Seriously, that thing is a POS!

  • Robert
    7th August

    Thank you for the updated guide. I see that you have listed gmail as obeying font-family,which differs from your 2008 guide. My own test today confirms that gmail still ingores inline font-family specifications.

  • Andrew Rae
    7th August

    Short and sweet. Thanks for making this available in two formats.

  • johnny
    7th August

    Hello. Thank you for this great info! Keep up the good job!

  • Viagra
    9th August

    as a consequence of you for your report and it helped me in preparing my college assignment.

  • machoman
    9th August

    thank you! I really liked this post!

  • Jeff Ginsberg
    10th August

    You guys have the Mac Daddy of CSS guides for email. Thanks for helping everyone out in our industry.

  • Ben
    11th August

    You folks rock.  This is an awesome resource.  Now, 2 recommendations on improving it:

    1) Calm down the colors on the Full Report.  I’ve downloaded the pdf and the excel file and I feel like I am staring at a poorly decorated Christmas Tree.  Have you ever printed this out?  It is hardly possible to differentiate the grays on a black and white print out.

    2) I like the new organization of the data by Desktop, Web, and Mobile.  But I also like the order of the online resource which is by Market Share.  I think a 3rd type ordering that could provide someone who builds HTML emails on a regular basis useful insight would be an ordering from Best Supporting Clients to Least supporting clients (this would allow somebody to look at the report and get an idea of when they have to start making trade offs more easily).  Providing all three of these orderings in the full report would be quite useful as we can choose which display best fits our needs and best enables us to communicate with those who we work with that don’t understand trade-offs in email design as well.

    Thanks again!

  • Unioneeseedia
    19th August

    yeh right.. great post, Thank You

  • Ben
    21st August

    Great resource. Stupid GMail - why on earth can’t it support embedded css tags? I know they’re plenty smart enough…

  • Chris
    26th August

    I’d encourage you to downgrade Outlook 2007 support of line-spacing to “buggy” status. I’ve recently been testing new HTML templates for my co’s mail and found that Outlook appears to enforce linespacing of no less than, by my eye, 1.6em, which visually is ridiculously aired-out. If there’s some trick to bypassing this, I’d appreciate hearing about it. Thx.

  • wp themes
    24th September

    Proper due posting this criticism to show that I visit your blog daily.

  • leanteeCrenny
    1st October

    Dangerous position provide for up your proper work.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account