5 tips for responsive email design

In the battle between desktop and mobile, mobile is winning by a country mile. The world of email marketing is a perfect example of this. According to recent findings, 41 per cent of people now open email on mobile devices and this is expected to surpass the 50 per cent mark by the end of the year.

Despite this, only half of marketers are designing email with mobile in mind, which shows that there is a massive disconnect between the bespoke design and experience that people should be receiving versus the one which they are actually getting.

That is why it is essential to ensure that your email designs are responsive, providing a device specific experience.

Tip 1: Be responsive rather than scalable

Responsive design does not simply mean scalable, whereby the email fits on the device regardless of screen size. Generally speaking, responsive email utilises the @media query to render two different versions of the email: the full version, with all the bells and whistles included and the mobile version. The mobile version can be customised as much as you want – images can be removed, buttons can be resized and colours can be changed. While this requires a lot more coding, it is currently the best way to ensure that you treat your mobile readers with the care and attention they deserve.

The good news is, once you have built a template or two that you are happy with, you can rinse and repeat in future projects, saving yourself a bunch of time.

Tip 2: Reverse your design process

Most marketers and designers create their email campaigns by making the ‘main version’ first and then creating the mobile version as an afterthought. As the statistics above show, the main version should be the mobile version and so the whole design process should be reversed – mobile first.

Start by creating two wire frames or sketches of the design – one for email and one then one for standard web. Pay special attention to the message of your email. Never before has it been more important to convey information in an acute fashion. Make sure that all the important elements of the email are contained in the top half. More importantly, make sure that any calls to action can be seen without scrolling.

Keep an eye on non-engaged users

Some users have an active, accurate address yet they still won’t open your email. What’s worse is they won’t even opt-out of your service; the only purpose they serve is to drag down your figures.

There’s no financial loss associated with keeping these contacts on your list, though ISPs use these types of readings to grade you as a sender. Perhaps the best way to avoid the spam tag in this case is to simply reduce the amount of messages you send to these addresses. Keep a note of them and if their reading rates pick up, upgrade them to normal service.

Tip 3: Don’t sweat the small stuff

As Abe Lincoln once said: “you can please some of the people all of the time, you can please all of the people some of the time, but you can’t please all of the people all of the time” and this couldn’t be more true in email design. The media query used to build responsive designs does not work on all mail clients, for example the Gmail mobile client. However, you have to see the bigger picture – if 90 per cent of your readers get the fully optimised version of your content, you are going to do a lot better than 100 per cent of them getting something that is not responding to their needs.

Generally speaking, it is safe to assume that there will be a 50/50 split between Android users and Apple (iOS) users. Cater your emails to these two operating systems and you should be just fine. It is a good idea to get an emulator to ensure maximum cross-compatibility on devices. Also, nothing beats seeing the final email on real hardware but you shouldn’t have to look too far to find an iPhone or a Galaxy!

Don’t lose too much sleep if you can’t get your email quite right for what you know will be a small percentage of your readership. If your email doesn’t display correctly on the Palm Treo, it is not the end of the world.

Tip 4: It is all in the design

Of course, the most important tip is that of the design itself. The first thing to realise is that one column is always going to be better than two in mobile.

A few housekeeping tips before things go any further. Layouts should be no wider than 500 to 600 pixels and the minimum font size for an iPhone to display natively is 14 pixels. Anything less and the device will upscale the font, causing deviation from the original design.

Within your CSS, you will want to begin by defining the rules of your mobile version of the email with the following code:

‘@media only screen and (max-device-width: 480px)’

Let’s go through this little snippet and see what we have here. The ‘only screen’ part of the code says that the email has to be on a screen (rather than a device like a printer).

The ‘max-device-width: 480px’ defines the maximum width of the display. Anything less than 480 pixels will be treated as mobile, anything above will be treated as the full desktop version. 480 pixels is the width of the iPhone in landscape mode, however, this value can be changed to cater to different devices. This is a useful piece of code to implement even small changes, such as an amendment to font size depending on the device; in this case, it is going to display an entirely different email.

Tip 5: Monitor your success

Pay close attention to responses following the roll-out of your first few responsive campaigns. It can be a difficult balance to get right, ensuring that there is the correct amount of information contained in the mobile version. Remember, the mobile email is not a watered-down version of your main design now. It should be weighted equally and if you don’t quite get it right you should persevere – because mobile email is now the ‘norm’ and there is no escaping it.