Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Comment coder un emailing responsive ?

3,604 views

Published on

Toutes les clés et bonnes pratiques pour coder un emailing en responsive sont dans cette présentation

Published in: Marketing
  • Login to see the comments

Comment coder un emailing responsive ?

  1. 1. Module 4 : Comment coder un email responsive ? #EmailingSummerCamp
  2. 2. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.2/19 1 - Coder un emailing : back to the basics 2 - Les règles de base pour optimiser votre code 3 - Modèles de codes 4 - Le grid view de Gmail 5 - Le pre-header, pour optimiser vos ouvertures Sommaire
  3. 3. Coder un emailing : back to the basics
  4. 4. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.4/19 Coder un emailing : back to the basics Développeurs, oubliez les nouveautés apparues ces dernières années ! L’emailing, c’est du codage à l’ancienne Chaque client email interprète votre code à sa façon Raisonner en tableaux Pas de CSS
  5. 5. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.5/19 Exemple de construction d’emailing : Header Footer Message principal Call to action Message Image <table> </table> <table> </table> <table> </table> Coder un emailing : back to the basics
  6. 6. Les règles de base pour optimiser votre code
  7. 7. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.7/19 Les règles de base pour optmiser votre code Doctype à déclarer : <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http:// www.w3.org/TR/html4/loose.dtd”> A savoir : • Utiliser des <p style=....> • N’utilisez pas de liens raccourcis • Ne fixez pas de hauteur, juste des width • padding : pas interprété par Outlook, préférez margin • Remplissez les <alt> • Pas de tableaux imbriqués (3 au maximum) • Pas d’images en .gif ou .png • Toujours mettre un lien de désinscription • Importance de la version texte
  8. 8. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.8/19 Les règles de base pour optmiser votre code Pour le responsive, utilisez @media :
  9. 9. modèles de code
  10. 10. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.10/19 Tableau avec image et texte : Modèles de code
  11. 11. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.11/19 Rendu : Modèles de code
  12. 12. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.12/19 Modèles de code Liens à mettre en haut de l’emailing : Rendu :
  13. 13. Le grid View de Gmail
  14. 14. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.14/19 Le Grid View de Gmail Un format de type Pinterest pour les emails promotionnels, avec quelques contraintes :
  15. 15. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.15/19 A savoir pour votre codage : • La photo de présentation doit mesurer au minimum 580 x 480 pixels • L’imagequireprésentelelogodel’émetteurestassociéeauprofilGoogle+ de l’organisation • Le nom de l’émetteur doit se composer de 20 caractères maximum • L’objet de l’email doit compter 75 caractères maximum Toutes les spécificités ici: https://developers.google.com/gmail/actions/reference/offer Le Grid View de Gmail
  16. 16. Le pre-header, pour optimiser vos ouvertures
  17. 17. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.17/19 Le pre-header peut faire la différence dans votre taux d’ouverture : Sans pre-header personnalisé Avec pre-header personnalisé Le pre-header, pour optimiser vos ouvertures
  18. 18. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.18/19 Par défaut, sont affichés les premiers mots trouvés dans le code. A vous de fournir ces premiers mots et de les rendre invisible dans l’email. Utilisez : Le pre-header, pour optimiser vos ouvertures
  19. 19. Prochain module : Comment envoyer une campagne d’emailing ? mardi 5 août 11h @43degres #EmailingSummerCamp Merci !

×