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

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.

É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
  • Aller encore plus loin avec le Shadow DOM

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

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 workflow moderne d’intégration d’e-mail avec Grunt et Sass
  • Présentation d’un e-mail interactif avec un menu hamburger sur mobile

Ressources

  • Les bons outils

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 :

Validez vos connaissances avec la certification HTML / CSS Alsacréations

La Certification “HTML/CSS” Alsacréations est une validation de vos acquis d'intégrateur ou développeur front-end. Elle est un gage de compétences, vous permet de vous auto-évaluer et peut être mise en avant sur votre CV : votre score reflète des compétences professionnelles spécifiques que les employeurs apprécient.

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