Concevoir des e-mails réactifs
Pour commencer

Par Campaign Monitor

Si vous lisez régulièrement vos e-mails sur un smartphone, vous savez sans doute que c’est une expérience qui peut virer au cauchemar. Telle newsletter, qui s'affiche pourtant très bien dans votre boîte de réception habituelle, peut devenir absolument illisible quand elle est réduite à un petit écran. Parmi les problèmes les plus fréquents, citons les polices trop petites, les colonnes trop étroites et les mises en page brisées.

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

ClientSupport des requêtes de média
Amazon Kindle FireYes
Amazon Kindle Fire HDYes
Android 2.1 EclairNo
Android 2.2+Yes
Apple iPhoneYes
Apple iPadYes
Apple iPod TouchYes
BlackBerry OS 5No
BlackBerry OS 6+Yes
BlackBerry PlaybookYes
Microsoft Windows Mobile 6.1No
Microsoft Windows Phone 7No
Microsoft Windows Phone 7.5Yes
Microsoft Windows Phone 8No
Microsoft SurfaceNo
Palm Web OS 4.5Yes

Clients de messagerie tiers

ClientSupport 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.

Fiche technique

À propos de l'auteur

Campaign Monitor est une plate-forme d’e-mailing créée en 2004 par Ben Richardson et David Greiner, gérants d’une société de Web Design, à la suite de nombreuses demandes de la part de leurs clients pour gérer des campagnes d’envoi d’e-mails. Après avoir fait le tour des solutions existantes sur le marché, ils ont décidé de créer l’outil qui correspondait à leurs besoins.

Aujourd’hui, plus de 700 000 designers, agences et autres sociétés utilisent Campaign Monitor et de nouveaux clients les rejoignent régulièrement.
Ils continuent à ajouter de nouvelles fonctionnalités à leur produit et à le peaufiner mais leur objectif premier reste le même : rendre plus facile pour quiconque l’envoi et la gestion de jolies newsletters.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Web Mobile

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site