Newsletter / E-mailing Créer une newsletter ou un e-mailing responsive

Développer efficacement le code HTML d'un e-mailing responsive avec les Media Queries

Objectifs

→ Cerner les enjeux d’un e-mailing responsive et identifier les différentes solutions pour adapter un e-mailing sur mobile
→ Identifier les bonnes pratiques de codage de base d’une newsletter ou d’un e-mailing pour desktop
→ Garantir la qualité d’affichage des images pour les écrans HD ou Retina
→ Concevoir le code HTML d’un e-mailing responsive  avec les Media Queries
→ Organiser les tests de rendu et résoudre les bugs

Public concerné

Toute personne réalisant des newsletters ou des e-mailings.

Pré-requis

Avoir déjà réalisé des newsletters ou des e-mailings. Une pratique régulière du HTML et des CSS dans le code est également indispensable.

Programme

Cerner les enjeux d’un e-mailing responsive et identifier les différentes solutions pour adapter un e-mailing sur mobile

  • Repérer les usages en France et dans le monde
  • Connaître l’état des lieux de la compatibilité des 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 de base d’une newsletter ou d’un e-mailing 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 principaux 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 d’un e-mailing 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-mailing responsive avec les Media Queries

  • Créer la structure tabulaire appropriée : travailler avec des tableaux fixes et / ou en pourcentage, des tableaux flottants
  • Ajouter les contenus et les images
  • Mettre en place les styles intégrés
  • Définir les conditions de changement de mise en forme avec les Media Queries
    - principe de fonctionnement de @media
    - points de rupture pertinents
    - codage HTML
    - gestion du viewport
  • 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

 

Exercices : réaliser différents types d’e-mailings responsive (e-mailing d’invitation, newsletter…)

Organiser les tests de rendu et résoudre les bugs

  • Organiser les tests de rendu
    - utiliser les outils de tests rendering (Email 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

 

Exercices : utiliser les outils de test-rendering (Email on Acid ou Litmus) / Tester en réel sur son propre smartphone

Méthodes pédagogiques

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.

Moyens techniquesMoyens spécifiques à cette formation :

→ Logiciels : Brackets, Dreamweaver, Photoshop


Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateur

Webdesigner / E-mail designer ayant plus de 10 ans d'expérience en enseignement.

Marketing Digital
Web
Médias sociaux
Voir toutes les formations

Créer une newsletter ou un e-mailing responsive

3 jours 21 heures 1 600 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

Créer une newsletter ou un e-mailing responsive

3 jours 21 heures 5 070 €HT*

* À partir de

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis