email

  • Comment réussir une campagne de mailing ?

    La campagne de mailing

    Voici quelques conseils pour réaliser une bonne campagne de mailing, notamment en ce qui concerne le choix du format du message et les contraintes techniques liées à son envoi, et surtout sa bonne réception...

    L'insoutenable légèreté de la lettre...

    Créer sa campagne de mailing

    Sommaire

    1. Les impératifs
    2. Les filtres anti-spam
    3. Ce que dit la loi
    4. Inciter les destinataires à lire votre message...
    5. Email html ou texte ?
    6. Mise en page CSS ou tableaux ?
    7. Quelques chiffres
    8. Les choses à éviter
    9. Dans la pratique...
    10. Et quelques astuces...
    11. En résumé...

    Personnel, ciblé, facilement traçable, malléable dans son contenu, l'e-mail est puissant. On l'envoie, il est reçu dans l'instant. Mais comme tout outil puissant, il requiert une éthique solide quand il est exploité commercialement.

    Marie-Cécile Paccard - Article "L'UX des newsletters" - Décembre 2016

    Les impératifs

    Une campagne de mailing réussie implique quelques obligations formelles et technique dont vont dépendre le succès de l'opération.

    Mailing Artek

    L'emailing doit comporter notamment les infos élémentaires d'envoi :

    1. Un objet (le titre de mail) : ex. « Promotion de Printemps ! »
    2. Un nom d'expéditeur (qui envoie le message) : « Prénom Nom » ou « La société »
    3. Une adresse d'expéditeur (l'adresse email utilisée pour l'envoi) : « »ou « »
    4. Une adresse de réponse : généralement c'est la même que celle de l'expéditeur mais ça peut être aussi celle du webmaster ou de votre secrétaire...

    5 - Une adresse de retour des erreurs : lorsque la BAL de votre destinataire est pleine ou n'existe plus, le serveur renvoie une réponse automatique de non-distribution. Cette adresse de retour des erreurs n'est pas nécessaire et évitez d'utiliser la même que celle de l'expéditeur : en cas de gros envoi (si vous avez acheté un fichier contenant plusieurs milliers d'adresses par exemple), les retours peuvent déferler dans votre BAL sans que vous puissiez les arrêter. L'idéal est de prévoir une BAL relais pour pouvoir les récupérer et les retirer ensuite de votre fichier d'adresses de départ (par exemple : « »). Dans le meilleur des cas, si vous sous-traitez votre envoi par un spécialiste (comme DoList ou Cabestan...), c'est le prestataire lui-même qui gère l'envoi et qui s'occupe du traitement et des rapports de statistiques.

    NB : La nombre de ces adresses «en erreur » est importante car elle influe sur les statistiques globales de l'envoi et leur collecte permet d'avoir une meilleure image des retombées de la campagne.

    › La personne qui reçoit votre message doit vous identifier tout de suite ou au moins saisir l'objet de votre envoi pour y prêter attention.

    En savoir plus :

    www.pompage.net/traduction/emails-html-dompter-la-bete


    Les filtres anti-spam

    1 - Les termes à éviter

    A la suite du développement exponentiel de l'utilisation des mails et des envois de courriers non-sollicités (spam ou pourriel), chaque fournisseur d'accès internet (Free, Orange, Numéricable, SFR...) et chaque service de mail en ligne (Hotmail, Yahoo !, Gmail, Voilà,...) à mis au point son propre filtre anti-spam. Du coup, certains termes ou expressions sont à bannir de contenu de votre mail dont les plus connus sont « viagra », « sexe », « piratage »... Mais certains, plus « basiques » le sont aussi, notamment en ce qui concerne les objets (ou intitulés) des mails : « gagnez », « économisez », « gratuit »... termes trop liés aux véritables spam et qui sont donc à utiliser avec précaution...

    De plus, certaines adresses sont également à bannir : « » ou « » sont à éviter et à remplacer par exemple « » ou « ».

    On peut avec l'habitude connaître les différentes erreurs à ne pas commettre dans la rédaction des intitulés et du contenu des courriers mais il existe une barrière supplémentaire totalement incontrôlable qui est la propre liste des mots bannis par les utilisateurs eux-mêmes qui peuvent créer leur propre filtre sur leur logiciel de messagerie. Par exemple, je reçois des courriers pour jouer au casino en ligne... Je mets en liste noire le terme « casino », et du coup, à titre d'exemple, je ne reçois plus les mails issus du site officiel de Casino-Cafétéria... Autre exemple, qui laisse songeur : les mails que je reçois du service client de Numéricable sont considérés comme du spam par le filtre anti-spam de la messagerie Numéricable...

    Malgré toutes les précautions de rigueur, il existera toujours un risque de produire des « faux positifs » («false positive » en anglais), c'est-à-dire le blocage ou le filtrage à tort des emails en provenance d'éditeurs ou de site web autorisés qui travaillent en respectant les règles en usage : on considère qu' entre 18 et 20 % des e-mails envoyés sont irrémédiablement perdus...

    › Même s'il est impossible de lister toutes les contraintes liées aux filtres anti-spam, on peut limiter leur impact en respectant quelques règles élémentaires que vous indiquera votre prestataire avant votre campagne.

    › Ces blocages ont une conséquence directe sur les statistiques de vos envois et on peu considérer raisonnablement que la plupart des campagnes d'emailing offrent des taux de réussite (ouverture du mail ou clics dans le corps du message) supérieurs aux chiffres finalement livrés par le prestataire.

    En savoir plus :

    https://fr.wikipedia.org/wiki/Spam
    www.arobase.org/spam

    2 - Les filtres anti-spam des Providers

    Les fournisseurs d'accès Internet incluant un service de messagerie (Orange, Free, Numéricable...) ou les fournisseurs de services en ligne (Google avec Gmail, Microsoft avec Outlook...) filtrent eux-mêmes déjà une grande partie du trafic mail vers les ordinateurs de leurs clients. Heureusement. Comme les spammers inventent sans cesse de nouvelles techniques pour contourner leurs filtres (et vous arnaquer via des techniques de « phishing » ou d'« hameçonnage »), ils doivent eux aussi se mettre constamment à niveau pour éviter l'engorgement de leur réseau et garder leur utilisateurs/clients. Il faut savoir qu'en 2016, 50 à 95 % des mails transitant par le réseau sont des spams (et environ 1% contenaient un virus). La plupart d'entre-vous le savent déjà.

    Un filtre antispam utilise un système de classification (score) complexe pour décider si un e-mail constitue ou non du spam. Ce genre de programme ne peut jamais trancher avec certitude, mais bien de façon approximative. En d'autres termes, un courrier indésirable peut parfois ne pas être identifié comme tel, comme un spam et, inversement, un « bon message » sera parfois qualifié à tort de spam. Grâce à l'apport de corrections, un filtre antispam sera finalement en mesure d'améliorer sans cesse son efficacité.

    Les filtres mis en place sont en fait des filtres « achetés » et installés sur les serveurs de mail par des sociétés spécialisées. Elles sont peu nombreuses et la plus importante est Message Labs, attachée à Symantec (citons aussi Ironport, racheté par Cisco - Postini, racheté par Google - Maildefend, de Kaspersky).

    Dans ses grandes lignes :

    • Le filtre vérifie si l'expéditeur n'est pas connu ailleurs comme un spammer (par exemple sur une liste noire).
    • Le filtre analyse le contenu et la ligne d'objet de l'e-mail à la recherche de mots souvent utilisés par les spammers.
    • Le filtre examine tous les éléments du mail, même les composants cachés comme les codes de mise en page d'un message HTML, l'origine de photos et les liens web inclus... (méthode heuristique)

    Dans le détail, ces filtres anti-spam sont constitués par la mise en œuvre de 2 méthodes différentes mais complémentaires :

    A – Le blocage des messages envoyés à partir d'une serveur de mail reconnu malveillant

    Les « listes noires » que Message Labs, et ses concurrents, établit chaque jour à partir de ses propres outils de prospection sur le réseau internet. En fait, ce n'est qu'une liste d'adresse IP de serveurs de mails reconnus comme spammeur. Dans les faits, Message Labs livre tous les jours à ses clients une « liste blanche », liste d'adresses de serveurs « autorisés ». C'est pour cela qu'un message considéré comme spam par Yahoo ! le sera aussi pour La Poste par exemple.

    En savoir plus :

    La méthode heuristique - Article de Wikipedia

    Attention ! Sur les serveurs mutualisés, hébergeant plusieurs domaines donc, un webmaster peu scrupuleux peux créer son propre flux de spams et en retour blacklister toutes les adresses mails des domaines hébergés sur ce même serveur.

    B – Le blocage des message à partir de son analyse intrinsèque (méthode heuristique)

    Le système de filtrage heuristique effectue une série de tests automatiques sur le contenu du message (par exemple la longueur de code HTML qu'il contient, combien d'images, combien de références textuelles suspectes - viagra, sexe... - la cohérence de l'en-tête et du contenu du message, si le sujet est vide...). Chaque message est évalué et une note lui est attribué . Plus cette note est basse, mieux c'est. Pour Message Labs par exemple, si la note atteint ou dépasse 7, le message est considéré comme un spam. Les critères de notation sont bien sûr arbitraires et définis par l'administrateur système, si il existe. C'est aussi pour cela que certains spam "passent", mais une fois dénué de sens logique... et donc ininterprétable par ces filtres.

    D'autres méthodes existent mais ces deux réunies permettent de supprimer 90 % des spams en circulation (et que vous ne recevez donc pas...).

    Voici un exemple d'analyse heuristique délivré par Message Labs


    Voici un exemple d'analyse heuristique d'un mail par Message Labs :

    Nom du champ : X_Spam_Flag
    Type de données : Liste de chaînes
    Longueur des données : 7 octets
    Numéro d'ordre : 2
    ID d'élément en double : 0
    Indicateurs de champ :

    "YES"

    › Message de validation indiquant que ce message est diagnostiqué comme "honnête"

     

    Nom du champ : X_SpamInfo
    Type de données : Liste de chaînes
    Longueur des données : 31 octets
    Numéro d'ordre : 2
    ID d'élément en double : 0
    Indicateurs de champ :

    "spam detected heuristically"

    › Message de rejet indiquant que ce message est diagnostiqué comme "spam"

    Détails du diagnostic :

    Nom du champ : X_SpamReason
    Type de données : Liste de chaînes
    Longueur des données : 250 octets
    Numéro d'ordre : 2
    ID d'élément en double : 0
    Indicateurs de champ :

    "Yes, hits=7.4 required=7.0 tests=FROM_EXCESS_BASE64,
    HTML_90_100,HTML_IMAGE_ONLY_20,HTML_IMAGE_RATIO_02,HTML_MESSAGE,
    HTML_SHORT_LINK_IMG_3,HTML_TEXT_AFTER_BODY,HTML_TEXT_AFTER_HTML,
    MPART_ALT_DIFF_COUNT,SUBJECT_EXCESS_BASE64,UNPARSEABLE_RELAY"

    › Le ratio attribué à ce message est de 7.4, ce message est diagnostiqué comme "spam"

     


    Voici un autre exemple d'analyse heuristique proposé :

    Content analysis details: (5.3 points, 5.0 required)

    pts rule name description
    --------------------------------------------------
    1.7 SUBJECT_ENCODED_TWICE Subject: MIME encoded twice
    1.4 SPF_SOFTFAIL SPF: sender does not match SPF record (softfail)
    [SPF failed: Please see http://www.openspf.org/why.html?sender=xxx]
    0.0 UNPARSEABLE_RELAY Informational: message has unparseable relay lines
    1.1 HTML_IMAGE_ONLY_32 BODY: HTML: images with 2800-3200 bytes of words
    0.5 HTML_IMAGE_RATIO_02 BODY: HTML has a low ratio of text to image area
    0.1 HTML_90_100 BODY: Message is 90% to 100% HTML
    -2.6 BAYES_00 BODY: Bayesian spam probability is 0 to 1% [score: 0.0000]
    0.0 HTML_MESSAGE BODY: HTML included in message
    1.7 DNS_FROM_RFC_POST RBL: Envelope sender in postmaster.rfc-ignorant.org
    0.4 SUBJECT_EXCESS_BASE64 Subject: base64 encoded encoded unnecessarily
    1.3 FROM_EXCESS_BASE64 From: base64 encoded unnecessarily
    -0.3 AWL AWL: From: address is in the auto white-list

    › Message détaillant les résultats de l'analyse : le ratio attribué à ce message est de 5.3, ce message est diagnostiqué comme "spam", notamment parce qu'il ne contient pas beaucoup de texte et que le ratio texte/image est trop élevé.

    3 - Les filtres anti-spam personnels

    Chaque système de messagerie en ligne permet de créer sa propre grille de filtrage ainsi que les logiciels de messagerie (Outlook pour PC, Mailpour MAC,...). Ce système au coup par coup n'évite pas les ruses des spammeurs. Les plus connues concernent le terme « viagra » qui au fil de temps « mute » : viagravi@grav1@grav1@gr a ›... Difficile de lutter...

    › Cela montre qu'à chaque instant un mail honnête peut se retrouver étiqueté « spam » sans que l'on puisse y faire grand chose.

    › A chacun de connaître au moins les règles de base pour limiter les risques : en-tête pertinent, un minimum de contenu textuel, un lien « si vous ne visualisez pas.. » pointant vers un domaine sûr, attention particulière portée sur les termes employés (argent, gagnez, profitez,... qu'il faut traiter en image plutôt qu'en texte s'ils font partie de l'en-tête du message...)

    En savoir plus :

    https://fr.wikipedia.org/wiki/Lutte_anti-spam

    Lutter contre le spam...


    Inciter les destinataires a lire votre message

    Clavier touche mailRappelez-vous que presque la moitié de vos destinataires utilise peut-être un petit panneau de prévisualisation pour décider si votre email vaut le coup d'être consulté. Les panneaux de prévisualisation permettent à vos destinataires d'échantillonner un bout de votre email avant de décider de l'ouvrir et de le lire entièrement. Un certain nombre de vos destinataires liront même tous leurs emails dans ce panneau de prévisualisation et ne les ouvriront jamais complètement.

    Il est donc important de bien concevoir le haut de votre courrier en y faisant figurer votre logo ou une image qui permet de vous identifier immédiatement et de faire figurer un court descriptif du contenu de votre courrier. Typiquement : « Newsletter de votre entreprise – Juin 2016 – N°07 »... Et d'avoir une accroche pertinente et incitative : « Découvrez nous nouvelle promotion de l'été... », « Envie de vous évader avec Notre Entreprise ? »...

    Le mail doit inviter votre destinataire à en savoir plus que ce que contient votre mail et donc le mener à faire une action supplémentaire : aller sur votre site, répondre au mail, remplir un formulaire, vous rendre visite...

    › Votre mail n'est qu'un prétexte qui doit amener une réponse de la part du destinataire.


    Ce que dit la Loi

    Désormais, la loi encadre la pratique du mailing et le principe introduit par la directive européenne a été transposé en France par la loi du 21 juin 2004 pour la confiance dans l'économie numérique et figure désormais à l'article L.34-5 du code des postes et des communications électroniques, repris à l'article L.121-20-5 du code de la consommation :

    « Est interdite la prospection directe au moyen d'un automate d'appel, d'un télécopieur ou d'un courrier électronique utilisant, sous quelque forme que ce soit, les coordonnées d'une personne physique qui n'a pas exprimé son consentement préalable à recevoir des prospections directes par ce moyen. »

    C'est ce que nous appelons le « Opt-in » ou « Abonnement », chaque personne a donné son accord pour recevoir le mail soit parce qu'il a remplit le formulaire adéquat sur votre site (« Abonnez-vous à la newsletter », « en remplissant de formulaire, vous accepter de recevoir des courrier de notre part »...)
    Les Américains préfèrent eux le « Opt-out » ou « Désabonnement » : on peut recevoir des courriers non-sollicités mais il faut impérativement que vous puissiez vous désabonner de ce mailing.

    La législation française actuelle met en avant les principes des droits à l'information et droit d'opposition. La loi pour la confiance dans l'économie numérique (LEN) du 21 juin 2004 et la précision, faite par la CNIL lors de la séance du 17 février 2005, sur son interprétation reprend l'approche « opt-in » dans le cadre de communication à destination de particulier et l'« opt-out » dans le cas d'email de prospection à destination des professionnels.

    Il est conseillé aussi de mettre dans votre mail les raisons qui font ont amené à envoyer le mail à votre destinataire :« vous avez reçu ce mail car vous êtes abonné à la newsletter du site www.votre-entreprise.com », « vous recevez ce mail car vous êtes client de notre service... »

    Il est conseillé aussi de rappeler les conditions légales qui régissent votre envoi vis-à-vis de la CNIL :

    Dans tous les cas, même une personne qui s'est abonnée volontairement à votre newsletter ou qui fait partie de votre base client... doit pouvoir se désabonner. A vous de choisir la solution qui vous convient : une procédure automatique (lien «cliquez ici pour vous désinscrire»), ou une procédure plus lourde («Pour vous désabonner, rendez-vous dans votre espace abonné et modifiez les paramètres attachés à votre compte...»).

    Exemple de message de rappel inséré dans le corps de l'email :

    Ce courriel commercial est conforme à la législation en vigueur et aux délibérations de la CNIL des 22 et 30 mars 2005 sur la prospection par courrier électronique dans le cadre professionnel. Conformément à l'article 34 de la loi 78-17 du 6 janvier mille neuf cent soixante dix huit, relative à l'informatique, aux fichiers et aux libertés, vous disposez d'un droit d'accès, de rectification des données nominatives vous concernant. Si vous ne souhaitez plus recevoir d'informations commerciales de notre société par e-mail, merci de nous l'indiquer (suit généralement une adresse mail pour contacter le responsable du site internet ayant envoyé le mailing).

    Loi n° 78-17 du 6 Janvier mille neuf cent soixante dix huit, relative à l'informatique, aux fichiers et aux libertés : Toute personne physique a le droit de s'opposer, pour des motifs légitimes, à ce que des données à caractère personnel la concernant fassent l'objet d'un traitement. Elle a le droit de s'opposer, sans frais, à ce que les données la concernant soient utilisées à des fins de prospection, notamment commerciale, par le responsable actuel du traitement ou celui d'un traitement ultérieur. Les dispositions du premier alinéa ne s'appliquent pas lorsque le traitement répond à une nécessité légale ou lorsque l'application de ces dispositions a été écartée par une disposition expresse de l'acte autorisant le traitement La publicité par voie électronique

    Art 38 : Toute personne physique a le droit de s'opposer, pour des motifs légitimes, à ce que des données à caractère personnel la concernant fassent l'objet d'un traitement. Elle a le droit de s'opposer, sans frais, à ce que les données la concernant soient utilisées à des fins de prospection, notamment commerciale, par le responsable actuel du traitement ou celui d'un traitement ultérieur. Les dispositions du premier alinéa ne s'appliquent pas lorsque le traitement répond à une obligation légale ou lorsque l'application de ces dispositions a été écartée par une disposition expresse de l'acte autorisant le traitement. Cet e-mail vous a été envoyé par XXX qui peut être amenée à recourir à ses sociétés affiliées afin de vous fournir ses services.

    › Votre envoi doit respecter le principe d'honnêteté et de pertinence.

    › Il est recommandé d'inséré un lien de désinscription en un clic unique dans la corps de votre mail, généralement en bas de page.

    En savoir plus :

    « La prospection commerciale par courrier électronique » sur le site de la CNIL (2022)

    A ce sujet, certains prestataires proposent une étape supplémentaire lors de la procédure de désinscription pour tenter d'en connaître la cause. Par exemple, un formulaire invite le destinataire à préciser les raisons qui l'amène à se retirer de la liste de diffusion comme dans le cas de DOLIST :

     

    Wewmanager / Emailstrategie : panneau de désabonnement de la newsletter

     

    Cette pratique est assez efficace car les destinataires y répondent souvent (ici d'ailleurs, ils n'ont pas le choix...), et elle permet surtout de mieux juger de la perception réelle qu'ont les destinataires du message reçu (ici, c'est un vrai sondage)... et du sort qu'il lui réserve...


    Email HTML ou texte ?

    On peut considérer qu'il y a deux grandes catégories de format pour les emails :

    • Les emails en texte brut (qui ressemble au texte que l'on tape dans Bloc-Note par exemple)
    • Les emails au format l'HTML qui sont agrémentés de textes, en couleurs, d'images, de logos animés.

    La tendance est de faire des emails au format l'HTML qui ont bien sûr plus d'impact sur les destinataires grâce à leur qualité visuelles. Attention ! Il faut cependant ne pas considérer un email comme une page web car de nombreuses caractéristiques de ce type de pages ne sont pas prises en compte par les logiciels de messagerie.

    Dans de nombreux cas, les destinataires consulteront leur email en ligne via des services de messagerie assez rustiques comme l'ancienne version de « Free » qui n'offre pas la possibilité d'afficher les email au format html dans leur forme enrichie. Dans ce cas, c'est la version texte qui est affichée par défaut, si vous l'avez prévue...

    › Il est conseillé de coupler les 2 versions (texte et html) pour obtenir une campagne réussie.


    Mise en page css ou tableaux ?

    Il y a deux possibilités pour construire les pages HTML complexes qui constitueront votre message :

    • en utilisant des tableaux : la page est un tableau contenant des cellules que l'on remplit par le contenu désiré : un titre ici, une image là... Cette méthode est la plus simple et la plus rapide à mettre en œuvre. Tout le code se trouve sur la page.
    • Les Css sont des feuilles de styles qui mettent en forme les différents élément de votre page : un style de police pour le titre, un autre pour le texte, une bordure de telle couleur autour des images... Ces Css se généralise peu à peu pour la construction des pages web et on peut aussi les utiliser pour les emails même si elles sont parfois mal « interprétées » par les logiciels de messagerie. Surtout, ces Css ne peuvent pas se trouver dans la code de l'email mais être « appelée » de l'extérieur : la feuille de style se trouve obligatoirement sur un serveur web.

    Contrairement à la croyance populaire, des emails en CSS et intégralement sémantiques sont non seulement possibles mais largement supportés dans la majorité des environnements de gestion de courriers électroniques (Mail de Mac peut lire directement de la vidéo intégré au message comme "pièce-jointe" par exemple...). Mieux, si vous rédigez correctement vos CSS, votre email peut se rabattre sur une version texte riche de votre message tout à fait utilisable par ceux qui disposeraient d'un faible support CSS.

    On peut coupler les 2 solutions : le html pour avoir uns structure globale robuste (supportée par la plupart des logiciels de messagerie) agrémentée de styles qui permettent par exemple une plus grande variété de police de caractère sans que le rendu final, selon les plate-formes, ne soit dégradé ou corrompu.

    › Il est recommandé d'inséré un lien « si vous ne visualisez pas correctement ce mail, cliquez ici... »menant à la version html du mail sur un serveur dédié (votre site web), généralement tout en haut de votre courrier.

    Aujourd'hui, décider si vous voulez jouer la carte des CSS ou vous replier sur les tableaux et les styles en ligne renvoient à l'époque où vous deviez décider si vous vouliez supporter Netscape ou non. Certains clients l'exigeront, tandis que d'autres réalisent qu'il est temps d'aller de l'avant.

    Si vous êtes malchanceux et que le PDG utilise Lotus Notes mais veut que le design de l'email s'affiche partout de la même manière, tableaux et styles en ligne vous attendent. Si vous arrivez à expliquer à votre client à quel point certains clients emails sont défectueux, et que votre design sera accessible à tous tout en se dégradant en vers une mise en page plus simple pour certains, les CSS sont par contre envisageables.

    En savoir plus :

    https://a-pellegrini.developpez.com/tutoriels/xhtml-css/tableaux/

    Concevez pour le cas où les images sont désactivées

    Par défaut, n'importe lequel de vos destinataires qui utilise AOL, Outlook et Gmail ne verra jamais les images dans les emails que vous lui enverrez. Pour certaines campagnes grand-public, cela peut représenter au moins la moitié de tous les gens concernés par votre envoi.

    Les images sont parfois bloquées et que cela affectera l'apparence de votre email - mais les images bloquées ne sont en aucun cas un obstacle définitif. Vous n'avez qu'à suivre quelques directives simples quand vous concevez votre email, et vous oublierez que la désactivation des images n'ait jamais été un problème :

    N'utilisez pas les images pour des contenus importants comme les commandes d'action, les titres et les liens vers votre site web.

    Fournissez un texte alternatif pour toutes les images (qui sera visible dans certains environnements de gestion d'email, surtout Gmail).

    Nous avons tous des boîtes de réception pleines d'emails et si vous êtes comme moi vous avez tendance à supprimer sans remords les emails d'origine incertaines. Si votre design n'attire pas l'attention de votre destinataire avec un contenu pertinent et intéressant en une ou deux secondes, il n'a probablement aucune chance d'être retenu et consulté.

    Chaque environnement de gestion d'email attribue des superficies différentes à leur panneau de prévisualisation, mais, quelle que soit la solution utilisée par votre destinataire, essayez de vous assurer des points suivants :

    • Une construction de votre message en tableau et ne dépassant pas 600/680 px de largeur.
    • Eviter d'utiliser des images au format PNG qui n'est pas supporté par Lotus notamment.
    • Insérer un élément signifiant (logo, image, slogan...) qui vous identifiera et attisera même l'intérêt tout en haut de votre email, et de préférence à gauche. Il pourrait s'agir d'un résumé du contenu de l'email ou au moins du nom de votre société/organisation.
    • Vérifiez vos rapports après chaque envoi d'email pour voir ce qui intéresse le plus les gens et essayez de le rendre visible dans l'espace du panneau de prévisualisation dans le prochain email.
    • Assurez-vous aussi de créer une version de votre message en texte brut, dans Bloc-Note ou TextEdit(au format ".txt"), afin que votre message soit visible par tous les destinataires par défaut. Cette fonction est toujours disponible pour les applications dédiées. Votre message est alors traité au format multipart(standard MIME permet de définir des messages composites, c'est-à-dire des messages comportant plusieurs pièces jointes, éventuellement emboîtées).

    En savoir plus :

    › Respecter les règles de construction de vos mails et veiller au nommage pertinent des images qu'il contient pour que même non affichées elles puissent être « parlantes » pour vos destinataires : la balise "alt" est absolument à renseigner.

    Le rendu final du message...

    Vous serez finalement très surpris des différents rendus observés suivant les systèmes de messagerie utilisés par le destinataires finaux. Suivant les cas, il faut prévoir "large" comme dans le cas de campagnes à destination des publics professionnels (entreprises, grands groupes...) qui utilisent assez fréquemment Lotus Notes. Voici un exemple résumant les différences flagrantes que l'on peut constater entre Lotus 7 et Mail de mac. Comme on le sait, "une image vaut mieux qu'un long discours"...

    Comparaison de message entre Mail de Mac et Loturs Notes

    › Cliquez sur l'image pour l'agrandir

    En savoir plus :

    https://www.emailing.biz/tag/exemple-emailing


    Quelques chiffres

    Si vous envoyez des emails B2B («Business to Business«, c'est-à-dire d'entreprise à entreprise), il est sans danger de présumer que la plupart de vos destinataires utiliseront Outlook (environ 75%) ou Lotus Notes (9%). Le support des CSS par Outlook est excellent mais celui de Lotus est déplorable.

    Si vous vous occupez d'un envoi B2C (NdT : «Business to Consumer«, de l'entreprise vers le consommateur), vous devriez vous attendre à Yahoo!, Hotmail et AOL. Si vous ciblez des utilisateurs friands de nouveautés, vous devriez aussi tenir compte de Gmail (bien que vous devriez être avertis que Gmail n'est pas aussi populaire que vous le pensez et oscille toujours à seulement moins de 5% du marché des emails Internet).

    Pour vous rendre les choses plus faciles, voici un rapide résumé des clients emails courants qui supportent l'approche CSS, et de ceux qui se basent sur les tableaux et les styles en ligne pour afficher votre message comme désiré.

    Les logiciels de messagerie les plus courants :

    • Outlook et Outlook Express
    • Lotus Notes
    • Thunderbird
    • Mail de Mac

    Je réitère ce point parce qu'il me semble particulièrement important. Ne soyez pas honteux si vous êtes forcés à emprunter la voie des tableaux et des styles en ligne. Comme je le mentionnais plus haut, le support des CSS par les clients emails aujourd'hui va du parfait au quasi non-existant. Si votre client exige une homogénéité de votre design pour tous les destinataires, vous n'avez vraiment aucune autre option.

    Pour mémoire, voici les chiffres fournis par le site www.litmus.com/email-client-market-share

    1. Apple iPhone : 33% (+0.54)
    2. Gmail : 16% (+0.37)
    3. Apple iPad : 11% (-0.49)
    4. Google Android : 9% (-0.21)
    5. Outlook : 7%(-0.16)
    6. Apple Mail : 7%(-0.5)
    7. Outlook.com : 5% (+1.74)
    8. Yahoo! Mail : 3% (-0.02)
    9. Windows Live Mail : 1% (-0.09)
    10. Windows Mail : 1% (-0.05)

    En savoir plus :

    www.campaignmonitor.com (en.)


    Les choses à éviter

    Que l'on utilise ou non les CSS pour la mise en page de votre mail, il y a des choses à bannir définitivement.

    - Les animations Flash sont médiocrement supportées par la plupart des logiciels de messagerie et il est préférable, si l'on veut mettre un peu d'animation dans le corps de votre message, d'utiliser des « gif animés » qui eux sont bien pris en compte. Et de toute façon, ce format est désormais condamné...

    - Les effets dynamiques de type JavaScript (lien vers fenêtre ouvrante « pop-up », images réactives au passage du pointeur,... ) sont désactivés par défaut sur le plupart des logiciels de messagerie pour des raisons évidentes de sécurité (en l'occurence, l'exécution de scripts malveillants). On peut cependant mettre des lien « normaux » vers des page html qui se trouvent alors sur le serveur dédié ou au sein de l'arborescence de votre site (typiquement, dans le cas ou l'on souhaite visualiser une version agrandie d'une image ou pour visualiser une fiche spécifique...).

    - Les formulaires : il est déconseillé de mettre dans la corps de votre mail un formulaire de contact qui souvent ne sera pas fonctionnel si le traitement de ce formulaire se trouve sur la page elle-même. On peut cependant les mettre en œuvre à la condition que le traitement des données du formulaire se fasse en dehors du message proprement dit (typiquement, un fichier Php qui doit insérer les données recueillies dans une base de données ou générer l'envoi d'un mail contenant ces données au responsable de la campagne par exemple).

    NB : il n'y aura aucune manière de faire les vérifications d'usage pour vérifier la véracité des données recueillies (le nom de la personne ou son numéro de téléphone...) ou la validité du format des données transmise (si l'adresse mail comporte bien un « @ » ou si le numéro de téléphone ne comporte bien que des chiffres...)


    Dans la pratique...

    Avec l'emailing, vous maîtrisez dans le temps l'action et la réaction de vos destinataires.

    L'emailing soulèvent beaucoup d'incertitudes. Contrairement à la plupart des autres médias de diffusion de masse, vous pouvez contrôler de façon précise à partir de quel jour et de quelle heure votre destinataire va pouvoir consulter votre mailing ou votre lettre d'information. Avec les statistique asociées aux campagnes, vous aurez une vision globale ettrès fine de l'impact de votre campagne : nombre d 'ouverture, nombre de clics, taux de chut, NPAI, désabonnés...

    Votre lettre d'information s'adresse à des professionnels.
    L'indice de pénétration sera meilleur (taux d'ouvertures plus élevé, taux de clics plus important) en faisant partir vos campagnes en début de semaine (lundi après-midi, mardi ou mercredi). Dans ce contexte, l'indice de pénétration concerne non seulement l'indice de consultation (ouverture, clic sur un lien) mais aussi l'indice de réactivité... Même si un envoi, en début d'après-midi, le vendredi, peut se révéler judicieux... (Oui, au bureau, on consulte ses derniers mails avant de partir... en week-end...).

    Si votre lettre d'information s'adresse à des consommateurs.
    Les règles ne sont pas aussi claires. Plusieurs facteurs rentrent en ligne de compte. Tout comme dans le cas de professionnels, les taux d'ouvertures les plus importants ont lieu dans les 48h qui suivent l'envoi de la campagne, mais les 72h suivantes présentent aussi des taux non négligeables.

    NB : éviter de lancer une campagne de mailing le vendredi pour que vos destinataires ne retrouvent votre message le... lundi matin, noyé parmi tant d'autres...


    Quelques astuces

    Mailto...Depuis 2012, certains clients de messagerie se révèlent un peu "capricieux"... Pour les nommer : Yahoo!, Outlook et Gmail...

    Évidemment, ces messageries sont actuellement devenues incontournables et il suffit de manipuler de gros fichiers d'adresses mail pour voir leur importance...

    En fait des bugs d'affichage apparaissent dans certains mails enrichis (format html + tableaux + images), essentiellement sous Firefox lors des consultation des mails en ligne... Bref, encore un truc de puriste ! Mais, puisque nous devons quand à nous réaliser une campagne d'emailing "parfaite", dans la forme et dans le fond, il devient difficile d'ignorer ce problème !

    Pour les professionnels de la profession, les spécialistes du mailing de masse, il a fallu tâtonner un peu avant de trouver les corrections nécessaires qui se révèlent d'ailleurs être plus des "patch" que des solutions définitives... et qui se révèlent d'ailleurs contradictoires avec les recommandations décrites ci-dessous... Oui, par delà l'aspect anecdotique de ces petites astuces de codage, il semble que l'usage de ces solutions offrent un bon compromis sans pour autant entraîner de problèmes supplémentaires.

    Les deux problèmes majeurs et commun à Yahoo!, Outlook et Gmail sont liés à l'affichage des images, la coloration des liens hypertextes et la traitement de la balise <p> dans le corps du mail comme dans l'exemple ci-dessous.

    1. Pour les construction de la page mail en html et donc avec un structure en tableaux et des visuels découpés en plusieurs images individuelles, les images normalement "jointes" (l'une après l'autre dans le sens de la hauteur) laissent apparaître un écart, un gap d'environ 10 pixels de hauteur... Malédiction !
    2. Les liens hypertextes reprennent leur couleur bleue par défaut, comme au bon vieux temps ! Pas très esthétique pour une construction voulue comme telle !
    3. Yahoo! Mail semble ne pas reconnaître la balise <p> (?!) et ne fait donc pas d'interlignage standard (un espacement vide qui pourrait contenir une ligne de texte) mais un simple "retour-charriot", sans espacement... Surprenant et pas cool effectivement.

    Exemple de divergences des rendus visuels d'un email consulté en ligne dans Gmail et Yahoo! Mail... :

     

    Exemple des différents rendus des message dans Gmail et Yahoo! Mail...

    Du nouveau !

    Heureusement, aujourd'hui, vous pouvez vous reposer sur les prestataires de gestion de campagne pour créer rapidement et efficacement vos messages destinés à être envoyer par mail.

    DoList, Mailchimp, Sarbacane propose des gabarit de page prêt à l"emploi voir même directement modifiable via des techniques de drag-and-drop qui rendent la création de vos messages simple et même ludique... Mailchimp entre les autres prestaires proposent de tester sa plateforme en mode Découverte avec un nombre limité de destinataires (2000), ce qui est déjà pas mal pour se faire la main...

    Attention quand même à ne pas trop intervenir sur ces modèles souvent très strictement structurés au niveau de leur code source au risque de perdre leur nature responsive en alourdissant le code de styles CSS inutiles... je vous conseille de faire des tests sur un premier gabarit et une fois le résultat final atteint après vos multiples essais de reprendre votre création à partir d'un nouveau modèle vierge. Si vous êtes plus à l'aise avec le CSS, intervenez directement dans le code source qui reste accessible et manipulable...

    Modèle de mail par Mailchimp


    Alors que faire ?

    La couleur des liens et du soulignement :

    Dans le cas d'Outlook de Microsoft et de GMail de Google, la balise "color" est à déclarer deux fois : une première déclaration "font-color"qui sera comprise entre les deux balises "href" et encadrant la mention du lien et une autre en "css" qui doit être déclarée à l'intérieur de la balise "href" du lien comme ceci :

    <a href="http://www.mon-site.fr" style="color:#ffcc00"><font color="#ffcc00">Intitulé du lien</font></a>

    Cassure des images sur GMail et Outlook :

    Les images doivent être toutes fixées au niveau de la balise <img src="/.."> avec l'ajout du code style="display:block;"... Il doit être présent pour toutes les images de la page de mailing :

    <img src="/img-03.gif" style="display:block;" width="600" height="200">

    La mis en page dans Yahoo Mail :

    Il faut éviter d'utiliser des balises de mise en page en mode "paragraphe". Les balises <p> et </p> ne sont pas reconnues avec Yahoo. A la place, il faut utiliser des retours à la ligne <br />... et donc intégrer deux "<br>" pour générer l'espacement généralement créé par la balise <p> standard. De toute façon, comme on est en Html, seules la taille, la police (font-family) et la couleur sont à déclarer :

    <font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">Pas de surco&ucirc;t sur les prestations h&ocirc;telli&egrave;res<br>Inclut la visite de la ville en cal&egrave;che</font>

    Hotmail de Microsoft est devenu Outlook en 2013. On connaît les nombreux soucis sur votre boîte mail en ligne (affichages aberrants, promptitude à classer en spam des mails qui arrivent normalement ailleurs...). Avec Outlook, la techno employée est devenu plus pointue et les problèmes - surtout d'affichage - se sont aggravés... Notamment pour le rendu des tailles et des interlignages des polices, même les plus standards... Un petit truc à utiliser, en entête de votre fichier HTML :

    <font <style type="text/css">
    /* POUR HOTMAIL/OUTLOOK */
    .ExternalClass { width:100%; }
    .ExternalClass * { line-height: 100% }
    </style>

    PS : Mais,... Il reste toujours de petits détails à peaufiner, pour les "perfectionnistes"... Il arrive que l'on souhaite mettre une couleur de fond (bgcolor="#D4E9FC") au message envoyé... et là aussi, souvent, le fond est restitué en blanc... Alors... On privilégie encore l'efficacité au détriment du "poids" du message en préférant mettre les style inline, soit directement dans le corps des balises de déclaration, pour parer aux instructions des en-têtes des différents mailers (lire cet article de Rémi Parmentier). Puis, à vous de faire des tests et de trouver un "truc" pour parer à cet ultime problème... Et de transmettre l'info !


    En résumé

    La nécessité de mettre en place une véritable stratégie pour réussir votre campagne de mailing qui s'occupe tout à la fois de penser le contenu des newsletters et leur design, de choisir la bonne fréquence dans le cas des newsletters, de traiter efficacement les demandes de désabonnement et d'exploiter toutes les statistiques liés aux envois. Les campagnes d'emailing sont des outils de promotion très efficaces à la condition d'être employées avec discernement et professionnalisme. Mais attention, elles ont un coût : faire appel à un prestataire ou un webmaster reconnu vous évitera bien des problèmes.

    Rendre instantanément votre mail identifiable pour son destinataire.

    Mailing Clairjoie

    Un lien vers une version web (déposée sur le site internet du demandeur ou hébergé par le prestataire de la solution employée) afin que ceux qui ne peuvent pas visualiser votre message dans leur logiciel de messagerie, ou s'il est fortement dégradé, puissent le consulter correctement dans un navigateur web.

    Un rapide résumé de la méthode d'obtention de l'adresse email du destinataire pour lui rappeler la cause du message reçu (il s'est inscrit sur votre site, il vous a acheté un produit, etc...).

    Faire apparaître clairement l'adresse email de votre destinataire afin qu'il puisse s'assurer que l'email lui a bien été spécifiquement envoyé.

    Pensez à réaliser une version texte brut de votre message. Certains de vos destinataires auront peut-être paramétré leur logiciel de messagerie afin de n'afficher que la version texte de chaque message pour diverses raisons. Assurez-vous alors d'envoyer votre email en format « multi-part », qui comprend à la fois les versions texte brut et HTML dans un seul message... et cela augmentera vos chances de passer les barrières anti-spam.

    Mail de Mac... GMail de Google... Lotus...

     

    Les détails font la perfection, et la perfection n'est pas un détail.

    Léonard de Vinci


    A vous de vous lancer !

    En suivant les directives listées ci-dessus, vous mettez de votre côté toutes les chances de réussir votre campagne de mailing.

    Quelques prestataires :

    www.cockpit-mailing.com
    www.dolist.com

    Pour les débrouillards, des outils vraiment très intéressants et performants :

    www.phplist.com
    mailchimp.com (en.)
    www.brevo.com/fr/(fr.)

    Et d'autres conseils plus spécifiques :

    « La Liste Ultime des Statistiques Emailing en 2022 »sur le site Monde du Mail...

    Et un outil pour tester de vos mails avant envoi :

    Le tutoriel pour Mailchimp via OpenClassRooms : openclassrooms.com/courses/reussir-sa-campagne-d-e-mailing-avec-mailchimp
    Avec Litmus : https://www.litmus.com/email-testing

    Et les mails spécifiquement responsive ?

    https://www.frenchweb.fr/emails-responsive-un-imperatif/118288
    Des exemples de mailings responsives à télécharger

     

    Pas de courrier indésirable, merci !

     

    Erwan Corre - Août 2020


  • Les emails responsive

    Mettre en œuvre et exercices pratiques

    On se posait la question depuis quelques temps mais là c'est fait : je fais des emails responsive ! Ah bon ! Mais comment ?

    Avec les Media Queries !...


    Depuis 2014, on y est...

    Avec désormais l'utilisation massive du téléphone portable pour surfer sur le web et donc sur sa messagerie - hors appli spécifique bien sûr - la question du changement de méthode quant à la réalisation technique de vos messages - comme décrite largement si-dessus - se pose désormais sérieusement.

    Aujourd'hui, plus que jamais, la campagne de mailing reste une approche marketing efficace et rentable si bien sûr on sait la maîtriser. Sur une période de six mois en 2012, Litmus a rapporté une augmentation de 80% d'ouverture de courrier électronique sur des appareils mobiles. Cette même année, Campaign Monitor a révélé que, pour la première fois, leur taux d'ouverture de la messagerie mobile a même dépassé ceux sur desktop et webmail. 30,4 millions de Français ont un smartphone et on considère qu'ils sont près de 40% à consulter leur mails sur leur mobile. En 2016, cette tendance s'est largement confirmée (Lire l'article de du Blog du Modérateur)... Cela pour vous convaincre de la nécessité de réaliser des message qui passent sur ce support très contraignant du fait de la petite taille des écrans de smartphone même si leur taille a tendance à augmenter...

    Au-delà de son aspect commercial, nous devons aussi réfléchir maintenant que le marché et le terrain sont mûrs aux nouvelles possibilités techniques que l'on peut mettre en œuvre sans risque de se tromper et bien sûr en se lançant dans la création de mail au format vraiment "responsive". Plusieurs solutions s'offrent à nous, dans des perspective bien balisées, valident aussi bien pour desktop, tablette ou mobile, même si, finalement, mais c'est une tendance générale, la fantaisie graphique devient inutile voire dangereuse (cf. la percée du "flatdesign" dans le webdesign mais aussi les interfaces graphiques des systèmes Apple et Windows).

    On sait qu'il est désagréable de regarder un page web "à largeur fixe" sur son écran de portable, même si l'on peut zoomer facilement sur son contenu, la navigation et la bonne lecture du contenu deviennent hasardeuses. En cause, la navigation avec ses doigts (le "multi-touch") et non plus avec une souris :

    Un message non-responsive de taille et largeur fixe

    Voici donc ce que l'on peut faire en reprenant l'exemple de l'excellent article de Jack Filose...

    La conception d'un email responsive est toujours une affaire de compromis.

    Jack Filose


    Le contenus

    Alors, comment obtenir le meilleure résultat, soit, en réalité, le meilleur compromis entre mail "à l'ancienne" et mail "new-look" ?

    En gros, il faut se débarrasser de l'épineuse question de la taille de l'écran de consultation du message et revenir à l'essentiel.

    Pour cela :

    1. Un contenu qui se déroule sur une seule colonne suffit, et une largeur de 640px (un peu moins, c'est encore mieux...), permettent de bien présenter le sujet...
    2. Un objet de mail accrocheur, bien évidemment, mais qui ne fait pas plus de 50 caractères pour éviter qu'il ne s'affiche sur plusieurs lignes une fois reçu...
    3. Des zones sensibles (boutons, pictos, vignette... qui renvoient vers une page extérieure) d'une taille minimale de 44x44px/pt pour que justement le doigt puisse bien le viser et cliquer dessus facilement...
    4. Une taille de police de caractère assez grande pour une lecture confortable (en police standard, non-exotique, "3" en html simple - font-size - ou 14-16- voire 18px/pt - en CSS - qui correspondent à une taille moyenne... 12px/pt étant vraiment la valeur minimale)
    5. Conserver un alignement du texte justifié à gauche... Sur un grand écran, cela ne semble pas être une évidence, mais sur un mobile...
    6. Hiérarchiser vos contenus et faire apparaître la(es) zone(s) importante(s), celle qui invite à l'action (et donc un clic sur un lien ou un bouton), le plus haut possible dans le corps du message pour qu'il soit rapidement visible et surtout compris par votre lecteur...
    7. Soignez vos visuels, surtout si finalement vous n'en mettez qu'un seul... La plupart du temps, les images ne s'affichent pas pour limiter le débit requis... Renseigner vos attributs "Alt" de manière précise et significative, quitte à reprendre une partie de votre argumentaire ("Votre voyage en Amérique grâce à ma compagnie" sur une photo de New-York... "Des économies importantes avec notre nouveau programme..." pour une photo de tirelire...). Pour votre logotype, éviter bien sûr de l'insérer dans une image globale qui ferait toute la largeur de votre en-tête...

    La mis en forme

    Comme on l'a vu, les mailers (logiciels de messagerie comme Outlook ou Thunderbird) et les webmail (Gmail, Yahoo!) ne respectent pas aussi bien les standards que les navigateurs web. D'ailleurs, il n'y a pas beaucoup de normes et encore moins d'accord sur leur mise en œuvre... C'est pour cela que l'on va devoir quand même utiliser les vieilles méthodes tout en rajoutant quelques nouvelles...

    Le Doctype de votre message HTML

    L'astuce consiste à tester votre message avec et sans DocType. Le "Doctype" est la description normalisée de votre fichier html, et donc cela indique au navigateur comment il doit le lire pour qu'il soit bien affiché sur votre écran (aussi le texte que les contenus enrichis...) :

    En Html 4 :

    <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    En Html 5 :

    <!doctype html>

    Par exemple, Outlook et Gmail vont automatiquement remplacer votre Doctype Transitional comme celui ci-dessus en un doctype Strict. Ce n'est pas anodin... Cela peut compromettre votre mise en page initiale... Dans ce cas, tester votre message avec puis sans DocType pour voir si votre construction n'est pas abusivement dégradée...

    Encodez vos caractères en entités HTML

    En conséquence de ce que nous venons de voir, il faut bien comprendre que le type de contenu sera souvent ignoré, il est donc conseillé de coder tous les caractères spéciaux dans votre e-mail comme des entités HTML. "é" › "&eacute;" "à" › " &agrave;"...

    Utiliser les Media queries

    Les Media queries issus des nouvelles propriétés du CSS 3 couplées au HTML 5 (mais elles marchent aussi avec le HTML 4) vous permettent de mieux gérer l'affichage de vos contenus en fonction des propriétés "physiques" des supports de visualisation : un écran de mobile offre une surface très restreinte par rapport à un écran 21 pouces... Grâce à eux, vous gérer avec souplesse la manière de faire apparaître vos contenus : une image d'en-tête de grand format sur un desktop devient une vignette sur un mobile... voire disparaît directement du champ d'affichage ! Tout cela repose sur différentes propriétés CSS qui ne s'affichent que selon des plages définies par vos Media queries... Bon, cela, on commence bien l'utiliser car on en comprend l'utilité...

    Seconde chose : il faut mettre en place deux niveaux de déclaration pour les styles CSS employés : dans l'en-tête mais aussi "inline" dans le corps même du fichier html... L'un répondant à l'autre... Attention, c'est une méthode mais ce n'est pas la seule possible.

    Et voilà donc une grande partie de la recette magique !

    <head>
    <meta name="viewport" content="width=device-width, initial scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Et les mails "responsive" ?</title>
    <style type="text/css">
    .ExternalClass {width:100%;}
    img {display: block;}

    </style>

    Une fois ces déclarations insérées en en-tête de votre page (à l'intérieur de la balise head) vous pouvez aller plus loin en choisissant le niveau de spécificité que vous souhaitez délivrer à chaque matériel... En gros :

    Grand écran : on affiche tout plein pot !
    Petit écran : on ne garde que l'essentiel de l'essentiel

    La version vue sur un desktop


    La version mail vue sur un desktop

    La version vue sur un mobile


    La version mail vue sur un mobile

     

     

    Ici, dans cet exemple simple, nous allons en utiliser seulement un seul, sachant que la plupart des matériels offrent la possibilité de visualiser des contenus de 600px de large maximum, aussi bien mobile (tenu horizontalement), écran tactile et bien sûr ordinateur portable et de bureau.

    @media only screen and (max-width: 600px)
    {
    table[class="hide"], img[class="hide"], td[class="hide"]
    {
    display:none!important;
    }
    }

    Ici, nous demandons à ce que quelques éléments soient cachés si le support d'affichage - la largeur de l'écran - est inférieure à 600px : "display: none"... On y rajoute la déclaration "!important;" pour forcer - en quelque sorte - la bonne prise en compte de l'application de ce style (sauf notamment pour Gmail qui ne prend pas en compte les styles CSS déclaré en en-tête... mais bon, ça passe quand même !).

    On ajoute alors par exemple :

    @media only screen and (max-width: 600px)
    {
    table[class="content_wrap"]
    {
    width: 94%!important;
    }
    }

    On peut alors manipuler à sa guise les propriétés des différents éléments comme ici ou l'on demande d'afficher le contenu dans un tableau qui s'étendra sur 94% de l'espace d'affichage de l'écran utilisé...

    Pour le dire simplement, le mail garde une structure html simple (tableaux, caractère en italique, caractère diacritique encodé, largeur des tableaux en taille fixe déclarée en pixels... lorsque qu'il est visualisé sur un grand écran... et bascule vers un affichage spécifique via le déclenchement du Media Queries lorsque la taille d'affichage de l'écran est inférieur à 600px, et c'est donc le CSS qui prend ici le relais pour gérer l'affichage adéquat.

    Évidemment, ce n'est pas une solution idéale mais c'est quand même une solution qui marche et qui est suffisante pour la majorité des besoins du moment. Il s'agit ici de techniques de pointe mais qui sont bien prise en compte par la majorité des usages actuels.

    Nous utilisons les demandes des médias de la même manière que nous lors de la construction d'un site Web; si la taille de la fenêtre est dans les limites fixées dans la requête de médias puis appliquer ce style.


    Et un peu de fantaisie...

    Cette fantaisie, c'est un beau bouton CSS qui invite à cliquer dessus... mais ce n'est pas que de la fantaisie...

    Cela peut paraître anodin, mais en réalité cela va grandement améliorer l'ergonomie du message...

    Dans la version normale, large, on a un lien simple... Comme pour une page web, la lecture de l'article conduit naturellement vers ce lien...

    Dans la version minimal, ce n'est pas la même chose : le lien devient central et c'est l'occasion de le mettre en valeur pour le rendre plus... sexy !

    Des boutons qui s'adaptent au support de visualisation...

    On passe le texte en majuscule, on l'englobe dans le bouton et il devient plus lisible...

    Dans cet exemple, nous avons donc la déclaration en ligne :

    <a href="#" class="button" style="color:#2e7ea6;font-size:18px;line-height:22px;">Lire la suite...</a>

    et le formatage CSS dans la balise style qui se trouve dans le <head> du fichier :

    a[class="button"]
    {
    border-radius:2px;
    -moz-border-radius:2px;
    -webkitborder-radius:2px;
    background-color:#2e7ea6;
    color:#fff!important;
    padding: 5px;
    display:block;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 0 10px 0;

    }

    NB : on utilise bien du CSS et non pas des images pour traiter l'aspect graphique de ce bouton...


    Pour conclure, temporairement...

    Nous sommes donc prêt à créer des emails responsive.

    Ici, nous avons choisi une solution mais il y en a bien d'autres. Cependant, nous devons garder en tête un principe de précaution et limiter la complexité des entités utilisées pour ne pas échouer lamentablement (comme c'est le cas ici pour un Blackberry... eh oui !)

    Les bonnes pratiques

    Avant de commencer à créer votre mailing et d'écrire une seule ligne de code, focalisez vous sur le fait que les personnes qui consulterons votre message le ferons sur un mobile : cela vous amènera à aller à l'essentiel.

    • Des contenus concis : la taille des petits écrans signifient qu'il est important de capter l'attention de votre lecteur le plus rapidement possible.
    • Une seule colonne pour la mise en page vous amène une présentation simple et claire. Cette colonne de devra pas faire plus de 640px de large ce qui est déjà pas mal. Sur un écran à la résolution plus petite, l'apparence de votre message ne sera pas trop dégradé. Une seule colonne garantit surtout qu'aucun contenu ne sera partiellement masquée.
    • Un slogan engageant : ceci est l'une des armes les plus efficaces pour attirer l'attention dans une boîte de réception souvent chargée. Soyez bref et accrocheur.
    • L'appel à l'action (Call-To-Action) : ne pas punir les gros doigts en créant des boutons cliquables d'au moins 60 × 40 pixels.
    • Une tailles de police généreuse : assurez-vous que le texte de votre message peut être lu facilement.
    • Message d'en-tête : créez une version alternative en ligne de votre message et indiquez clairement en haut de votre page « Visualisez ce message dans votre navigateur ».
    • Du texte aligné à gauche : il y a de bonnes raisons pour aligner des éléments importants sur le côté gauche de votre message. Le parcours des yeux qui examine votre message commence naturellement en haut à gauche (pour les utilisateurs occidentaux).
    • Utiliser de belles images : une seule photo peut suffire pour accrocher votre lecteur (s'il s'agit d'un produit par exemple) mais pensez aussi que les images ne seront pas directement affichées et penser à renseigner une balise alt.

    › Accédez à un exemple : un email responsive

    › Téléchargez l'exemple au format ZIP ZIP

    Si vous ne vous sentez pas encore prêt à créer vos propres gabarits de mail responsive, sachez que la plupart des prestataires qui assurent la gestion de campagne de mailing comme DoList ou Mailchimp proposent des gabarit de page prêts à l"emploi voir même directement modifiable via des techniques de drag-and-drop qui rendent la création de vos message simple et même ludique...


    Et des infos supplémentaires :

    Quelques conseils repris plus longuement dans cet article (.en) : «Comment concevoir un e-mail HTML »responsive

    L'excellent site d'HTEUMEULEU (.fr) : https://emails.hteumeuleu.fr/

    Quelques informations essentielles sur le responsive design (.fr) : « 10 petits conseils pour le responsive web design »

    Et, ce qui arrive... sur le blog d'Envato (.en) : « The Future of Email Marketing »

    L'article « Réussir une campagne de mailing... »

    Erwan Corre - Octobre 2015


En poursuivant votre navigation sur le site, vous acceptez l'utilisation des cookies...