Mettre en œuvre et exercices pratiques

On se posait la question depuis quelques temps mais là c'est fait : je fais des emails responsive ! Ah bon ! Mais comment ?

Avec les Media Queries !...

Depuis 2014, on y est...

Avec désormais l'utilisation massive du téléphone portable pour surfer sur le web et donc sur sa messagerie - hors appli spécifique bien sûr - la question du changement de méthode quant à la réalisation technique de vos messages - comme décrite largement si-dessus - se pose désormais sérieusement.

Aujourd'hui, plus que jamais, la campagne de mailing reste une approche marketing efficace et rentable si bien sûr on sait la maîtriser. Sur une période de six mois en 2012, Litmus a rapporté une augmentation de 80% d'ouverture de courrier électronique sur des appareils mobiles. Cette même année, Campaign Monitor a révélé que, pour la première fois, leur taux d'ouverture de la messagerie mobile a même dépassé ceux sur desktop et webmail. 30,4 millions de Français ont un smartphone et on considère qu'ils sont près de 40% à consulter leur mails sur leur mobile. En 2016, cette tendance s'est largement confirmée (Lire l'article de du Blog du Modérateur)... Cela pour vous convaincre de la nécessité de réaliser des message qui passent sur ce support très contraignant du fait de la petite taille des écrans de smartphone même si leur taille a tendance à augmenter...

Au-delà de son aspect commercial, nous devons aussi réfléchir maintenant que le marché et le terrain sont mûrs aux nouvelles possibilités techniques que l'on peut mettre en œuvre sans risque de se tromper et bien sûr en se lançant dans la création de mail au format vraiment "responsive". Plusieurs solutions s'offrent à nous, dans des perspective bien balisées, valident aussi bien pour desktop, tablette ou mobile, même si, finalement, mais c'est une tendance générale, la fantaisie graphique devient inutile voire dangereuse (cf. la percée du "flatdesign" dans le webdesign mais aussi les interfaces graphiques des systèmes Apple et Windows).

On sait qu'il est désagréable de regarder un page web "à largeur fixe" sur son écran de portable, même si l'on peut zoomer facilement sur son contenu, la navigation et la bonne lecture du contenu deviennent hasardeuses. En cause, la navigation avec ses doigts (le "multi-touch") et non plus avec une souris :

Voici donc ce que l'on peut faire en reprenant l'exemple de l'excellent article de Jack Filose...

La conception d'un email responsive est toujours une affaire de compromis.

Jack Filose

Le contenus

Alors, comment obtenir le meilleure résultat, soit, en réalité, le meilleur compromis entre mail "à l'ancienne" et mail "new-look" ?

En gros, il faut se débarrasser de l'épineuse question de la taille de l'écran de consultation du message et revenir à l'essentiel.

Pour cela :

