L’email responsive : Une évolution inéluctable

Comme tout le monde, je pense que vous devez recevoir des emails tout au long de la journée. Que ce soit sur votre ordinateur ou plus vraisemblablement sur votre tablette ou votre téléphone intelligent, il devient difficile d’échapper à ce flux continu d’informations. Si certains de ces messages sont de faibles intérêts, d’autres doivent revêtir une attention particulière de votre part. Dans ce cas, vous appréciez sans doute que l’expéditeur ait pris le soin de vous écrire en pensant justement à votre mobilité. D’ailleurs, il ne vous aura pas échappé que ces dernières années, les emails ont pris la bonne habitude de s’adapter à vous et au support que vous utilisez pour les lire. Le marketing digital s’invite progressivement dans vos poches et le “Responsive Design” pourrait devenir la norme tant ses qualités semblent parfaitement convenir à l’email.

Les standards en matière de web design et de marketing digital ont volé en éclat depuis l’apparition du “Responsive Design”, en 2012. La pratique de l’emailing que l’on croyait définitivement morte et enterrée avec l’arrivée du SMS a retrouvé une seconde jeunesse au point de devenir le mode de communication principal sur téléphone intelligent pour toute action d’e-marketing. Et cet essor pourrait bien continuer pour imposer définitivement l’email comme voie royale de l’e-marketing. En effet, les raisons sont multiples et plaident toutes en faveur de cette solution :

• Les téléphones intelligents sont désormais “la norme” (iPhone 6, Galaxy Note, BlackBerry Passport, etc),
• Près des 2/3 des emails sont aujourd’hui ouverts depuis un téléphone intelligent,
• Le taux d’ouverture d’un email “Responsive Design” est 21% supérieur à celui d’un email classique.

Autant le dire tout de suite, il va être difficile, voire impossible, d’y échapper. Que ce soit pour communiquer autour de votre actualité, pour tisser un lien avec votre réseau, avec votre communauté ou pour aller récupérer des leads, vous devez communiquer par email et autant faire cela, par email “Responsive Design”. Je vous propose donc de voir comment vous allez pouvoir créer cette communication, avec quels outils et selon quels processus.

Adopter le “Responsive Design” pour les emails

D’après une récente étude de Litmus, plus de la moitié (51%) des emails sont ouverts désormais sur les appareils mobiles et les mobinautes vérifient leurs téléphones intelligents en moyenne 150 fois par jour. BlueHornet nous révèle dans cette étude que si un email n’est pas optimisé pour la lecture sur mobile, plus de 80% des destinataires l’effacent aussitôt et 30% se désabonnent. Parallèlement, plus de 63% des consommateurs se disent plus intéressés à réaliser un acte d’achat si l’email est proprement affiché sur leurs appareils mobiles.

Toutes ces statistiques montrent non seulement l’adoption rapide d’Internet par les appareils mobiles, mais également la manière dont les internautes consomment leurs emails en déplacement. Voyons maintenant les principales motivations qui doivent vous pousser à optimiser votre communication e-marketing pour les appareils mobiles :

1. Pensez expérience utilisateur

Lorsque l’on intègre le “Responsive Design” à l’email, les lecteurs peuvent y accéder immédiatement. Leur navigation est confortable, simple et naturelle. Ils n’ont pas à pincer ou à zoomer leur écran pour lire le contenu de votre email. Les “call to action” sont généralement plus grands et mieux espacés pour leur indiquer clairement où ils doivent cliquer.

2. Améliorez votre taux de conversion

Si vos emails et les landing pages correspondantes sont parfaitement coordonnées et “Responsive Design”, vous devriez avoir un taux de conversion supérieur à celui que vous auriez obtenu avec une conception “basique” ou ancienne. Que vos clients soient en déplacement ou bien assis détendus dans leur canapé, ils sont accessibles pour vous lire et pour faire un achat.

3. Développez vos ventes

Un email “Responsive Design” permet de capter l’attention de vos cibles, cela procure d’entrée une bonne première impression à vos clients. Si vos destinataires doivent prendre la décision d’acheter votre produit / service, il faut que votre message leur soit livrée dans le bon format.

4. Boostez votre taux d’ouverture

Le “Responsive Design” est aujourd’hui la meilleure stratégie de marketing digitale pour booster vos taux d’ouverture d’email. Une étude récente de MarketingProfs a révélé que les emails “Responsive Design” ont un taux d’ouverture 21% supérieur (11,9%) aux e-mails “classiques” (9,8%).

