Vous êtes sur la page 1sur 8

20 conseils pour des emails HTML bien raliss | Graphuc...

http://www.graphuccino.com/2009/04/ressource-20-conseil...

Blog darticles, de ressources, et de tuto sur le graphisme, le design, le multimdia, lanimation, le webdesign, et linfographie.
Blog propos Portfolio Livres

Graphuccino.com le blog de tuto, de ressources et de sources d'inspirations sur le graphisme.

Tuto Des tutoriels de graphisme sur photoshop, illustrator, les css, le webdesign, flash, et l'infographie en gnral... Ressources Des ressources gratuites de graphisme : Des brushes photoshop et illustrator, des script flash et css, des textures,... Articles Des articles et des news sur le monde du graphisme... Inspi Risque lev de tendance laddiction visuelle avec ces sources d'inspiration graphiques dceles aux 4 coins du net...
La pause stimulante de crativit S'abonner au blog par RSS | par email Rechercher :

ok

[Ressource] 20 conseils pour des emails HTML bien raliss


Le Dimanche 12 avril 2009. | laisser un commentaire.

Jai rcemment t confront un gros travail de refonte de campagnes demails pour un diteur de sites (design et intgration). Un peu novice dans le domaine, je pensais navement retrouver les

1 sur 8

01/03/11 13:17

20 conseils pour des emails HTML bien raliss | Graphuc...

http://www.graphuccino.com/2009/04/ressource-20-conseil...

contraintes du design et de lintgration HTML de sites web et je fus bien surpris des rsultats de mes 1ers tests ! Si comme moi, vous avez un jour du analyser en profondeur vos ralisations HTML dans diffrents lecteurs mails, vous savez alors quel point les contraintes du web (nombre de configurations de transmission de linformation diffrentes) sont multiplies lors de la ralisation demails HTML Et face chaque problme, la meilleure attitude reste de tirer profit des difficults pour en apprendre plus. Cest ce que jai fait en me documentant srieusement sur les contraintes et les enjeux du design et de lintgration demail HTML voici donc quelques conseils ou rgles que jai pu retenir et qui pourraient vous intresser.

Quelques rappels rapides


Grossirement, il existe 2 types de lecteurs mail : les logiciels (Outlook, Thunderbird, le mail de mac,), et les webmails (des services par navigateur du type Gmail, Hotmail, Aol, et tout type de fournisseur daccs). Et pour ne rien simplifier, les diffrentes versions de ces lecteurs peuvent parfois prodiguer des interprtations HTML/CSS totalement diffrentes. Globalement il faut retenir que les lecteurs les plus difficiles, et donc ceux qui rclament le plus dattention, sont Outlook 07 (les prcdentes versions beaucoup moins), Gmail, et Lotus. En gardant cela lesprit, il faut ensuite connatre sa cible pour lui adapter au mieux ses ralisations. Beaucoup doutils statistiques permettent davoir des informations sur laudience dune campagne de mail (notamment grce des outils fournis par les gestionnaires de campagnes). Mais si vous navez pas accs aux statistiques prcises de votre audience, je vous conseil de jeter un oeil ce bilan 2008 dun gros diteur de campagnes de mail.

1- Largeur maximale de 600px


Il faut bien garder lesprit que beaucoup des lecteurs de vos mails utilisent des services web (hotmail, orange, aol, yahoo, gmail,) pour consulter leurs messages. Souvenez-vous alors des dimensions conseilles pour vos webdesign de pages entre 800px et 1000px de large. Il faut soustraire de ce chiffre la largeur de la colonne, souvent situe gauche de la page, et parfois dune seconde colonne publicitaire. On arrive un habillage externe au mail denviron entre 170px et 300px sur la plupart des webmails et que dire de ceux qui nutilisent que le mode prvisualisation de leurs lecteurs mail (Outlook, Thunderbird, le mail de mac,). Dans ce cas, la largeur est assez imprvisible. Pour toutes ces raisons, il est conseill de se limiter une largeur de 600px lors du design de ses mail pour tre peu prs certain dune bonne visibilit sur toutes les plateformes. On peut bien sr aller un peu au del, mais passer au dessus de 800px me semble trs risqu.

2- Pouvoir identifier les principales informations du mail dans les 500 premiers pixels de lecture
Encore une fois les contraintes de dimensions ne sont pas les mmes que pour un site web Si vous souhaitez gagner la confiance de votre auditeur et lui faire lire votre mail, il va falloir indiquer clairement de quoi il sagit : qui tes vous, et ce que vous souhaitez lui dire. Il faut donc faire figurer votre nom, celui de votre entreprise, ou mme un logo, ainsi quun titre de mail dans les 300 500 premiers pixels de la hauteur du mail. Cela assurera la visibilit de ces informations mme en mode de prvisualisation (le mode o ces informations sont les plus ncessaires !).