1. Un contenu qui se déroule sur une seule colonne suffit, et une largeur de 640px (un peu moins, c'est encore mieux...), permettent de bien présenter le sujet...
2. Un objet de mail accrocheur, bien évidemment, mais qui ne fait pas plus de 50 caractères pour éviter qu'il ne s'affiche sur plusieurs lignes une fois reçu...
3. Des zones sensibles (boutons, pictos, vignette... qui renvoient vers une page extérieure) d'une taille minimale de 44x44px/pt pour que justement le doigt puisse bien le viser et cliquer dessus facilement...
4. Une taille de police de caractère assez grande pour une lecture confortable (en police standard, non-exotique, "3" en html simple - font-size - ou 14-16- voire 18px/pt - en CSS - qui correspondent à une taille moyenne... 12px/pt étant vraiment la valeur minimale)
5. Conserver un alignement du texte justifié à gauche... Sur un grand écran, cela ne semble pas être une évidence, mais sur un mobile...
6. Hiérarchiser vos contenus et faire apparaître la(es) zone(s) importante(s), celle qui invite à l'action (et donc un clic sur un lien ou un bouton), le plus haut possible dans le corps du message pour qu'il soit rapidement visible et surtout compris par votre lecteur...
7. Soignez vos visuels, surtout si finalement vous n'en mettez qu'un seul... La plupart du temps, les images ne s'affichent pas pour limiter le débit requis... Renseigner vos attributs "Alt" de manière précise et significative, quitte à reprendre une partie de votre argumentaire ("Votre voyage en Amérique grâce à ma compagnie" sur une photo de New-York... "Des économies importantes avec notre nouveau programme..." pour une photo de tirelire...). Pour votre logotype, éviter bien sûr de l'insérer dans une image globale qui ferait toute la largeur de votre en-tête...

La mis en forme

Comme on l'a vu, les mailers (logiciels de messagerie comme Outlook ou Thunderbird) et les webmail (Gmail, Yahoo!) ne respectent pas aussi bien les standards que les navigateurs web. D'ailleurs, il n'y a pas beaucoup de normes et encore moins d'accord sur leur mise en œuvre... C'est pour cela que l'on va devoir quand même utiliser les vieilles méthodes tout en rajoutant quelques nouvelles...

Le Doctype de votre message HTML

L'astuce consiste à tester votre message avec et sans DocType. Le "Doctype" est la description normalisée de votre fichier html, et donc cela indique au navigateur comment il doit le lire pour qu'il soit bien affiché sur votre écran (aussi le texte que les contenus enrichis...) :

En Html 4 :

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En Html 5 :

<!doctype html>

Par exemple, Outlook et Gmail vont automatiquement remplacer votre Doctype Transitional comme celui ci-dessus en un doctype Strict. Ce n'est pas anodin... Cela peut compromettre votre mise en page initiale... Dans ce cas, tester votre message avec puis sans DocType pour voir si votre construction n'est pas abusivement dégradée...

Encodez vos caractères en entités HTML

En conséquence de ce que nous venons de voir, il faut bien comprendre que le type de contenu sera souvent ignoré, il est donc conseillé de coder tous les caractères spéciaux dans votre e-mail comme des entités HTML. "é" › "é" "à" › " à"...

Utiliser les Media queries

Les Media queries issus des nouvelles propriétés du CSS 3 couplées au HTML 5 (mais elles marchent aussi avec le HTML 4) vous permettent de mieux gérer l'affichage de vos contenus en fonction des propriétés "physiques" des supports de visualisation : un écran de mobile offre une surface très restreinte par rapport à un écran 21 pouces... Grâce à eux, vous gérer avec souplesse la manière de faire apparaître vos contenus : une image d'en-tête de grand format sur un desktop devient une vignette sur un mobile... voire disparaît directement du champ d'affichage ! Tout cela repose sur différentes propriétés CSS qui ne s'affichent que selon des plages définies par vos Media queries... Bon, cela, on commence bien l'utiliser car on en comprend l'utilité...

Seconde chose : il faut mettre en place deux niveaux de déclaration pour les styles CSS employés : dans l'en-tête mais aussi "inline" dans le corps même du fichier html... L'un répondant à l'autre... Attention, c'est une méthode mais ce n'est pas la seule possible.

Et voilà donc une grande partie de la recette magique !

<head>
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Et les mails "responsive" ?</title>
<style type="text/css">
.ExternalClass {width:100%;}
img {display: block;}
</style>

Une fois ces déclarations insérées en en-tête de votre page (à l'intérieur de la balise head) vous pouvez aller plus loin en choisissant le niveau de spécificité que vous souhaitez délivrer à chaque matériel... En gros :

Grand écran : on affiche tout plein pot !
Petit écran : on ne garde que l'essentiel de l'essentiel

Ici, dans cet exemple simple, nous allons en utiliser seulement un seul, sachant que la plupart des matériels offrent la possibilité de visualiser des contenus de 600px de large maximum, aussi bien mobile (tenu horizontalement), écran tactile et bien sûr ordinateur portable et de bureau.

@media only screen and (max-width: 600px)
{
table[class="hide"], img[class="hide"], td[class="hide"]
{
display:none!important;
}
}

Ici, nous demandons à ce que quelques éléments soient cachés si le support d'affichage - la largeur de l'écran - est inférieure à 600px : "display: none"... On y rajoute la déclaration "!important;" pour forcer - en quelque sorte - la bonne prise en compte de l'application de ce style (sauf notamment pour Gmail qui ne prend pas en compte les styles CSS déclaré en en-tête... mais bon, ça passe quand même !).

On ajoute alors par exemple :

@media only screen and (max-width: 600px)
{
table[class="content_wrap"]
{
width: 94%!important;
}
}

On peut alors manipuler à sa guise les propriétés des différents éléments comme ici ou l'on demande d'afficher le contenu dans un tableau qui s'étendra sur 94% de l'espace d'affichage de l'écran utilisé...

Pour le dire simplement, le mail garde une structure html simple (tableaux, caractère en italique, caractère diacritique encodé, largeur des tableaux en taille fixe déclarée en pixels... lorsque qu'il est visualisé sur un grand écran... et bascule vers un affichage spécifique via le déclenchement du Media Queries lorsque la taille d'affichage de l'écran est inférieur à 600px, et c'est donc le CSS qui prend ici le relais pour gérer l'affichage adéquat.

Évidemment, ce n'est pas une solution idéale mais c'est quand même une solution qui marche et qui est suffisante pour la majorité des besoins du moment. Il s'agit ici de techniques de pointe mais qui sont bien prise en compte par la majorité des usages actuels.

Nous utilisons les demandes des médias de la même manière que nous lors de la construction d'un site Web; si la taille de la fenêtre est dans les limites fixées dans la requête de médias puis appliquer ce style.

Et un peu de fantaisie...

Cette fantaisie, c'est un beau bouton CSS qui invite à cliquer dessus... mais ce n'est pas que de la fantaisie...

Cela peut paraître anodin, mais en réalité cela va grandement améliorer l'ergonomie du message...

Dans la version normale, large, on a un lien simple... Comme pour une page web, la lecture de l'article conduit naturellement vers ce lien...

Dans la version minimal, ce n'est pas la même chose : le lien devient central et c'est l'occasion de le mettre en valeur pour le rendre plus... sexy !

On passe le texte en majuscule, on l'englobe dans le bouton et il devient plus lisible...

Dans cet exemple, nous avons donc la déclaration en ligne :

<a href="#" class="button" style="color:#2e7ea6;font-size:18px;line-height:22px;">Lire la suite...</a>

et le formatage CSS dans la balise style qui se trouve dans le <head> du fichier :

a[class="button"]
{
border-radius:2px;
-moz-border-radius:2px;
-webkitborder-radius:2px;
background-color:#2e7ea6;
color:#fff!important;
padding: 5px;
display:block;
text-decoration: none;
text-transform: uppercase;
margin: 0 0 10px 0;
}

NB : on utilise bien du CSS et non pas des images pour traiter l'aspect graphique de ce bouton...

Pour conclure, temporairement...

Nous sommes donc prêt à créer des emails responsive.

Ici, nous avons choisi une solution mais il y en a bien d'autres. Cependant, nous devons garder en tête un principe de précaution et limiter la complexité des entités utilisées pour ne pas échouer lamentablement (comme c'est le cas ici pour un Blackberry... eh oui !)

Les bonnes pratiques

Avant de commencer à créer votre mailing et d'écrire une seule ligne de code, focalisez vous sur le fait que les personnes qui consulterons votre message le ferons sur un mobile : cela vous amènera à aller à l'essentiel.

• Des contenus concis : la taille des petits écrans signifient qu'il est important de capter l'attention de votre lecteur le plus rapidement possible.
• Une seule colonne pour la mise en page vous amène une présentation simple et claire. Cette colonne de devra pas faire plus de 640px de large ce qui est déjà pas mal. Sur un écran à la résolution plus petite, l'apparence de votre message ne sera pas trop dégradé. Une seule colonne garantit surtout qu'aucun contenu ne sera partiellement masquée.
• Un slogan engageant : ceci est l'une des armes les plus efficaces pour attirer l'attention dans une boîte de réception souvent chargée. Soyez bref et accrocheur.
• L'appel à l'action (Call-To-Action) : ne pas punir les gros doigts en créant des boutons cliquables d'au moins 60 × 40 pixels.
• Une tailles de police généreuse : assurez-vous que le texte de votre message peut être lu facilement.
• Message d'en-tête : créez une version alternative en ligne de votre message et indiquez clairement en haut de votre page « Visualisez ce message dans votre navigateur ».
• Du texte aligné à gauche : il y a de bonnes raisons pour aligner des éléments importants sur le côté gauche de votre message. Le parcours des yeux qui examine votre message commence naturellement en haut à gauche (pour les utilisateurs occidentaux).
• Utiliser de belles images : une seule photo peut suffire pour accrocher votre lecteur (s'il s'agit d'un produit par exemple) mais pensez aussi que les images ne seront pas directement affichées et penser à renseigner une balise alt.

› Accédez à un exemple : un email responsive

› Téléchargez l'exemple au format ZIP

Si vous ne vous sentez pas encore prêt à créer vos propres gabarits de mail responsive, sachez que la plupart des prestataires qui assurent la gestion de campagne de mailing comme DoList ou Mailchimp proposent des gabarit de page prêts à l"emploi voir même directement modifiable via des techniques de drag-and-drop qui rendent la création de vos message simple et même ludique...

Et des infos supplémentaires :

Quelques conseils repris plus longuement dans cet article (.en) : «Comment concevoir un e-mail HTML »responsive

L'excellent site d'HTEUMEULEU (.fr) : https://emails.hteumeuleu.fr/

Quelques informations essentielles sur le responsive design (.fr) : « 10 petits conseils pour le responsive web design »

Et, ce qui arrive... sur le blog d'Envato (.en) : « The Future of Email Marketing »

L'article « Réussir une campagne de mailing... »

Erwan Corre - Octobre 2015