Responsive Email Design

15th Mar, 2013
by Laura Wilson

Waking up at 2am on a Thursday morning with the sudden thought “Jeepers peepers! That email I’m designing has to be responsive, I totally forgot!” is not my idea of a restful night’s sleep. Yet, that is how my adventure started (I use the term adventure, very, very loosely). One of our lovely clients came to us asking for a fairly straightforward email template designed, with a few fancy bits added in, and some specific requirements around the layout being optimised for reading on mobile devices. So I went on my merry way, designed a beautiful email template, it was signed off super quick, built it, tested it, perfect.

"Ever get that feeling you have super fat fingers when you click the wrong thing on your iPhone..."

Then came my 2 am wake up call. I’d missed the responsive part of the brief completely. It happens to the best of us… I’m sure. But thanks to our dedicated friends at Campaign Monitor I was able to find some pretty awesome resources and even ready-made templates to do exactly what I wanted. So after a bit of research, I figured I was set. Not so. Retro-fitting my email design with responsive CSS was too much, I was breaking things left, right and centre. So, I decided to go in the complete opposite direction, and I suggest anyone who is not a mobile genius do the same. I applied my design to a responsive template. It worked a treat, after about twenty five thousand test emails (just kidding…) and running the battery flat on my iPhone multiple times. I didn’t have to compromise my design at all and now Gmail, Outlook, iPhone and Android display my email without complaint.

Luckily, iOS devices handle CSS well, and there are some pretty cool (read: geeky) techniques used in these responsive emails to make them work, like using media queries to resize tables and images to different sizes, and hide unnecessary content completely when the email’s viewed on a mobile device. These are the same techniques we use when designing a responsive website, so it’s pretty awesome we can use them in the ever-frustrating field of email design as well.
Some quick points I found useful when putting the email together were:

Keep it to one column

Everything’s going to get really small really quick anyway, so it’s much easier to use a single column design than muck around working with more than one column.

Big links

Ever get that feeling you have super fat fingers when you click the wrong thing on your iPhone and go somewhere completely different that where you intended? Frustrating. And I’m sure even people with skinny fingers have the same problem. Keep your links nice and big, give them space and don’t put them too close together.

Breathing space

It’s a good rule to follow in your design work anyway, but make sure your content has breathing space even when it’s crammed into a small screen.

Say it quick

As much as possible, keep your content brief and to-the-point. Nuff said.