Guide de l'emailing Responsive Design

Avec l'envolée de l'utilisation des appareils mobiles (tablettes et smartphones), il est devenu indispensable d'ajouter une bonne dose de "Responsive Design" à votre stratégie de communication digitale. D'ailleurs, lorsque l'on reçoit une superbe newsletter sur son ordinateur, souvent celle-ci ne s'ouvre pas correctement sur un appareil portable. Et très souvent, cela conduit le destinataire au mieux, à se désabonner, au pire à la supprimer directement. Cela se traduit alors par un très fort taux de déperdition et d'efficacité de votre campagne.

En adoptant une conception "Responsive Design" pour votre marketing digital, vous serez non seulement en mesure de rester en tête face à vos concurrents, mais vous tirerez pleinement avantage de la révolution mobile qui est LE changement irréversible de ces dernières années. J'ai rédigé cet article avec l'intention de vous expliquer le plus simplement possible les avantages de la mise en œuvre d'une conception "Responsive Design" pour vos e-mails. Je vous donnerai également quelques bases pour la construction d'e-mails que j'illustrerai d'exemples que je trouve très réussis. Le but final étant de vous convaincre d'opter pour le "Responsive Design" avant qu'il ne soit trop tard ;-)

Pourquoi choisir le Responsive Design pour vos e-mails ?

Selon une étude récente de Litmus, plus de 51% des e-mails s'ouvrent maintenant sur les appareils mobiles et les mobinautes vérifient leurs téléphones en moyenne 150 fois par jour. Une autre enquête menée par BlueHornet a révélé que si un e-mail n'est pas optimisé pour la lecture sur mobile; plus de 80% des destinataires l'effacent immédiatement et 30% se désabonnent. Dans le même temps, plus de 63% des consommateurs se disent plus intéressés pour réaliser un acte d'achat si l'e-mail s'affiche correctement sur leurs appareils mobiles.

Toutes ces statistiques démontrent non seulement l'adoption rapide des appareils mobiles pour Internet, mais aussi doivent vous faire prendre conscience de la manière dont les internautes consomment la lecture de leurs emails en déplacement. Voyons maintenant les principales raisons pour lesquelles vous devriez rapidement optimiser votre e-mail pour les appareils mobiles :

1. Améliorer l'expérience utilisateur

   Lorsque vous intégrez le "Responsive Design" à votre e-mail, vos lecteurs sont en mesure d'y accéder à tout moment. Ils peuvent naviguer confortablement en toute simplicité sans avoir à pincer ou à zoomer pour lire le contenu de votre e-mail. Les "call to action" sont généralement plus grands et mieux espacés pour leur montrer clairement où ils doivent cliquer pour effectuer un achat. S'ils trouvent que votre e-mail à un look parfait sur leur tablette ou leur smartphone, ils peuvent être intéressés par la lecture du reste de vos e-mails.

2. Accroître le taux de conversion

   Si vos e-mails et les landing pages correspondantes sont parfaitement optimisés pour l'affichage mobile, alors vous n'avez pas à vous inquiéter d'avoir un faible taux de conversion qui résulterait d'une conception "basique" ou ancienne. Les e-mails "Responsives Design" vous permettent de toucher vos destinataires n'importe où et n'importe quand car ils n'ont pas besoin d'être devant leur ordinateur pour attendre de lire vos offres. Peu importe si vos clients sont en déplacement ou assis détendus dans leur canapé; ils sont toujours prêts à vous lire et à faire un achat.

3. Accroître vos ventes

   Une fois que vous avez réussi à capter l'intérêt de vos lecteurs, il y a de grandes chances qu'ils préfèrent acheter depuis un appareil mobile plutôt que depuis un ordinateur de bureau ou depuis un ordinateur portable. Les e-mails "Responsive Design" s'affichent parfaitement sur tous types de dispositifs mobiles, cela procure d'entrée une bonne première impression à vos clients. Si ces derniers prennent la décision d'acheter votre produit / service, il faut que votre offre leur soit livrée dans le bon format.

4. Accroître le taux d'ouverture

   Le "Responsive Design" est une technique de design bien plus puissante et bien plus efficace que la conception fluide ou adaptative. Peu difficile de mettre en œuvre, elle est aujourd'hui la meilleure stratégie de conception pour booster vos taux d'ouverture d'e-mail. Une étude récente de MarketingProfs a révélé que les courriels "Responsive Design" ont un taux d'ouverture 21% supérieur (11,9%) aux e-mails "classiques" (9,8%). Pour cette raison, il est préférable d'opter résolument pour le "Responsive Design".

5. Diminuer les désabonnements

   Comme nous l'avons mentionné précédemment, si un e-mail ne s'affiche pas correctement sur mobile, 30% des destinataires se désabonnent. Lorsque vos lecteurs ne sont pas en mesure d'afficher vos e-mails correctement, ils peuvent marquer vos messages comme spam et ainsi, tuer votre réputation et votre taux de délivrabilité. En adoptant le "Responsive Design", vous créez une première impression plus favorable et vous évitez de frustrer vos lecteurs, ce qui réduit les désabonnements ou le classement en spam.

