Cette checklist a été développée [...]]]> 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. 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

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

• http://www.lyris.com/resources/email-marketing/articles/mobile-email-marketing-tips
• http://www.aweber.com/blog/email-marketing/mobile-email-design-tips.htm
• 10 frequent misfires when designing emails for touch: http://stylecampaign.com/blog/?p=113

Sujet et preheader

• http://www.email-marketing-reports.com/iland/2010/05/are-you-insulting-readers-subject-line-lessons-from-gmail-yahoo-and-hotmail.html
• http://emailresourcecenter.net/blog/2011/05/04/better-preheaders-six-ideas-to-consider/

HTML

• http://blog.getresponse.com/how-to-create-mobile-newsletters.html
• http://www.campaignmonitor.com/blog/post/3442/mobile-email-design-in-practice/
• http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/

Et là ! C’est la catastrophe, au premier coup d’œil … sans les images affichées, 21 fois le même ALT-tag placé sur presque toutes les images contenues dans l’e-mail !

Voici à quoi la newsletter aurait pu ressembler sans [...]]]> Cette semaine, nous allons faire un petit tour du propriétaire de la newsletter envoyée par Esprit.

Et là ! C’est la catastrophe, au premier coup d’œil … sans les images affichées, 21 fois le même ALT-tag placé sur presque toutes les images contenues dans l’e-mail !

La newsletter Esprit sans les images

Voici à quoi la newsletter aurait pu ressembler sans les ALT-tags (elle ressemble d’ailleurs sans doute à ça dans certains clients email) :

La newsletter Esprit sans les images ... et sans les ALT-tags

Bon, ok, ce n’est pas sexy pour autant !

On ne le rappellera jamais assez, le ALT-tag sert à afficher du texte alternatif lorsqu’il est impossible d’afficher une image. Mais il faut que celui-ci ait du sens, qu’il décrive l’image qu’il remplace si celle-ci était porteuse de sens.

Voyons maintenant à quoi cette newsletter ressemble avec les images affichées :

La newsletter Esprit avec les images

C’est malheureux ! Il y a plein de texte dans ces images qui aurait pû être transformé en HTML. Cela aurait amélioré le scoring des filtres anti-spam et aurait amélioré la lecture. Pauvre Call-to-action aussi … sans relief et sans soulignement.

A noter aussi, le preheader qui est en anglais alors que la newsletter est en français.

Gros point noir aussi, la version texte qui dit ceci :

Pour vous montrer l'univers ESPRIT et nos collections, il faut des images.
C'est pourquoi nous envoyons notre Newsletter uniquement en format HTML. Si
votre navigateur n'affiche pas les images, cliquez ici: lien

Heeuu, là je suis décontenancé ! C’est vraiment très dynamique comme texte, proche des gens, … mais ça risque de ne pas être apprécié par les filtres anti-spam (le nerf de la guerre).

Une note positive pour terminer : une question de segmentation

Parce qu’il y en a une tout de même dans cette newsletter.

La newsletter Esprit : Question de segmentation

Voici qui est tout de suite beaucoup plus innovant et dans l’air du temps ! Esprit profite de sa newsletter pour tenter une segmentation plus fine se sa cible en posant une question simple mais capitale pour eux : Collections Hommes ou Femmes – à quelle newsletter souhaiteriez-vous vous abonner ?

On verra si cela sera suivi d’une action spécifique !

Voici les cinq manières traduites de l’article original (ce n’est pas une traduction littérale) :