Vous le savez, en intégration email, on ne peut pas tout faire et certains clients emails ont l’habitude de nous mettre des bâtons dans les roues. C’est pourquoi, au quotidien, les équipes de Badsender doivent éduquer leurs clients au principe de dégradation acceptable (aussi appelé dégradation gracieuse). Mais c’est quoi au juste ? Et quels sont les cas les plus emblématiques de cet enjeu ? On tente de vous expliquer dans ce live.
Le replay sur Youtube
Le replay en podcast
N’hésitez pas à vous abonner à notre podcast sur les différentes plateformes : Spotify / Deezer / Apple Podcast / Google Podcast / … d’autres
Nos notes préparatoires à ce live
Définition
JLO : Est-ce que tu peux nous expliquer en quelques mots ce qu’est la dégradation acceptable ou gracieuse ?
TDE : La dégradation gracieuse ou « Graceful Degradation » est une philosophie de conception centrée sur la création d’un site ou d’une application web moderne qui fonctionnera dans les navigateurs les plus récents, mais qui sera remplacé par un contenu et une fonctionnalité essentiels dans les anciens navigateurs, même moins performant. https://developer.mozilla.org/fr/docs/Glossaire/
Ca c’est pour un site, ou une application donc. Pour l’email c’est le même principe, et on va partir si vous le voulez bien cher confrère sur le sens littéral des mots « dégradation » et « gracieuse ».
Dégradation : fait d’être abîmé, altéré. Parfois de manière progressive. Gracieuse : Qui a de la grâce, du charme. Donc, finalement, c’est une altération d’un effet, d’un style, d’un composant, mais qui garde son charme… Ca laisse rêveur non? Concrètement : je suis créateur de canapé. Appelez-moi Centre Cuir. Je conçois une gamme de canapés qui font boule à facette lorsqu’ils sont exposés au soleil. Mais dans le salon d’un de mes commanditaires, il n’y a pas de fenêtre; Bon, bah ça reste quand même un canapé quoi, je peux toujours m’assoir dessus, et c’est finalement sa fonctionnalité première.
Support
JLO : En email, quels sont les clients email, qui supportent le plus de fonctionnalités html/css ?
TDE : Selon https://www.caniemail.com/scoreboard/, il semblerait qu’Apple Mail soient en tête du classement, suivi par Samsung Email, Outlook pour MacOS, puis SFR (le webmail desktop). Le fait qu’Apple Mail se retrouve en pôle position n’a finalement rien d’étonnant quand on sait que le moteur de rendu utilisé est Webkit et que ce dernier offre le meilleur support des balises et attributs HTML et des propriétés CSS. Ainsi, on pourra utiliser par exemple des propriétés CSS comme le display:flex, des sélecteurs CSS :first-child par exemple, ou l’élément <video>. C’est donc pour cela que souvent, sur Apple Mail ou les clients mail sur Mac, on a très peu de souci quant au rendu d’un emailing.
Là où c’est important d’y penser
JLO : Quelles sont les grandes fonctionnalités qui ne fonctionneront pas mais resteront gracieuses ?
TDE : Les plus courantes et, finalement, celles qui ne « cassent » rien lorsqu’elles ne sont pas supportées:
- le border radius pour les coins arrondis : est-ce un crime si des coins arrondis conçus en CSS avec la propriété border-radius ne s’affichent pas partout, et, qu’à la place, nous avons des coins à angles droits? On est pas chez Ikea, et j’ai pas d’enfants qui jouent autour du bouton, donc tout va bien…
- les effets de survol (le :hover sur un bouton par exemple, pour changer la couleur de fond au survol) : tant que le call to action s’affiche correctement, et qu’il est conçu en HTML/CSS pour un affichage immédiat, j’ai envie de dire, le taf est fait.
- les typos particulières ou dites non-websafes (google font) : Si de la roboto est remplacée par de l’Arial, c’est pas grave, grave. Bon, par contre, lorsqu’une typo sans empattement est remplacée par une typo avec empattement (comme sur Outlook par exemple), là ça devient un peu plus gênant. Mais il existe, fort heureusement, des solutions pour ce type de bug.
- les gifs animés (parce que finalement, même si le gif animé est bloqué sur son premier état sur Outlook, rien ne nous empêche de contourner le problème en prévoyant un état de 0ms avec l’ensemble des informations essentiels à la compréhension du visuel)
- le letter-spacing…
JLO : Et pour aller plus loin, comment on défini la limite ? Sur quels critères on peut se baser pour se dire qu’on va trop loin ? Et quand est-ce qu’on y réfléchi ? Avant le design ? Au moment de l’intégration ?
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
TDE : Que de bonnes questions! La limite est celle que nous ne sommes pas prêts à dépasser, et j’ai envie de dire qu’elle dépend de chaque cas de figure. Quand un simple coin arrondi ne nous semble pas être un impératif de design en soi, il peut être malgré tout partie intégrante de la charte graphique d’une marque; Il faut savoir alors détecter et analyser en amont les statistiques de consultation des destinataires pour juger au mieux de la technique de codage. VML ou pas VML? Coins arrondis seulement avec la propriété border-radius ou des coins arrondis en image? Quid du coup du Dark Mode? Que faire lorsque ce bouton aux coins arrondis se trouve au-dessus d’une image de fond générée en VML (et sachant que du VML ne peut être imbriqué dans un autre code VML).
Il faut savoir faire des concessions. Deux solutions : accepter d’en faire au moment du design avec toutes ces contraintes connues en amont. L’autre solution : ne pas se brider sur le design, et impliquer une bonne dose de R&D, de manipulation et de tests lors de la phase d’intégration HTML pour répondre au design validé.
Pour aller plus loin !
JLO : Dans ce cas, est-ce qu’il ne faut pas aller jusqu’à créer une charte email qui reprend en compte ce qui est acceptable et ce qui ne l’est pas ?
TDE : Très bonne suggestion! C’est ce qui se fait parfois (et ce qu’on a eu l’occasion de voir chez Badsender). Après, faut-il toujours TOUT contraindre, tout encadrer au risque de limiter la créativité ? Car les contraintes amènent la créativité, et ceci dans les deux sens : si le designer connaît les contraintes de l’intégration, il pourra se challenger et proposer des designs tout à fait particuliers mais adaptés à l’emailing. De même, l’intégrateur, face au design validé (contrainte) aura la créativité dans sa manière de coder, et c’est ça qui est excitant! En tout cas, moi, ça m’excite parfois.
JLO : Comment on fait quand le management utilise une vieille version d’Outlook ?
TDE : Perso, je leur dirai d’évoluer; On ne peut définitivement pas demander l’impossible aux designers et intégrateurs quand la cible finale n’est pas sur ce logiciel. Surtout quand on connaît les contraintes qu’impose Outlook et ses versions plus anciennes sur Windows… Il faut savoir se remettre en question.
Imaginez : je crée des canapés. Encore. Mon voisin m’en commande un, de 16 mètres de long. Bon, c’est son choix quelque part, et il a le salon qui va avec. Si, pour voir, ce que ça donne, je veux le mettre dans mon salon qui ne fait que 7 mètres de long, quelque part, il va y avoir un problème. Pour autant, je ne vais pas demander à mon équipe de changer la configuration ou la longueur du canapé… Voyez c’que je veux dire?
JLO : Quid des éléments d’innovation dans l’email ? Caroussel / sliders / hovers / …
TDE : Tant que la version de fallback est gracieuse, et qu’elle n’empêche en rien la compréhension du message, pourquoi s’en priver? Bien sûr, ce type d’innovation doit prendre en considération le pourcentage de destinataire final qui aura accès à ce type d’innovation. Faire un carrousel pour seulement 1% des destinataires, est-ce que cela vaut le coup? Si oui, au détriment des autres? En tout cas, faites bien attention à la version de secours : nous avons vu des générateurs de carrousel US échouer lamentablement quant à leur rendu sur Orange.fr et proposer uniquement un espace vide : le contenu et l’ergonomie de l’email en prennent un coup ! Mantra de l’intégrateur (pas de pixel près) ? Responsive, accessible, délivré. Une bonne communication entre gestionnaire de campagne et email designer/intégrateur pour comprendre le comportement des destinataires face à leurs emails.
Suggérez-nous des sujets !
Ce live est né sous l’impulsion d’une d’un cas rencontré lors de l’accompagnement de nos clients. Et comme on est généreux, si vous vous posez des questions sur un sujet, envoyez-nous un message et on se fera un plaisir de décortiquer le sujet lors d’un prochain live
Et si vous souhaitez être coaché sur ce sujet (ou tout autre sujet d’ailleurs), n’hésitez pas à nous envoyer un p’tit message
