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.

État des lieux du monde de l’intégration d’e-mails

  • Chiffres clés de la consultation d’e-mails (sur mobile et desktop)
  • Explications sur la difficulté de mesurer les statistiques de lecture d’un e-mail
  • Présentation des principaux clients mails et webmails

Les bases de l’intégration d’e-mails

  • Quel doctype choisir ? (XHTML, HTML5)
  • Styles inline et support de CSS
  • Mise en page en tableaux
  • Découpe d’images pour des tableaux
  • Utilisation d’images de fond
  • Bonnes pratiques d’intégration pour des e-mails mêlant images et textes HTML

Tester et débugger un e-mail

  • Tester dans un navigateur 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

Améliorer le rendu sans images

  • Explications du rendu d’un e-mail sans image
  • Ajouter des couleurs de fonds sous ses images, et créer du pixel art alternatif
  • L’importance du texte alternatif, et sa mise en forme avec CSS

Webmails et moteurs de rendus

  • Outlook 2007/2010/2013 et le moteur de rendu de Word
  • Webmails et altérations du code HTML
  • Webmails et propriétés CSS supportées
  • Les styles par défaut des webmails

Adapter un e-mail sur mobile

  • Principes du Responsive Web Design et d’optimisation d’affichages multi-écrans
  • Media Queries, points de rupture, résolutions d'écrans
  • Viewport (définition et principe, support)
  • Méthodologies d’optimisation pour mobiles

Accessibilité

  • Démonstration de la lecture d’un e-mail avec VoiceOver
  • Bonnes pratiques pour améliorer l’accessibilité d’un e-mail

Création d’un e-mail fluide

  • Utilisation d’unités relatives (en pourcentage) et de max-width
  • Utilisation de balises sémantiques pour créer un e-mail sans tableaux

Création d’un e-mail responsive

  • Passage de cellules les unes en dessous des autres
  • Inverser l’ordre de cellules sur mobile et sur desktop
  • Masquer du contenu sur mobile et sur desktop
  • Gérer les bugs courants d’Outlook 2007 et plus
  • Présentation de templates existants (Zurb Ink, Salted, …)
  • Optimisation d’images pour des écrans haute définition (« Retina »)
  • Webmails et media queries (bugs sur les webmails français, support sur Gmail ou Yahoo)

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

Aller plus loin

  • Utiliser des web fonts dans un e-mail
  • Présentation d’un e-mail interactif avec un menu hamburger sur mobile

Ressources

  • Les bons outils

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 stagiaires et le formateur. Sanction : attestation de fin de stage.

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