Formation Email Academy
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.
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.
- Venez avec votre ordinateur et réalisez les exercices avec le formateur sur votre environnement de travail.
Prérequis
- Bonne connaissance de HTML et CSS
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
- Comment mesurer l’ouverture sur environnement mobile ? Les différentes solutions
2. Les techniques d’adaptations des emails au mobile
- Les différentes tailles d’écran
- La différence entre le design adaptatif design et responsive
- Les différents breakpoints
- Les 5 mythes sur les emails mobiles
- Les 4 approches pour coder un email adapté au mobile
- Les 3 gestions du contenu sur un email 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
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
- Créer un email responsive sans media queries
- 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
- Ajout d’une ombre (text-shadow et box-shadow)
- Utilisation d’une Web Font pour l’email
- Ajouter du style aux balises ALT
- 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)
Public cible
Sont particulièrement concernés par cette formation :
- Webmaster
- Intégrateur HTML
- Développeur HTML
Note : les participants doivent venir à la formation équipés d‘un ordinateur portable
Formateurs