How should we Design HTML Emails for Mobile Users?

How should we Design HTML Emails for Mobile Users?

How should we Design HTML Emails for Mobile Users?

Bex Osborn

Marketing Strategist

18 Mar 2011

Mobile email is the hot topic at the moment - it got a lot of discussion at both the EEC and Marketing Sherpa conferences, and hardly a week goes by without a set of blog posts and statistics getting released.

comScore’s November 2010 report highlighted that over 70 million US users access email through a mobile device, and more than half of those do so on a daily basis.

Other sites consistently report around 15-20% of opens being from mobile devices, with 7-10% being from the iPhone.So the fact is that emails are increasingly been opened on mobile devices, and this presents us with a new set of challenges and opportunities.

There’s been various ways to overcome the mobile email challenge, and as technology both in email and on mobile devices has evolved over the last few years, we’ve been able to offer more sophisticated solutions.

In the past, we may have simply added a ‘mobile version’ hosted link, which typically linked to the text version.

This worked at the time, and continues to be a simple solution for those with less budget, but there's much more we can do now.Using some intelligent data analysis, most email service providers can now find out exactly which mobile device a user opens each of our emails on - which means we can build up a nice profile of who’s consistently using a mobile device for every email, who’s using a mixture of mobile and desktop and so on.

Once we have this information, we can then put them into a data group and think about how we can talk to them better.

Case Study:

British Airways British Airways used smartphone optimised email marketing campaigns to promote their suite of mobile apps.

Using analysis of previous email campaigns, we were able to find which users used Blackberries, Android devices and iPhones, and send them an email campaign that was relevant.Mobile rendering concerns meant that specific design and code techniques were used for the mobile-only versions, and the content was tailored, so for example users of Blackberry devices received information about the Blackberry app.

A 'desktop' version was also built and linked from the email, for users who, despite having opened consistently on a mobile device, might this time be opening their email on a desktop.As a result of tailoring the experience for the user's device, the campaign exceeded the client's objectives - resulting in more than 60,000 downloads.

For e-mails targeting iPhone users, open and click-through rates exceeded 50 per cent and 30 per cent respectively.

So we can isolate people that we know view their emails on a mobile device, but what’s in the way of us optimising their experience? The Rendering Challenges There's three key differences between smartphones and desktops - the screen is smaller, interactions are made using a touch screen and the device is more likely to have disruptions connecting to the net.

We need to design to less width - the iPhone, for example is 320px wide.

Whilst the iPhone will zoom out to show the full width of a desktop email, that's not the optimal experience.

Android devices and Blackberries can be a bit more awkward, either displaying the first 300px and allowing the user to scroll across, or mangling the layout to fit the reduced width.

Issues around the touch interface can largely be solved by ensuring call to action buttons are nice and big, and aren't too close to each other.

It's worth considering bumping up the size of any link text, so it's easier for the user to select.

As images may take a long time to download (or not at all for those checking their emails on the tube), we should ensure that the key messaging is included as web text.

It's worth reducing the size and amount of images, especially if they're not integral to the message.

It's also worth noting that some 3G networks will compress images before they're transmitted to the phone, so image quality can end up getting degraded for some users.

The Messaging Challenge As we're already mentioned - there's much less screen-real estate on a mobile device - where there's little chance of a recipient reading your bulky copy on a desktop, there's an even smaller chance on a mobile.

There’s also a few tweaks we need to make to subject lines and pre-headers - most mobile devices will display up to around 40 characters of subject line , but some also display the pre-header text in the inbox.

We have to get the message across succinctly if we're to expect recipients to make any kind of conversion.

The Environmental Challenge Arguably the most important issue for marketers sending campaigns to users of a mobile device, is the context in which the recipient is viewing their email.

The chances are, for example, that if the user is reading an email whilst walking down the street, they're unlikely to then go on and make a complex e-commerce purchase.

So perhaps we should be driving these users to add a product to their wishlist, or to simply add a reminder to re-open the email once they're at home.

We should be thinking about where we're directing our users - does the client have a mobile site to carry on the optimised experience? should we instead be driving people to load or download an app instead?We're starting to see examples of mobile optimised email campaigns that consider and act upon these challenges, providing an experience that is more mobile friendly.

Part of the challenge is also making both parties happy - it's easy to redesign a campaign to work on mobiles to the detriment of the desktop experience.

Perhaps the biggest challenge of all is designing an email experience that is optimised for both mobile and desktop users.

As Senior Creative Designer at e-Dialog London, Elliot Ross has helped develop mobile optimised email marketing campaigns for some of the largest brands in the UK, including British Airways, News International and Skype.




Got a project or want to know more about what we do? Drop us a message here, and we'll get back to you.




Got a project or want to know more about what we do? Drop us a message here, and we'll get back to you.

© 2011-2024 Action Rocket Ltd. All rights reserved.