De nombreux points font problèmes au concepteur Web soucieux de créer des gabarits de pages HTML « propres » (respectant les standards de l’xHTML et du CSS) destinées à être envoyées par email : newsletters, bulletin d’informations électroniques et autres emailings sont très diversement interprétés par les diverses plateformes auxquelles ils s’adressent.

Voyons comment il reste possible de faire du webdesign accessible tout en respectant une mise en forme identique selon le logiciel de messagerie (Eudora, Outlook, Apple Mail, Entourage, Thunderbird…) ou de webmail (Hotmail, Yahoo et Gmail notamment).

Je tiens tout d’abord à citer plusieurs références, desquelles je tire les informations ci-dessous explicitées : consultez l’excellent article « A Guide to CSS Support in Email » paru sur le site de Campaign Monitor qui reprend toutes les balises CSS supportées et non supportées par les différents services de messagerie (logiciels ou webmails).
Egalement à lire en priorité, le tout récent « HTML Emails – Taming the Beast » récemment paru sur l’excellent Vitaminic.
Enfin, la dernière somme à consulter est le fantastique travail réalisé par Xavier Frenette « CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail » qui, lui, s’intéresse spécifiquement aux services de messageries en ligne.

Toutes ces sources sont à l’origine de cet article en plusieurs parties, dont le but est simplement de rassembler en un seul lieu et en français des solutions que je n’ai pas inventées.

On y apprend plusieurs enseignements :
1. ne pas utiliser le design « tout image », c’est à dire ne pas faire une exportation HTML directement depuis votre maquette image réalisée par ex. dans Photoshop, même si vous avez découpé votre grosse image en plusieurs tranches.
Pourquoi ?
Tout simplement parce que de plus en plus de programmes de messagerie refusent par défaut de charger les images de votre emailing HTML (Outlook, Outlook Express et AOL notamment, et ne parlons pas des webmails qui sont encore plus restrictifs).
Vous vous retrouvez alors avec quelque chose de ce style :

Vos lecteurs ne savent pas ce qui les attendent et doivent être vraiment motivés pour lire votre email. Essayez donc de leur donner envie d’afficher votre beau contenu en mettant du texte à la place des grands bandeaux d’images vilement transformés en un carré rouge sur fond blanc !

Je veux parler de ce genre de newsletter qui donne quand même à voir si les images sont cachées :

On a le loisir de commencer à lire le contenu, de l’identifier comme intéressant, et donc de charger les images que contient cet emailing.

Comment faire ?

Découpez votre maquette d’emailing puis optimisez la part HTML générée. En effet, la possibilité offerte par Image Ready d’optimiser une grosse maquette en la découpant manuellement en plusieurs tranches permet bien d’isoler les parties aplats (à sortir au format GIF) des parties photos/images complexes (à sortir au format JPEG) et ainsi d’optimiser au maximum le poids de la page.
Voici un exemple de maquette d’emailing juste avant exportation pour le Web :

On voit bien que l’on a ici isolé les parties fixes du décor et les espaces dédiés aux textes de la newsletter. En utilisant l’outil tranche de Photoshop, on peut tracer différentes zones selon leur fond (zone de décor ou zone de texte) ou leur forme (aplat de couleurs ou dégradés / photos).
Et voici la maquette une fois passée au format HTML et « garnie » de texte :

En plus de gagner en poids, on gagne en accessibilité et on prévient le risque couru avec un email tout HTML. De plus, la page ainsi créée contient du texte et est plus légère : elle passe donc plus facilement à travers des grilles des logiciels de filtration anti-spam.
D’un point de vue maintenance, vous gagnez également en souplesse et rapidité d’exécution puisque votre modèle de newsletter établi, il vous suffit alors d’en modifier uniquement le contenu dans votre éditeur HTML préféré.