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 Borman is a Designer at Obergine and a guest blogger on Econsultancy.
No hay comentarios:
Publicar un comentario