Usage is changing in terms of the use of mobile technologies. This is why it is becoming urgent to adapt in order not to let the train pass. This article presents 19 points to which it is necessary to pay a particular attention in order to be read in the best conditions on the smartphones and others shelves.
This checklist was originally developed for WDM Belgium and Yento!
These are considerations mainly techniquesbut it is obvious that from a marketing perspective there are also adaptations to be made.
The subject and the preheader
1. Make sure that the main purpose of your email is clear by reading only the First 25 letters the subject of your email.
2. There is no problem with having a long topic, but you need to organize content by importance.
3. It is important to have a call to action linked to your landing page directly in the preheader your email. See the example below:
4. Don't forget the classic phrase of any preheader This email is not displayed? Click here (or something similar)
The text version
5. A text version is essential ! Older mobile email clients don't understand html.
6. Try to reuse the content of the html version.
7. Cut the lines after 30 characters.
Design Tips
8. Think touch screen! Use large buttons (44px x 44px is the minimum size for a touch button)
9. Use background colors to identify the different sections instead of image separators.
10. Make sure your email is readable without the images displayed.
11. Try to create designs on single column. If this is not possible, try placing the main column on the left and the secondary column on the right.
The html code
Need help?
Reading content isn't everything. The best way is to talk to us.
12. Do not use no nested tables.
13. Use the css tag @media to adapt your design on mobile devices. Example:
@media only screen and (max-device-width: 480px) {
.hideinmobile { display: none !important; }
.table, .cell, .headerimg { width: 300px !important; }
}Using @media, you can change widths, change margins, hide content and much more.
14. Add a class to all elements that you want adapt (tables, cells, images, ...)
15. Turn off the automatic font resizing of webkit using "-webkit-text-size-adjust:none;"
16. Don't forget the alt tags !
17. Hide secondary content on the mobile version (using a specific class)
18. Try to reduce weight of your material to 20 kb maximum
Other comments
19. Don't forget toadapt your landing page.
Resources
General
- https://web.archive.org/web/20120629163629/http://www.lyris.com:80/resources/email-marketing/articles/mobile-email-marketing-tips (more functional)
- https://web.archive.org/web/20150923002847/https://blog.aweber.com/email-marketing/mobile-email-design-tips.htm (more functional)
- 10 frequent misfires when designing emails for touch
Subject and preheader
- https://web.archive.org/web/20160414123704/http://www.email-marketing-reports.com/iland/2010/05/are-you-insulting-readers-subject-line-lessons-from-gmail-yahoo-and-hotmail.html (more functional)
- https://web.archive.org/web/20130203054141/http://emailresourcecenter.net:80/blog/2011/05/04/better-preheaders-six-ideas-to-consider/ (more functional)
Leave a Reply