5. Réduisez les désabonnements

Comme nous l’avons vu précédemment, si un email ne s’affiche pas correctement sur mobile, 30% des destinataires se désabonnent. 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.

Point de départ

Au cas où vous ne seriez toujours pas convaincu, je vous invite à regarder cette copie écran. Vous pouvez comparer la manière dont se comporte l’affichage d’un email ouvert dans Apple Mail et dans Gmail :

Vous êtes d’accord pour dire que celui de gauche permet de répondre aux critères définis ci-dessus et que celui de droite n’incite pas vraiment le lecteur à continuer la lecture et à passer à l’action.

Pour obtenir un résultat qui soit à la hauteur de la qualité de votre contenu et des attentes de vos lecteurs, il va donc falloir déployer des techniques efficaces et des méthodes rigoureuses. Il faut donc voir ce travail non pas comme une limite à la créativité mais comme un vrai challenge.

Commençons par résumer les principaux points importants du design de l’email pour avoir la plus large compatibilité possible sur les différents clients de messagerie

On évitera :

• Utiliser les CSS externes
• utiliser les pseudos sélecteurs ou les pseudos éléments
• utiliser float pour positionner des objets
• Utiliser des images de fond
• utiliser des formulaires

On préférera :

• Utiliser la mise en forme avec des tableaux
• Utiliser les styles CSS inline
• Limiter la largeur de l’email aux alentours de 600px
• Tester
• Tester encore
• TESTER toujours

Phase de création

Le prototype

Comme vous le feriez pour n’importe quel projet Web standard, je vous recommande de commencer par élaborer votre prototype. Cela vous permettra d’effectuer tous les réglages graphiques dont vous aurez besoin et vous aidera à vous représenter votre travail avant de passer au code.

Dans cette phase, vous aurez à créer un design qui :

• captive l’attention de vos lecteurs
• l’attire jusqu’à la fin de l’email (vous avez au maximum 8 à 10 secondes avant qu’un lecteur se décide à supprimer, ou non, un email)
• devra afficher des “call to actions” (par exemple, des boutons “Acheter maintenant” ou “Contactez-nous”)

En fouillant un peu sur le Web, vous devriez rapidement trouver de bonnes idées et de l’inspiration.
Par exemple :

• htmlemaildesigns.com,
• Really Good Emails
• Newsletter monitor

Le codage

Comme je vous le disais plus haut, un email peut s’afficher de manière très différente selon les clients de messagerie. Nos efforts doivent donc viser à annuler, ou du moins à minimiser le plus possible ces variations d’affichage intempestives.

Heureusement, les emails ont une structure relativement simple, et dans la plupart des cas, ce travail n’est pas particulièrement compliqué.

Avant de commencer à coder, jetons un oeil aux statistiques des différents clients de messagerie les plus utilisés.
Là aussi, il existe beaucoup d’études disponibles sur le web. Selon emailclientmarketshare.com (un service de Litmus) les derniers chiffres de septembre 2014 donnent le classement suivant (Calculé sur 927 millions d’ouvertures tracker par Litmus Email Analytics en septembre 2014) :

1. Apple iPhone (27%)
2. Gmail (15%)
3. Apple iPad (12%)
4. Outlook (11%)
5. Apple Mail (8%)
6. Google Android (6%)
7. Outlook.com (5%)
8. Yahoo! Mail (4%)
9. Windows Live Mail (2%)
10. AOL Mail (1%)

À la lumière de ces chiffres, nous devons donc être attentifs aux points suivants:

• Certains clients (dont Gmail) suppriment toutes les règles CSS contenues dans la balise <style> et/ou dans la balise < lien > . Sur ce sujet, je vous recommande de lire l’article de Jason Rodriguez Community Manager chez Litmus Comprendre Gmail et les CSS. Donc, il vous faudra placer chaque règle CSS en ligne. Rassurez-vous, c’est assez simple à mettre en œuvre.
• Le positionnement CSS n’est pas pris en charge (ou très peu) par les clients de messagerie. Pour vous assurer d’un bon affichage, vous devez donc utiliser des tableaux pour la mise en page.

Modèles et templates

