Une colonne, ou plus ?

Le « one column » prend de plus en plus de place dans l’#emaildesign et devient LA tendance graphique (Ce n’est pas d’hier non plus faut avouer). Mais qu’est-ce exactement que le « one column » ? Et pourquoi ?

Très peu d’articles traitent le sujet, et je découvre seulement maintenant celui de Campaign Monitor, qui rejoint les points que je comptais soulever. J’aborde donc la question, moussaillon, en français et avec quelques informations et avis complémentaires !

D’abord, c’est quoi ?

Le « one column » ou « single column » consiste, en design, à ne pas mettre d’éléments côte à côte mais à utiliser toute la largeur du conteneur (l’email donc) pour le contenu. Ils ressemblent donc exactement à leur nommage : des modèles d’email qui ne comportent qu’une seule colonne, par opposition à des modèles qui pourraient contenir deux à trois colonnes (ou plus encore).

Autrement dit, les éléments textuels comme visuels sont donc les uns sous les autres, dans une seule colonne. Voici à gauche un exemple d’email en « one column ».

Ok, alors pourquoi ?

Aujourd’hui, plus de la moitié de consultation ou d’ouvertures des emails se fait sur mobile. Il est donc important de penser à une structure d’email allant dans ce sens et facilitant la consultation tout d’abord sur mobile.

Le « one column » est parfait pour cela, puisqu’il consiste à empiler des blocs les uns sous les autres avec des tailles de texte conséquentes, bien plus lisibles, de grands call to action plus facilement cliquables…

De plus, en suivant cette technique de conception, la hiérarchisation de l’information est encore plus claire, et les éléments garderont le même ordre sur Desktop comme sur mobile.

Faut-il pour autant en conclure que les méthodes de conception avec plusieurs colonnes sont mortes ? Sont-elles mauvaises pour la lisibilité, ou en terme de technique ? Et puis si le « one column » devient une tendance graphique, ne risque-t-on pas de se lasser si tout le monde se met à faire la même chose ? On fait le point.

Les avantages du one column dans un email.

1. Graphiques, tout d’abord.

• Parce que c’est du coup un peu moins de boulot pour le designer email, et ça c’est pas rien…
• Parce qu’on peut ainsi, si on part sur une largeur inférieure à 480px par exemple, prévoir une seule version de l’email qui sera adaptée à la fois à la version bureau et à la version mobile, surtout avec des écrans mobile de plus en plus larges…

2. Ensuite, techniques.

• Parce qu’on utilisera alors un seul tableau (<table>) de sorte que le contenu s’adapte facilement à n’importe quelle taille d’écran.
• Parce que c’est plus facile à gérer pour le mobile : pas besoin de passer les éléments les uns sous les autres, c’est déjà le cas ! Cela réduit donc l’utilisation des media queries et c’est cool quand on connaît les problématiques du display:block sur les <td> par exemple.
• Parce que plus de mauvaises surprises non plus quant à l’inversion de l’ordre de deux colonnes puisqu’il n’y en a plus qu’une seule.
• Parce que moins de blocs à gérer donc, potentiellement, moins de risque d’erreur dans le code HTML.
• Parce que la structure HTML est alors plus simple : ça simplifie le support sur l’ensemble des clients de messagerie, et ça réduit le poids du code HTML.
• Parce que si on sait faire bon usage du Spongy Code, du max-width et des tableaux fantômes pour Outlook, alors on peut arriver à un template idéal pour mobile et desktop, avec redimensionnement automatique selon la largeur de l’écran même si les media queries ne sont pas supportées.

3. Et puis pratiques.

• Parce que lorsqu’on ne maîtrise pas le contenu car dynamique (des textes en base de données par exemple, sur lesquels vous n’avez pas la main), il peut être plus pertinent d’utiliser le one column pour une élasticité totale de l’email.
• Parce qu’on ne connaît pas la résolution de l’écran mobile de consultation, et que si on prévoit des blocs avec deux colonnes ou plus, les contenus risquent d’être très étroits, voir coupés…

4. Et ergonomiques…

• Parce que le one column est conçu pour être parcouru rapidement et que vos destinataires ont de moins en moins de temps…
• Parce que la hiérarchie du contenu est claire, avec les informations les plus importantes en haut et un défilement standard, quel que soit le client.
• Parce qu’un email à une seule colonne place les informations exactement là où les utilisateurs s’attendent qu’elles soient.
• Parce que la fonction de défilement semble intuitive sur un email à une seule colonne.
• Parce que le one column donne plus d’espace aux titres et aux textes, vous pouvez donc les agrandir et améliorer leur lisibilité.

Est-ce bien pour autant ?

Vous vous en doutez, s’il y a des avantages, il y a aussi des inconvénients, des conditionnements, des ressentis. Les voici :

• Généralement, les visuels prennent de fait toute la largeur. Si l’email a une largeur de 600px, alors les visuels auront une largeur de 600px. Ca fait des visuels assez conséquents et donc, assez lourds. Pensez à optimiser le poids des visuels !
• Le one column peut instaurer une certaine lassitude pour les destinataires, qui ont finalement l’impression que « tous les emails se ressemblent ». Non pas d’ailleurs que les modules conçus autrement qu’en one column soient toujours radicalement différents, mais ils permettent néanmoins d’appliquer une certaine rythmique, non ?
• Avoir plusieurs colonnes permet de diviser les contenus et de les afficher de manière attrayante.
• Lorsque l’empilement avec les media queries n’était pas possible, ok…. Mais maintenant, en 2022 ? Des progrès ont été fait : le support du responsive dans l’email devrait, à l’opposé, permettre d’utiliser plus facilement des modèles à multiples colonnes.
• Quid du rendu sur un ordinateur de bureau ? Cela peut donner l’impression que les contenus (cta, titres, textes) sont surdimensionnés…
• Le scroll vertical est beaucoup plus long : souhaitez-vous réellement faire endurer cela à vos destinataires ?
• Avec des résolutions de téléphones mobiles de plus en plus grandes, le colonnage sera peut-être applicable sur mobile à long terme, non ?
• Le contenu principal est sans doute plus facile à placer au-dessus de la ligne de flottaison avec plusieurs colonnes…

Mais finalement, comme d’habitude, tout dépend de vos utilisateurs !

Vous l’aurez compris, le choix se fera selon les habitudes de consultation de vos destinataires : s’ils ouvrent leurs emails principalement sur mobile, alors il peut être pertinent de concevoir vos emails en « one column ».

N’hésitez pas à vous appuyer sur des outils comme Emailonacid ou les statistiques d’environnement d’ouverture de vos précédentes campagnes. En tout cas, retenez qu’adapter vos techniques de design en email marketing et de codage email montrent à vos abonnés que vous vous préoccupez de leur expérience. Et ça, c’est trèèèèès important !

Sources

• Campaign Monitor : https://www.campaignmonitor.com/resources/knowledge-base/should-my-email-be-single-column-or-two-column
• Enginess : https://www.enginess.io/insights/single-column-email
• Ulandsoftware : https://uplandsoftware.com/adestra/resources/blog/responsive-vs-single-column-email-design/
• Reallygoodemails : https://reallygoodemails.com/search/collections/column