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/

Les musts de la Collection – livraison gratuite à partir de 50€!

Deux concepts distincts, avec un call-to-action toujours très fort : la livraison gratuite.

Malheureusement, le corps de l’email (graphiquement très beau) ne contient aucun rappel de cette livraison [...]]]> Cette semaine, on commence par une très belle subjectline de la part de Mexx :

Les musts de la Collection – livraison gratuite à partir de 50€!

Deux concepts distincts, avec un call-to-action toujours très fort : la livraison gratuite.

Malheureusement, le corps de l’email (graphiquement très beau) ne contient aucun rappel de cette livraison gratuite à partir de 50 €. Cela aurait pourtant été un appel au clic très fort.

Un AB Testing pour valider tout ça ?

Tout d’abord, il est impossible de créer une newsletter comme [...]]]> Le création d’un emailing n’est pas aussi simple qu’il n’y parait. Si il est facile pour n’importe quel webdesigner ou webmaster de créer le design et le code html d’un email, est-ce que celui-ci sera vraiment optimal ?

HTML : plein de limitations

Tout d’abord, il est impossible de créer une newsletter comme on développerait une page web. Les clients mail et les webmails ont beaucoup de limitations avec lesquelles il faut jongler pour espérer qu’un maximum de personnes puissent visualiser l’e-mail correctement.

Voici quelques exemples de limitation dans l’utilisation de l’html dans un emailing :

• Impossible d’utiliser une feuille de style externe dans la pluspart des clients mail
• Pas de background-image dans Hotmail, Outlook 2007/2010, Gmail ou Lotus Note
• Une interprétation … exotique des standards par Outlook 2007/2010
• La quasi obligation d’utiliser des tableaux au lieu d’utiliser la balise DIV pour placer les différents éléments
• … et bien d’autres encore

Delivrabilité : plein de précautions

Lorsque vous créez une page web, il faut veiller à ce qu’elle soit compatible avec tous les navigateurs du marché. Lorsque vous envoyez une campagne e-mail marketing, il faut vous assurer non seulement qu’elle s’affiche correctement chez votre abonné, mais surtout qu’elle arrive à destination.

Et c’est aussi lors de la création de votre emailing que vous devez optimiser celui-ci pour qu’il ne soit pas bloqué par les différents filtres mis en place par les fournisseurs d’accès et les webmails.

Voici quelques éléments parmi d’autres à prendre en compte :

• Éviter certains mots clefs dans vos emailings
• Avoir une bonne balance entre le texte et les images de vos créations
• Bien nommer les chemins des URL’s de vos images dans vos emails et newsletters
• .. et bien d’autres encore

Ergonomie : plein de pistes

Le but de la plupart des campagnes d’emailing est de pousser l’internaute à une action. Pour qu’il achète un produit, pour qu’il s’inscrive sur un site, il faudra l’orienter vers votre objectif.

Pour orienter l’abonné dans votre emailing, il faudra structurer celui-ci de la manière la plus efficace possible.

Par exemple, voici quelques questions que vous devez vous poser :

• Où placer mon Call-to-action dans l’e-mail ?
• Est-ce qu’il faut d’avantage illustrer ou expliquer ?
• Lors de la création de la newsletter, faut-il mettre en dessous, au dessus, à gauche ou à droite du texte ?
• Que tester si vous faites des tests multivariés ou des tests AB dans vos emailings ?
• .. et bien d’autres encore

Conclusion

On le voit la création d’un email est une discipline différente de la création web classique, d’autres éléments entrent en ligne de compte. C’est pourquoi il est important de bien s’entourer pour réussir les défis d’une communication email efficace.

Dans son mailing, Afer propose dix dates pour essayer de rencontrer [...]]]> Afer Europe (Association Francaise d’Epargne et de Retraite) est un groupement d’épargnant spécialisé dans l’Assurance Vie. Afer est principalement présente en France, mais aussi en Belgique. C’est à une de ses campagne Email Marketing en Belgique que nous allons nous intéresser.

Le contexte

