La conception d'un message HTML pour l'emailing est bien différent de ce qu'on peut faire aujourd'hui pour le web, attention aux faux amis !
- Le message
- Affichage des images
Certains webmails et messageries bloquent par défaut l'affichage des images. Incitez le destinataire à afficher les images dès le début du message en le rassurant (mettre en avant son logo, le nom de sa société en texte, utiliser également les balises ALT des images pour présenter ces informations)?
- Le pré-header
C'est un texte poistionné entre l'en-tête et le corps du mail. Il est très important car certaines messageries les font apparaître à côté de l'objet ou dans les aperçus des messages sans même avoir à les ouvrir (GMail, iPhone, Yahoo,...). Prenez donc l'habitude de placer ce texte (explicitez votre objet) avant votre phrase qui emmène votre destinataire vers une page miroir (si vous ne parvenez pas à lire ce message, suivez ce lien).
Ne dépassez jamais les 720px de large. Vous pourriez faire plus large mais il faut tenir compte des différents menus "Boîte de réception" ou autre "Calendrier" qui rognent les espaces à gauche et à droite des messageries.
Placez les éléments importants et autres appels à l'action (CTA - Call To Action) dans les 400 premiers pixels de hauteur.
- Encodage
Privilégiez l'encodage ISO-8859-1 ou UTF-8. Le premier regroupe tous les caractères utilisés par les langues occidentales les plus courantes (Français, Anglais, Allemand, Espagnol ...). Le second est plus international et vous donnera plus de disponibilités pour l'affichage de caractères étrangers (Japonais ou Chinois par exemple).
- Structure HTML
L'encodage HTML de votre message doit être constitué de tableaux et cellules (les mêmes pratiques qu'à la fin des années 90). Oubliez l'intégration HTML avec uniquement des DIV et du CSS, certaines messageries (Outlook en particulier) vous le feront vite comprendre avec un affichage hasardeux.
Ne composez pas votre message uniquement avec des images, votre campagne emailing finirait très probablement en SPAM. Ajoutez du texte, un ratio de 60% de texte et 40% d'images est préconisé.
- CSS
Le CSS est utilisable dans l'emailing mais il faut savoir que certaines messageries ne savent pas lire toutes les références contrairement aux webmails qui ne posent que très peu de problèmes. Utilisez uniquement du CSS "inline" intégré dans la balises «head»
- Balises et attributs à ne pas utiliser
SCRIPT : bannissez les scripts de vos intégrations HTML ou alors c'est le SPAM assuré !
MAP : les area map sont difficilement lisibles par les messageries, il est fortement conseillé d'adapter la découpe de vos images en fonction des zones cliquables.
COLSPAN et ROWSPAN : des décalages dans vos découpes d'images peuvent apparaître, il est préférable de dupliquer vos tableaux HTML
BACKGROUND IMAGE : les images de fond ne sont pas affichées par les anciennes versions d'Outlook.
DIV : préférez les tableaux et cellules qui sont plus appropriés pour les messageries
FORM : les formulaires sont à proscrire des emailings, cela va créer du SPAM et le bouton de validation à de fortes chances de ne pas s'afficher, rendant votre formulaire inutilisable. Si vous souhaitez un formulaire, créez une Landing Page spécifique et placez un Call To Action sur votre création emailing.
GIF ANIMÉS : certaines anciennes versions d'Outlook ne lisent pas les GIF Animés, elles n'afficheront que la première image de l'animation.
- Logiciels inadaptés
Certains logiciels de traitement de texte permettent la génération de pages en HTML (comme Microsoft Word par exemple). Il est tentant de passer par ces solutions sauf que le code généré n'est pas du tout adapté à l'emailing ! Vous le reconnaitrez aisément par sa taille (environ 10 fois plus de lignes qu'une intégration effectuée «manuellement») ainsi que ses nombreuses balises spécifiques inconnues des standards du web.