Disclaimer : Cet article est absolument non technique, il n’y a qu’un seul acronyme exotique.
Parfois, on fait une belle explication pour un client, et on se dit qu’il serait pas mal de la modifier en quelques minutes pour en faire un article. Et puis je ne publie pas grand chose sur ce blog depuis quelques mois… Et encore moins dans les catégories Design et Code !
Donc, aujourd’hui, je faisais de la gestion de projet (qui chez Badsender ressemble principalement à du coaching, c’est un peu notre truc ça le coaching pour le moment) pour un client qui envoie plusieurs centaines de millions d’emails transactionnels par an (oui je sais, on a un peu la grosse tête). On est en train de faire l’intégration de leurs emails, et vu le volume, et vu qu’ils doivent tenir la route pendant un bon bout de temps, il ne faut pas se planter.
D’ailleurs, je ne vous dirai pas qui c’est, et il n’y aura jamais de logo dans nos refs ???? Bon, soit. Du coup, ce n’est pas l’email du client, ce sont donc juste des exemples (un peu exagérés).
Back to the dégradation acceptable
En email design, il y a un principe important à avoir en tête qui est celui de la dégradation acceptable. Il est très compliqué d’avoir un rendu similaire sur tous les environnements email, on est donc obligé de faire des concessions. Il y a un ancien article sur notre blog qui est toujours d’actualité sur la dégradation acceptable (ou gracieuse c’est comme on veut). Vous devriez éventuellement aller le lire avant de continuer votre route ici.
Update 30/01/2021 : Du coup, on même fait un live sur le sujet après la publication de cet article, le replay se trouve ici.
Le truc qu’on veut faire pour notre super client qui envoie plein d’emails transac : des coins arrondis, même sur Outlook.
Ce qu’on veut faire pour notre client, c’est un gros bloc avec des coins arrondis qui s’affiche correctement sur Outlook. Et là, vous vous dites qu’on va pas, en 2021, faire un ARTICLE ENTIER sur les coins arrondis. Et ben si ! On va le faire ! Voilà donc une simulation du truc que l’on veut faire :
On dirait que c’est simple vous trouvez pas ? En fait, ça pourrait, mais pas cette fois. Parce que vu les contraintes, on se permet de réfléchir sur la durée, de prendre en compte l’image de marque, mais aussi l’expérience utilisateur. Et la vérité… est forcément entre les deux !
Quels sont nos choix pour obtenir des coins arrondis sur Outlook ?
Option 1 : Au plus simple au plus efficace
En général, sur le web et dans les emails, on gère les coins arrondis directement en HTML.
- Impact Outlook : Outlook ne gère pas les coins arrondis « standards », il les transforme en angles droits.
- Solution en général dans Outlook : pour pallier ce défaut, on passe par du code « VML » spécifique à Outlook qui permet de lui appliquer des arrondis.
- Le problème ici : la solution « VML » fonctionne bien pour des boutons, parce qu’elle oblige à définir précisément la taille du bloc sur lequel on veut appliquer les arrondis. Malheureusement, sur des blocs de grande taille (comme dans ces emails) et encore plus quand le contenu est éditable dans un email builder, on ne peut pas définir cette taille en dur.
Voici ce que ça donne dans Outlook sans VML :
Et pour une question de cohérence, ce n’est pas ce que le client désire. Comme un peu tout le monde, il aimerait un design similaire dans tous les clients email.
Option 2 : On reprend les vieilles techniques et on fait des coins arrondis en images
Pour contourner ce problème, on applique une ancienne technique qui consiste à utiliser de petites images arrondies à chaque coin du bloc. Ce qui fonctionne très bien avec Outlook (et les autres). Le problème ? Le Dark Mode!
Malheureusement, le comportement du Dark Mode n’est pas uniforme sur les couleurs de fond et les couleurs des images. En Dark Mode, les couleurs HTML sont assombries… mais pas les images. Donc nos petites images d’arrondi ressortent.
La solution pour limiter la casse : Utiliser des images en partie transparente pour qu’il n’y ait que la couleur en dur qui pose problème… mais ça ne reste pas très gracieux.
Et maintenant on fait quoi ?
On fait un choix, et ce choix doit se faire entre :
- X % d’utilisateurs d’Outlook qui verront des coins en angle droits… OU…
- X % d’utilisateurs du Dark Mode qui verront des coins disgracieux
Pour moi, la dégradation la plus acceptable est clairement au niveau des angles droits dans Outlook, puisque les utilisateurs de ce client email ne remarqueront probablement même pas qu’ils n’ont pas exactement le même affichage que les autres. Alors que les utilisateurs de Dark Mode verront clairement qu’il y a un souci.
Par ailleurs, la 2ème solution rend le code plus complexe à maintenir.
Enfin, il y a sans doute une 3ème voie qui est d’utiliser des techniques de contournement du Dark Mode en forçant l’affichage normal. Mais nous avons peu de recul sur ces techniques, et c’est un risque de voir des bugs apparaitre dans quelques mois lorsque les clients email se mettront à jour.
En attendant une décision du client, on continuera à faire de la veille et de la R&D.
9 réponses
Aaarrrggghhh !
« Pour palier à ce défaut »
Double erreur impardonnable !
Enfin si, un peu quand même, because l’intérêt de l’article.
1. Il ne faut pas confondre le palier de l’étage avec le verbe pallier (qui comporte deux ailes, lui).
2. On ne dit jamais « pallier à quelque chose » mais « pallier quelque chose ».
Bon. Voilà. J’ai lâché mon fiel.
Pas sûr que je m’en porte mieux.
Mais qui aime bien châtie bien, dit-on…
Une solution supplémentaire :
https://medium.com/@alexvargash/html-email-rounded-corners-2d58c42e491c
À rajouter à votre article 😉
@Gédéon : 😀 Merci ! On a cette mauvaise habitude de faire de la relecture d’articles en prod 😉 Je veillerai à ne plus me tromper.
@Ben : Effectivement, c’est une option. Par contre, pour la maintenance du code et l’intégration dans un email builder je ne suis pas certain que ce soit la meilleure option 😉
Bonjour Jonathan,
Une autre solution serait d’avoir un tableau d’une seule ligne avec une hauteur fixe (height:20px par exemple) au dessus du tableau principal ( celui ayant le contenu) et un autre en dessous.
Le but serait de mettre des bords arrondis en top-left et top-right avec du code VML sur le tableau du haut et bottom-left et bottom-right sur celui du bas avec du code VML.
Ayants des hauteur fixe le code VML fonctionnerait sur ces tableaux.
On peut même imaginer n’afficher que ces 2 tableaux uniquement sur Outlook et mettre des styles border-radius sur le tableau principal pour les autres FAI.
Qu’en penses-tu ?
@Mickael : Je suis pas sûr qu’on puisse mettre des coins arrondis seulement en haut à gauche et en haut à droite avec du VML, parce qu’il me semble qu’on passe par l’attribut arcsize en VML qui n’accepte, pour sa part, qu’une seule valeur en pourcentage non?
@Mickael : Et pour compléter, ça va être compliqué à intégrer et maintenir dans l’email builder maison du client ce genre de brico 🙂
@Thomas : Le language VML permet de dessiner des formes. il y en a des préconçus comme le rectangle, le rectangle arrondis (utilisé pour les boutons dans les news pour outlook avec l’attribut arcsize), l’ovale, le rond, la flèche ou encore l’étoile. Mais, il y aussi la possibilité de dessiner des formes libres. Cela fonctionne comme les images svg par coordonnées.
Il est donc envisageable de dessiner un rectangle au bords arrondis en haut et angle droit en bas.
@Jonathan : Justement, leur DSI pourrait intégrer cela 🙂