Les Emails HTML

& Chrome Lighthouse

Survivre à l'enfer du HTML email & auditer vos pages

Objectifs de la leçon

1. Comprendre les contraintes du HTML email

Pourquoi c'est si différent du web classique

2. Maîtriser les techniques de base

Tables, inline CSS, unités fixes

3. Connaître les outils & ressources

MJML, Litmus, Can I Email

4. Utiliser Chrome Lighthouse

Performance, Accessibilité, Bonnes Pratiques

5. Éviter les pièges courants

Les erreurs qui cassent vos emails

Plan du cours

1

Pourquoi le HTML email est un cauchemar

Clients email, moteurs de rendu, fragmentation

2

Les contraintes techniques

Tables, inline CSS, unités, images

3

Les pièges & les solutions

Outlook, responsive, structure de base

4

Outils & Ressources

MJML, Litmus, Can I Email, Premailer

5

Chrome Lighthouse

Performance, Accessibilité, Bonnes Pratiques

Le problème

Le HTML email, c'est comme coder en 2005

Web classique ✅

Flexbox, Grid, CSS moderne, JavaScript

Email HTML ❌

Tables, inline CSS, pas de JS, pas de Grid

💡 Pourquoi? Parce que chaque client email a son propre moteur de rendu

Et aucun ne respecte les standards web de la même façon

Les clients email & leurs moteurs

Gmail

Moteur : Chromium (Web)

Supprime <style> dans le <head>

Outlook

Moteur : Microsoft Word (!)

Le pire : pas de margin, pas de background-image

Apple Mail

Moteur : WebKit

Le plus compatible avec CSS moderne

Yahoo

Moteur : Propriétaire

Modifie votre CSS, bugs étranges

⚠️ Un même email peut s'afficher différemment chez CHAQUE client!

Tables pour le layout

❌ Flexbox et Grid ne fonctionnent PAS dans les emails

❌ CSS moderne

.container {

display: flex;

gap: 20px;

}

✅ Table layout

<tr>

</tr>

</table>

💡 Oubliez tout ce que vous savez sur le CSS moderne — en email, on retourne aux tables

Gmail supprime <style>!

Les balises <style> dans le <head> sont ignorées par Gmail

❌ CSS dans <style>

<style>

.title {

color: #333;

font-size: 24px;

}

</style>

✅ Styles inline

<h1

style="color:#333;

font-size:24px;">

Mon titre

</h1>

Chaque élément doit avoir ses propres styles inline — pas de classes CSS!

Support CSS : ce qui fonctionne (ou pas)

Propriété CSS	Gmail	Outlook	Apple Mail
display: flex	❌	❌	✅
display: grid	❌	❌	✅
position: absolute	❌	❌	✅
padding	✅	⚠️	✅
background-color	✅	⚠️	✅
border-radius	✅	❌	✅

Vérifiez toujours sur caniemail.com avant d'utiliser une propriété CSS

Le cauchemar Outlook

Le client email le plus cassé

Outlook utilise Microsoft Word pour rendre le HTML

Pas un navigateur. Word. 🤦

Ce qu'Outlook ne supporte PAS

❌ margin

Utiliser cellpadding à la place

❌ background-image

Utiliser VML ou couleur de fond

❌ border-radius

Boutons carrés uniquement

❌ max-width

Utiliser width fixe dans <table>

💡 Les commentaires conditionnels MSO ciblent uniquement Outlook :

<!--[if mso]>

<![endif]-->

Responsive? Presque...

Les @media queries fonctionnent... parfois

✅ Fonctionne

Apple Mail (iOS/macOS)

Gmail App (iOS/Android)

Samsung Mail

❌ Ne fonctionne PAS

Gmail Web (desktop)

Outlook Desktop

Yahoo Mail Web

💡 Utilisez un design fluide (width: 100%) comme base, puis @media en bonus

Images : les pièges invisibles

❌ Espace sous l'image

✅ display: block

<img src="photo.jpg"

style="display:block">

❌ SVG non supporté dans la plupart des clients

Utilisez PNG ou JPG à la place

💡 Toujours ajouter alt="" et width/height explicites

Les unités : px ou rien

rem, em, vw, vh, % → résultats imprévisibles dans les emails

❌ Unités relatives

font-size: 1.5rem

width: 50%

padding: 2em

✅ Pixels uniquement

font-size: 24px

width: 300px

padding: 20px

💡 Exception : width="100%" sur les tables pour le design fluide

Pièges courants à éviter

❌ Cellules vides sans  

✅ <td> </td>

❌ Background-image sans fallback

Outlook ignore background-image → toujours ajouter bgcolor

✅ bgcolor="#f5f5f5" + background-image

❌ Polices web sans fallback

font-family: 'MaFontCustom';

font-family: 'MaFontCustom', Arial, sans-serif;

✅ Toujours une stack de polices

La structure de base d'un email HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...">

<html>

<head>

content="text/html; charset=utf-8">

content="width=device-width">

</head>

<body>

<table width="100%" cellpadding="0"

cellspacing="0" border="0">

</td></tr>

</table>

</body>

</html>

✅ Largeur max recommandée : 600px pour la zone de contenu

Inline CSS en pratique

<table width="600" cellpadding="0"

cellspacing="0" border="0"

style="background-color:#ffffff;">

<tr>

<td style="padding:20px;

font-family:Arial,sans-serif;

font-size:24px;

