Ce 3e article a pour but d’approfondir le deuxième billet sur le html. Comme les logiciels de courriels bloquent des parties différentes de code, nous verrons une liste de trucs pour rejoindre le plus de gens possible.
Intégrer les styles
Les styles sont fréquemment intégrés à un fichier Web sous ce format : <link rel= »StyleSheet » href= »ma-feuille-de-styles.css »>. Pour un courriel, il se peut que les données externes comme les images et les styles soient bloqués. Certains auront l’idée d’utiliser le format <style> .MonStyle{} </style> pour placer les styles à l’intérieur du courriel. Encore là , des logiciels de courriels Web ont trouvé le moyen de les bloquer !
Dernier recours : placer directement les styles dans les balises qui en auront besoin. En voici un exemple : utilisez <table style= »color:#ff0000; »> pour obliger le texte à l’intérieur de la table à être de couleur rouge.
Les liens
Vous pourrez changer la couleur des liens (par défaut bleu souligné et mauve lorsque cliqué). La seule limitation est au niveau des effets avec la souris. Les événements « hover » sont bloqués par certains logiciels. Cela ne vous empêche toutefois pas de les utiliser car votre mise en page n’en sera pas brisée si ces pseudo-classes ne sont pas autorisées.
Background
Les fonds de couleurs sont très attrayants pour ajouter de la valeur à un courriel. Les fonds de couleurs sont bien supportés sauf pour Lotus Notes et Eudora. Pour ce qui est des fonds utilisant une image, il se peut que cette image soit bloquée. Il existe toutefois une astuce pour contourner certains logiciels : utilisez le paramètre « background= »mon-image.gif » » dans la balise <table> ou <td> (<table background= »mon-image.gif »>). Si possible, lorsque vous utilisez une image de fond, donnez une couleur de remplacement. Ainsi, si l’image n’est pas visible, une couleur sera disponible pour faire le contraste entre votre texte et le fond si nécessaire (<table background= »mon-image.gif » bgcolor= »:#ff0000; »>).
L’espacement et le positionnement
Pour éviter que des éléments ne se touchent, les propriétés « padding » et « margin » sont utilisées en html. Pour le courriel, le style « padding » est très bien supporté. Par contre, le style « margin » l’est un peu moins. Essayez d’utiliser le style « padding » plutôt que le style « margin ». Si le style « margin » est utilisé, faites des tests en le désactivant pour vérifier si la mise en page reste aérée malgré l’absence de la propriété. Pour ce qui est du positionnement, mieux vaut éviter. Bon nombre de logiciels le désactivent alors votre mise en page s’en trouvera déformée. Utilisez les tables pour l’alignement d’éléments complexes.
En conclusion, les principaux éléments utilisés dans la programmation d’un courriel à surveiller sont :
- l’intégration des styles;
- les liens;
- les backgrounds;
- l’espacement et le positionnement.
Malgré toutes les précautions que l’on peut prendre lors de la première programmation, la meilleure façon d’obtenir une campagne réussie est de faire plusieurs tests et d’apporter les corrections nécessaires avant l’envoi final.
