07 Juil

Emailing et formatage

par Etienne

Le formatage et la construction de votre email sont des points à ne pas négliger, nous effectuons habituellement ce travail pour nos clients. Toutefois, si vous disposez des compétences en interne et du temps nécessaire, vous pouvez réaliser la partie design et intégration html/css.

Le process

  • Vous préparer le webdesign de vos templates
  • Si vous les intégrez, faites le faire par une personne expérimentée en css
  • Vous nous envoyez les modèles pour validation et intégration dans la plate-forme 2Diffuse (balises dynamique, liens)
  • Après validation, vous pourrez envoyer des emailings, pensez à bien tester le résultat en amont.
  • Nota : nous ne corrigeons pas les montages réalisés, notre rôle est ici d’intégrer vos éléments à la plate-forme.

Règles de préparation générale

  • Travailler sur Photoshop
  • Une taille de 500 à 600 px de large en 72 dpi
  • Les textes doivent être des polices éditables en texte (arial, verdana, times, ..) disponibles sur les postes de vos lecteurs
  • Définissez les zones qui devront être éditable lors de la création de campagne (prévoyez une zone si cela doit être une zone modifiable)

Dans le design, pensez à toujours mettre quelques zones (en texte)

  • Un lien vers la version en ligne avec un texte adapté : « Voir la version en ligne de cet email »
  • Un lien vers la désinscription (« Se désinscrire de notre newsletter »)

Les contraintes :

  • Chaque lien « En savoir plus » ou contenu additionnel doit être stocké en ligne ou sur votre site web (détail d’actualité, page produit), le système ne gère par d’ancres entre articles

Exemple de montage modèle

  • Contactez-nous pour recevoir un modèle simple une colonne et un modèle deux colonnes avec sommaire.

Du coté des mobiles

Les statistiques montrent une forte progression de lecture sur les mobiles (iphone, android, blackberry, ..), quelques règles à suivre :

  • Restez en dessous des 600 pixels de large, un iphone a une largeur de lecture de 320 pixels, votre contenu restera lisible pour vos lecteurs
  • Désactivez l’ajustement de la taille du texte sur les mobiles : si vous souhaitez conserver une lecture des textes à la taille que vous avez décidé, ajoutez cette règle CSS qui désactive l’ajustement automatique de la taille des polices : -webkit-text-size-adjust: none;

Testez, testez, testez, …

Si vos emails sont actuellement lisibles chez vos clients, pensez à les tester régulièrement pour vérifier que tout est toujours valide : mise à jour majeure d’office, openoffice, gmail, yahoomail, …

Questions & Réponses

Quelle largeur doivent faire mes emails ?

  • Utilisez une taille fixe, l’extensibilité du contenu déforme votre design et rend souvent le contenu totalement illisible.
  • Que vous soyez sur outlook, gmail, … la taille de votre email ne prend qu’un morceau de votre navigateur, qui lui-même est rarement plein écran.
  • Restez dans les normes : 550 à 600 pixels de large sont une bonne moyenne.
  • La hauteur importe peu, pensez à placer les contenus importants en haut, dans les 400 premiers pixels

Le design doit en tout cas être adapté à vos cibles (consommateurs, clients b2b, …), pensez utilisateur et landing pages pour bien faire passer votre message.

Les images sont bloquées par défaut sur les terminaux de mes clients, que puis-je faire ?

La majorité des clients de courrier électronique (webmails ou logiciels) bloquent le chargement des images, une action est souvent nécessaire (clic-droit télécharger les images sur outlook par exemple).

Nos recommandations :

  • Utilisez des balises alt sur les images
  • Ne réalisez pas d’emailing tout en images, le lecteur doit comprendre le message sans avoir à ramener les images

Dès le début de votre email, disposez du texte/html pour que l’utilisateur comprenne le contenu et le but votre email, avant de télécharger les images.

Peut-on utiliser des formulaires dans un emailing ?

Bien que ce soit possible, cela marchera une fois sur deux (Outlook, Windows Live, AOL, Yahoo, ne supportent pas cette fonctionnalité).

Notre recommandation est d’éviter tout formulaire dans les emails, réalisez cette fonctionnalité en ligne sur votre site ou landing-page, soignez le design pour inciter les lecteurs à se rendre sur votre formulaire.

Peut-on ajouter des vidéos dans un emailing ?

A ce jour (je vous passe la bataille des codecs et système propriétaires..), le support de la vidéo dans les emails est très faible, vous êtes sûrs de faire des mécontents ou de ne pas atteindre vos objectifs.

Le seul moyen à ce jour est le gif animé, c’est dire…

Quelques évolutions sont en vue avec html5, mais ce sera pour les années à venir pour atteindre un taux de lecture satisfaisant.

Peut-on mettre du flash dans un emailing ?

Clairement non, le support est très faible dans tous les clients, même les webmails. De plus la plateforme iphone/ipad ne supporte pas Flash.

Si un joli carré gris fait partie de votre design, allez-y, sinon passez votre chemin.

Catégories : Technique Webdesign