Créer un Simple Responsive Email en HTML

Dans ce tutoriel je vais vous montrer comment créer un email en HTML responsive simplement et qui fonctionnera sur tous les clients mail, y compris les applications et nouveaux clients mail sur smartphone. Pour cela, nous allons utiliser des Media Queries basiques et un système de largeur variable pour assurer une compatibilité maximale.

Media Queries : Seulement une partie de la solution

Il fut une époque où les media queries suffisaient à rendre les emails responsive sur les clients mail iOS et Android.

Depuis, les applications mail pour les plateformes iOS et Android fleurissent sur les marchés respectifs, avec divers niveaux de support des emails responsives.

Le plus marquant étant la dernière mise à jour de l’application Gmail pour Android qui est deux fois plus populaire que l’application mail par défaut chez les utilisateurs d’Android (qui comprend maintenant 11% d’ouvertures au total). Il n’a jamais supporté les media queries, et ne les supporte toujours pas, mais adapte désormais vos emails à la taille de l’écran en compressant la taille du tableau extérieur. C’est difficile à contrôler, car si votre email repose sur les media queries pour s’afficher correctement sur mobile, il peut présenter quelques résultats inattendus.

Un Email Fluide, Adaptatif

La bonne nouvelle est que vous pouvez personnaliser et développer un email qui s’affichera parfaitement sur toutes les applications mail, même celles qui ne supportent pas les media queries. Pour cela, vous pouvez utiliser un “fluid layout” (squelette fluide).

Cependant, il se peut que vous ayez des compromis à faire sur le design. Le système classique de colonnes qui fusionnent lorsqu’on réduit la résolution de l’écran, ne fonctionne pas très bien avec cette méthode. Si vous pouvez apprendre à vivre sans elles, voici quelques designs qui fonctionnent extrêmement bien.

Voici ce que nous allons réaliser ensemble :

Pour Commencer

Commençons par créer l’architecture du mail.

Ce que nous créons là, est une email classique avec une en-tête : le header, un doctype et un tableau auquel nous avons appliqué une couleur de fond (au corps entier du mail et au tableau le plus élevé puisque styler l’attribut body n’est pas complètement supporté). Pour plus d’informations à propos de l’installation classiques, vous pouvez consulter Construire un Template HTML d’Email de A à Z.

J’ai ensuite centré notre tableau principal avec la classe ‘content’.

Faites Attention

Note : Vous remarquerez que dans ce tutoriel, je vais placer le CSS dans l’en-tête de notre document. Je place généralement les attributs de style dans l’en-tête lorsque je compte les réutiliser et garde les attributs uniques dans le corps.

Important : Lorsque vous utilisez des règles CSS dans l’en-tête de votre document, vous devez utiliser un outil pour les reformater en une ligne. Si vous utilisez un service tel que MailChimp ou Campaign Monitor, ils proposeront automatiquement de formater vos attributs de style lorsque vous importerez votre design. Vous devez le faire car certains clients comme Gmail, vont ignorer ou retirer le contenu de votre balise <style>. Vous pouvez aussi utiliser un outil comme Premailer pour formater votre CSS. Si vous utilisez Premailer ou un outil similaire, rappelez-vous qu’il faudra retirer vos media queries durant le formatage (pour les garder intacts), puis les réinsérer après. MailChimp et Campaign Monitor s’occupe automatiquement de cela pour vous.

Cacher le Style Mobile pour Yahoo!

Vous remarquerez que le la balise ‘body’ possède un attribut supplémentaire. Yahoo Mail a quelques difficultés pour comprendre les media queries, c’est pourquoi vous devez utiliser des sélecteurs. Je trouve que le plus simple (d’après les suggestions de

Email on Acid) est d’ajouter un attribut arbitraire dans la balise ‘body’. J’utilise donc l’attribut ‘yahoo’ mais il peut être remplacé par n’importe quel nom :

Vous pouvez ensuite cibler des classes spécifiques en utilisant les sélecteurs pour votre attribut de la balise ‘body’ dans le CSS.

Deux Astuces Pour Maîtriser la Méthode Fluide

Comme vous pouvez le voir, notre tableau ‘content’ prend 100% de la largeur de l’écran pour qu’il soit fluide et s’adapte à la largeur des smartphones et des tablettes. Nous allons aussi mettre une taille maximale de 600px pour éviter que le mail prenne tout l’écran sur les plateformes plus grandes.

Il y a maintenant deux petites astuces que nous allons appliquer pour nous assurer que tout s’affiche parfaitement sur les différents clients mail. Ces deux astuces proviennent de l’excellent tutoriel de Tina Ye qui est disponible sur le FogCreek Blog.

1. Surmonter le Manque de Support du Max-Width

Malheureusement, la propriété max-width n’est pas supporté par tous les clients mail. Pour afficher correctement notre email dans Outlook et Lotus Notes 8 & 8.5, nous devons englober chaque tableau dans une condition qui va créer en fonction de la taille de l’écran, un autre tableau à taille fixe. Cette méthode cible Internet Explorer (dont Lotus Notes se sert pour afficher les mails) et Microsoft Outlook.

Nous allons donc englober notre tableau dans une condition :

2. Une solution pour Apple Mail

Apple Mail (normalement un client mail très progressif) ne supporte bizarrement pas la propriété max-width. Cependant, il supporte bien les media queries, donc nous pouvons en ajouter pour fixer la largeur du tableau de la classe ‘content’, du moment que l’écran peut afficher 600px.

Créer l’En-tête

Maintenant, nous allons ajouter la première ligne de notre tableau : l’en-tête (ou header). Ajoutez le code suivant pour styliser la ligne en question :

Ajoutez ensuite le padding pour l’en-tête dans votre CSS :

Ajouter la Première Ligne Responsive