3- Proposer un lien vers la version web du mail


Cest essentiel car cela vous permet de rsoudre la plupart des problmes pour peu que votre lecteur prenne la peine de se rendre sur cette version web imaginez donc lun de vos lecteur, qui souhaiterait accder au contenu de votre mail, mais qui pour une quelconque raison ne pourrait pas le faire correctement dans son lecteur mail. Il serait impensable de ne pas lui proposer un moyen de visualiser ce mail directement dans son navigateur. Il faut donc bien penser publier une version de vos mail sur votre serveur web, et dinclure un lien pointant dessus dans votre version mail.

2 sur 8

01/03/11 13:17

20 conseils pour des emails HTML bien raliss | Graphuc...

http://www.graphuccino.com/2009/04/ressource-20-conseil...

4- Proposer un lien de dsabonnement


Encore une fois cest essentiel ! Si vous entretenez une liste de diffusion rgulire, cest mme obligatoire alors surtout ne loubliez pas.

5- Proposer vos lecteurs de vous ajouter leur carnet dadresse


Cela peut paratre idiot, anodin, ou un peu candide pourtant, si cela est bien fait, les rsultats peuvent tre trs intressants aussi bien pour vous que pour vos lecteurs. Nhsitez pas expliquer dailleurs lutilisateur les avantages de cet ajout (pas de passage dans les spams, images dbloques,).

6- Un quilibre texte/images
Il faut absolument proscrire les mails tout en image ! Cest certainement lun des meilleurs moyens de faire passer directement vos messages par la case spam. Une bonne moiti de contenu textuel est essentielle, surtout dans les secteurs risque : jeux concours, commerce, sduction, rencontres,

7- Un texte alternatif sur vos images


Encore une fois, cest extrmement important. Il faut bien que vous gardiez lesprit que les images de votre mail seront bloques par dfaut sur la plupart des lecteurs (Outlook, Gmail, Hotmail, Thunderbird,). Un texte alternatif vous permet dinformer le lecteur sur le contenu de votre mail avant quil nait besoin de dbloquer les images. Pire, il faut savoir que environ 30% de vos lecteurs ne sauront mme pas reconnatre des images dsactives, et ne les afficheront donc jamais
<img alt="Texte de description" />

8- Dclarer toutes les dimensions de vos images en HTML


Vos images seront presque toujours dsactives par dfaut, mais il ne faudrait pas quen plus votre mise en page soit dtruite ! Il faut bien penser dclarer toutes les dimensions de vos images en HTML pour viter que les espaces quelles remplissent dordinaire dans votre mise en page ne soient crass.
<img width="10px" height="20px" />

9- Eviter les images sur les lments importants


Mme avec de bons textes alternatifs, une image dsactive, ce nest pas trs engageant les liens importants de vos mails devraient dans la mesure du possible ne pas tre intgrs sous forme dimages pour tre les plus efficaces possible.

10- Eviter les termes risque dans lintitul des liens


Mme si les mcaniques du classement dun mail en spam restent relativement obscures, il semble vident quune abondance de termes du type Cliquez-ici, ou encore Gagnez xxxxx euro, est extrmement nfaste. Je ne vais pas tablir une liste exhaustive des termes en questions, le bon sens suffit bien souvent pour viter les tournures gnralistes ou racoleuses.

11- Eviter les URL dans lintitul des liens


