The web is going mobile, and so are emails. One in three in the UK says they access mobile email more than ever, and over half do so via a smartphone. 

Right now about 30% of all email checks are done from phones and tablets, and the usage grew by some 80% during 2011.

Following on from my previous post on email marketing, I'll look at some best practices for mobile email design...

Reading versus scanning

This makes sense. Typically, web pages are browsed and read, while emails are checked and skimmed, easy to do while out and about. It also means that, if a majority of your target audience is assumed to use modern phones, your emails should possibly be designed primarily for the mobile market.

This switch is changing user behaviour, and estimates point to a growing importance of careful design. Surveys suggest that 40% of European mobile phone users close or delete email not optimised for their devices.

eDialog reports that around 80% of all users find it harder to read email on their phones and sums up the biggest complaints:

  • Having to scroll to read all information (15%),
  • A surplus of textual content (9%),
  • Images rendering badly or not at all (8%)

Same old, some new

Many tried-and-tested tips for email design apply to all devices. Here is a quick recap:

  • Design for small viewports – the average window is small.
  • Reserve the top for CTAs and important content – put mastheads and banners elsewhere.
  • Logotypes are important – but not crucial, so don’t put them in the header.
  • Go easy on images – and don’t use them for critical links or content as they can fail to load.
  • Alt-texts are vital – they prevent confusion and support disabled users. However, not all email clients display Alt-texts, so think thrice before using images.
  • Social media links do no harm – just keep them out of the way for more important CTAs.

Honey, someone shrank the screens

Going back to the first point in the above list, the importance of planning for small windows cannot be stressed enough: On a desktop/laptop screen, the average height of an email client viewport is less-than-impressive 86 pixels.

On mobile devices such as phones (we’ll leave tablets aside for now), this average area can in fact be more – but there are other factors to consider:

  • Actual screen size – top-notch resolutions means screens the size of postage stamps are better, but not bigger. 
  • Eye-to screen distance – some don’t mind pressing their phones to their faces while ambling down the street, but the majority of us prefer to see where we are going and hold our phones accordingly.
  • User and native settings – for the above reasons, some force large font sizes in their software, which can leave otherwise tidy layouts in disorder.
  • Standards support – the CSS support of the Gmail app for Android is notoriously unreliable, and there are more shaky mobile email clients out there.

An audience on their feet

In my last blog post, I compared some email clients to grouchy dinner hosts who don’t hesitate to give badly formatted emails an earful. This may be unjust to irritable hosts in general, but to stick with the analogy, think of mobile email clients as just as bad-tempered and rushed.

Marketing on the web has always been about grabbing a visitor’s attention. On a homepage, there are many ways to do this: Rouse people’s curiosity or use humour (or both, for a legendary campaign). Of course, you can also be smart or simply plain weird.

But websites are thankful for these kinds of campaigns: People linger on pages while they glance at their inbox. And even if the average web user doesn’t stay long on a given page, mobile users tend to be even less patient:

(Source: webperformancetoday)

Another important factor does not concern the make or model a device, but the location of the user. Those who check their inboxes on smartphones are often on the move – either physically or mentally (eg glancing at the phone while juggling projects on the screen.) This means they are surrounded by distractions competing with your brilliant copy.

Steps for better results

Building on the points made earlier in this post, here are a few additional ways to optimize your emails, wherever and whatever a user’s location or device:

  • Make sure to include a plain text version. Including a plain text version with every HTML email you send, you offer an alternative. This is crucial for old mobile phones and makes life easier for disabled users.
  • Summarise the contents in the subject line. Use this space to give recipients the gist of your message. Make the subject interesting to sidestep the click-to-archive reflex. Intrigue, entertain, surprise.
  • The copy has it. Putting key messages and links in the top of the email has never been more important. Make sure the writing is sharp and concise. Simple and quick tweaks, such as editing a few lines of the content, can make a difference.
  • Don’t crowd your links. Give the user space to tap. Using a menu should not resemble a round of darts.

Simplicity is a good place to be

There are ways to design emails that are rich in content and style, however not without cost. Making your carefully crafted code render properly on the plethora of devices in the wild takes time, patience, resources and testing – and it can still go wrong.

Campaignmonitor offers an insight into how they put together a sophisticated email template, but the development took much effort and tweaking (and going by the comments, the template isn’t bulletproof despite tests and workarounds).

