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.
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.