Comment coder un emailing responsive ?
•
1 gefällt mir•3,750 views
Toutes les clés et bonnes pratiques pour coder un emailing en responsive sont dans cette présentation
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Comment coder un emailing responsive ?
Ähnlich wie Comment coder un emailing responsive ? (20)
Comment coder un emailing responsive ?
- 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 :
- 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 !