Cyberstef

Emailing - backgrounds et images

2011-12-16T00:34:00.000-08:00

Backgrounds

1 - Images

L'utilisation des backgrounds images est à éviter car bon nombre de clients mail ne les gèrent pas. En particulier Outlook 2007 et 2010. Si toutefois, vous souhaitez les utiliser, prévoyez une couleur de fond en fallback pour les clients mail n'en tenant pas compte.  Le risque est, par exemple, de se retrouver avec un texte blanc sur fond blanc.

2 - Couleur

Si on veut donner une couleur de fond à son document html, le plus simple serait de l'indiquer dans le paramètre bgcolor de la balise BODY. Attention : les webmails (Gmail, Yahoo, AOL) ne tiennent pas compte de cette information.La solution, est de créer une TABLE mono-cellulaire avec une largeur de 100% et de donner la couleur à la cellule du tableau.

<body>
  <table border="0" width="100%">
    <tr>
      <td bgcolor="#555555">
        ICI LE CONTENU DE MON MESSAGE
      </td>
    </tr>
  </table>
</body>

Images

On préconise de ne pas dépasser 200 Ko pour un emailing (HTML + images). Il est donc important de soigner l'optimisation de ses images et de choisir le format adéquat.

1 - Format

On exclut d'emblée le format PNG, il n'est pas géré par Lotus 6. Le BMP produit des images trop lourdes, on risque rapidement de dépasser les 200 Ko.Reste le GIF et le JPEG.Le GIF sera plus approprié pour le traitement des logos, images comprenant des aplats de couleurs ou les images avec du texte. Tandis que le JPEG convient mieux aux photos ou illustrations.Un logiciel comme Photoshop permettra de trouver le meilleur compromis (qualité / poids) grâce à sa preview avant l'enregistrement d'une image pour le web.

2 - Animations

Ne pouvant utiliser ni Flash ni javascript pour animer vos emailing, il ne nous reste que le bon vieux GIF animé. Attention : certains clients mail n'affichent que la première image de l'animation. La parade consiste à travailler sa première image de sorte qu'elle soit le plus parlant possible ; il faut par exemple éviter le fade-in à partir d'un écran blanc.

3 - Liens

Si vous ne souhaitez pas qu'il y ait un filet de couleur autour des images sur lesquelles il y a un lien, n'omettez pas de mettre le paramètre border="0".

4 - Balises alternatives

Par défaut, la plupart des clients mail actuels n'affichent les images qu'après que le destinataire ait accepté de les afficher.Conseil : soignez le contenu du paramètre ALT de vos images en décrivant au mieux le visuel de façon à inciter à l'affichage des images.

5 - URL

Pensez à mettre le chemin vers l'image en absolu.

Emailing les bonnes pratiques (généralités)

2011-12-13T22:35:00.002-08:00

Il existe actuellement un nombre assez important de clients mail sur le marché. Qu'ils soient logiciels, en ligne (webmail) ou mobiles, quasiment aucun d'entre eux n'est à 100% respectueux des standards du W3C. Il n'y a donc pas de recette miracle pour créer un message, il faut en permanence composer avec les spécificités et bugs des uns et des autres.
Lotus 6.5 est certainement le plus bugué d'entre eux. Même si cette version date de 2005 et est à l'heure actuelle totalement obsolète, il faut en tenir compte car elle est encore implantée dans bon nombre de grands groupes.
On aurait pu penser qu’avec le temps, les éditeurs allaient nous sortir des clients plus respectueux des standards et nous faciliteraient la création des emailings, mais c’était sans compter sur Microsoft ! En effet, les dernières moutures du logiciel Outlook (version 2007 et 2010) utilisent Word comme moteur de rendu HTML. Pour ma part, il ne m’est jamais venu à l’idée d’utiliser Word pour surfer sur le net...

Généralités

Ne pas utiliser de Javascript.
Ne pas utiliser de RichMedia (Flash / vidéo / audio).
Construire son document en HTML "classique" plutôt qu'en XHTML.
Construire son document à l'aide de tables, les imbriquer pour les constructions plus complexes.
Utiliser les CSS en ligne et avec parcimonie (nous y reviendrons plus tard dans un billet dédié)

Nous allons fixer une largeur maxi à 700 pixels. Il ne s'agit pas d'une limite technique mais cosmétique. Elle vous évitera un scrolling horizontal dans les webmails ayant une fenêtre de visualisation à largeur fixe. Si vous voulez un peu de marge de part et d'autre de votre composition, préférez une largeur de 600 pixels.
Pour ne pas surcharger la bande passante de vos correspondant nous nous fixerons une limite à 200 Ko (HTML + images). Il ne faut pas oublier que le nombre de destinataires consultant leur messagerie sur un smartphone croît de jour en jour.
Il est important de tester le rendu de votre message sur plusieurs logiciels de messagerie, car certains pourraient vous réserver quelques surprises.

Premier billet...

2011-12-13T22:35:00.000-08:00

Bonjour et bienvenue à toutes et à tous... J'ai décidé de créer ce blog, d'une part pour remplacer mon site un peu vieillissant, mais surtout pour faire partager mes expériences.
Après avoir passé 10 ans comme graphiste puis webdesigner indépendant, je me suis associé à Denis Diebolt avec qui nous avons démarré l'aventure Activecom 2006. Nous développons des applications hébergées à destination des (web)marketeurs articulées autour de notre solution d'emailing "maison" activemailer.
Aujourd'hui, notre société est une filiale du groupe TBS, société d'ingénierie spécialisée dans la développement de progiciels dans le monde des médias et de la communication.
Emailing, PHP, javascript, Ajax, Html5, CSS3, etc. feront parties des sujets abordés dans les jours et semaines avenirs.