Formation Email Academy

Apprendre le responsive design en HTML

Comment utiliser les techniques adaptatives et du responsive design pour améliorer les performances de ses emailing ?

Avec l’augmentation du taux de lecture des emails sur smartphones et tablettes, il devient nécessaire d’optimiser ses emails pour une meilleure lisibilité et action sur ces nouveaux périphériques. Ces 2 journées de formation vous permettront de comprendre les règles du codage HTML optimisées sur smartphones et tablettes et de les mettre en pratique. Seront aussi abordés aussi les dernières techniques liées au Dark Mode et à AMP  de Google.

Objectifs

  • Vous rendre capable de concevoir des emails qui s’adaptent parfaitement à la lecture sur tablette et sur smartphone, tout en conservant un rendu optimal sur ordinateur,
  • Vous permettre de maitriser les limites du responsive design.

Le + : de la pratique

  • Les thèmes présentés seront illustrés de nombreux cas concrets et de l’intégration d’un email en responsive design.
  • Le formateur veille régulièrement sur les évolutions fréquentes du code responsive et remet à jour ses conseils de codage à chaque formation.
  • Utilisez votre ordinateur et réalisez les exercices avec le formateur sur votre environnement de travail (éditeur HTML …).

Prérequis

  • Bonne connaissance de HTML et CSS

Formation en classe virtuelle.

La formation sera proposée en classe virtuelle avec aux maximum 4 participants sur 2 jours.
Plus de détails sur le déroulement des classes virtuelles

1. Rappel des enjeux de l’email sur smartphones et tablettes
  • Les derniers chiffres et tendances des smartphones et tablettes
  • Les usages les plus courants du mobile, le poids de l’email et des différents OS
  • Focus sur les spécificités iOS : gestion des images, des polices, reconnaissance CSS3, vidéo…
  • Focus sur les spécificités Android : les différents logiciels client
  • Focus sur la France en BtoC et BtoB
2. Les techniques d’adaptations des emails au mobile
  • Les différentes tailles d’écran
  • La différence entre le design adaptatif et responsive
  • Le principe du breakpoint
  • Les 5 mythes sur les emails mobiles
  • Les 4 approches pour coder un email adapté au mobile
  • Rappel des bases du HTML pour l’email
  • Rappel des bonnes pratiques de codage CSS
  • La balise @media : principes et précautions de mise en œuvre
    • Usage des balises Min-Width & Max-Width
    • Gestion des points de rupture
  • Quels outils de messagerie prennent en charge les media queries ?
  • Les outils d’aide à la conception et aux tests du responsive design
  • Comment faire ses tests sans outil ?
3. Création d’un email en responsive design de base au framework
  • Scalabe Design vs Fluid Design vs Responsive Design pour quel type de communication ?
  • Mise en pratique
  • Part I : Réalisation d’un template simple (mobile first)
    • Coder la structure de base
    • Ajouter des images et du texte
    • Créer les styles pour Desktop
    • Définir les conditions de changement de mise en forme pour les mobiles
    • Créer les media queries
    • Modifier de la dimension de l’email pour mobile (largeur fixe, largeur fluide)
    • Optimiser le contenu (taille des caractères, marge, boutons)
    • Test de rendu de l’email sur Desktop et mobile
  • Part II : Structure 2 colonnes
    • Coder la structure tabulaire en 2 colonnes
    • Créer les styles pour écrans Desktop
    • Optimiser les conditions pour les mobiles Responsive Design
    • Passer de 2 à 1 colonne sur mobile
  • Partie III : Structure 3 colonnes
    • Coder de la structure tabulaire en 3 colonnes
    • Empêcher les bugs d’Outlook grâce aux commentaires conditionnels
    • Créer les media queries pour passer de 3 à 1 colonne sur mobile
  • Part IV : Optimisation des images pour mobile
    • Qualité d’image
    • Traitement des images Retina
    • Recadrer une image sur mobile
    • Remplacer une image par une autre
    • Optimisation de la bannière mobile
    • Optimisation de la mise en page mobile :
      • Modifier la taille des caractères
      • Modifier les marges sur mobile
  • Part V : éléments avancés
    • Masquer des contenus sur mobile  (menu, images)
    • Augmenter la taille du CTA sur mobile
    • Le Dark Mode et son impact
  • Part VI : Les meilleures pratiques
    • Créer un pre-header pour inciter les utilisateurs mobiles
    • Structurer la mise en page du footer
    • Amélioration progressive :
      • Arrondir les coins des images
      • Utilisation d’une Web Font pour l’email
      • Ajouter du style aux balises ALT
      • Développer l’accessibilité des emails
    • Part VII : Les outils
      • Litmus, Email on Acid, Putsmail, Litmuscope HTML Validator, CSS validator, Adobe Brackets, Sublime Text, JPEGmini, tinyPNG, Compressor.io
    • Part VIII : Augmenter sa productivité
      • Utiliser un responsive email framework (Foundation for emails, Mjml, etc.)
      • Créer son propre framework (approche modulaire)
2 jours 24 mars - 25 mars
16 juin - 17 juin
03 novembre - 04 novembre
19 novembre - 20 novembre
- 1650€ HT

Possibilité de convention de formation.

Un support papier sera fourni lors de la formation.

La formation combine exposé théorique et exercices sur PC. Il est recommandé de venir avec un PC portable.

Témoignages des participants

Une formation courte mais complète et instructive. Sur le plan théorique d’abord, avec les dernières statistiques et analyses de comportements mobile / desktop. Sur le plan intégration ensuite, avec une approche codage et bonnes pratiques, appuyée sur des exemples concrets de campagnes.
François Leveau
Responsable Production
Vertical-Mail



"Une formation très intéressante et très riche qui m’a permis d’apprendre plein d’astuces sur la façon de coder en responsive design. Il ne reste plus qu’à les appliquer ! Autre point positif : le fait de venir de milieux différents rend les échanges entre participants très enrichissants."
Julia Jaeg
Chef de projet Webmarketing
HAGER



Pratiquant intensément l'intégration HTML, j'ai pu lors de la formation trouver toutes mes réponses techniques pour optimiser le code responsive de mes emails. De plus Emmanuel est un formateur expert, passionné, dynamique et très disponible ! Une formation essentielle pour mon activité d'intégrateur HTML
Fabien Vanacker
Gestionnaire de campagnes
Sofrcomputing



Formation sur mesure ?

Que vous ayez besoin d’un module très court sur un sujet très pointu ou d’un programme complet sur l’emailing