A responsive email displaying in desktop, mobile and tablet.
Usually creating emails that are compatible across all email clients is one of the less exciting parts of my job. However, recently I’ve been getting an increasing amount of requests for ‘responsive’ email designs from clients. By responsive people generally mean an email that sizes down elegantly to display well on smartphone or tablet.
Traditionally with emails you are limited to creating HTML using layout tables and inline styles, that looks like the code for a website created over 10 years ago. Most email clients don’t widely support modern CSS3 techniques or using modern DIV layouts.
However, in these days where people are increasingly reading their emails on smartphones or tablet devices, things are starting to get a bit more interesting. When I started to do a bit of research into responsive email design I realised that it’s possible to include layout styles and code that can be ignored by the limited desktop email clients but that will be picked up by smartphones or tablets.
Of course the advantage of this is that smartphones and tablets (being a relatively new technology) all support modern HTML and CSS standards, which means we can do things like re-style a simple nav-bar of links to display as touch-screen friendly buttons that comply with the 48×48 pixel minimum recommended by Apple for iPhone clickable areas.
In terms of providing custom code for mobiles all that needs to be done is adding a separate Media Query in our CSS like this:
@media screen and (max-width: 480px) {}
Then just put in your custom CSS for mobile. So when the screen width reaches 480px or below you can render your nav links as buttons etc. It’s even possible to hide entire tables from mobile/tablet as they support ‘display:none’ (it’s worth mentioning here that display:none is not supported by desktop browsers so this doesn’t work in reverse, otherwise life would be much easier)
Finally, another nice trick is to make your images 1.5 times bigger than they need to be and size them up dynamically for mobile and tablet, which makes them look nice and crisp on the new retina displays of iPhones and iPads.
If you are not code-savvy it’s worth checking out Campaign Monitor’s free email template generator. Personally, I prefer to collapse my columns into one for iPhone etc. which the CM generator doesn’t do but it’s a good starting point if you want to experiment with responsive emails.
