Concevoir des e-mails réactifs
Pour commencer
Par Campaign Monitor
Dans ce guide, nous allons voir pourquoi faire du design pour mobile est devenu une compétence nécessaire pour les designers d’e-mail, traiter les bases de la conception et de la construction d’un e-mail adapté aux terminaux mobiles et terminer avec quelques bons conseils et techniques. Nous partons du principe que vous connaissez le HTML pour les e-mails, mais si ce n’est pas le cas, nous avons également quelques excellents guides pour que vous vous lanciez.
Pourquoi optimiser vos e-mails pour mobile ?
Si vous envoyez des newsletters par e-mail, un nombre croissant de vos abonnés consulte probablement vos messages sur un iPhone, une tablette ou l’équivalent. Lors de notre dernière enquête de popularité sur les clients de messagerie en 2011, nous avons constaté que près de 20% des e-mails étaient ouverts sur mobile, ce qui représente une spectaculaire augmentation par rapport aux 4% du marché relevés dans les chiffres de 2009. Les appareils iOS représentaient 90% des affichages.
Pour les designers, cela signifie qu’il est tout aussi important que votre e-mail s’affiche de manière optimale sur mobile que dans les clients de messagerie historiques tels qu’Outlook et Gmail. De fait, l’utilisation de clients de messagerie mobile remplacera bientôt les clients e-mails en ligne et de bureau, ce qui signifie que fournir une expérience de lecture non optimale sur petit écran peut gêner non plus seulement quelques destinataires, mais au final la majeure partie de votre cible. Cela pourrait nuire au taux de réponse, ou comme le résumait Return Path dans un récent rapport :
« …ceux qui n’évaluent pas sur quel périphérique leurs abonnés lisent leurs e-mails, ou qui n’optimisent pas leurs e-mails ou sites web pour les périphériques mobiles risquent d’en pâtir. Une mauvaise expérience utilisateur pourrait signifier aucune réponse, aucune action, autrement dit, aucun retour sur investissement ; »
« e-mail in Motion: How Mobile is Leading the e-mail Revolution », Return Path, 2011
Nous verrons dans ce guide comment améliorer l’expérience e-mail sur mobile, de l’utilisation des requêtes de média lors de la construction de mises en page réactives à des techniques plus avancées. Nous aborderons également la conception des newsletters et comment adapter vos formulaires d’inscription pour les utilisateurs de smartphones.
Pour quels périphériques mobiles pouvez-vous concevoir ?
Tout d’abord une petite mise en garde – les techniques ci-dessous ne sont pas prises en charge par tous les clients de messagerie mobile. Comme vous le savez peut-être, les clients de messagerie ne sont pas tous égaux (et différents clients sur un même appareil n’ont pas le même rendu), c’est pourquoi l’affichage d’un e-mail peut varier radicalement d’une boîte de réception à une autre. Par exemple, alors que le client de messagerie Android que l’on retrouve sur le Google Nexus est célèbre pour son excellente compréhension des CSS, le client Gmail également fourni avec cet appareil ignore les styles en ligne et n’est pas fichu d’interpréter correctement plusieurs des propriétés CSS2 les plus couramment utilisées.
Heureusement, une forte proportion d’e-mails est lue sur l’iPhone et autres appareils Apple, qui affichent les e-mails pratiquement sans poser de problèmes.
En gardant cela à l’esprit, voici une liste non exhaustive de clients de messagerie mobile et de leur support des requêtes de média (en anglais, media query). Pour faire court, le support des requêtes de média vous permet d’utiliser de nombreuses techniques réactives (en anglais, responsive) que nous allons aborder dans ce guide.
Clients de messagerie par défaut
| Client | Support des requêtes de média |
| Amazon Kindle Fire | Yes |
| Amazon Kindle Fire HD | Yes |
| Android 2.1 Eclair | No |
| Android 2.2+ | Yes |
| Apple iPhone | Yes |
| Apple iPad | Yes |
| Apple iPod Touch | Yes |
| BlackBerry OS 5 | No |
| BlackBerry OS 6+ | Yes |
| BlackBerry Playbook | Yes |
| Microsoft Windows Mobile 6.1 | No |
| Microsoft Windows Phone 7 | No |
| Microsoft Windows Phone 7.5 | Yes |
| Microsoft Windows Phone 8 | No |
| Microsoft Surface | No |
| Palm Web OS 4.5 | Yes |
Clients de messagerie tiers
| Client | Support des requêtes de média |
| Microsoft Outlook Exchange 3rd party app (Android) | No |
| Gmail mobile app (all platforms) | No |
| Yahoo ! Mail mobile app (all platforms) | No |
Nous tenons à remercier chaleureusement Style Campaign qui nous aide à tester une grande partie des appareils ci-dessus. Lisez leur blog si vous vous intéressez à la conception d’e-mails pour mobile.
« Concevoir des e-mails réactifs » est une série de huit articles :
http://www.campaignmonitor.com/guides/mobile/