Maintenant nous allons créer la première ligne de notre tableau. Pour cela, nous allons créer deux colonnes en utilisant la propriété HTML ‘align’ sur des tableaux.

Colonne de Gauche

Remplacez le petit “Hello!” par le code suivant :

Nous créons notre colonne de 70px et ajoutons même un padding qui permettra se séparer les deux colonnes. Le padding du dessous (padding-bottom) sert à créer un espacement lorsque les deux colonnes s’alignent verticalement sur mobile.

Colonne de Droite

Nous allons créer la colonne de droite en alignant à nouveau un tableau avec la propriété ‘align’. Cette colonne fera 445px de large, ce qui nous laissera 25px libres sur la droite. C’est très important car Outlook va automatiquement aligner vos colonnes s’il n’y a pas au moins 25px libres sur l’une des lignes.

Tant que vous laisserez au moins 25px libres, vos colonnes devraient s’afficher normalement.

Dans la colonne la plus large, celle de droite, nous allons utiliser la même approche pour pour notre tableau conteneur, c’est-à-dire créer une classe et englober le tableau dans une condition. Nous voulons que cette colonne prenne toute la largeur sur mobile, qu’elle s’affiche en dessous de la colonne de gauche.

Ici, vous pouvez voir que j’ai créé une classe appelée ‘col425’ pour la colonne de droite qui fait 425px de large. J’ai enveloppé cette colonne dans le code conditionnel qui va fixer sa taille à 425px. Nous allons ensuite ajouter cette classe à la Media Query pour Apple Mail.

Maintenant, à l’intérieur de notre cellule, nous avons ajouté l’en-tête personnalisée.

J’ai ajouté quelques classes pour chaque cellule pour pouvoir les personnaliser et personnaliser les futurs éléments du mail :

Notre en-tête est désormais complète et vous pouvez voir comment les deux colonnes vont s’aligner sur mobile. (Pour prévisualiser cela pendant le développement, vous pouvez commenter temporairement les media queries ‘min-device-width’, car elles fixent une taille minimale sur un poste de travail).

Créer une Unique Colonne de Texte

Pour créer une seule colonne de texte, nous allons simplement ajouter une nouvelle ligne à notre tableau ‘content’. Nous allons ajouter la classe ‘innerpadding’ à cette colonne avec des valeurs de padding réutilisables. Nous allons aussi ajouter la classe ‘borderbottom’ pour ajouter une bordure à chaque ligne.

Notre CSS pour cette partie :

Créer une Double Colonne Article

Maintenant, nous allons créer une ligne responsive qui se comportera exactement comme l’en-tête, mais avec des dimensions légèrement différentes pour pouvoir afficher une plus grande image.

Nous avons ajouté un bouton avec la classe ‘buttonwrapper’. Il contient une cellule avec une couleur de fond, ainsi qu’un lien à l’intérieur. Je préfère utiliser cette méthode comme elle permet d’avoir des boutons avec une largeur variable, ce qui est très utile lors de la création d’un template réutilisable où la largeur des boutons sera différente à chaque utilisation. Si vous avez une taille fixe pour vos boutons, vous préférerez peut-être utiliser le Bulletproof Button Generator de Campaign Monitor.

Notre style pour les boutons :

Nous avons fixé une largeur à la nouvelle classe ‘col380’, mais il faut aussi l’ajouter à notre liste de styles pour prendre en compte Apple Mail. Nous obtenons cela :

Créer une Unique Colonne Image

Cette ligne est très simple, car nous allons simplement fixer la largeur de l’image à 100%; et nous assurer que sa hauteur s’adaptera automatiquement en utilisant du CSS.

Dans notre CSS :

Créer la Dernière Ligne de Texte

Enfin, nous allons ajouter une ligne de texte sans bordure en dessous :

Créer le Bas de Page

Pour créer le bas de page, nous allons ajouter une nouvelle ligne avec un tableau à l’intérieur. L’une des ligne contiendra un autre tableau pour nos icônes de réseaux sociaux.

Nous allons ajouter les styles nécessaires à notre bas de page dans le CSS :

Optimiser les Boutons Pour Mobile

Sur mobile, il est idéal de créer un bouton cliquable sur toute sa surface plutôt que cliquable uniquement sur le texte. Comme il est impossible de faire marcher cette méthode sur tous les clients de bureau (le padding n’est pas totalement supporté sur les balises <a>, c’est quelque chose que j’ajoute à la version mobile en utilisant les media queries.

Nous allons devoir changer la couleur du <td> actuellement cliqué, et appliquer la couleur au lien <a> avec beaucoup de padding.

Je vais utiliser les propriétés max-width et max-device-width dans cette media query pour éviter un bug sur Outlook.com sur IE9.

Maintenant, lorsque vous appuyez n’importe où sur le bouton sur mobile, c’est un lien !

Aller Plus Loin Avec Les Media Queries

Si vous le souhaitez, vous pouvez commencer à améliorer votre email en ajoutant des classes aux éléments que vous souhaitez personnaliser et créer de nouvelles media queries comme nous venons tout juste de faire plus haut

Par exemple, nous allons changer notre lien pour se désabonner en bouton en ajoutant une simple classe au lien :

et en ajoutant le CSS suivant dans les media queries :

Vous pouvez aussi cibler les classes .innerpadding, .header et .footer pour réduire le padding sur les clients supportant les media queries.

On Teste, et C’est Parti !

Finalement, comme toujours, assurez vous de la validité (en utilisant le W3C validator — vous devriez avoir une erreur pour l’attribut ‘yahoo’ dans le body) et testez bien toutes les résolutions en utilisant un service d’aperçu comme Litmus ou Email on Acid.

Prenez plaisir à créer de magnifiques emails responsives multi-clients !

Source : Nicole Merlin