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
- 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.