Maintenant que nous savons qu’il nous faut composer avec différents clients de messagerie, la meilleure solution est d’utiliser des modèles. Vous trouverez facilement des modèles et des templates sur le web (je vous communique ma liste ci-dessous). Si je peux vous donner un conseil, c’est de les essayer afin de voir celle qui sera la plus adaptée à votre projet.

Comme vous pouvez le constater par vous-même, les modèles sont généralement très commentés (ici, celui de Sean Powell pour htmlemailboilerplate.com) ce qui rend l’apprentissage et la lecture du code accessibles au plus grand nombre.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Message Subject or Title</title>
<style type="text/css">


/***********

Originally based on The MailChimp Reset from Fabio Carneiro, MailChimp User Experience Design

More info and templates on Github: https://github.com/mailchimp/Email-Blueprints

http://www.mailchimp.com & http://www.fabio-carneiro.com

 

INLINE: Yes.

***********/

/* Client-specific Styles */

#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */

Quelques sources de templates emailing gratuits :

• Zurb Ink
• Mailchimp Blueprints
• Benchmark

Votre CSS en ligne

Si vous êtes observateur/trice, vous aurez noté la présence de la balise <style> dans cet exemple, ce qui contredit ce que je vous disais plus haut au sujet des règles CSS en ligne.

Pour être exact et précis, pas exactement tous les CSS: les médias utilisées pour le “Responsive Design” et toutes les règles spécifiques pour les clients de messagerie qui supportent cette balise <style> doivent être conservés tels quels. Le reste de votre CSS doit être “inliner”.

Évidemment, le fait de coder vos règles CSS de cette façon peut s’avérer être extrêmement fastidieux et compliqué, surtout si vous avez un projet volumineux ou très complexe. Rassurez-vous, il existe des outils sur le Web qui vont vous permettre de réaliser cette opération très simplement.

Ils fonctionnent tous sur le même modèle : vous collez votre code HTML original et les règles CSS seront automatiquement “inliner” (c’est à dire, ajoutées dans le code).

CSS Inliners

• Mailchimp CSS inliner
• Campaign Monitor CSS inliner
• Zurb CSS inliner
• Mailer mailer CSS inliner
• Dialect Premailer
• Torchbox CSS inliner

Et les images ?

Inclure des images dans un email ne nécessite pas de traitement particulier. Bien sûr, vous devez veiller à afficher des fichiers de taille raisonnable et éviter les extensions de fichier tel que WebP, qui ne sont pas supportées. Tout au plus, je peux vous suggérer de préférer le format GIF à la place du format PNG.

Par contre, vous devez porter une attention particulière à la balise <ALT> : la plupart des clients de messagerie les bloquent par défaut (en fait, Gmail le faisait jusqu’en décembre 2013). En outre, les clients de messagerie bloquent souvent les images pour éviter un suivi externe, il est donc très important de vous assurer que votre emailing conserve un intérêt même en l’absence d’images.

À titre d’exemple, voici ce qui s’affiche dans Gmail lorsque l’on reçoit un email composé d’une image sans la balise <ALT> et que les images sont bloquées par défaut :

La première précaution est donc d’éviter de créer un emailing qui ne soit composé uniquement d’images (il y a aussi beaucoup d’autres raisons de ne pas le faire, concernant la facilité d’utilisation, l’accessibilité et ainsi de suite…).

La seconde est de TOUJOURS ajouter une balise <ALT> à vos images. Vous pouvez lire l’article de Chad White que je vous recommande sur cette question : The 1, 2, 3 of Defensive Design).

“Responsive Design”

Tout comme pour une page Web, vous pouvez optimiser votre email afin qu’il s’affiche correctement aussi bien sur un ordinateur de bureau que sur les appareils mobiles. Pour cela, il existe de nombreuses techniques et astuces mais, pour le moment, je vous invite à jeter un œil à cette liste essentielle de documents et d’articles sur ce sujet :

• Litmus: 5 astuces sur les email Responsive
• Campaign Monitor: l’email Responsive Design
• Collection de modèles et de modules pour les emails Responsive
• Infographie : Le Guide pratique de la conception d’email Responsive

Editeurs en ligne

Les éditeurs en ligne peuvent être une alternative tout à fait valable pour coder un email. Si vous n’avez pas de besoins spécifiques ou si vous êtes à court de temps, cela peut être une bonne solution.
La plupart du temps, ces éditeurs sont intégrés au sein des fonctionnalités fournies par Campaign Monitor, MailChimp, etc … mais vous aurez évidemment besoin d’avoir un compte pour les utiliser.

