E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013
E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le but est de trouver de nouveaux clients ou de transformer des prospects en nouveaux clients. C est une sorte de prospectus numérique, qui en principe doit être envoyé à une liste de destinataires volontaires pour recevoir ce genre d annonce. Sinon cela s appelle du spam. Les objectifs de l e-mailing sont purement commerciaux : transformer un abonné en client, fidéliser, recruter. Une des formes d emailing sert à informer ses clients de son actualité : on parle de newsletter ou lettre d information. La newsletter a un type de contenu plus informatif, plus rédactionnel. Les objectifs peuvent être de maintenair une relation avec ses contacts en les maintenant informés de l actualité de l entreprise. Elle est envoyée à une liste d abonnés ou liste de diffusion. L internaute s est inscrit au préalable à cette liste en cochant une case (opt-in). Pour résumer opt-in actif : l internaute a coché une case opt-in passif la case est déjà cochée sur un menu demandant «voulez-vous recevoir nots informations» L e-mailing est typiquement publicitaire envoyé en masse alors que la newsletter est informative et ciblée. Si elle contient de la publicité c est pour des produits qui sont sûrs d intéresser le prospect. Ex : pour quelqu un qui va souvent à Strasbourg, le titre du mail de la newsletter était : alors que le contenu n en parlait pas! Dans un cas comme dans l autre Vous devez avoir le consentement de l internaute, ce sont les mêmes législations qui régisssent leur envoi. Ces documents seront réceptionnés par des applications capables de lire des e-mails. Ils devront donc être codés uniquement en XHTML, sans flash, sans javascript. Les méthodes d envoi sont les mêmes, mêmes techniques, mêmes applications (locales ou en ligne) Le choix des applications dépend uniquement du budget, des volumes et du niveau de suivi marketing
Techniquement une newsletter est une page HTML, qui sera interprétée, non pas par un navigateur (Firefox, Chrome, Safarir ou IE) mais par un client mail : Outlook express, Mail, Lotus Notes ou des web mails ou encore de plus en plus des terminaux mobiles, i-phone, i-pad, android La newsletter est généralement associée à un site web, et les abonnés reçoivent les dernières informations du site ou de la marque (produits, services, texte informatif...). RENDUS PAR LES CLIENTS E-MAILS Les clients e-mails (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com...). Les webmails affichent les messages en rajoutant leurs propres styles. Entre autres, Outlook ne supporte pas les marges. Une newsletter graphique qui s afficherait au pixel près sur tous les clients mails est une utopie IMAGES DANS LES NEWSLETTER Par défaut, beaucoup de clients mails n affichent pas les images dans les newsletters. Il ne faut donc pas faire une seule grande image, qui serait tentant car l affichage serait identique sur tous les clients mail. Privlégiez 50/50. COMMENT LES IMAGES SONT-ELLES SUPPRIMEES? Les statistiques prouvent que un e- mail entièrement conçu avec des images qui ne s affichent pas est ignoré ou supprimé directement par l utilisateur Regardons le code de la newsletter sans les images, l attribut src a disparu : <img alt="" style="display:block" border="0" height="9" width="123"> Regardons le code de la newsletter avec les images, l attribut src a réapparu : <img src="http://newsletter.service-voyages.com/promovacances/reportage/afrique/p.jpg" alt="" style="display:block" border="0" height="9" width="123"> Sans image Avec image Sans image Avec image Dans les exemples ci-contre : Nespresson Apple, Orange, Kookai : aucune information n apparaît sans les images activées
IMAGES DANS LES NEWSLETTER Sans image Avec image Dans les exemples ci-contre : beaucoup d informations peuvent donner envie de cliquer ou d afficher les images ATTENTION le chemin des images doit être en absolu, car elles doivent être déposées sur un serveur N oubliez pas l attribut alt, qui sera la seule information affichée pour un utilisateur qui n aura pas activé les images. Ajoutez un style=display:block; sur chaque image pour éviter les espaces qui pourraient appraître en dessous.
CODE HTML Faire des tableaux! Les «float» ou «display» si pratiques en css pour les pages web sont problématiques pour certains clients mails. Oublier les divs, positionnements, float et autres techniques recommandées pour les pages web Beaucoup de clients mails vont carrément supprimer l en-tête, donc plus de possibilité de CSS interne ou externe. Seules possibilités les styles en lignes avec l attribut «style» Certains clients mails suppriment aussi la balise <body> Privilégiez une structure simple Pas trop de colspan et rowspan Faire plusieurs tableaux les uns en-desous des autres. Evitez de centrer le tableau et choisissez une largeur de 600px de préférence, les web mails utilisent les colonnes de gauche et de droite. DOCTYPE NE pas mettre de DOCTYPE, car il sera de toutes façons ignoré par plusieurs clients mail, mettre simplement la balise <html>. Il est même quelque fois remplacé par un autre (XHTML strict pour Gmail et Hotmail), ou XHTML transitionnel pour Yahoo ENCODAGE DES ACCENTS Les clients mails cidessous ignorent le doctype : AOL Android Gmail Application Lotus Notes 6.5, 7, 8 and 8.5 Outlook 2007 et 2010 Thunderbird 2 et 3 Yahoo New Ne pas utiliser l UTF-8, mais coder les accents à l ancienne : é = é à =à ç = ç etc... PAS DE CSS dans l en-tête Uniquement des CSS en ligne, et le moins possible. Evitez les raccourcis (TRBL) Utilisez les couleurs hexadécimales à 6 chiffres et non 3 Certains clients mail ne comprennent pas les valeurs héxadécimales à 3 chiffres STYLER LES LIENS En HTML on est obligé de garder le soulignement, la seule possibilité pour ne pas souligner les liens ou en changer la couleur sera donc de faire appel à des CSS en ligne. <a style= text-decoration:none ; color: #000000 >Le lien noir non souligné</a> PROPOSER un lien pour visualiser la newsletter dans un navigateur Certains clients mail ne comprennent pas la couleur avec l attibut style sur un lien On peut rajouter la balise <span> pour la couleur, mais le soulignement du lien restera bleu) Cette page sera donc la même que la newsletter, mais déposée sur un serveur, et donc lue par les navigateurs. On fera un lien depuis la newsletter sur le «consultez-le en ligne» de la phrase : «Si vous ne visualisez pas ce message, consultez-le en ligne» vers la page sur le serveur.
LISIBILITE sans images Si les images ne s affichent pas, pensez aux couleurs d arrière plan qui permettront une meilleure lisibilité de votre email. Exemple Sans image Avec image Pensez à spécifier la hauteur et la largeur des images pour qu elles gardent leur emplacement et ne gênent pas l affichage Sans image Avec image VOIR LE CODE DES NEWSLETTERS Si vous pouvez visualiser vos newsletters avec votre webmail dans Firefox, sélectionner le contenu de la newsletter et avec un clic droit : «code source de la sélection» Copier le code dans votre éditeur HTML favori dans la balise <body>, visualiser dans un navigateur, vous avez la newletter complète, même en local, puisque les images sont stockées sur un serveur.
RECAPITULATIF - Pas de doctype, mais la balise HTML - Encodage des acccents en ISO8859-1 pour les langues de l Europe de l Ouest - Formater les typos, couleurs et tailles de texte en HTML - Faire des tableaux, ne pas utiliser de float ou display - Le formatage HTML doit être présent dans chaque cellule - Utiliser un tableau général de 600px - Le poids de la newsletter ne doit pas dépasser 200Ko - Ne pas centrer le tableau - Faire des tableaux les uns sous les autres, plutôt qu imbriqués - Pas de CSS dans l en-tête - Le moins possible de CSS en ligne (lignes vides pour les espaces) - Pas de raccourcis dans les CSS - Donner les hauteurs et largeurs aux images - Mettre les images sur un serveur et les appeler avec un chemin en absolu - Ajouter un style=display: block dans la balise des images - Proposer un lien vers la même page déposée sur un serveur - Faire un mixte de 50/50 entre texte et images. - Allégez le poids de vos images - Mettez l attribut alt sur toutes vos images - Pas de javascipt, flash ou formulaire (puisqu il n y a pas d en-tête) - Faire deux versions de la page HTML, une qui sera envoyée comme newsletter, avec un tableau non centré, et une qui sera déposée sur un serveur avec possiblité de centrer le tableau. On y accèdera depuis le lien de la newsletter visualiser en ligne
CODE HTML POUR FORMATTER LE TEXTE Pour les couleurs d arrière-plan des cellules ou tableau, l attribut bgcolor <table width= 600 bgcolor= #000000 cellspacing= 5 cellpadding= 5 > <tr> <td bgcolor= #ffff00 >le contenu</td> </tr> </table> Pour les tailles, typo et couleurs de texte : utiliser la balise <font> qui prend 3 attributs : size (pour la taille), color (pour la couleur) et face (pour la typo). Cette balise <font> doit être présente dans CHAQUE cellule de tableau! <table width= 600 bgcolor= #000000 cellspacing= 5 cellpadding= 5 > <tr> <td bgcolor= #ffff00 > <font face= Arial, sans-serif size= 2 color= #000000 >le contenu</font> </td> </tr> </table> Les tailles de polices en html sont 1, 2, 3, 4, 5, 6. Par défaut c est 3, 1 et 2 sont plus petits et 4,5,6 plus grands CODE HTML POUR FORMATTER LES ARRIERES PLANS Pour les image d arrière-plan utiliser l attribut background Gmail ignorera complètement l attribut (url) dans le style en ligne. Attention, en HTML les images d arrière-plan se répètent automatiquement. Il faudra donc donner à la cellule ou au tableau les dimensions de l image.
sites de référence http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html http://www.pompage.net/pompe/emails-html-dompter-la-bete http://www.xavierfrenette.com/articles/css-support-in-webmail http://www.reachcustomersonline.com/content/2004/11/11/09.27.00/index.php http://www.alistapart.com/articles/cssemail/ Le numéro spécial n 22 du magazine WEB DESIGN NEWSLETTER TESTS Pour tester gratuitement l affichage de votre newsletter envoyez-la à des adresses sur le plus de clients mail différents avec sur pc sendblaster.fr sur mac MaxBulk Mailer http://www.maxprog.com Uiliser le site emailonacid http://www.emailonacid.com/
ENVOI A partir d une plateforme http://www.express-mailing.com/ Envoi avec des outils de création et d envoi http://www.emailvision.fr/ http://www.rapidmail.fr/ http://www.sarbacane.com/ http://mailchimp.com/ https://fr.mailjet.com/ Voir aussi un comparatif des solutions existantes : http://www.maddyness.com/startup/2013/01/15/mailchimp-aweber-mailjet-simple-mail-tinyletter-getresponse/ Pour l envoi : - L objet du mail doit être relativement court - Mettez le nom de la société -Même pour des tests, ne mettez pas le mot «test» dans l objet, cela partira directement dans les spams.
création avec Dreamweaver A partir d un fichier HTML avec le doctype XHTML, aller dans le menu Modifier >propriétés de la page > titre/codage et choisir Occidental (ISO Latin1) sur Mac et Europe de l Ouest sur Windows Le résultat dans le code de la page HTML devra être le suivant : Pour insérer le premier tableau, utiliser la fenêtre des insertions, onglet commun, et choisir l icône «tableau», ou le menu insertion > tableau La fenêtre suivante apparaît : Choisissez le nombre de lignes et de colonnes Pour le premier tableau : 1 ligne, 1 colonne Largeur du tableau : 600px. Largeur de bordure : ne pas remplir Attention Si le tableau précédemment demandé était en %, Dreamweaver l aura gardé en mémoire. Vous risquez de créer un tableau de 600%! Marge intérieure des cellules : 5 si nous voulons ce premier tableau éloigné des bords de la fenêtre de 5 pixels (Il s agit du cellpadding) Et espacement entre les cellules, mettre 0. Il s agit du cellspacing. Pour la partie basse, garder «Aucun» Résultat dans la fenêtre de création de Dreamwever et dans le code
création avec Dreamweaver Notre tableau de contenu étant ainsi créé, les tableaux qui seront à l intérieur devront être centrés. Nous avons la possibilité de demander à centrer le contenu de la cellule (<td>) Sélectionner la cellule dans la barre d état, et demander un centrage horizontal. Pour insérer d autres tableaux dans celui-ci, placer le cusreur à l intérieur et recommencer l opération d insertion de tableau depuis les insertions d objets communs. Cette fois nous voulons un tableau de 550px puisqu il doit être à l intérieur d un tableau de 600px avec du remplissage de 5px tout le tour. Et le rempllissage et l espace entre les cellules peut être plus que par défaut, par exemple, 5px aussi, il s agit d écrire la phrase qui permet aux internautes d aller consulter la page en ligne Nous avons donc un 2e tableau, de 550px, centré dans le premier. Nous pouvons coller la phrase «Si vous ne visualisez pas ce message, consultez-le en ligne»
création avec Dreamweaver Cette phrase doit être centrée dans la cellule, ceci est possible avec l attribut align= center, que nous trouvons dans les propriétés de la cellule, comme précédemment pour la première cellule. Nous allons maintenant formater le texte, couleur, taille et typo. Il faut utiliser la balise <font> avec ses trois attributs, face, color et size. Ceci devra être impérativement fait dans chaque cellule. Dreamweaver a une aide intégrée pour cela, dans la partie code. Il suffit de mettre le curseur au bon endroit (tout de suite après <td align= center > et de taper le signe <. La liste des balises apparaîtra alors, et il nous suffira de choisir la balise <font> et de valider notre choix avec la touche entrée ou un double clic La balise <font> est insérée et ouverte. Il nous faut maintenant les attributs. Le curseur étant collé à la balise, appuyer sur la barre d espace nous fera apparaître les attributs. Une fois cet attribut inséré, appuyer tou de suite sur la barre d espace, pour avoir à nouveau la liste des attributs, choisir par exemple color, valider avec double clic ou la touche entrée Une fois cet attribut inséré, appuyer tout de suite sur la barre d espace, pour avoir à nouveau la liste des attributs, choisir par exemple color, valider avec double clic ou la touche entrée. Choisir la couleur dans la palette. A nouveau, barre d espace, pour la liste des attributs, chercher size. Attention Dramweaver propose des valeurs aboslues et des valeurs avec + ou -. La valeur par défaut étant 3, si vous choisissez +1, cela équivaudra à 4!
création avec Dreamweaver Fermer la balise avec le signe >. Si Dreamweaver surligne en jaune, cela signifie que la balise <font> n est pas fermée. Il faut donc fermer cette balise après le texte. Mise en place du lien et formatage du lien. Nous surlignons la partie qui sera le lien (consultez-le en ligne) et dans les propriétés du lien, nous mettons un # dans un premier temps. Pour styler le lien, nous plaçons le curseur tout de suite après la balise <a, afin d avoir la liste des attributs, comme précédemment. Nos allons choisir l attribut style, valider et choisir color puis la couleur, insérons un point-virgule pour séparer les paramètres de css, ensuite à nouveau : barre d espace, text-decoration vaider, puis none et un point-virgule. Insertion d un deuxième tableau, après celui-ci, à l intérieur du tout premier Pour ne pas se tromper, il est plus facile de sélectionner le dernier tableau créé dans la barre d état, Cliquez n importe ou à l intérier du dernier tableau Puis dans la barre d état, cliquer sur la dernière balise table Le dernier tableau créé est sélectionné. Il suffit alors d utiliser la touche flèche du clavier. Cela placera le curseur au bon endroit dans le code.
création avec Dreamweaver Pour la partie en-tête nous sommes donc au bon endroit pour insérer un nouveau tableau, cette fois deux colonnes et une ligne. Dans la cellule de gauche, insérons notre image depuis les insertions d objet Ne pas oublier de renseigner l attibut «alt» Dreamweaver va aléatoirement changer la largeur des cellules, en augmentant considérablement celle qui contient l image. Le HTML n a jamais adapté les contenus aux cellules de tableau. Il ne nous reste qu à positionner le curseur entre les deux cellules et de faire glisser le curseur pour modifier la taille des cellules Pour obtenir le décalage du texte de la 2e ligne, nous allons hélàs faire comme à l aube d internet et utiliser des caractères insécables, ( ) surement nterprétés par les clients mail, alors qu un style en ligne avec un padding-left n est pas garanti. Pas très joli, mais plus efficace! Les espaces entre la navigation et le «header» seront créées par des tableaux vides, d une ligne RAPPEL Par défaut, le contenu des cellules est aligné à gauche horizontalement et au centre verticalement La navigation est faite d un tableau 1 ligne et 7 colonnes. Centrer le contenu en sélectionnant la balise <tr> et centré horizontalement. Cela centrera le contenu de toutes les cellules. RAPPEL Il sera donc bien sûr aussi possible d aligne le contenu d une cellule à droite, et verticalement en haut ou en bas.
création avec Dreamweaver Pour mettre une couleur d arrière-plan dans une cellule, sélectionner la cellule et utiliser l inspecteur des propriétés. Dans les cellules, nous éviterons la balise <p> qui génèrent des marges que nous ne pourrons pas supprimer. Nous ferons donc parfois deux sauts de ligne <br /><br /> Pas très joli non plus, mais à nouveau nous allons chercher un meilleur affichage partout.. Pour mettre une image d arrière-plan dans une cellule ou un tableau, utiliser l attribut background et parcourir pour aller chercher l image Attention, les images d arrière-plan se répètent obligatoirement en HTML, le tableau ou la cellule devront donc avoir les dimensions exactes de l image. Si malgré cela l image se répère, c est que le tableau a un contenu trop important et il faut faire en sorte que le contenu de dépasse pas les valeurs choisies. Si on demande à un tableau de faire 100px de haut, par exemple et que le contenu est plus grand, bien que le code demande 100px de haut, le contenu débordera
création avec Dreamweaver récapitulatif Nous avons vu comment - choisir le doctype et l encodage - insérer un tableau principal - insérer un tableau dans un tableau - centrer le contenu d une cellule (qui peut être un autre tableau) - centrer toutes les cellules d une rangée avec l attribut «center» sur la balise <tr> - formater le texte avec choix de police, taille et couleur en HTML avec la balise <font> - formater la décoration d un lien et sa couleur avec l attribut style - insérer une image avec la fenêtre d insertion L attribut «<style» peut être utilisé pour toutes les balises - changer les dimensions des cellules avec le curseur - décaler du texte avec le caractère insécable - créer des espaces vides entre nos contenus, avec des tableaux vides Le formatage des polices doit être dans CHAQUE cellule, toujours le plus près possible du contenu - mettre une couleur d arrière-plan avec l attribut bgcolor newsletter mise sur un serveur tableau centré on y accède en cliquant sur newsletter envoyée - NE PAS OUBLIER de déposer les images sur un serveur et de changer leur chemin avant l envoi
responsive Responsive design : dont l afichage va changer selon le support utilisé pour le consulter : petit écran, grand écran, mobile, tablette, affichage paysage ou portrait... La technique utilisée pour cela est celle des media queries. Il s agit de règles css, utilisée dans une feuille CSS externe ou interne au document, appelée dans l entête de la page HTML. Les clients mail qui suppriment l en-tête du document nous empêcheront donc complètement d utiliser cette technique. Toutefois le support des clients mail pour les media queries n est pas mauvais. http:// www.emailonacid.com/ blog/details/c13/ media_queries_in_html_e mails Gmail ne comprend pas les CSS, donc aucune application mobile Gmail non plus. Beaucoup de problème également avec l application native mail Android. Par contre I-phone et I-pad les comprennent très bien. Conclusion de l article cité : C est intéressant d utiliser les media queries dans les design d email, surtout pour les i-phones et les-i-pads, tant que les e-mails s affichent correctement avec et sans media queries Voir aussi http:// www.campaignmonitor.co m/guides/mobile/ #mobile-support RAPPEL Les règles de media queries ne peuvent être que dans l en-tête (style interne ou externe) pas en ligne. MEDIA QUERIES Ce sont des requêtes qui vont choisir des règles d affichage selon la taille de l écran ciblé Ci-dessous : pour uniquement les écrans et une largeur maximum de 480px. EXEMPLE DE MEDIA QUERIES <style type= text/css > @media only screen and (max-width: 480px) { } table[class=w275], td[class=w275]{ width:135px!important; } img{ height:auto;} td[class=w20]{ display:none; } </style
responsive Le principe sera donc de changer le design pour les clients ayant une largeur maximum de 480px. Afin de cibler les éléments, nous leur donnons une classe, ce qui nous permettra d en changer la largeur En CSS sur le web les classes sont appelées avec un point (.w240) par exemple. Dans un email responsive, il est préférable d utiliser le sélecteur d attribut [class=w240]. Ensuite les cellules de tableau qui doivent aller les unes sous les autres seront en display: block Alsacreations nous donne l explication : pour éviter que le client Yahoo! affiche la version responsive. Ce client pour une raison obscure prend en compte le contenu des Media Queries, même si la condition de largeur maximum n est pas respectée Version de la newsletter sur ordinateur <table class= w550 > Version de la newsletter avec un affichage de 480px de large http:// www.alsacreations.com/ tuto/lire/1533-un-email-en-htmlresponsive-multiclients.html <td class= w130 > <td class= hide > <table class= w480 > <table class= w166 > <table class= w166 > <table class= w166 > <table class= w166 >