Email code has always been a bit of a technology backwater, with coding standards that haven't advanced much past 1995 - thanks mostly to the wide array of email clients and their varying support for HTML. There are also several rendering challenges: Microsoft uses the Word rendering engine in Outlook 2010, which knocks out background images and animation, and owing to security concerns JavaScript, Flash and CSS positioning receive almost no support. But with the onset of smart phones and tablets, we're seeing more and more users accessing their email from devices that can support CSS3.
We're not going to get away from table-based design any time soon, but this at least means we can start to use CSS3 to enhance the experience for an increasing number of mobile users, and still provide an adequate fallback for those users still viewing their mail on a desktop. So what options do we have?
- Text shadow A nice, easy tweak to help text stand out, this works in many mobile devices - and some desktop clients too.
- Border-radius Support for border-radius is good, and it's proving useful for making buttons from web-text instead of images. They'll fall back to being square edged in some desktop clients, but we can live with that.
- CSS animation Lots of the complex stuff that works in conjunction with JavaScript is out, but we can use simple animations such as glows around buttons to enhance the experience on smartphones.
- CSS gradients Another useful addition to making web-text buttons, gradients are supported on mobile and increasingly in desktop clients.
- Progressive disclosure Campaign Monitor has done some great experiments with emails that enable you to show and hide content using CSS. Backwards compatibility can be tricky, but it's a good step towards more interaction.
Unfortunately there's no luck bringing web fonts to email yet- they're almost universally stripped out by email clients.
Posts
