Les utilisateurs, ces enfants gâtés

A l’occasion d’une refonte d’une certaine fonctionnalité d’un certain site (je ne peux pas en parler, c’est encore top secret, chuuuuut !), j’ai été amené à me poser cette question : peut-on designer une newsletter full-css, avec tous les webmails et clients mail existants et leurs différents niveaux de support des CSS ?

En se renseignant sur la meilleure façon de designer une newsletter, on découvre qu’ il est aujourd’hui possible d’utiliser les CSS de manière intensive si on adopte l’approche Degrade with Grace [1], déjà largement plébiscitée par les concepteurs de sites webs et facilement transposable aux newsletters selon David Greiner. A mon sens, cette approche est valable dans le cas d’une création de newsletter. Dans le cas d’un redesign, il en va autrement.

Dans mon cas (un redesign lecteur, tu l’auras compris), les utilisateurs sont habitués à recevoir une newsletter impeccable quelque soit le client mail ou le webmail utilisé, puisque basée sur une mise en page en tableaux. La mise en page en tableaux, pour l’utilisateur, c’est transparent, pour le designer, c’est l’enfer. Cela suppose de gérer des tables imbriquées, des styles inline, des images en fond de cellules de tableaux… Difficile à maintenir, et vraiment pas élégant.

Si ça n’ennuie que les équipes techniques mais que cela satisfait les utilisateurs, tu peux bien faire un effort espèce de fainiasse !

vous entends-je déjà me rétorquer d’un ton lourd de reproches. Je suis fainéant, certes, mais j’ai également de bonnes raisons :

• Les newsletter table-based utilisant des images comme élément de design se comportent très mal dans les clients qui bloquent les images [2];
• les newsletter table-based sont 2 à 3 fois plus lourdes que les newsletters full-css, donc 2 à 3 fois plus longues à afficher;
• une mise en page full-css garantit l’accessibilité et la hiérarchisation de l’information quelque soit le niveau de support du client mail pour les styles.

Pour toutes ces bonnes raisons, j’avais opté pour une mise en page full-css. J’ai été douloureusement rappelé à la réalité par notre spécialiste ès-newsletter qui à l’instant où il reçut le test me déclara du ton doux et mesuré qui est le sien :

Mais c’est quoi ce bordel ? Elle est dégueulasse ta newsletter dans hotmail et gmail[3] !! On peut pas leur servir ça aux abonnés !

Là, j’ai reconnu la force de sa réflexion et l’ampleur de mon erreur : si on a habitué nos utilisateurs à une mise en page qui ne bave pas, on ne peut pas du jour au lendemain leur balancer une mise en page à base de simples titres h1, paragraphes p et listes ul, et ce quelque soit la beauté du concept Degrade with grace. L’utilisateur s’en bat le client mail avec une pelle à tarte. Il veut un truc flashy, qui brille, exactement comme ce qu’il recevait « avant ».

Je me suis alors dit un quart de secondes « Le web serait tellement plus simple sans utilisateurs », et j’ai opté pour les tableaux.

1. Note : en deux mots, pour ceux qui ne veulent pas lire l’anglais : l’important dans une newsletter n’est pas tant la préservation de l’intégrité visuelle du design que la préservation de l’accès à l’information. Voilà un des principes fondamentaux du (web) design.
2. Gmail et Outlook bloquent le téléchargement des images par défaut
3. Hotmail ne prend que les style inline, quant à gmail, il les efface tout simplement : div id="toto devient div tout court !