Créer un e-mailing ou une newsletter responsive par Pyramyd NTCV

Cerner les enjeux et identifier les différentes solutions pour adapter une campagne sur mobile
- Repérer les usages en France et dans le monde
- Connaître l'état des lieux de la compatibilité des principaux clients mails
- Identifier les outils de test de rendu
- Cerner les différentes stratégies d'intégration HTML d'un e
- mail responsive (Mobile First, approche hybride...)
Étude de cas : analyse d'exemples
Identifier les bonnes pratiques de codage d'une newsletter ou d'un e
- mail pour desktop
- Structurer efficacement une mise en pages avec les tableaux HTML
- Utiliser les styles intégrés (CSS inline)
- Lister les propriétés CSS compatibles
- Identifier les bugs de rendu et solutions dans les principaux clients mails et Webmails
- Utiliser la technique de l'amélioration progressive avec CSS3 (arrondi, ombre, Web Font...)
- Tester le rendu et garantir la qualité du code HTML
Exercice : réaliser le code HTML d'une newsletter pour desktop
Garantir la qualité d'affichage des images pour les écrans HD ou Retina
- Extraire les images à la dimension et au format appropriés
- Optimiser les images avec Photoshop
Exercice : extraire des images depuis une maquette Photoshop
Concevoir le code HTML d'un e
- mail responsive avec les Media Queries
- Créer la structure tabulaire appropriée : tableaux fixes et / ou en pourcentage, tableaux fl ottants
- Ajouter les contenus et les images
- Mettre en place les styles intégrés
- Définir les conditions de changement de mise en forme
- Modifier la structure de la mise en pages sur mobile : passer de 2 à 1 colonne ou de 3 à 1 colonne
- Améliorer la lisibilité du texte sur smartphone
- Améliorer la qualité des interactions : concevoir des boutons "finger friendly"
- Masquer certains contenus sur mobile
- Remplacer une image par une autre sur smartphone
Exercice : réaliser différents types d'e
- mails responsive (e
- mail d'invitation, newsletter...)
Organiser les tests de rendu
- utiliser les outils de tests rendering (E
- mail on Acid / Litmus)
- tester directement sur smartphones
Résoudre les bugs de rendu
- utiliser des commentaires conditionnels pour Outlook (tableaux et colonnes fantômes)
- empêcher l'affichage de la version mobile sur desktop dans le Webmail d'Orange
- modifier l'aspect visuel des liens sur les téléphones, les dates et les adresses sur iOS
- empêcher le redimensionnement automatique dans l'application mobile Gmail
Exercice : utiliser les outils de test
- rendering (E
- mail on Acid ou Litmus) / Tester en réel sur son propre smartphone

- Cerner les enjeux et identi?er les différentes solutions pour adapter une campagne sur mobile
- Identi?er les bonnes pratiques de codage d'une newsletter ou d'un e
- mail pour desktop
- Garantir la qualité d'af?chage des images pour les écrans HD ou Retina
- Concevoir le code HTML d'un e
- mail responsive avec les Media Queries
- Organiser les tests de rendu et résoudre les bugs