This approach might be interesting to those who feel it is necessary to send highly polished content to a recipient’s inbox, but the first question should be: Does a link to a web page work almost as well?

And there are also unavoidable obstacles, such as poor connections and small screens, which no fix in the world can overcome.

So I use only plain text and dashing copy. Problem solved?

As often is the case in marketing and design in general, there are no be-all and end-all solution to emails for mobile phones. The ideal approach depends on the content, and sometimes, elaborate and content-rich emails are necessary.

For example, extensive newsletters and job advertisements, often supplemented by short snippets of information and links to several external websites, can be convenient to read in the client.

So there are occasions when elegant and fact-filled emails are absolutely needed.

Here are four ideas on how to improve these:

1. Use fluid layouts that adjust to any viewport 

Just as fluid layouts are becoming all the rage for web design in general (and rightly so), they work well for mobile email design.

A year ago, there were over 500 screen sizes on android alone, and they aren’t getting fewer. But test fluid layouts thoroughly – for example, some clients can stretch texts to unreadable line lengths – and tread carefully around CSS.

2. Use one-column layouts

This can help to avoid disastrous results when the user zooms or scales up texts.

3. Identify and leave out troublesome CSS 

Test, test and test again to be certain your CSS don’t wreak havoc with apps or clients.

4. (Lessen the) Great Expectations 

Not so much a technical tip as a psychological, but still: Lower your demands and focus on the essential components, and you’ll be spared from much headache. The web and its standards are in turmoil but new opportunities emerge from the confusion.

Embrace the chaos, concentrate on the core aspects of email marketing, and keep your recipients happy. 

Erik Boman

Published 28 September, 2012 by Erik Boman

Erik Borman is a Designer at Obergine and a contributor to Econsultancy. 

3 more posts from this author

You might be interested in

Comments (12)

Save or Cancel
Anna Lewis

Anna Lewis, Google Analytics Analyst at Koozai

Great tips, thanks Erik. I'd also add that it's good to back up the email with some text message marketing by sending a special offer or similar. It's quicker and more surefire way of getting the look right as you don't have to worry about design!

Information on what people do and don't like on text marketing in this post:

almost 6 years ago


Carl Ross

Excellent overview. All of the uncertainty makes continuous A/B testing of subject lines and offers all the more critical to success. And, as you say, insightful creative writing.

almost 6 years ago


Dean Marsden, Digital Marketing Executive at Koozai Ltd

I love it when I get a well displayed and interesting email on my mobile device. If it isn't attractive, easy to read or not grabbing my attention it gets deleted straight away.

I would have to agree that with the huge array of different device types and screen sizes then building and email template with responsive design is critical for mobile users.

Email marketing has had a bit of a regeneration recently and keeping up with how users view emails is so important. Agree with every one of the useful points in this post. Thanks Erik

almost 6 years ago


Frank Rhodes

Great article. I have been trying to get a good mobile email design for months, because it really does make a difference when people open them.

almost 6 years ago


Remy Bergsma

No talks about actual subject line length or media queries? Nothing about mobile-optimized landing pages?

This article is a nice start, but is really missing some essential points :)

almost 6 years ago


Erik Boman

@Remy: You're quite right - getting the landing page (for mobile devices) right is crucial, and I should have elaborated on that.

As for subject line length, I suggest 40 characters or less, unless the email is for an audience that is highly defined and targeted.

Does anyone have any other recommendations?

almost 6 years ago


David Wilson

Excellent information...i really enjoyed your blog...thanks for sharing this vital information..!!

almost 6 years ago


Meghan Murray

excellent insights, thanks

almost 6 years ago


Randy Everett

Erik, I like your stats, graphics, tips and four ideas to improve an email. As an additional resource for your readers, here a 7 more tips to consider when they're designing a mobile-friendly email template...

almost 6 years ago


Rebecca Wey

Emails are being read more and more on mobile devices, I personally read most of mine on my Samsung S3. There is absolutely nothing worse that receiving an email which is not optimised for mobile use. Even if it a company I am interested in, I will delete it, without hesitation. Most users do not have time to mess about with their emails, mobile openers need fast, easy to read messages, which gets the point accross and the call to action in as quick a time as possible.

over 5 years ago


Torbjørn Hansen

Great article on a very important issue. Thanks for plenty of good advises.

over 5 years ago


Khurram Ali, CEO at

Great article Erik! Looking forward to more in depth articles from you:)

over 3 years ago

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.