Dans son mailing, Afer propose dix dates pour essayer de rencontrer des clients potentiels. C’est le but principal de l’e-mail, attirer les plus de personnes possible vers ses réunions.

Avec quels moyens

En guise d’ouverture, voyons la subjectline : « AFER EUROPE se déplace dans votre région! »

Il n’est pas mauvaise le sujet de l’email, il est court et direct ce qui est en général de bon augure. Par contre, il est dommage d’avoir mis le nom de la société dans la subjectline alors que celui-ci était déjà présent de le From. Cela aurait été l’occasion d’introduire un peu plus le sujet du mail en utilisant par exemple « Notre épargne se déplace dans votre région ».

Encore plus intéressant, en connaissant le lieu de résidence des destinataires, il aurait été possible d’inclure directement dans la subjectline le lieu de réunion le plus proche. Par exemple : « Notre épargne se déplace à Liège ». Ce qui aurait pu avoir un grand impact sur le taux d’ouverture de l’emailing.

Intéressons nous maintenant au contenu de la newsletter.

Première remarque, du texte ! Mis à part le logo situé tout en haut de l’e-mail, il n’y a que du texte. Mais heureusement, celui est rédigé de manière très claire.

Seconde remarque, pas de lien ni de call-to-action ! Il n’est pas possible de cliquer sur le logo et un seul lien mène à la page d’accueil d’Afer Europe, et celui-ci est présent dans le pied du mail. Le texte de l’e-mail invite à téléphoner ou à envoyer un email pour obtenir plus de renseignement. Mais il aurait sans doute été préférable d’ajouter un bouton dans l’email pointant vers une page regroupant plus d’information ainsi qu’un formulaire de contact.

On peut aussi pointer l’utilisation de la police de caractère Comic Sans MS qui est loin de faire l’unanimité et qui n’a pas non plus un look très pro !

Au rayon des choses manquantes, on peut citer l’absence d’un lien dans l’en-tête du mail vers une version web de la newsletter. On pourrait aussi parler de l’absence de version texte de l’email (pas de multipart), du fait que le logo soit en pièce jointe et non hébergé sur une serveur web.  Pas de SPF (Sender Policy Framework). Pas de personnalisation. Etc …

Conclusion

Il s’agit certainement d’une première approche de l’email marketing par Afer Europe. L’association (entreprise ?) aurait sans doute gagné à être mieux entourée. Elle aurait notamment pu demander des conseils à son routeur (qui est Sarbacane) ou à une agence spécialisée.

À moins de demander aux participants de ses réunions, Afer Europe aura sans doute du mal à mesure l’efficacité de sa campagne Email Marketing vu que les internautes n’ont pas été redirigés vers sont site internet. Pas de taux de clic en vue donc.

Rendez-vous au prochain mailing pour voir s’il y a de l’amélioration !

Ici, le but de l’email est d’obtenir un certain nombre de réponses à une enquête en ligne. Le profil recherché pour les répondants est stricte. Par [...]]]> L’e-mail marketing est un monde de brutes. Tous les acteurs se battent pour attirer l’attention des consommateurs. Parfois, des recettes simples permettent d’obtenir de très bon résultats.

Le contexte

Ici, le but de l’email est d’obtenir un certain nombre de réponses à une enquête en ligne. Le profil recherché pour les répondants est stricte. Par chance, le client laisse carte blanche pour arriver à ce résultat !

Avec quels moyens

Pour commencer, pas de base de donnée email du côté du client. Le choix se porte donc sur Permesso.be (plus d’infos « corporates » en cliquant ici) qui offre l’immense avantage d’avoir des critères de sélection extrêmement précis.

Le client ne désire pas que son nom apparaisse dans l’enquête et dans l’email. Le look sera donc neutre (et presque aux couleurs de Kunfluo).

Pour attirer les internautes, un concours est organisé. Avec un prix simple, un repas pour deux personnes au resto.

Comme subjectline, pas besoin de chercher midi à quatorze heure, il faut être direct et précis : Gagne un resto pour deux

