Formation Email Academy

Apprendre le responsive design en HTML

Name: Apprendre le responsive design en HTML.
Start: 2021-11-16T23:00:00+00:00
End: 2021-11-18T22:59:59+00:00
Location: 32 rue Paradis PARIS 75010

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

Programme

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)
Télécharger le programme de la formation Responsive Design en PDF

Public cible

Formateurs

Julien Wald
Issu d’une formation créative, graphiste en agence, puis chef de projet digital, il crée en 2009 son studio de production spécialisé dans l’intégration d’email et le responsive design.
1er lauréat du concours EMDAY 2015 « innovation dans l’email », il travaille en relation avec de grandes agences de communication qu’il conseille et accompagne en production d’emailing.

2 jours 17 novembre - 18 novembre
-

32 rue Paradis PARIS 75010

1650€ HT

Civilité
Nom
Prénom Nom
Société*
Adresse
Adresse postale Ville
Téléphone*
E-mail*

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

Apprendre le responsive design en HTML

Témoignages des participants

florence consultant

coordonnées

liens

Nous suivre