English articles, Top Tasks

Adapt e-mailings for the small screen – 12 steps

More and more e-mail is being read on tablet and smartphone screens. Less people hold a separate e-mail address for their smartphones – that was more important in the early days and on BlackBerry. Make sure that the e-mailings you distribute – be it newsletters or direct mail – are readable on the smaller screens. 12 points of advice for the better mobile mailing.

1. Width
Adapt the width of the html table to 320 pixels, up to 550 max. On a pc screen, 650 to 750 px gives a good read. Many tablets can handle the latter widths, most smartphones can’t. It’s wise to narrow down. Keep logos and images limited to that width or even less. If you put the table width at 100%, the table adapts to the browser window. That is convenient for small screen devices. However, on the pc screen it can give long text lines and a exaggerated layout. So, don’t.

2. One column
A two or three column layout is a classic for pc screens. Actually, three column is outdated – no one looks at the right hand column. Set up your mailings in one column as from now on. Convenient for all.

3. Larger fonts
Larger fonts are trendy. And convenient. The eyes scan the screen and small fonts make that difficult or impossible. Use 14 pt for text and 22 pt for headings, they work well on small screens. And on the pc.

4. Short, direct, concise
Hopefully, larger fonts will entice you to less text. Less is more, we’ve known that for some time now. It works in ordinary mail, in newsletters, in direct mailings. Sharp texts and headings, concise, direct, to the point, relevant.

5. Top task on top
Don’t make the centre of the screen the middle point. Centre of which screen? Yours? Start with the most important message, right on top. The top task of the newsletter or the direct mail should be clear at once. Put the call-to-action button in the first screen, and repeat it further down in the mail.

6. Big fingers
The bigger the link area, the more likely it is that the tap on the link works from the first time. Put links on buttons or groups of words. Buttons of 50×50 px seem a minimum; 150×60 px is better and you can put two in the same row.

7. A link is a promise
All rules for good links apply for links on small screens. A link is a promise. Make the promise a clear one, and keep the promise.

8. Adapted landing page
Any link from a mobile page or e-mail should land on a page adapted for small screens. Elementary, dear Watson.

9. Text rather than image
Many mail clients on smartphones block images. Hence, it’s better to make a button in html (small table with text and background) rather than an image.

10. Limit the navigation
Avoid navigation bars with more than three choices, for the sake of clarity and directness as well as for big fingers. In case you really want to draw hurds to your website, choose the three most relevant navigation links and offer them all other choices when they are on the website. If you can’t work it out, call the third choice ‘More…’.

11. Clear colour contrasts
No gray text on white background (never ever – also valid for websites). Choose colour combinations with strong contrast. Take into account that smartphone owners may not turn screen lighting to full force, in order to have longer battery time.

12. Test, test, test
Test how your e-mailing looks on the different operating systems Apple, Android, Windows 8, Blackberry, to begin with. Test for tablets and for smartphones. En keep testing for good links, buttons, text, etc.


About Toon Lowette

Customer is not king on the internet, he is dictator. Online services are successful if they allow the customer to do what he came for efficiently and without confusion. Toon Lowette is online publishing consultant in the Customer Carewords network of Gerry McGovern. Task management is the central issue. We teach websites to manage the task, not the content, not the technology. We teach websites to become relentlessly customer centric.


One thought on “Adapt e-mailings for the small screen – 12 steps

  1. It’s a pity you don’t have a donate button! I’d certainly donate to this brilliant blog! I guess for now i’ll
    settle for book-marking and adding your RSS feed to my Google account.
    I look forward to fresh updates and will share this blog with my Facebook group.
    Talk soon!

    Posted by ralph lauren polo sale | 21 May 2013, 20:49

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Geef uw e-mailadres om deze blog te volgen en e-mail te krijgen als nieuwe artikels worden gepubliceerd.

Toon on Twitter

%d bloggers like this: