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. 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.
Need help?
Reading content isn't everything. The best way is to talk to us.
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
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)
9 réponses
Not a bad guideline at all 🙂
However, I don't agree with point 19; I've already used nested tables in desktop, webmail and mobile mail designs, and, according to my own experience, it's still the best thing to use everywhere ;-).
You mean point 12?
War of the chappelle, I admit it 😉
I am of the Frolipon chapel, I find that nested tables resist better than css formatting. Different browsers interpret css so differently when the goal was just a universal standard...
Thomas > I think (I'm even sure) Frolipon knows I don't like css formatting either 😉
The war of chapel is rather nested table against colspan/rowspan well felt (even if I know that nested tables are inevitable in some cases)
I'm a bit surprised by point 13, isn't it bad in terms of deliverability to put css in an email?
Florian : Using CSS in an email is not bad for deliverability. However, you have to be very careful as not all email clients react in the same way to CSS (for example, Gmail does not take into account the content of the "head" tag).
To get an idea of what is and is not acceptable in terms of CSS in an email, I recommend this very good summary from Campaign Monitor : https://www.campaignmonitor.com/css/
Thank you so much, I'll go read it right now 🙂
What if the best solution was to set up adaptive campaigns? In other words, propose a version A for PCs, and a version B for mobiles. This allows you to get a version optimized for each type of terminal. The mobile version consists of a columnar presentation, which avoids having to zoom in to access clickable links, etc. Each version is of course automatically adapted to the terminal when it is opened.
emarsys offers it, more information here: https://emarsys.com/
Mahmoud,
I'm not sure if Emarsys offers this solution (or it's no longer current, because the linked page doesn't talk about that, but about Responsive). Moreover, what you propose would mean that you have to know already the viewing support of your recipient when you send the campaign... How do you do it if it's the first one? Finally, it would also mean that if you receive version B (mobile oriented) on your phone, you will only be able to consult version B if you view it on your PC?