Following on from our post about responsive web design, let’s talk a little about responsive email design. This is about making your emails look good when viewed on a smaller screen, such as a smartphone or tablet.

First of all, why is this important? The trend is for more and more of your subscribers to be opening your emails on their mobile device. A study run by email analytics company Litmus showed that around half of all emails are viewed on a smartphone or tablet, and that 80% of them will delete the email if it doesn’t look good on the small screen. That’s reason enough to make sure your emails don’t look like they went through the blender when read on a mobile device. You’ll notice in the study that Outlook.com is the 6th most popular client on mobile devices, above both Gmail and Yahoo!, which is great news for PogoStick customers since we use this interface for delivering your email!

Quick solution – don’t reinvent the wheel

If you’re short on time or aren’t really interested in understanding the principles of mobile email design, then your best option is to sign-up for a free account with MailChimp and use one of their existing mobile friendly templates. They have a big range of single or multiple column styles to suit your content. Just don’t overload your email – simplicity is key!

Unless you have ready access to a wide range of email clients (e.g. Outlook 2007, 2010, 2013, Gmail or Yahoo!) and devices (BlackBerry, Android, iPhones) then it’s recommended you use their Inbox Inspection tool so you can get snapshots of how your email will look when it hits your subscriber’s inbox.

Code it yourself

The best way to learn how to build responsive email designs is to code it yourself. Roll up your sleeves and get up to your elbows in HTML and CSS (CSS3 – anything less doesn’t support media queries!).

Sometimes a good starting point is to look at some basic templates; MailChimp offer one. Probably one of the key elements you’ll recognise from our study of responsive websites is a media query.

@media only screen and (max-width: 480px) {
#templateColumns {
width:100% !important;
}
.templateColumnContainer {
display:block !important;
width:100% !important;
}
}

Essentially the media query is telling the email software to use these styles when the screen size is 480px or smaller, which covers most mobile devices (in portrait mode). In this example you’ll notice one change with the templateColumnContainer style is that it uses block display and 100% width – this forces a column that was previously sitting side-by-side to snap underneath it, creating a single column flow – much nicer for mobile phones.

Customising the columns

This example assumes the two columns are the same but if you want to modify them (like I did) you’ll need to create some new styles.

.templateColumnContainerright {
width:15%;
min-width:200px;
max-width: 600px;
background-color: #F4F4F4;
}
.templateColumnContainerleft {
max-width: 600px;
width: 80%;
background: #FFFFFF;
padding: 20px 0;
}
/* Mobile styles */
@media only screen and (max-width: 480px) {
.templateColumnContainerright, .templateColumnContainerleft{
display:block !important;
width:100% !important;
}
}

By individualising the templateColumnContainer style I was apply to create a different width for the primary column (on the left) and add a light grey background to the right secondary column.

Designing for Outlook

Unfortunately Microsoft Outlook has a few quirks (deja vu for any web developer who ever designed for IE6) so you may need to apply some Outlook-specific styles.

What issues are you struggling with designing responsive emails?

ps Like infographics? Then check out this handy guide from Litmus.

How to create mobile-friendly email designs
Tagged on:         

Leave a Reply

Your email address will not be published. Required fields are marked *