Big CSS guide update including mobile email clients
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,marginandborderproperties. - 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.
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.”
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?
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!
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.
7th August
Short and sweet. Thanks for making this available in two formats.
7th August
Hello. Thank you for this great info! Keep up the good job!
9th August
as a consequence of you for your report and it helped me in preparing my college assignment.
9th August
thank you! I really liked this post!
10th August
You guys have the Mac Daddy of CSS guides for email. Thanks for helping everyone out in our industry.
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!
19th August
yeh right.. great post, Thank You
21st August
Great resource. Stupid GMail - why on earth can’t it support embedded css tags? I know they’re plenty smart enough…
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.
24th September
Proper due posting this criticism to show that I visit your blog daily.
1st October
Dangerous position provide for up your proper work.