Les usages changent en matière d’utilisation des technologies mobiles. C’est pourquoi il devient urgent de s’adapter pour ne pas laisser le train passer. Cet article présente 19 points auxquels il faut porter une attention particulière afin de pouvoir être lu dans les meilleures conditions sur les smartphones et autres tablettes.
Cette checklist a été développée à la base pour les clients de WDM Belgium et de Yento!
Ce sont des considérations principalement techniques, mais il est évident que d’un point de vue marketing il y a aussi des adaptations à effectuer.
Le sujet et le preheader
1. Assurez-vous que le but principal de votre email soit clair en lisant uniquement le 25 premières lettres du sujet de votre email.
2. Il n’y a pas de problème à avoir un long sujet, mais il faut organiser le contenu par importance.
3. Il est important d’avoir un appel à l’action lié à votre page d’atterrissage directement dans le preheader de votre email. Voir l’exemple ci-dessous :
4. N’oubliez pas non plus la phrase classique de tout preheader : Cet email ne s’affiche pas ? Cliquez-ici (ou quelque chose du même style)
La version texte
5. Une version texte est indispensable ! Les anciens clients email mobiles ne comprennent pas l’html.
6. Essayez de réutiliser le contenu de la version html.
7. Coupez les lignes après 30 caractères.
Conseils de design
8. Pensez écran tactile ! Utilisez de larges boutons (44px x 44px est la taille minimum pour un bouton tactile)
9. Utilisez des couleurs d’arrière plan pour identifier les différentes sections au lieu de séparateurs sous forme d’images.
10. Assurez-vous que votre email soit lisible sans les images affichées.
11. Essayez de créer des designs sur une seule colonne. Si ce n’est pas possible, essayez de placer la colonne principale sur la gauche et la colonne secondaire sur la droite.
Le code html
Besoin d’aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
12. N’utilisez pas de tables imbriquées.
13. Utilisez la balise css @media pour adapter votre design sur les terminaux nomades. Exemple :
@media only screen and (max-device-width: 480px) {
.hideinmobile { display: none !important; }
.table, .cell, .headerimg { width: 300px !important; }
}En utilisant @media, vous pouvez modifier les largeurs, changer les marges, cacher du contenu et bien plus encore.
14. Ajoutez une classe à tous les éléments que vous désirez adapter (tableaux, cellules, images, …)
15. Désactivez le redimensionnement automatique des polices de webkit en utilisant « -webkit-text-size-adjust:none; »
16. N’oubliez pas les balises alt !
17. Cachez les contenus secondaires sur la version mobile (en utilisant une classe spécifique)
18. Tentez de réduire le poids de votre matériel à 20 ko maximum
Autre remarque
19. N’oubliez pas d’adapter votre page d’atterissage.
Ressources
Generalités
- https://web.archive.org/web/20120629163629/http://www.lyris.com:80/resources/email-marketing/articles/mobile-email-marketing-tips (plus fonctionnel)
- https://web.archive.org/web/20150923002847/https://blog.aweber.com/email-marketing/mobile-email-design-tips.htm (plus fonctionnel)
- 10 frequent misfires when designing emails for touch
Sujet et 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 (plus fonctionnel)
- https://web.archive.org/web/20130203054141/http://emailresourcecenter.net:80/blog/2011/05/04/better-preheaders-six-ideas-to-consider/ (plus fonctionnel)
Laisser un commentaire