Pour ce qui est du design du mail, là aussi, pas de fioritures.

Une phrase d’accroche simple qui précise la sujet du mail, une image du prix, quelques précisions sur les conditions de participation et surtout un call-to-action imposant qui contraste complètement avec le reste de l’e-mail.

Important aussi, sans image, l’e-mail reste lisible, il est peut-être même plus efficace qu’avec l’image vu que le call-to-action remonte très nettement.

Les résultats

Les performances du mail furent excellentes, voici quelques chiffres :

Un taux d’ouverture de 21%, ce qui est très bon pour un email sur une base tierce, la cible du mail n’ayant jamais été en contact avec l’organisateur de l’enquête auparavant. De plus, les critères de sélection étaient très ciblés.

Un taux de clic sur l’ouvert (CTOR) de 57%. Cet excellent chiffre est certainement dû à la qualité du mailing même sans l’affichage de l’image, mais aussi à la force du call-to-action utilisé.

Enfin, près de 90% des personnes ayant cliqué dans le mail ont répondues à l’enquête.

Conclusions

On a pu le voir, avec un concept simple et avec une créa email peu élaborée, mais efficace sur le plan technique, il est possible d’obtenir des résultats très intéressants.

Le Call-to-action (incitant à l’action en français), c’est une phrase du style « Cliquez-ici » ou « Achetez-maintenant » qui est souvent contenue dans un bouton (mais pas toujours). Nous [...]]]> Dans notre précédent sujet consacré aux images dans les mailings, on a vu que l’un des but de l’emailmarketing était de faire cliquer l’internaute, de l’inciter à l’action.

Le Call-to-action (incitant à l’action en français), c’est une phrase du style « Cliquez-ici » ou « Achetez-maintenant » qui est souvent contenue dans un bouton (mais pas toujours). Nous n’allons pas ici faire un article sur les Call-to-action eux-mêmes, mais plutôt sur leur intégration dans les emails.

Pas de Call-to-Action, pas de chocolat !

À l’heure actuelle, beaucoup de mailings ne possèdent pas de Call-to-Action alors que leur but est de vendre des produits en ligne.

Vente-aglae.com est un site de vente de vêtements. Dans l’un de ses derniers mail, le site vous propose d’utiliser un code de réduction lors de votre prochaine commande … sans incitant à effectuer cette commande. Alors bien évidemment, le mail est cliquable, mais il faut passer la souris au dessus des images pour s’en rendre compte. Un élément graphique tout simple aurait certainement pu faire augmenter le taux de conversion de cet email.

Tape à l’Oeil est lui aussi un site de vente de vêtements, mais cette fois pour enfants. À l’occasion de l’ouverture des soldes, Tape à l’oeil nous envoi un mailing où la seule incitation à l’action est située tout en bas du mailing via la phrase « je préviens mes ami(e)s ! ». Donc, pour le but principal qui est de faire vendre les vêtements en solde, pas de Call-Action. Ici, le focus a certainement été mis sur le fait de produire un email esthétique diffusant un message … sans ternir compte du but ultime de l’action qui est tout de même de vendre.

Des Call-to-Action pas forcément visible du premier coup d’œil

Placer des incitants à l’action dans son email, c’est bien, mais encore faut il que celui-ci soit vu au premier coup d’œil (c’est nettement plus efficace).

La hénin est un spécialiste du crédit immobilier. Dans l’un de ses mailings, le site utilise le très bon incitant à l’action dans le phrase « Je demande mon étude ». Malheureusement, le bouton contenant le CTA est situé plus de 400 pixels en dessous du haut du mail. Il y a donc beaucoup de chance qu’à l’ouverture du mail, une grande partie des internautes ne voie pas le Call to action au premier coup d’œil. Il aurait certainement été plus efficace de placer celui-ci au dessus des bulles. Le contraste entre la couleur du CTA et la couleur de fond de l’email aurait aussi pu être plus important pour bien mettre en avant le bouton.

Les bons plans