Un peu plus subtil que le point prcdent, mais peut tre tout aussi risqu. Lutilisation dURL (du type http://www.google.fr) peut tre assimile du phishing (hameonnage) : une technique qui consiste obtenir des informations (mot de passe, login, numro de carte,) en simulant linterface dun autre site, ou pour notre exemple, les liens vers des sites de confiance.

12- Ne pas aller au del de 8 tableaux imbriqus

3 sur 8

01/03/11 13:17

20 conseils pour des emails HTML bien raliss | Graphuc...

http://www.graphuccino.com/2009/04/ressource-20-conseil...

Un seul lecteur mail (Lotus) semble ne pas russir interprter le HTML au del de 8 tableaux imbriqus. Il faut noter que ce lecteur touche une cible assez particulire et ne reprsentent souvent pas une grosse part de laudience. Dun autre ct, on peut se questionner sur lutilit daller au del de 8 tableaux HTML imbriqus

13- Attention aux GIF anims


Ils resteront tout simplement statiques (sur la 1re image) sur Outlook 07 pour les autres navigateurs a passe priori. Prenez donc soin de bien inclure votre message dans la 1re image de vos GIF anims.

14- Pas de contenu Flash


Votre contenu Flash ne sera pas affich sur la plupart des lecteurs pire il pourra mme provoquer certaines alertes de scurit sur quelques lecteurs !

15- Eviter la transparence sur les PNG


Je vais rester un peu plus retenu sur ce point qui reste flou pour moi il semblerait que la transparence des PNG pose encore problme sur la plupart des lecteurs mail.

16- Eviter le mapping dimages


Cette technique consiste dclarer plusieurs liens sur une seule image grce un systme de coordonnes. Je ne sais mme pas si cest une technique encore utilise dans les intgrations de sites web, en tout cas je pense quon peut assez facilement sen passer dans la plupart des cas.

17- Eviter les images CSS


Les images places dans un style background:url(image.jpg); risquent de ne pas tre affiches dans certains lecteurs cest une chose savoir et anticiper, pour ne pas, par exemple se retrouver avec du texte blanc sur un fond blanc au cas ou les images CSS darrire plan seraient dsactives. Les lecteurs concerns sont principalement Gmail et Outlook 07.

18- Pas de formulaires


Les formulaires ne seront pas actifs dans la plupart des lecteurs mail (AOL, hotmail, Outlook 03, Yahoo mail classic,). Ils ne seront mme pas affichs dans Outlook 07, ce qui pourra en plus vous causer des problmes de design. Prfrez toujours un lien vers un formulaire web.

19- Dclarer tout vos styles en ligne dans les balises HTML
Si il semble vident que les liens vers des feuilles de style externes sont proscrire, il faut faire le tri entre les 2 mthodes restantes. Doit-on dclarer nos styles dans des balises HTML <style> .votrestyle { color:#fff; } </style>, ou bien directement en ligne dans les balises HTML <p style=color:#fff;> ? En fait, la 1re mthode suffirait si lon oubliait Gmail malheureusement, le lecteur de Google ninterprte que les styles en ligne. Si lon souhaite sassurer une compatibilit maximale, il faut donc sen tenir aux styles en ligne, mme si cela est beaucoup plus contraignant pour les mises jour. Remarquez que pour les utilisateurs de Mac et de lditeur de texte Textmate, il existe une srie de bundles pour passer directement vos styles CSS en styles en ligne. Notez galement que si vous dcidez dutiliser des balises <style>, il faudra absolument les placer dans le body de votre page et pas dans le header.

20- Toujours prvoir une version texte brut de vos mails


Dans le pire des cas, il est toujours bon de pouvoir offrir un rsum de votre mail crit en texte brut.

4 sur 8

01/03/11 13:17

20 conseils pour des emails HTML bien raliss | Graphuc...

http://www.graphuccino.com/2009/04/ressource-20-conseil...

Placez le en fin de mail pour ne pas entacher votre design si vous le souhaitez.

Bonus : 21- Balisage smantique, ou mise en page par tableaux ?


Idalement, il faudrait bien sr utiliser un joli balisage HTML qui respecte smantiquement le contenu malheureusement, il nexite pas rellement de standard pour linterprtation des mails, comme cest le cas pour le web. Et trs peu de proprits CSS de positionnement sont correctement interprtes par certains des lecteurs mail les plus populaires (Outlook, Gmail, Hotmail,) : pas de margin ou de padding, pas de positions absolute ou relative, et parfois mme pas de float (dtail des supports de proprits CSS dans les mails). Je vous conseille donc de vous rabattre sur les tableaux pour tout ce qui concerne le positionnement de vos lments cest un peu lourd, cest un peu moche, mais ca passe peu prs correctement partout en attendant une standardisation des interprtations des proprits CSS. Pour ce qui concerne les proprits CSS qui ne touchent pas au positionnement (couleur, taille de texte,), vous devriez pouvoir vous en sortir avec de simples styles CSS en ligne.

Dans tout les cas


Soyez toujours capable danticiper le rendu de vos mails ! Je trouve que cette citation rsume bien la problmatique : beautiful designs for recipients with CSS-friendly clients and accessible, functional versions for everyone else (un design agrable pour les les lecteurs proches des standards, une version fonctionnelle pour les autres). Sources : http://www.pompage.net/pompe/emails-html-dompter-la-bete/ http://www.campaignmonitor.com http://www.campaignmonitor.com/stats/email-clients/ http://www.email-standards.org/ Articles en relation : [Ressources] Rfrence raccourcis photoshop [Tuto] Un rollover fluide en CSS [Article] Graphuccino fait peau neuve [Ressources] Le reset CSS dric Meyer avec explications et bonus [Best of 2008] les 10 meilleurs webdesign Ce sujet vous a plu? Votez pour lui sur les sites suivants :
0 Float It

Mots clefs: design, email, intgration, Ressources, webdesign

Un commentaire pour [Ressource] 20 conseils pour des emails HTML bien raliss
1. Le 20 fvrier 2011 8:21 streaming vf dit : good site good content thanks

Laisser un commentaire

5 sur 8

01/03/11 13:17

20 conseils pour des emails HTML bien raliss | Graphuc...

http://www.graphuccino.com/2009/04/ressource-20-conseil...

Nom (obligatoire) Adresse e-mail (ne sera pas publi) (obligatoire) Site Web

Dites-le !
S'abonner au blog Par RSS | Par email Soyez tenu au courant des derniers articles de graphisme publis sur graphuccino, soit par RSS (aide et explication sur les RSS), soit par email. Les derniers sujets : [Ressource] 20 conseils pour des emails HTML bien raliss [Tuto] Un rollover fluide en CSS [Tuto] Faire une photo HDR avec photoshop [Ressources] 20 brosses Photoshop florales ou naturelles gratuites [Inspi] 47 cartes de visite originales Les derniers commentaires : streaming vf dans [Ressource] 20 conseils pour des emails HTML bien raliss streaming vo dans [Tuto] Un rollover fluide en CSS Shazzad Hoshien dans [Tuto] Faire une photo HDR avec photoshop ubleader dans [Tuto] Faire une photo HDR avec photoshop Hito dans [Tuto] Faire une photo HDR avec photoshop Naviguer par mots clefs :
ric Meyer

graphuccino hdr

best of 2008 bouton brush carte character design colorisation css custom design dessin flash font html illustration Illustrator Inspi intgration javascript jeux vido jquery logo photo
print raccourcis reset

photoshop
Les sujets en relation :

Ressources scan speed painting stylisme template texte texture

thme toys Tuto typo vectoriel video web

webdesign wordpress

[Ressource] 20 conseils pour des emails HTML bien raliss [Inspi] 46 character design style vectoriel sensationnels [Inspi] 5 toyz designers dexception [Best of 2008] les 10 meilleurs webdesign [Ressources] Le reset CSS dric Meyer avec explications et bonus

6 sur 8

01/03/11 13:17

20 conseils pour des emails HTML bien raliss | Graphuc...

http://www.graphuccino.com/2009/04/ressource-20-conseil...

Le livre du moment

Bold visions est un livre du clbre artiste numrique Gary tonge. Les mthodes et les techniques du matre de la peinture numrique sont dtailles dans des tutos step by step. Attention, ce livre n'existe qu'en anglais, mais si vous pouvez passer outre la barrire de la langue, a vaut vraiment le coups ! Voir le livre

Tuto [Tuto] Un rollover fluide en CSS [Tuto] Faire une photo HDR avec photoshop [Tuto] Un effet de rollover style firefox sur vos boutons [Best of 2008] Les 10 plus grandes sources dinspiration de lanne [Best of 2008] Les 10 meilleurs tuto photoshop Ressources [Ressource] 20 conseils pour des emails HTML bien raliss [Ressources] 20 brosses Photoshop florales ou naturelles gratuites [Best of 2008] Les 10 plus grandes sources dinspiration de lanne [Best of 2008] Les 10 meilleurs tuto photoshop [Best of 2008] Les 10 meilleurs logo Articles [Article] Graphuccino fait peau neuve

7 sur 8

01/03/11 13:17

20 conseils pour des emails HTML bien raliss | Graphuc...

http://www.graphuccino.com/2009/04/ressource-20-conseil...

[Best of 2008] Les 10 plus grandes sources dinspiration de lanne [Best of 2008] Les 10 meilleurs tuto photoshop [Best of 2008] Les 10 meilleurs logo [Best of 2008] Les 10 meilleurs thmes Wordpress gratuits Inspi [Inspi] 47 cartes de visite originales [Best of 2008] Les 10 plus grandes sources dinspiration de lanne [Best of 2008] Les 10 meilleurs tuto photoshop [Best of 2008] Les 10 meilleurs logo [Best of 2008] Les 10 meilleurs thmes Wordpress gratuits propos de graphuccino | propos des RSS | Livres de graphisme | Contact | Plan du site Design, thme Wordpress et intgration : Julien Zmiro Graphuccino.com est firement propuls par WordPress. Blog Flux Directory | Blogcatalog | Blogcloud | Technorati

8 sur 8

01/03/11 13:17