Formation Intégration d'e-mails mobiles
Modernisez les intégrations d'e-mails, notamment destinés aux mobiles pour une meilleure efficacité, avec des optimisations et un confort de lecture accru
L’intégration d’e-mails est un monde à part, avec ses propres contraintes, et ses propres spécificités. Mais pourquoi faut-il encore utiliser des tableaux ? Et pourquoi faut-il écrire des styles en ligne ? Et pourquoi mon e-mail est tout cassé sur [insérez le nom d’un client mail ici] ?
Cette formation aborde non seulement les bonnes pratiques pour réussir l’intégration d’e-mails, mais surtout tente de répondre à tous ces pourquois.
Que va vous apprendre cette formation ?
- Pourquoi les clients mail modifient votre code, et à quoi il faut s’attendre,
- Comment adapter des e-mails pour mobiles, avec ou sans media queries,
- Comment coder plus proprement en n’utilisant des tableaux que quand c’est utile.
Programme de la formation
Introduction au monde de l’intégration d’e-mails
- Support de propriétés HTML et CSS
- Amélioration progressive et dégradation gracieuse
- Exemples d’emails modernes, responsives et interactifs
Les modifications faites par les clients e-mails
- Liens automatiques sur les dates, adresses,…
- Suppression de styles ou de balises HTML
- Ajout de préfixes aux noms de classes et identifiants
- Styles par défaut et fonctionnalités supplémentaires
Outlook
- Fonctionnement du moteur de rendu
- Pourquoi on utilise des tableaux
- Commentaires conditionnels
- Propriétés
mso- - Rendu à 120dpi
- VML
Tester et débugger un e-mail
- Tester dans un navigateur (Internet Explorer, Chrome, Firefox) et apprendre à utiliser l’inspecteur Web dans les webmails et sur mobile (Safari iOS, Chrome Android)
- Récupérer le code HTML dans d’autres applications mail (Thunderbird, Outlook 2007 et plus, Gmail iOS) pour le débugger
- Router soi-même un e-mail pour le tester
- Tester le rendu d’un e-mail sur des dizaines d’applications et webmails avec des outils de capture d’écran (Email On Acid, Litmus)
Recommandations pour l’intégration d’emails
- Doctype HTML5
- Attribut
lang> - Balises sémantiques
- Tableaux de mises en page
- Il faut que ça marche sans
<style> - Styles CSS plutôt que des attributs HTML
- Utilisation de
marginoupaddingpour des espacements - On ne découpe pas des images
Mise en pratique
- Template de base
- Image et texte
- Bouton
- Images de fond
- Utilisation de polices personnalisées
Adapter un e-mail sur mobile
- Quelle largeur doit faire un email ?
- Balise meta
viewport - Images haute résolution
Media Queries: Points de rupture, résolutions d’écrans , Surcharger ses styles avec la directive!important- Méthodologies d’optimisation pour mobiles : « Mobile friendly » (ou « Mobile aware »), Fluide, Responsive, Hybride (ou « Mobile First »)
Création d’un e-mail responsive
- Passage de cellules les unes en dessous des autres avec
display: block - Inverser l’ordre de cellules sur mobile et sur desktop avec la propriété
direction - Masquer du contenu sur mobile et sur desktop
Création d’un e-mail Fluide/Hybride
- Utilisation d’unités relatives (en pourcentage) et de
max-width - Utilisation de balises sémantiques (
h1,p, …) pour créer un e-mail sans tableaux
Création d’un e-mail « Mobile First »
- Adapter une mise en page sur deux ou trois colonnes du mobile au desktop, en supportant Gmail et Outlook
- Utilisation de la propriété
display:inline-block - Utilisation de commentaires conditionnels pour supporter Outlook 2007 et plus
Accessibilité
- Démonstration de la lecture d’un e-mail avec VoiceOver
- Bonnes pratiques pour améliorer l’accessibilité d’un e-mail : Règles d’utilisation de l’attribut
alt, Utilisation derole=”presentation”, Outils pour auditer son code
Dark Mode
- Les différents niveaux de dark mode
- La déclaration
@media (prefers-color-scheme:dark) - Cibler Outlook.com avec des attributs
data-ogsb - Optimiser des images pour un affichage en mode sombre
- Le mode sombre de Gmail
Interactivité
- Exemples d’e-mails interactifs
- Afficher une autre image au survol
- Quiz interactif
- Adaptive Cards de Microsoft
- Amp4email de Google
Informations complémentaires
Public
Intégrateurs souhaitant mieux comprendre l’intégration d’e-mails afin de moderniser leurs intégrations et les optimiser du desktop au mobile.
Objectifs
Comprendre les contraintes de l’intégration d’e-mails, et savoir pourquoi c’est encore aujourd’hui si compliqué. Moderniser ses intégrations en utilisant du code sémantique et des propriétés CSS avancées. Optimiser l’affichage de ses e-mails pour mobiles (que ce soit sur Apple Mail sur iOS, Gmail sur iOS et Android ou encore Mail sur Windows Phone).
Prérequis
Avoir suivi une formation telle que "Initiation HTML et CSS" ou être déjà à l’aise avec l’intégration HTML et CSS pour le Web ou pour des e-mails.
Moyens pédagogiques
Durant chaque formation, les participants et participantes auront l’opportunité de mettre en application leurs apprentissages grâce à de nombreux cas pratiques et exercices. Ces exercices seront ensuite corrigés et explicités par le formateur ou la formatrice. Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 10 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.
Suivi et appréciation des résultats
L'exécution de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les participants et le formateur. Sanction : attestation de présence. Un bilan des acquis est effectué à l'issue de la formation par questionnaire individuel en ligne et par les exercices réalisés durant la session.
Modalités de positionnement et d’évaluation
Le positionnement à l'entrée est évalué par questionnaire individuel en ligne (comportant des questions relatives au profil, aux attentes, aux connaissances initiales et aux prérequis techniques) ainsi que par échange e-mail lors de la prise de contact et de la préparation du dossier. Un entretien préalable par visioconférence a lieu dans le cas des groupes en intra.
Inscription et informations pratiques
Durée de formation
Lieux disponibles
Formateur
Rémi Parmentier
Rémi est intégrateur et co-gérant de sa petite agence web à Tourcoing, dans le Nord. Il partage sa passion du Web sur son blog et son compte Twitter sous le nom de HTeuMeuLeu.
Partenaire externe
Atouts de la formation
- Effectif réduit (jamais plus de 12 participant·e·s).
- Repas de midi offert chez Alsacréations (à Strasbourg).
- Formateur à l’écoute, chacun peut intervenir à tout moment.
- Travaux pratiques réalisés en conditions réelles.
- Supports complets fournis.
Infos complémentaires
Date de mise à jour :
