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
-
Emmanuel GérardAprès avoir exercé pendant près de 15 ans les métiers d’intégrateur html et webdesigner free-lance, il consacre aujourd’hui l’essentiel de son activité à l’email design.
Il conseille et accompagne ces clients dans la conception graphique et l’intégration html experte d’emailing et de newsletters.
Enfin Il anime un blog Email design et html responsive entièrement dédié à l’email design.
2 jours
21 mars - 22 mars
13 juin - 14 juin
18 novembre - 19 novembre
-
13 juin - 14 juin
18 novembre - 19 novembre
-
1650€ HT
Possibilité de convention de formation.
Un support numérique 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
