Exemple d'email : Patagonia

Parce que cet email de Patagonia est l’exemple même d’un design d’email réussi en one-column. Cette mise en forme particulière permet un redimensionnement bien plus aisé sur support nomade (mobiles et smartphones) : les blocs restent dans le même ordre, avec un cheminement identique, qu’on soit sur une consultation sur ordinateur de bureau ou écran mobile.

Cela demande, par la même occasion, un peu moins de travail pour le designer, qui peut alors se concentrer sur une seule maquette de l’email, même si, bien sûr, d’autres modifications pourront être apportées sur la version mobile.

Mais ce n’est pas tout !

• Les visuels sont très esthétiques. C’est vrai, je vous l’accorde, ce n’est pas un travail spécifique à l’emailing. Mais cela contribue à la qualité du design général de la campagne. C’est un vrai travail d’iconographie de Patagonia, à chaque email, qui permet de créer une ambiance et d’embarquer le lecteur.
• Les boutons sont en HTML, avec un travail technique en langage CSS pour un rendu sobre, mais très propre.
• La hiérarchisation de l’information est parfaite, avec des différences prononcées dans la taille et la mise en forme des différents niveaux de titres et des textes.
• La transition graphique du bas me plaît énormément : C’est léger, ça finalise bien l’email avec une différence dans la mise en forme (pas de couleur de fond) mais une continuité dans la largeur des blocs du dessus.
  
• J’apprécie l’insertion d’un lien vers un article en bas de l’email : et pourquoi pas après tout ? On peut tout à fait positionner un article ou la promotion d’un sujet particulier dans un email qui vante une nouvelle collection, ce n’est pas incompatible !
• Les textes alternatifs sont renseignés correctement : et j’entends par là, comme des textes alternatifs devraient être remplis dans un email pour remplir leur vocation d’accessibilité. Par exemple, le texte de l’image de cover : « Patagonia. Two people jump off icebergs into an alpine lake. »

En revanche, il y a quelques points d’améliorations envisageables…

• J’ai du mal à comprendre pourquoi les titres ne sont pas prévus en HTML et CSS. Pourquoi j’insiste sur ce point ? Non seulement parce que c’est toujours mieux, lorsqu’on ouvre un email, que le contenu s’affiche instantanément sans avoir besoin obligatoirement de télécharger les images pour les afficher. Mais aussi parce qu’en Dark Mode, le rendu n’est pas forcément des plus propres (même si, franchement, je pinaille et c’est du détail).
  
• Cette problématique de textes en image se retrouve sur des titres de produits. Ce qui est malheureux, c’est que les couleurs d’arrière-plan, unies, permettraient pourtant de concevoir les textes en HTML et d’avoir une conversion automatique des couleurs… C’est peut-être ça d’ailleurs qui n’est pas voulu : avoir un gris différent entre le fond du texte du produit et le fond du produit. Mais à ce moment-là, pourquoi ne pas insérer des produits avec fond transparent en png ? Je pose la question !
• Les textes sont trop petits sur la version mobile : à mon sens, il vaut mieux, sur la version mobile d’un email, chercher à agrandir les textes de paragraphes (et réduire potentiellement la taille des titres).
• Le contraste entre la couleur de fond et la couleur du paragraphe et du bouton dans le bloc « Nouveautés » n’est pas suffisant : il faudrait peut-être choisir un texte plus clair pour accentuer le contraste ? D’ailleurs, la lisibilité n’est clairement pas optimal non plus lorsqu’un texte aussi long que ce paragraphe est entièrement centré. Comme qui dirait : « Au-dessus de trois à quatre lignes, ton texte tu ne centreras pas… »
• Je suis étonné de voir des largeurs fixes avec class et media queries, et de ne pas retrouver plutôt un développement d’email en spongy code, fait de max-width et de tableaux fantômes pour Outlook, parce que ce type de design permettrait sans aucun doute cette méthode d’intégration HTML.
• Le lien « Lire la lettre d’Yvon » tout en bas de l’email est en image, alors que, pour le coup, il pouvait être conçu en HTML avec sensiblement la même mise en forme sans aucun problème !
• Dans le code HTML, je repère plusieurs balises avec l’attribut lang dont la valeur renseignée est en. Oui, mais le contenu de l’email (et le destinataire) sont pourtant français !
• Il manque l’usage de balises sémantiques (<hn>, <p>…) pour optimiser l’accessibilité et la lecture des textes par un lecteur d’écran.