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.

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 margin ou padding pour 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 de role=”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 physique 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 et bilan des acquis.

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.

Voir les différents financements

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 ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France

En soumettant ce formulaire vous acceptez que les informations saisies soient utilisées pour permettre de vous répondre. Votre e-mail ne sera pas mémorisé pour un autre usage. En savoir plus