Tester votre email

Tester son email avant de l’envoyer est absolument indispensable (je dirais presque obligatoire). Vous devez tester encore et encore votre email sur les différents clients de messagerie pour vous assurer que tout fonctionne bien et que vos lecteurs recevront le bon message avec le bon affichage.

Vous pouvez installer les différents clients sur votre ordinateur, utiliser des machines virtuelles ou des émulateurs et vous pouvez utiliser des services en ligne (payants) pour vous aider à faire ces tests.

Tests d’email en ligne

• Litmus
• Email On Acid
• Browserstack

Quelques rappels sur le design d’un email

• Faites simple et dans le même temps, essayez de construire un design “émotionnel”. Vous n’avez que quelques secondes pour décider le lecteur à lire ou à supprimer votre message. Vous devez donc trouver la bonne combinaison entre esthétisme et vitesse d’affichage. Il vous faudra sans doute faire des concessions de part et d’autre pour obtenir le meilleur compromis.
• Pensez mobile: Le rapport de Litmus sur les parts de marché des clients de messagerie rédigé par Lauren Smith indique qu’à la fin 2013, 51% des emails sont lus par un appareil mobile. La part des mobiles a augmenté de manière spectaculaire au cours des dernières années, il faut donc toujours garder en tête le fait que votre email sera le plus souvent lu sur un téléphone intelligent et/ou sur une tablette.
• Attention à votre contenu. Même si cela ne fait pas strictement partie de la conception, le contenu est, bien entendu, un élément clé de la composition d’un emailing. Évitez les erreurs grammaticales, les fautes d’orthographe et assurez-vous de la fluidité de votre contenu textuel. Prenez un soin extrême à choisir l’objet de votre message. Un excellent article comme Subject Line Checker peut vous y aider. Ne négligez surtout pas ce point
• Vos objectifs. Si vous envoyez une infolettre, vous allez probablement attendre en retour, une action précise de la part de vos lecteurs : concentrez vos efforts sur ce point, soyez concis et essayez d’attirer leur attention avec des “call to action”.

Sources et ressources

En dépit de l’importance croissante du “Responsive Design” dans le marketing digital, il semble qu’à l’heure actuelle la quasi-totalité des ressources de qualité se trouvent dans les blogs des entreprises (anglo-saxones) de ce secteur.

Pour vous simplifier le travail, j’ai regroupé et catégorisé les ressources les plus pertinentes en la matière (il y en a 93) : Emailing Responsive Design Resources que vous pouvez compléter en me proposant vos liens.

Je complète cette liste avec ces liens qui m’ont aidé dans la rédaction de ce billet et dans lesquels vous trouverez des informations complémentaires.

• Email Standard Project: prise en charge des clients les plus utilisés
• Litmus: parts de marché des clients de messagerie
• Campaign Monitor: le guide du CSS
• Mailchimp: règles CSS supportées par client de messagerie
• Mailchimp: liens de référence
• Campaign Monitor: guides
• Campaign Monitor: cela va-t-il fonctionner ?
• Mailchimp : guides
• Emailology: Guide des normes, une liste des règles HTML et CSS universellement pris en charge dans les clients de messagerie les plus utilisés
• Emailology: clients email, trucs et astuces
• Litmus: typographies créatives

Conclusion

J’espère ne rien avoir oublié sur le sujet et que ce billet vous donnera envie d’adopter le “Responsive Design” pour vos prochaines communication électroniques. À ce sujet, il serait intéressant que vous notiez les différences de résultats obtenus en adoptant cette conception graphique d’actualité et que vous me fassiez part de vos remarques en commentant ce billet. Je me ferai une joie de vous répondre.

The following two tabs change content below.

• Bio
• Latest Posts

Daniel Dubois

Passionné par Internet depuis près de 20 ans, j'aime partager sur mon blogue mes trouvailles à propos du SEO, de l'emailing, du développement web et tout ce qui touche de près ou de loin à Internet et à ses techniques.

Latest posts by Daniel Dubois

• L’email responsive : Une évolution inéluctable - 8 Octobre 2014
• 12 conseils pour augmenter le nombre d’abonnés à son blogue - 8 Septembre 2014
• Inbound marketing – 7 questions, 7 réponses en chiffres - 4 Aout 2014