Approche de mise en page par tableaux

Les clients de messagerie, en particulier Outlook sur Windows, qui utilise le moteur de rendu de Microsoft Word, ne prennent pas en charge la mise en page flexible, les grilles ni même une mise en page fiable au niveau des blocs. Les tableaux sont la seule structure qui s’affiche de manière cohérente dans tous les principaux clients de messagerie.

Tout courriel adaptatif commence par un <table> extérieur d’une largeur de 100 % qui sert de corps au courriel, suivi d’un tableau intérieur à largeur fixe, généralement de 600 px, qui contient le contenu réel. Ce modèle à deux niveaux constitue la base de presque tous les modèles utilisés en production.

Incluez toujours cellpadding="0" cellspacing="0" border="0" sur chaque tableau. Sans ces attributs, Outlook insère des espaces inattendus. Ajouter role="presentation" indique aux lecteurs d’écran d’ignorer la sémantique du tableau, ce qui est correct puisque les tableaux de mise en page ne sont pas des tableaux de données.

Pour créer plusieurs colonnes, imbriquez un tableau contenant deux cellules <td> dans la ligne de contenu. Chaque cellule contient une colonne. Évitez les éléments div associés à des flottants : Outlook ignore les flottants et empile de toute façon les colonnes verticalement, ce qui détruit la mise en page.

La fenêtre d’aperçu de bureau de référence fait environ 600 px de large. Concevoir pour cette largeur permet de garder le courriel lisible sans défilement horizontal dans Outlook, Gmail pour ordinateur, Apple Mail, Yahoo et Thunderbird simultanément.

Pour les petits écrans, ciblez les cellules du tableau intérieur avec une requête média qui définit leur largeur à 100 % et leur affichage en bloc, ce qui empile les colonnes verticalement. iOS Mail et Gmail pour Android respectent les requêtes média ; Outlook 365 pour ordinateur les ignore, mais conserve la mise en page de bureau de 600 px.

Les couleurs et les images d’arrière-plan doivent être appliquées aux cellules <td>, et non aux éléments div. Outlook prend correctement en charge l’attribut bgcolor sur td, tandis que la propriété CSS background-color appliquée à un élément div peut être supprimée ou entièrement ignorée selon le client.

Outlook a besoin de Vector Markup Language (VML) pour les images d’arrière-plan. Encadrez l’arrière-plan CSS moderne dans les commentaires conditionnels <!--[if mso]>...<![endif]--> avec un mécanisme de secours v:rect intégré, afin qu’Outlook affiche l’image tandis que tous les autres clients utilisent le CSS.

Évitez la mise en page flexible, les grilles, les propriétés personnalisées (prise en charge limitée) et la plupart des positionnements. Tenez-vous-en aux affichages en bloc ou en ligne, aux largeurs fixes définies par des attributs et aux styles intégrés. Le résultat semble daté selon les standards du Web, mais s’affiche de manière identique dans toutes les boîtes de réception.

Utilisez cellpadding, qui est un attribut, ainsi qu’une seule cellule <td> avec espacement pour créer l’espace intérieur. Les marges sur les cellules de tableau ne sont pas fiables dans Outlook ; l’espacement interne sur td est universel. Combinez bgcolor et l’espacement interne sur la même cellule td pour créer des composants de type « carte » sans éléments div.

Ajoutez role="presentation" à chaque tableau de mise en page afin que les lecteurs d’écran n’annoncent pas « ligne, colonne 1 sur 2 ». Ajoutez également un texte alternatif à chaque image, du texte réel pour tout contenu (et non des images contenant du texte) ainsi qu’une hiérarchie claire des titres.

Pourquoi les tableaux, plutôt que des éléments div utilisant la mise en page flexible CSS, servent-ils à structurer les courriels ?

La mise en page des courriels HTML utilise des tableaux imbriqués avec cellpadding, cellspacing et border définis à zéro, ainsi que role="presentation". Un tableau extérieur de 100 % centre un tableau intérieur de 600 px ; les cellules td imbriquées forment les colonnes que les requêtes média peuvent empiler sur mobile. Évitez la mise en page flexible et les grilles, utilisez bgcolor sur td et ajoutez des mécanismes de secours VML pour les arrière-plans d’Outlook.