Mobile email usage is growing at a healthy rate and accessing email is now the #1 activity on mobiles. A few stats to whet the appetite:
- Return Path’s latest mobile study found that nearly 50% of all emails are now read on mobile devices.
- According to Exact Target, 99% of smartphone users access the same email account on mobile and desktop.
- Stats from Litmus (Dec 2013) show that 68% of Gmail and Yahoo! email opens occur on a smartphone.
- According to Yesmail, 30% consumers now read email exclusively on mobile devices.
Source: Litmus
Newsletters that are poorly designed, so they can’t be read effectively on a mobile device, reduce the chance that a customer will make a purchase. Given the importance of the mobile channel to email, it’s critical that digital marketers ensure their campaigns are fully optimised for mobile devices. It’s surprising to find lots of emails still being sent that aren’t using mobile-friendly templates, making for poor usability on mobile devices.
Take the examples below from FAB and The Drum. The emails fit to the width of the email client but the content is clearly optimised for desktop – note the font size and CTAs (plus the header text links from The Drum). For someone like me who is long-sighted, trying to digest the content is impossible, which means the delete button gets some love because a pet hate of mine is the double tap zoom and having to scroll to read content.
In this blog I look at some of the key requirements for providing a high quality mobile UX for email campaigns.
1. Responsive template for mobile devices
Many ESPs like Dotmailer and MailChimp provide responsive templates, enabling mobile ready campaigns to be created without any need for coding.
However, be aware that some email clients strip out CSS styles and media queries, which are required for responsive design to work. This basically negates all the hard work and will result in the original format version being displayed.
One solution is to create separate desktop and mobile versions of the email instead of using a responsive template. The best advice I can give is to weigh up the pros and cons based on the capabilities of your ESP – if you’re not sure, speak to the developers and find out what options you have.
2. Optimised images
If you’re using responsive design, it’s likely you’ll be using responsive images so mobile optimised images will automatically be served on mobile devices.
If not, then it’s essential that you don’t force mobile users to open desktop size images and rely on the browser to re-size. The additional file size will adversely affect load time and every millisecond counts.
It’s also advisable to minimise the number of images in the mobile campaign – images take up space as well as hogging bandwidth.
And don’t forget to add alt tags to all images. If your customer is in an area with a poor 3G connection and the images are taking an eternity to load, the alt tag will at least give them a textual description of what the image represents.
3. Mobile specific UI design
Creating a mobile version of an email doesn’t simply mean reflowing the content to fit into a mobile browser. Touchscreen devices have different UX needs to desktops, for example text links are harder to use than large buttons.
Eyetracking research shows that mobile device users instinctively scroll downward, making the concept of ‘below the fold’ less important. There is some debate whether or not single column design is optimal but the best advice is to test. A key requirement is to ensure font size is suitable to mobile as the standard desktop font size may not be legible enough to provide an excellent user experience.
The design emphasis should be on ease and speed of use – reassure customers by making actions obvious and quick to take.
4. Mobile friendly landing pages
A common mistake I’ve found with newsletters I open on my mobile is a lack of consistency between email design and landing page. Emails that have been optimised to render in mobile browsers don’t always have landing pages that have been fully optimised for mobile visitors.
An example is a site that has mobile friendly landing pages but uses the desktop checkout, which is a UX nightmare for customers and increases exit rate.
This can be a problem when a company has a separate mobile site with a unique URL structure (e.g. brandx.com and m.brandx.com) and the campaign has not been set up to specify the correct mobile versions of the link URLs. The example below is from John Lewis and shows a correct implementation.
I don’t have any hard and fast stats to illustrate the impact of a poor user journey but I know from experience that non-optimised landing pages/user journeys dent conversion rates, reducing ROI.
5. Mobile optimised content
Mobile email is often read ‘on the go’. Do customers using mobile devices have the same needs as those opening on a desktop? It’s an important question to ask when considering whether or not you need to hide some content in the mobile version. The key learning is don’t assume that just because you’re using a responsive template, you don’t need to adapt the content to suit a mobile audience.
A good example is online forms – a standard desktop form is unlikely to work well on mobile devices. It’s hard work trying to click into small fields and enter lots of text information. Mobile forms need to be streamlined to minimise data entry and use larger fields and buttons to make it easy to enter information quickly.
One of the ways to reduce form length is to provide form automation tools such as address validation. An example is Postcode Anywhere’s Capture+ that helps reduce the click path in checkout forms and is supported on desktop and mobile.
Mobile email checklist
Below are the key questions you should be asking yourself when planning an email campaign for mobile devices:
- What are the key mobile devices we need to cater for (based on analytics data from previous campaigns)?
- Do we have a responsive template we can use or do we need to create one?
- How does messaging and content need to be adapted to suit the needs of mobile users?
- Do we need to differentiate messaging and content at device level (e.g. different campaign versions for iPhone and Android)?
- Are calls to action touchscreen friendly?
- Are landing pages mobile friendly?
- Are core user journeys on the destination website mobile friendly?
- Have we used mobile optimised images to minimise download time?
- Have we added alt-tags to the images?
- Have we planned in the additional resource to create the campaign versions for mobile devices?
- Is our HTML code compatible with the major email clients (often this is covered by the ESP)?
- Are we using media queries to cater for problems caused by orientation on mobile devices (e.g. switching from portrait to landscape)?
- Have we tested the campaign across all key email clients?
Comments and questions
What do you think? Please drop by and share your comments, questions and experience. Please also share any relevant links you think readers would be interested in.
Follow-up reading
Litmus has a useful top 10 list for email client share, updated monthly.
Dotmailer has written a useful guide to mobile email marketing.
Pure360 has a similar guide on mobile optimisation for email, with useful device usage data by sector.
And MailChimp has also written a guide to email on mobile devices based on research it did through its own contacts (although its slightly older).
Reading the guides from the various ESPs will give you a balanced view of the key considerations for mobile email marketing.