Aramis un Call-to-action au top. Avec son incitant à l’action bien identifiable et situé en haut de son email, impossible de ne pas savoir où cliquer !

Médiatis, l’exemple à suivre, un premier CTA en haut du mail (« Faire une simulation ») et un autre en bas (« Cliquez ici »). Le contraste entre la couleur de fond du mail et la couleur du bouton est important. Difficile de passer à côté. Le premier bouton contient un texte (« Faire une simulation ») reprenant le sujet principal du mail en quelques mots, ce qui a un impact bien plus important qu’un traditionnel « Cliquez ici ».

Conclusion

1. Placez des Call-to-Action identifiables dans vos mailings;
2. Placez les de telle manière à ce qu’ils apparaissent sans devoir scroller;
3. Répétez éventuellement le CTA en bas de vos mails si ceux-si sont longs;
4. Créez des boutons ayant un fort contraste avec le couleur de fond de l’email;
5. Si possible réutilisez le sujet principal de votre email dans le texte du call-to-action (pour autant que cela reste court).

Mais une erreur très courante est justement de donner trop de place aux images, jusqu’à oublier que certains clients mails bloquent les images par défaut. Résultat, la première [...]]]> En emailmarketing, un des défis est de donner envie de cliquer à l’internaute. Pour se faire, les emails sont toujours plus beaux, plein de couleurs, d’images, etc.

Mais une erreur très courante est justement de donner trop de place aux images, jusqu’à oublier que certains clients mails bloquent les images par défaut. Résultat, la première chose qui est visible à l’ouverture d’un mail reste le texte html. C’est pourquoi il faut essayer tant que possible de ne pas mettre de texte dans les images lorsque l’on fait de l’emailmarketing.

Voici quelques exemples :

Le PMU vous offre 30 euro, mais pas de contenu dans son email !

Pour commencer, voici ce qu’il ne faut absolument pas faire. Un email avec une seule image qui reprend la totalité du contenu. Sans image affichée, impossible de comprendre le message (mis à par la subjectline). C’est d’autant plus dommage qu’il y a dans l’image plusieurs phrases de texte qui auraient pu être écrites en html.

Gagnez un séjour oenologique en Bourgogne : texte blanc sur fond blanc

Ici, le problème est différent. En créant son email, le designer/developpeur a bien prévu de mettre du texte html dans sa création. Malheureusement, c’était sans compter sur certains détails techniques. En effet, la couleur du texte html utilisée dans cet email est le blanc. Mais comme certains clients email suppriment la couleur de fond des mails, cela donnera dans certains cas du texte invisible (ici chez Gmail). Attention aussi, Outlook 2007 n’accepte plus les images en background.

Factory Lingerie : Un email avec uniquement du texte mais intégré dans une image

D’accord, le texte qui est contenu dans l’image de la newsletter de Factory Lingerie est stylisé, mais il n’en reste pas moins domage que l’on ne puisse pas voir le mondre extrait du contenu sans charger les images. Il y aurait certainement eu moyen de passer une partie du texte directement dans le code html.

Le bon exemple, la fête des pères chez Just For You

Après trois exemples de ce qu’il faut essayer d’éviter, voici une réalisation à prendre en exemple. La totalité du message est visible sans devoir afficher les images. Une fois affichées, ces dernières viennent enrichir le texte sans prendre sans place. Seul bémol, le Call To Action est uniquement visible en affichant les images !

Et pour finir, la newsletter de Chic Dressing, un exemple à suivre

En version texte ou avec les images, la newsletter de Chic Dressing est un excellent exemple d’emailing avec beaucoup de contenu et qui reste lisible sans les images.

Conclusion

On l’a vu, il y a du bon et du moins bon en matière d’utilisation des images dans les emails. Il ne faut jamais perdre de vue qu’il y a deux grands buts en emailmarketing, faire passer un message ou faire cliquer ! Si vous perdez déjà une partie de votre potentiel parce que le message ou le call to action ne sont pas visibles sans images, il y a certainement des améliorations à apporter à vos emails.