Your SlideShare is downloading. ×
Le HTML pour Emailing : les 12 péchés capitaux
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Le HTML pour Emailing : les 12 péchés capitaux

21,879
views

Published on

Constatant quotidiennement l'impact du HTML sur la délivrabilité et sur le bon affichage dans les logiciels de messagerie, nous sommes aussi rendus compte que bon nombre de professionnels aguerris …

Constatant quotidiennement l'impact du HTML sur la délivrabilité et sur le bon affichage dans les logiciels de messagerie, nous sommes aussi rendus compte que bon nombre de professionnels aguerris n’en connaissaient pas toutes les spécificités... Si vous êtes un webmaster ou un intégrateur réalisant du code HTML pour l’email ou un opérationnel qui pilote des actions de marketing direct nous espérons que ce webinaire vous sera utile !

Published in: Technology, Business

0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
21,879
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Webinaire numéro 12
    <EMAILING> ??? </EMAILING>
    Les 12 péchés capitaux du HTML pour l’Emailinget les méthodes pour les éviter
  • 2. A propos de ce webinaire
    Avec plus de 10 000 entreprises et organisations utilisatrices de notre application Web d’Email Marketing, Message Business est confrontée aux particularités de l’utilisation du HTML pour l’emailing.
    Constatant quotidiennement son impact sur la délivrabilité et sur le bon affichage dans les logiciels de messagerie, nous sommes aussi rendus compte que bon nombre de professionnels aguerris n’en connaissaient pas toutes les spécificités...
    Si vous êtes :
    Un webmaster ou un intégrateur réalisant du code HTML pour l’email.
    Un donneur d’ordre ou un opérationnel qui pilote des actions de marketing direct et qui doit comprendre les contraintes spécifiques de l’email marketing.
    Nous espérons que ce webinaire vous sera utile ! L’équipe Message Business
    PS : Ce webinaire n’est pas une auto formation au HTML en général et se concentre uniquement sur les bonnes pratiques à respecter lors de l’envoi d’emailing et de newsletter.
    2
  • 3. Rendez vous au Forum Emarketingle 25 et 26 janvier 2011
    Sur notre stand D45
    Et en conférence
    Le 25 janvier à 11H00
    «  Les 15 Commandements de l'e-mailing et des newsletters en 2011 »
    Le 26 janvier à 11H00
    « Les secrets du HTML pour l'e-mailing et les newsletters
    pour améliorer lisibilité et délivrabilité »
    3
  • 4. POURQUOI AMELIORER SON HTML ?
    4
  • 5. Pour éviter ça !
    5
    « Un HTML pas optimisé augmente considérablement la mise en courrier indésirable par les logiciels antispams »
  • 6. Après ouverture
    des images 
    6
    Et ça !
    « Méconnaitre les règles du HTML pour l’email, notamment les webmails, Outlook et Lotus, risque de ruiner vos efforts graphiques»
  • 7. Et au final dépenser du temps et de l’argent pour ça...
    7
  • 8. Une histoire qui commence dès la conception graphique
    8
  • 9. Responsable marketing dans l’urgence !
    9
    Vite je dois faire une invitation pour la participation à notre prochain salon
  • 10. Graphiste réactif
    10
    Regarde ma crea ! Ca déchire !
  • 11. 11
    Responsable marketing dans l’urgence !
    Trop cool ! Le big boss m’a félicité !
    GO pour l’intégration HTML, la création est validée par le patron !
  • 12. Webmaster polyvalent
    12
    Et hop ! Voici ton HTML super propre : vérifié sur Internet Explorer, Firefox et même Chrome !
  • 13. Principe du montage HTML choisi par notre webmaster polyvalent
    Un tableau avec des images découpées en fond de cellule
    13
    IMAGE 1
    IMAGE 2
    IMAGE 3
    IMAGE 4
    IMAGE 5
    IMAGE 6
    IMAGE 7
  • 14. Principe du montage HTML choisi par notre webmaster
    14
    Des textes affichés « par-dessus » les images dans les cellules du tableau
  • 15. 15
    Principe du montage HTML choisi par notre webmaster polyvalent
    Bon équilibre texte / image. Parfait pour l’affichage avant ouverture des images Bravo ! La campagne est prête !
    Suivre les règles du W3C c’est vraiment la garantie !
    Quelle équipe performante ! Et en plus on peut réutiliser la créa ! Economique !!!
  • 16. Le jour de la campagne...
    16
    vu d’Outlook 2007, Windows Mail, Outlook Express…
  • 17. Le jour de la campagne...
    17
    vu d’Outlook 2007
    vu de Gmail
    Avant ouverture des images !
  • 18. Le jour de la campagne...
    18
    vu d’Outlook 2007
    vu de Gmail
    Après ouverture des images !
  • 19. Le jour de la campagne...
    19
    vu d’Outlook 2007
    vu de Gmail
    Après ouverture des images !
  • 20. Le lendemain
    20
    A l’attention de Help You Cie
    Madame, monsieur
    J’ai bien reçu votre email m’invitant à un salon.
    Je tiens à vous informer que je ne souhaite pas recevoir de message de votre part.
    Ne trouvant pas de formulaire de désabonnement j’en ai informé la CNIL ainsi que les principales black list.
    Votre ex prospect
  • 21. Comment en est on arrivé là ?
    21
    Images déclarées en fond de cellule
    Manque Display Block
    Alt pas renseigné
  • 22. Comment en est on arrivé là ?
    22
    URL et email activés via un lien hypertexte (risque d’être considéré comme faisant du phising suite à encodage de l’URL)
    Pas de formulaire de désabonnement
  • 23. Les fausses bonnes solutions : Image unique ou découpée en tranche
    IMAGE 1
    Mise en spam x 2 ou x3
    IMAGE 2
    IMAGE 3
    Affichage médiocre avant ouverture des images
    IMAGE 4
    23
  • 24. Les fausses bonnes solutions : CSS utilisant les layers
    Affichage atroce après ouverture des images sur webmail
    24
  • 25. Les vrais solutions : traitement curatif rapide => redondance des fonds
    25
    <td bgcolor="#066792" align="center" background="imagefond.jpg" width="600" height="224" alt="--" valign="top" >
    En dessous des images de dégradés en fond de cellule rajout d’un code couleur permettant l’affichage d’un texte blanc sous Outlook 2007
  • 26. Les vrais solutions : traitement curatif rapide => réinsertion des images
    26
    <imgsrc="rv.jpg" style="display:block" border="0" width="600" height="68" alt="RENDEZ VOUS SUR LE STAND E11" >
    Redécoupage pertinent des tranches d’images
    Vérification des balises Alt et saisie de texte signifiant
    Rajout de la balise style="display:block" pour toutes les images collées les unes aux autres
    IMAGE 1
    IMAGE 3
    IMAGE 4
    IMAGE 5
    IMAGE 6
  • 27. 27
    vu de Gmail
    vu d’Outlook 2007
    Avant ouverture des images !
    Le jour de la campagne...
  • 28. 28
    Des imperfections esthétiques demeurent dues aux problèmes liés aux images en fond de cellule ! Si possible choisir le traitement préventif en s’abstenant des 12 péchés capitaux… Voir écrans suivants !
    vu de Gmail
    vu d’Outlook 2007
    Le jour de la campagne...
    Après ouverture des images !
  • 29. COMMENT TESTER SES EMAILS
    29
  • 30. Ce qu’il faut surtout ne pas faire
    30
    Ne faire confiance qu’à une prévisualisation sur
    Parce que les emails sont lus sur des logiciels et webmails aux affichages différents des navigateurs Web
    Répartition moyenne des plates-formes de messagerie
    source Message Business
  • 31. Des méthodes efficaces pour tester l’affichage de ses mails
    SIMPLE ET FACILE
    Créer un compte gmail
    Créer une adresse hotmail / live
    Tester aussi dans Outlook 2007 et supérieur (recommandé)
    POUR TEST MULTI PLATES-FORMES Prévisualisationsur plates-formes versions américaines
    A partir de 49 $ / mois
    31
    Les 3 principales plates-formes les plus exotiques dans leur affichage.
  • 32. LES 12 PECHES CAPITAUX DU HTML POUR SES EMAILINGSet les METHODES POUR LES EVITER
    32
  • 33. Les 12 péchés capitaux du HTML pour ses emailings
    Les images sans balises Alt
    Les images aux dimensions pas renseignées
    Les images en fond de tableau et de cellule (à anticiper dès le graphisme)
    Les tableaux imbriqués plus de 3 fois (à anticiper dès le graphisme)
    L’image unique ou que des images
    Les images en mosaïque sans la balise display block
    mailto: to, url cliquable et stop word
    CSS Externe et CSS Layout
    Gif animé, notamment démarrant au blanc
    Les videos, scripts, formulaires, objets dans le mail
    Dimension incohérente sur les tableaux
    Et aussi…
    33
  • 34. L’image sans la balise Alt et aux dimensions non renseignées
    34
    <imgsrc="rv.jpg" >
    Affichage médiocre avant ouverture des images
    Mise en spam
    Mauvaise pratique
    Rédigez des textes signifiants qui incitent à l’ouverture des images
    <imgsrc="rv.jpg" width="600" height="68" alt="RENDEZ VOUS SUR LE STAND E11" >
    Bonne pratique
  • 35. Les images en fond de tableau et de cellule
    35
    <table width="600" border="0">
    <tr>
    <td background="degrade.jpg">Mon texte</td>
    </tr>
    </table>
    Affichage après ouverture des images Outlook 2007
    Affichage avant ouverture des images
    Mauvaise pratique
    Intégrez cette contrainte dès la création graphique
    <table width="600" border="0">
    <tr>
    <td bgcolor="#066792" >Mon texte</td>
    </tr>
    </table>
    Bonne pratique
  • 36. Les tableaux imbriqués plus de 3 fois
    36
    <table cellpadding="10">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    <table cellpadding="10" cellspacing="0">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>
    <table>
    <tr><td>nbsp;</td> <td><table>>
    <tr><td></td><td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td> <table>
    <tr>
    <td width="63">&nbsp;</td>
    <td width="63">&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
    </table>
    Mise en spam
    Bonne pratique
    Mauvaise pratique
    Privilégiez les paddings pour caler vos éléments (marge etc). style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px"
  • 37. L’image unique ou que des images, l’image en mosaïque sans Display block
    37
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td>Bonjour, nous sommes heureux de vous inviter au salon le 13 septembre. Parce que vous êtes un client exceptionnel, ces <A HREF="">invitations </a> sont gratuites mais en quantité limité</td>
    </tr>
    <tr>
    <td><imgsrc="tranche1.jpg" alt="BONJOUR" width="600" height="100" border="0" style="display:block"></td>
    </tr>
    <tr>
    <td><imgsrc="tranche2.jpg" alt="RV AU SALON LE 13 SEPTEMBRE" width="600" height="100" border="0" style="display:block"></td>
    </tr>
    <tr>
    <td><imgsrc="tranche3.jpg" alt="INVITATION GRATUITE" width="600" height="100" border="0" style="display:block"></td>
    </tr>
    <tr>
    <td><imgsrc="tranche4.jpg" alt="EN QUANTITE LIMITEE" width="600" height="100" border="0" style="display:block"></td>
    </tr>
    <tr>
    <td>Texte de conclusion avec des informations complémentaires, des rappels, des coordonnées... Et bien sur le lien de désabonnement</td>
    </tr>
    </table>
    <imgsrc=« monimage.jpg" alt="BONJOUR" width="600" height="100" border="0" >
    Mise en spam
    Affichage avant ouverture des images
    Bonne pratique
    Mauvaise pratique
    Visez un équilibre 50% image / 50% texte
  • 38. mailto: to, url affichée et cliquable
    38
    Notre site Web : <A href="http://www.helpyoucie.fr">www.helpyoucie.fr</A>
    Nous contacter : <A href= "mailto:contact@helpyoucie.com"> contact@helpyoucie.com</A>
    Email frauduleux(phising)
    Mise en spam
    Mauvaise pratique
    Notre site Web : www.helpyoucie.fr
    Nous contacter : contact@helpyoucie.com
    Bonne pratique
    La majorité des logiciels de messagerie rendront vos url et vos adresses mails cliquables avec une couleur de lien par défaut (attention au fond sombre)
  • 39. CSS Externe et CSS Layer
    39
    Affichage après ouverture des images
    <linkrel="stylesheet" href=monsite.com/macss.css" type="text/css" media="screen" charset="utf-8" />
    Affichage avant ouverture des images
    Mise en spam
    Mauvaise pratique
    Des styles graphiques déclarés directement en regard des textes. HTML « à l’ancienne » => CSS Inline
    <font style="color:#33333 ; font-size:14px ; font-family:Arial, Helvetica, sans-serif ; text-decoration: underline "> mon texte </font> <imgsrc="monimage.jpg" alt="image" style="border-color: #00aaff;" border="3" >
    <a href="monlien" style="color: couleurdulien;" target="_blank">
    ETC !
    Bonne pratique
  • 40. Gif animé, notamment démarrant au blanc sur Outlook 2007
    40
    Evitez les blancs ou bout de texte sans signification pour votre la 1 ere image de votre animation
  • 41. Les videos, scripts, formulaires, objets dans le mail
    41
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td>Bienvenue dans l’innovation avec Microsoft France et Message Business</td>
    </tr>
    <tr>
    <td><imgsrc="tranche1.jpg" alt=« UNE VIDEO" width="600" height="100" border="0" style="display:block"></td>
    </tr>
    <tr>
    <td><imgsrc="tranche2.jpg" alt=« SUR L’INNOVATION" width="600" height="100" border="0" style="display:block"></td> </tr> </table >
    <script type="text/javascript"></script>
    <object>
    <paramname="movie" value="monflash.swf"><embedsrc="monflash.swf">
    </embed>
    </object>
    <form id="form1" name="form1" method="post" action="">
    <input name="Votre mail" type="text" />
    <label>OK
    <input type="submit" name="Submit" value="Envoyer" />
    </label>
    </form>
    Mise en spam
    Mauvaise pratique
    « Simulez » la video ou le formulaire avec une image
  • 42. Dimension incohérente sur les tableaux et fusions de cellule (colspan) de valeurs différentes dans le même tableau
    42
    <table width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="400">&nbsp;</td>
    <td width="800">&nbsp;</td>
    </tr>
    </table>
    Faites vos comptes, si nécessaire calculatrice à la main !
    Mauvaise pratique
    <table>
    <tr>
    <td colspan="5">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3">&nbsp;</td>
    <td width="15">&nbsp;</td>
    <td width="88">&nbsp;</td>
    </tr>
    <tr>
    <td width="15">&nbsp;</td>
    <td width="16">&nbsp;</td>
    <td colspan="3">&nbsp;</td>
    </tr>
    </table>
    Affichage après ouverture des images
    Affichage avant ouverture des images
    Mauvaise pratique
    Tester dans Outlook et Gmail. Ces problèmes sont invisibles sur IE et FFox
  • 43. Et aussi
    43
    L’absence de version texte en envoi multipart
    spam
    Affichage impossible dans black berry
    Texte de couleur sur fond de même couleur
    Certains mots qui renforcent la mise en spam : promo, free, shopping, regime, levre, …
    Trop de code commenté <!-- Voici un commentaire -->
    Proportion contenu texte trop faible dans le code Html
    Mauvaise utilisation des logiciels bureautiques
    spam
    spam
    spam
    spam
    spam
  • 44. Plus d’infos ?
    44
    Sur le Front
    Webinaires périodiques approfondissant une thématique
    Message Business Campus
    Blog des Bonnes Pratiques Emailing & Emarketing (plus de 400 billets publiés en 3 ans) et organisations d’événements www.message-business.com/campus/
    Newsletter
    Envoyée aux clients, utilisateurs, partenaires et prospects Message Business
    www.message-business.com/surlefront/
  • 45. Plus d’infos ?
    45
    Hub Viadeo
    Emailing & SMS - Echange de bonnes pratiques avec Message Business  http://www.viadeo.com/hu03/00228xvn0gs7ydtb/emailing-sms-echange-de-bonnes-pratiques-avec-message-business
    @messagebusiness
    L’actualité Message Business et Email Marketing en temps réel  http://twitter.com/messagebusiness
    Emailing Radar
    Veille automatisée sur 50 sources d’info francophones http://www.message-business.com/emailing-radar.aspx
  • 46. Et après ?
    46
  • 47. Merci !
  • 48. Les 12 péchés capitaux du HTML pour l’Emailing
    A propos de Message Business
    48
  • 49. Message £usiness en bref : 4 offres au service de votre Emarketing
    Le 1 er logiciel hébergé 100% Libre Service
    Message £usinessEmailing Server
    Serveur SMTP spécialisé
    Délivrabilité surveillée
    Capacité mutualisée
    IP dédiée
    Emailing
    SMS
    RSS
    Formulaires
    Enquêtes en ligne
    Statistiques
    100% sécurisé
    Sans abonnement
    Sans frais fixe
    http://www.emailing-server.com/
    Gestion de campagnes et accompagnement
    Message £usiness Partenaires
    Agences
    Marque blanche
    Fichiers
    49
  • 50. Message Business en bref : un tiers de confiance multi récompensé...
    Ecommerce Award 2008
    Programme IDEES Microsoft
    Coup de cœur des cubes Salon VAD 2007
    Lauréate 2007 de PARIS ENTREPRENDRE
    Tiers de confiance SNCD
    50
  • 51. 51
    ... Plébiscité par plus de 9000 entreprises utilisatrices
    B to B
    (cibles entreprises)
    B to C
    (cibles grand public)
    Non Marchands
    Castorama
    Caviar Petrossian
    MAAF
    Relais Bernard Loiseau
    Wall Street Institute

    American Express
    Central Telecom
    GeodisCalberson
    Reed
    Vinexpo

    Ministère du budget
    Conseil Général de la Sarthe
    Plan France
    Mécénat Cardiaque
    Ordre Experts-Comptables
    Tout le Monde Chante …
    Satisfaites !
    Enquête menée en décembre 2009 sur 8325 utilisateurs
  • 52. Principes de tarification en libre service
    Des packs au volume correspondant à un crédit d’opérations à utiliser sous 12 mois et un support par mail.
    Chaque Pack Libre Service comprend
    Un crédit d’envoi et l’accès au logiciel valable 12 mois
    Outils d'importation et d’exportation de vos contacts
    Moteur de segmentation de votre base
    Modèles d'emailing et de newsletter
    Éditeur HTML et visuel de messages
    Rapports statistiques après envoi
    Gestion de vos adresses défectueuses et désabonnement
    Centre support à votre disposition
    Services inclus de logiciel de présences Web (Blog, Flux RSS)
    1 ou plusieurs formulaires Web en fonction des volumes
    * L’accès au logiciel Enquête est offert à partir du pack Emailing 5000 et SMS 1000
    Pas de frais d’ouverture de compte, pas d’abonnement mensuel... C’est simple : vous ne payez que votre consommation.
    52
  • 53. Plate-forme technique et délivrabilité
    Une délivrabilité maximale et suivie :
    Déclaration SPF / Sender IDAuthentification de l’expéditeur via son domaine.
    Certification Domain Keys
    Premier routeur français à offrir la certification Domain Keys
    Suivi des blacks ListsVérification automatisée que l’émetteur n’a pas été black listé
    Traitement et analyse des mails de retour
    • Hard : purge de la base
    • 54. Soft : algorithme de retentative
    Boucle de rétroaction Webmail
    • des liens étroits avec les principaux acteurs du marché
    • 55. surveillance FAI par FAI
    • 56. Opt out intégré aux messages
    250 millions d’email délivrées en 2009
    Pour les SMS : fiabilité et voie de retour
    • plate-forme directement raccordée aux opérateurs mobiles
    • 57. Voie de retour pour les réponses et les statistiques
    • 58. France et international
    Une ferme de serveurs dédiée et sécurisée :
    Hébergement haut de gamme (Bull)
    GTR de 1H.
    Supervision 24h/24 et 7j/7.
    Machines de secours, serveurs redondants
    Encryptage des données en 128 Bits
    Audit de sécurité pluri quotidien
    L’accompagnement Message Business:
    • Conseils sur les réglementations
    • 59. Bonnes pratiques
    53

×