Créer un e-mail marketing ou une newsletter responsive

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 et résoudre les bugs

• 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