Comment coder un emailing responsive ?

2 315 vues

Publié le

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

Publié dans : Marketing
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 315
Sur SlideShare
0
Issues des intégrations
0
Intégrations
210
Actions
Partages
0
Téléchargements
68
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 !

×