Ce qui plait le plus dans cette newsletter, c’est la lisibilité de celle-ci lorsque les [...]]]> Parce qu’il n’y a pas que les mauvais exemple qui font grandir, voici un exemple d’emailing proche de la perfection (il y a tout de même une grosse imperfection au tableau). C’est une newsletter du site d’e-commerce Shoes.com.

Ce qui plait le plus dans cette newsletter, c’est la lisibilité de celle-ci lorsque les images ne sont pas affichées. C’est vraiment un exemple de la bonne utilisation des balises ALT et du styling. Evidemment, la capture ci-dessous est faite dans Gmail, le résultat n’est sans doute pas aussi bluffant dans Outlook.

Alors qu’à beaucoup de point de vue cette newsletter est exemplaire, un gros point noir vient tout de même entacher le tableau, c’est l’absence totale de version texte de l’email. Autre point négatif, c’est le mauvais ration text/image. Ces deux points sont clairement en défaveur d’une bonne délivrabilité.

Fiche d’identité

Informations génériques sur l’email :

• Subjectline email 1 : Last Day! Extra 25% Off Sale Shoes & Boots During Our Anniversary Sale
  
• From : Shoes.com <shoes@email.shoes.com>
• Preheader : Anniversary Sale – Last Day to Save!
• Plateforme de routage : Yesmail

Checklist :

• Lien de vie privée : OK
• Lien de désinscription : OK
• DKIM : OK
• Version texte : KO
• Ratio texte/image : Bof
• List-unsubscribe : OK
• Friendly reply : OK

Capture d’écran de la newsletter

From : Ma vie en couleurs et Alsa <news@news.mavieencouleurs.fr>

Le pourquoi du Bad :

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/

Votre œil de Lynx aura sans doute détecté une autre erreur, et c’est dans le sujet de l’email qu’il faut la trouver :

Découvrez quelle célébrité partage vos goûts [...]]]> Gagner une année de cinéma gratuit, c’est tentant ! Mais pour ça il faudrait encore pouvoir cliquer sur le lien de participation au concours :

L'email sans les images affichées

Votre œil de Lynx aura sans doute détecté une autre erreur, et c’est dans le sujet de l’email qu’il faut la trouver :

Découvrez quelle célébrité partage vos goûts cinématographiques et remportez 1 un de cinéma gratuit

Pas de chance, il va falloir être plus attentif lors de tests ! Bon, d’accord, il ne manque qu’une seule lettre …

Pour pousser le vice un peu plus loin, cette subjectline n’est pas très bien balancée, l’incitant principal est placé à la fin, voici qui aurait sans doute été mieux : 1 an de cinéma gratuit en découvrant quelle célébrité partage vos goûts cinématographiques.

Pas terrible non plus cette version texte dans laquelle on trouve du code html :

La version texte de l'Email

Avec les images affichées, voilà un call-to-action qui gagnerait à être placé plus haut dans le design de l’email. On ne peut pas non plus dire que le preheader soit particulièrement optimisé.

L'email avec avec les images affichées

Merci à @chacsam pour ce Badsender de la semaine.

Essayez : Deux campagnes d’emails offertes !

Il faut au moins respecter quelques règles de base de l’email marketing … ou alors il faut vraiment prendre les gens pour des c**s !

Voici ce que donne l’email sans les images [...]]]> Brrrr, ça fait froid dans le dos. Quand on a une subjectline comme celle-là :

Essayez : Deux campagnes d’emails offertes !

Il faut au moins respecter quelques règles de base de l’email marketing … ou alors il faut vraiment prendre les gens pour des c**s !

Voici ce que donne l’email sans les images affichées : C’est un peu léger

La version sans images

Très beau aussi, c’est la phrase qui a été placée dans la version texte de l’email: Ah ben oui, évidemment, on n’y avait pas du tout pensé …

La version texte

Et le clou du spectacle, le design de l’email, son message … de grands professionnels de l’email marketing :

Avec les images affichées

Notez le lien de désinscription qui est lui aussi 100% en image, extrêmement classe !

L’expéditeur de l’email est simple [...]]]> Une newsletter envoyée par Thalys la semaine passée a attiré mon attention. Si elle m’a interpellée, c’est à cause du design … suspect dans Gmail. En allant un peu plus loin, il y a beaucoup à dire. Voici donc une rapide analyse (forcément incomplète) de cet emailing.

Identification de l’expéditeur

L’expéditeur de l’email est simple à identifier, l’alias du From est simplement « Thalys« . Par contre, l’adresse email qui se cache derrière ce From est malheureusement noreply@thalys.com, tout comme l’adresse email du champ Reply-to.  Vous savez ce que Kunfluo pense des adresses email no-reply. C’est d’autant plus dommage, que sur le site de Thalys, il y a un formulaire de contact qui est disponible, et donc une équipe prête à recevoir les messages des consommateurs.

Un affichage qui ne pouvait pas être idéal !

Comme on peut le voir dans la capture d’écran ci-dessus prise dans Gmail. Cette newsletter de Thalys souffre de quelques problèmes d’affichage.

Ceux-ci sont le résultat de mauvaises pratiques en matière de création d’emailing :

Utilisation de style CSS dans le header html de l’email

C’est à cause de cela qu’il y a une bordure bleue autour du lien « En savoir plus … » et qu’il y a des lignes blanches qui coupent les images. Il faut savoir que certains Webmails/Clients mails ne tiennent pas du tout compte de ces header html, mais il est tout à fait possible de contourner ce manque. C’est donc une pratique à proscrire absolument.

Du texte dans les images

Ici, on est en présence d’une pratique très répandue, mais qui nuit énormément à la lecture et à la délivrabilité des campagnes email marketing.

À la lecture, parce que certains webmails/clients mails cachent les images par défaut, il faut donc une action supplémentaire de l’internaute pour que celui-ci puisse lire le message principal de l’email.

À la délivrabilité, parce que les emails dont la surface contient plus de 50% d’image ont plus de chance d’être considérés comme des spams.

Pas de version texte

Si créer des version texte aux emails peut paraître une pratique d’un autre âge, c’est pourtant encore extrêmement important.

Premièrement, parce que le fait qu’un email soit multipart est important pour les filtres anti-spam. Et ensuite, un certain nombre de clients email mobile affichent par défaut la version texte des emails.

Une réputation … à contrôler !

Ces mauvaises pratiques et certainement d’autres, devraient être corrigées. En effet, selon le site Senderscore.org le taux de délivrabilité de Thalys serait de 32,15% seulement, et même si on peut discuter de la pertinence de ce chiffre, il est interpellant. Le senderscore lui-même est de 79 (vu qu’il évolue rapidemment, ça aura peut-être changé quand vous lirez ces lignes).

Conclusion

Graphiquement, lorsqu’elles s’affichent correctement, les newsletters de Thalys sont très bien réalisées. Malheureusement, le médium email requiert une attention particulière. Et sur ce plan là, il y a du travail. Le taux de réaction des campagnes email de Thalys ne peut qu’en sortir amélioré.