Your SlideShare is downloading. ×
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
Comment coder un emailing responsive ?
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

Comment coder un emailing responsive ?

659

Published on

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

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

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
659
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
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. Module 4 : Comment coder un email responsive ? #EmailingSummerCamp
  • 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. Coder un emailing : back to the basics
  • 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. 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. Les règles de base pour optimiser votre code
  • 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. 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. modèles de code
  • 10. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.10/19 Tableau avec image et texte : Modèles de code
  • 11. Emailing Summer Camp 2014 - Comment coder un email responsive ? - p.11/19 Rendu : Modèles de code
  • 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. Le grid View de Gmail
  • 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. 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. Le pre-header, pour optimiser vos ouvertures
  • 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. 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. Prochain module : Comment envoyer une campagne d’emailing ? mardi 5 août 11h @43degres #EmailingSummerCamp Merci !

×