Optimising your Mobile email template design

It’s important to optimise your email template for mobile devices so that your customers have a consistent brand experience, no matter where or how they access your email or website.

Before we run through the necessities, first consider these three points:

1. What percentage of your customer base are reading emails on mobile devices? Find out using reporting tools which should come as part of your email marketing package.

2. Do you have a mobile version of your website? Your user will have a terrible experience if they click through from an email and land on a poor, non-optimised website.

3. Apple Mail, the standard email client for iPhones, loads images automatically. Bear this in mind when looking at which devices have been used to open emails, as they are blocked as standard on other email clients.

So, now you have these points in mind, it’s time to look at how your professional email templates can be optimised for us on mobile devices:

1. Include a ‘View mobile version’ link

This is the easiest way to optimise your website for a mobile device. In the same way that you include a ‘View in browser’ link in the top of your emails, add a ‘View mobile version’ link, or ask your visitors which site they would prefer to view.

Flight and holiday retailer Jet2 use a similar method for their website. Once you land on their site, they will recognise the device is mobile, and a pop up asks if you’d prefer to see the mobile site. You are then taken to the optimised site and the cookies remember your preference for next time.

This won’t work in the same way for emails i.e., the cookies, but it highlights how you can give users a choice.

2. Include a bigger call to action

This is to help us unfortunate people who may have fingers of the chubby variety. Make your call to actions bigger and nearer to the left of the page, this way your user will not have to scroll to the right.

You should also ensure some copy is to the left of the email. This explains to your subscriber what the email is all about before they need to scroll or download any images.

3. Adaptive email

Adaptive design or intelligent CSS controls how the email looks on a mobile device without it affecting how it looks on larger screens. The @media query can reduce the size of the email and will move images that on are on the right to a column underneath. This may not work with larger images, but is worth testing.

4. Send a mobile only version

If you can, try sending a mobile only version of your email. The email will still look great on emails clients and will be perfectly optimised for mobile usage. This may be worth your time if you have a large percentage of contacts that are opening emails on mobile devices.

5. Segment emails based on readers

Target readers by what device they are reading your email on. A good ESP will provide these kinds of reports, so that you can see who has opened the mail on an Android or iOS device. You can then target all your mobile readers specifically. It will also allow you to send iPhone only based subscriptions or promote your Android app to those users.

6. Get feedback from your contacts

Every subscriber is different. Some will want to read email on mobile devices only, and some will prefer to read emails on desktops only. So why not ask them which kind of email they would prefer? Try asking if they want a mobile version of the email or a full version during the sign up profile. You could even make it an option in the preference centre. Test the waters and respond when you have enough answers.

Here are some examples of mobile optimised professional email templates:

This email is from music and games retailer Zavvi. As you can see the mobile version (taken from Apple Mail) is very similar to the desktop version. But both versions of the email are user friendly, and the tabs are easy to use – even with chubby fingers.

This is an example from Smashing Magazine. As you can see the content has been shifted into one long column for easy scrolling. Visually the mobile version isn’t as crisp and eye catching, but the most important part – the content is displayed well.