color:#333333;">

Bienvenue!

</td>

</tr>

</table>

💡 Outil : premailer.dialect.ca convertit vos <style> en inline automatiquement

Outils & Ressources

🔍 Can I Email

caniemail.com — Vérifier le support CSS par client email (comme caniuse mais pour email)

🧪 Litmus / Email on Acid

Prévisualiser votre email dans 90+ clients avant envoi (outils payants)

📧 MJML

Framework qui compile en HTML email compatible — on le voit juste après!

🔧 Premailer

Convertit automatiquement vos <style> en styles inline

📖 HTMLEmail.dev

Guide complet pour apprendre le développement d'emails HTML

MJML — La solution magique

Écrire du HTML email sans souffrir

Votre code MJML

<mjml>

<mj-body>

<mj-section>

<mj-text>

Bonjour!

</mj-text>

</mj-section>

</mj-body>

</mjml>

→ HTML email compatible

✅ Généré automatiquement!

mjml.io — Essayez l'éditeur en ligne!

À retenir — Emails HTML

Tables pour le layout, inline pour les styles

Pixels uniquement, pas de rem/em/vw

Outlook = Word = cauchemar

MJML vous sauve la vie — utilisez-le!

Toujours tester sur caniemail.com + vrais clients

Chrome Lighthouse

Auditer vos pages web automatiquement

Performance · Accessibilité · Bonnes Pratiques

C'est quoi Lighthouse?

Un outil d'audit automatique par Google

Intégré directement dans Chrome DevTools

⚡

Performance

Vitesse de chargement

♿

Accessibilité

Utilisable par tous

✅

Bonnes Pratiques

Qualité & sécurité

💡 Score de 0 à 100 pour chaque catégorie — visez le vert (90+)

Comment lancer Lighthouse

1️⃣

Ouvrir Chrome DevTools

F12 ou Ctrl+Maj+I (Cmd+Option+I sur Mac)

2️⃣

Cliquer sur l'onglet "Lighthouse"

Icône de phare dans la barre DevTools

3️⃣

Choisir les catégories

Cochez Performance, Accessibility, Best Practices

4️⃣

Cliquer "Analyze page load"

Attendez ~30 secondes pour le rapport

Anatomie du rapport

0-49

🔴 Mauvais

Problèmes urgents

50-89

🟡 À améliorer

Des optimisations possibles

90-100

🟢 Bon!

Objectif atteint

Le rapport liste les problèmes par priorité : "Opportunités" (impact fort) et "Diagnostics" (détails)

Performance

Les 3 métriques clés (Core Web Vitals)

LCP

Largest Contentful Paint

Vitesse d'affichage du contenu principal

Objectif < 2.5s

INP

Interaction to Next Paint

Réactivité aux interactions

Objectif < 200ms

CLS

Cumulative Layout Shift

Stabilité visuelle (pas de sauts)

Objectif < 0.1

Performance — Optimisations concrètes

🖼️ Optimiser les images

WebP, compression, dimensions exactes, lazy loading

📦 Réduire le JavaScript

Code splitting, supprimer le JS inutilisé, minifier

📄 Éviter les CLS (sauts de layout)

Toujours définir width/height sur les images et les espaces publicitaires

⚡ Utiliser un CDN et la mise en cache

Servir les assets depuis des serveurs proches de l'utilisateur

Accessibilité — Les vérifications clés

🖼️ Texte alternatif sur les images

🏷️ Labels ARIA pour les formulaires

🎨 Contraste suffisant

Ratio minimum 4.5:1 pour le texte normal, 3:1 pour le texte grand

⌨️ Navigation au clavier

Tous les éléments interactifs doivent être focusables et utilisables au clavier

Accessibilité — Corrections pratiques

❌ Bouton sans label

</button>

✅ Avec aria-label

<button

aria-label="Fermer">

</button>

❌ Image sans alt

✅ Alt descriptif

<img src="hero.jpg"

alt="Équipe en réunion">

💡 Astuce : les images décoratives → alt="" (vide, pas d'alt manquant!)

Bonnes Pratiques

🔒 HTTPS partout

Pas de contenu mixte (HTTP dans une page HTTPS)

🐛 Pas d'erreurs dans la console

Les erreurs JavaScript et les warnings indiquent des problèmes

🚫 Pas d'APIs dépréciées

document.write(), alert(), etc. — à éviter absolument

🛡️ Sécurité des liens

rel="noopener" sur les liens target="_blank", pas de vulnérabilités XSS

À retenir — Chrome Lighthouse

F12 → Onglet Lighthouse → Analyze

3 clics pour un audit complet

Visez 90+ dans chaque catégorie

Core Web Vitals : LCP < 2.5s, INP < 200ms, CLS < 0.1

Lighthouse = diagnostic, pas la guérison

Il vous dit QUOI corriger, pas toujours COMMENT

Ressources pour aller plus loin

📧 Emails HTML

caniemail.com

mjml.io

htmlemail.dev

litmus.com

🔍 Lighthouse & Performance

web.dev/learn

pagespeed.web.dev

web.dev/vitals

developer.chrome.com/docs/lighthouse

♿ Accessibilité

web.dev/learn/accessibility

www.a11yproject.com

validator.w3.org

Questions?

Les emails HTML et Lighthouse n'ont plus de secrets!

Testez vos emails sur vrais clients · Auditez vos pages avec Lighthouse