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. L’objectif de ces 2 journées de formation est de vous permettre de comprendre les règles du codage HTML optimisées sur smartphones et tablettes et de les mettre en pratique.
objectifs
- Savoir optimiser la conception d’un email sous smartphone/tablette
- Connaître les balises utiles pour adapter son email à des écrans de tailles diverses
- Savoir obtenir un rendu homogène quel que soit le contexte de visualisation mobile ou desktop
- Connaître les outils en ligne permettant de tester les créations responsive ou adaptatives
- Connaître les limites du responsive design
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 clients et leurs spécificités
- 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érents tailles d’écran
- La différence entre l’adaptative design et le responsive design
- 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
- Focus sur : – Le CSS – Les sélecteurs d’attribut – Les outils de gestion des attributs
- La balise @media : principes et précautions de mise en oeuvre – Usage des balises Min-Width & Max-Width – La gestion de l’orientation du périphérique – Les possibilités sur Media Query
- Qui prend en charge la Media Query ?
- Les outils d’aide à la conception et aux tests du responsive design
- Création d’un email en responsive design de A à Z
- Techniques avancées et problèmes – Gestion de Yahoo webmail – Outlook.com – Logiciel Outlook – Usage de htmlemailboilerplate.com
- L’optimisation de la conception d’un email sur mobile
- Références et liens utiles
3. Création d’un email en responsibe design de base au framework
- Scalabe Design vs Fluid Design vs Responsive Design, pour quel type de communication ?
- Partie I : Réalisation d’un template simple – Coder la structure de base – Ajouter des images – Ajouter du texte – Gérer les écarts – Introduction au CSS – Gestion des listes à puces – Réaliser l’email en responsive – Introduction aux Media Queries
- Partie II : Structure 2 colonnes – Coder la structure en 2 colonnes – Écrire les conditions pour mobile ou PC de bureau – Optimiser les conditions pour les mobiles – Responsive Design – Modification des Media Queries
- Partie III : Mise en page de la colonne mobile – Coder le tableau pour le contenu sur 2 colonnes – Conversion de la mise en page mobile à 1 colonne – Créer un template responsive sans media querie
- Partie IV : Optimisation des images pour mobile – Qualité d’image – Traitement des images Retina – Remplacement de la bannière sur mobile – Optimisation de la bannière mobile – Optimisation de la mise en page mobile – Dimensionnement du paragraphe – Retrait des marges sur mobile
- Partie V : Intégrer d’un design en responsive – Préparer son fichier – Découpe du fichier – Intégration de la structure – Validation du code HTML – Tester vos intégrations
- Partie VI : Les meilleures pratiques – Ajout d’un préheader pour inciter les utilisateurs mobiles – Structurer la tmise en page du footer – Optimiser le pied de page pour les périphériques mobiles – Arrondir les coins des images – Ajout d’ombre Shadow box – Utilisation de Google Web Fonts pour l’email – Ajouter du style aux balises ALT
- Partie VII : Les outils – Litmus, Email on Acid, The Outlook Team Blog, The Email Standards Project, W3C Validator – JPEGmini, tinyPNG, Sublime Text, HTML Email Boilerplate, Thumbnailicon
- Partie VIII : Frameworks – Zurb, Antworkvs Media querie – Les limites des medias queries – Grille responsive vs Colonne – Utiliser une grille
Les thèmes présentés seront illustrés de nombreux cas concrets.
Public cible
Formateurs
Durée
Dates & lieux
Tarif
HTInscription
Conditions
*Insérer conditions*
Catalogue
*Insérer image*
