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
Durée de formation : 2 jours
Lieux de formation :- Possible à distance
- Possible en groupe (intra-entreprise)
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.
Vous retiendrez de 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.
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
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.
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.
Dernière mise à jour de ces informations :
Besoin d'un financement ?
Une formation est un investissement : pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées dont la prise en charge par votre OPCO.
Avant cette formation, préparez-vous avec :
À la suite de cette formation, nous vous recommandons :
Envie de connaître la date
de nos prochaines formations ?
Nous contacter
Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr
Alsacréations10 Place du Temple Neuf
67000 Strasbourg, France