Comment rendre vos e-mails "Responsive Design" ?

Maintenant que nous avons compris l'importance de la conception "Responsive Design" pour votre stratégie de communication digitale, nous allons voir comment intégrer cette conception à vos e-mails.

Les e-mails "Responsive Design" font appel à des requêtes CSS un peu particulières, appellées "Media Queries", qui sont la caractéristique principale du "Responsive Design". Ces requêtes sont un ensemble de styles CSS qui fonctionnent comme des règles dynamiques ou des instructions conditionnelles du type «si-alors». Ils détectent d'abord la taille de l'écran de l'appareil, puis appliquent dynamiquement des règles différentes pour afficher le contenu selon que la taille de cet écran. Mis en œuvre avec soin, ces requêtes peuvent optimiser la lisibilité de vos e-mails pour les différentes tailles d'écran.

Différents types de dispositifs mobiles prennent en charge les différentes requêtes de ces médias. Cela signifie que vous devez connaitre les principales tailles d'écran et cibler les différents dispositifs selon leurs résolutions d'écran. Par exemple :

.affichage-standard{
    color: red;
    font-size: 20px;
}

@media only screen and (max-width:480px){
	.affichage-mobile{
	color: blue !important;
	font-size: 25px; !important;
	}
}

Dans cet exemple très simplifié, le texte est affiché par défaut en 20px et en rouge. Nous ajoutons une requête pour les appareils dont la taille de l'écran est inférieure ou égale à 480 pixels. Dans ce cas, le texte est affiché en bleu et en 25px. Chaque règle de style que vous écrivez dans la balise média doit se terminer par "!important".
Voici une liste des requêtes média CSS pour les périphériques les plus courants :

• Smartphones: Portrait : @media only screen and (max-width : 320px)
• Smartphones: Landscape : @media only screen and (min-width : 321px)
• Smartphones: Portrait and Landscape : @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
• iPads: Portrait : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
• iPads: Landscape : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
• iPads: Portrait and Landscape : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
• iPhone4 : @media only screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5)
• iPhone 5: Portrait : @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)
• iPhone 5: Landscape : @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)
• iPhone 5: Portrait and Landscape : @media only screen and (min-device-width : 320px) and (max-device-width : 568px)
• Desktops and Laptops : @media only screen and (min-width : 1224px)
• Large Screens : @media only screen and (min-width : 1824px)

Quels clients e-mails supportent les Média Quéries ?

Malheureusement, les requêtes médias ne sont pas encore prises en charge par tous les clients de messagerie et les appareils mobiles. C'est pourquoi, il est très important de connaître quels dispositifs supportent l'affichage "Responsive Design" pour le courrier électronique. Sauf si vous avez déjà une liste complète des périphériques qui les prennent en charge, vous ne serez pas en mesure d'assurer un partait affichage de votre e-mail sur tous les appareils mobiles.

En gardant cela à l'esprit, voici une liste de clients de messagerie / appareils mobiles avec leur support aux requêtes médias.

Exemples d'e-mail "Responsive Design"

Sources et ressources

Voici une liste de liens loin d'être exhaustive sur ce sujet très richement présent depuis ces dernières années. J'ai principalemennt sélectionné mes liens vers des ressources anglo-saxones, tant ces pays sont en pointe sur le sujet. Pour les franco-francophones, Sarbacane propose également une matière non négligeable.

• Smashing Magazine : What 22 Billion Newsletters Tell Us About Designing For Mobile Email
• MailChimp : Responsive Email
• Benchmark Email : 10 Handy Responsive Email Tips
• Slideshare : Email Design Lookbook
• Get Response : Responsive Email Guide PDF
• Smashing magazine : From Monitor To Mobile Optimizing Email Newsletters With CSS

Conclusion

Si l'utilisation du mobile (tablettes et smartphones) s'est imposée ces dernières années, c'est aussi parce que les web designers ont su adapter le contenu web à ces nouveaux supports d'affichage. Pratiquement plus aucun site Internet aujourd'hui n'est produit en dehors du "Responsive Design". Très logiquement, l'emailing a suivi cette tendance qui s'est imposée comme référence. Les chiffres le confirment de mois en mois, c'est ce canal que les utilisateurs privilégient et que vous devez suivre.

Professionnel du web et maïtrisant la technique "Responsive Design", Web-eau.net est à même de vous accompagner sur la conception et la création de votre emailing et votre newsletter pour qu'ils s'affichent parfaitement sur les écrans de tous vos destinataires. N'hésitez donc pas à me solliciter directement pour que nous échangions librement sur votre projet. A tout de suite !

A PROPOS DE L'AUTEUR :

Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.