Le moment est maintenant venu de passer à la programmation. Comme mentionné dans le premier article de cette série, un courriel html ressemble à une page Web puisque le langage de programmation est le même. Il faudra créer un fichier .html puis l’importer dans un logiciel de courriels. Des logiciels comme Adobe Dreamweaver et GoLive ou Microsoft FrontPage peuvent servir à programmer le courriel. Il faudra toutefois faire quelques corrections à la main par la suite si nécessaire pour rendre ce courriel le plus compatible possible avec les différents logiciels de courriels.
DIV vs TABLE
De plus en plus de sites Web utilisent maintenant les « div » combinées à une feuille de style pour mettre en forme leurs pages. La tendance est de délaisser les tables pour une technologie plus efficace. Néanmoins, les tables sont encore un moyen sûr pour l’envoi de courriels. Des logiciels comme Hotmail, Gmail ou Yahoo! Mail ne permettent pas d’utiliser la propriété « position » qui est fréquemment utilisée avec les balises « div ».
Feuilles de styles
La majorité des logiciels courriels supportent les CSS mais d’autres non. Il est donc important de connaître ce qui est supporté et ce qui ne l’est pas pour rejoindre le plus grand nombre d’utilisateurs possible. Des tableaux comparatifs sont disponibles sur le Web suite à des tests de compatibilité que des usagers ont mené.
En gros :
- Thundebird, Yahoo! Mail, Outlook 2003, Mac mail, Entourage et Hotmail supportent assez bien les CSS,
- Outlook 2007, Gmail, Live mail sont moins performants,
- Lotus Notes 6 et Eudora donnent de piètres rendements. Eudora ne supporte aucun CSS.
Afin qu’un plus grand nombre de logiciels puissent afficher ces styles, il est préférable de coder les CSS directement dans les balises du texte. Par exemple : <p style= »color :#000066; « >. La raison ? Des logiciels (surtout les versions Web) effacent tout simplement les balises <link href= »"> et <styles></style> dans le <head> ou dans le <body>. On évite donc les surprises en ajoutant les styles directement dans le corps du message.
Les images
Comme les images ne sont pas envoyées avec les courriels, il faudra les inclurent dans le code à l’aide de chemins absolus. Lorsqu’un utilisateur sélectionne un courriel pour le lire, les images sont téléchargées à partir du Web. Il est donc important de préciser à quelle adresse télécharger les images. Les logiciels de conception Web utilisent en général des liens relatifs. Il faudra s’assurer à la fin de la programmation du courriel, de changer ces liens dans le code si ceux-ci n’ont pas été corrigés au fur et à mesure.
À titre comparatif, un lien relatif ressemble à ceci « images/logo.gif » tandis qu’un lien absolu ressemble à cela « http://www.axialdev.com/images/logo.gif ». Une adresse commençant par la lettre d’un disque dur n’est pas adéquate (C://Mes documents/… ). Ce chemin indique que les images doivent être téléchargées à partir de votre poste. Une personne qui ouvre un courriel que vous venez de lui envoyer aurait dans ce cas besoin de se connecter à votre ordinateur pour les voir, ce qui est impossible à accomplir pour un utilisateur à moins que celui-ci ne pirate votre système…. Il est donc essentiel d’avoir un espace sur le Web pour y ranger vos images.
Il est aussi préférable de compresser les images du mieux que l’on peut pour alléger le poids total à télécharger. Un courriel trop long à télécharger peut déplaire à l’utilisateur et celui-ci pourrait simplement décider de passer par-dessus votre courriel.
Dernier petit détail, s’assurer que les images qui sont inclues dans le courriel possèdent un tag « ALT ». Si les logiciels courriels de votre public cible bloquent les images ou que ceux-ci utilisent un appareil portatif comme un cellulaire ou un ordinateur de poche, du texte sera tout de même visible.
Alternative à l’affichage du message
Étant donné que les images peuvent servir à cacher de l’information ou des virus, bon nombre de logiciels courriels vont bloquer celles-ci. Il se peut aussi qu’ils n’interprètent pas bien les CSS. Il est donc conseillé de placer un lien dans le courriel pour que les gens puissent voir votre message d’une autre façon. Il s’agit généralement d’un lien vers la page Web qui a servi pour l’envoi du courriel. Il peut aussi s’agir d’un lien vers un document PDF.
Désabonnement
Tout courriel qui suit les règles d’éthiques devrait offrir la possibilité aux utilisateurs de pouvoir se désabonner. Ne pas mettre à la disposition ce lien pourrait vous valoir une réputation de polluposteur à long terme.
En conclusion :
- utiliser des tables plutôt que des « div » pour la disposition des éléments d’un courriel,
- s’assurer que les styles et les méthodes employées pour les intégrer sont compatibles avec le plus de logiciels courriels possible,
- s’assurer que les images soient légères, aient un bon chemin Web et possèdent un tag ALT,
- vérifier qu’une alternative s’offre à l’utilisateur s’il ne peut voir le message correctement,
- offrir la possibilité de se désabonner.
