Créer un e-mail marketing ou une newsletter responsive
Maîtriser les techniques HTML et CSS pour créer des e-mailings responsive
CERTIFICATION DIGITT
Le certificat DiGiTT est l’opportunité de faire reconnaître officiellement ses compétences digitales.
Le test DiGiTT s’articule autour de 3 dimensions clés : la connaissance des termes utilisés et propres au digital, la capacité à actionner une compétence dans un cas approprié, la capacité à comprendre et à interagir sur des points d’expertise liés aux métiers du digital.
Sur la dernière année : taux de réussite 100%, moyenne « Avancé ».
Objectives
Identifier les bonnes pratiques de codage d’une newsletter ou d’un e-mail pour desktop
Garantir la qualité d’affichage 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
Concerned public
Prerequisite
- E-quiz amont
- Présentiel
- Modules vidéos
- E-quiz aval
Program
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
En présentiel : 1 poste informatique / apprenant. Logiciels : Brackets, DreamWeaver, Photoshop
Alternance de théorie, de démonstrations et de mise en pratique grâce à de nombreux exercices.
Lors du dernier après-midi, les apprenants réalisent de manière autonome un e-mail responsive, si possible en relation avec leur contexte de production.