Créer un email responsive SANS médias queries

email-responsive-sans-medias-queries

Intégrer un email responsive sans utiliser les médias queries.

Lorsque l’on pense email responsive, on associe le plus souvent le concept à l’utilisation des médias queries ou au fluid design. En effet, ces deux écoles d’intégration se partagent la conception des emails multi devices aujourd’hui.

Cependant il existe une autre technique, peu connue des intégrateurs, qui permet de développer des emails responsives SANS utiliser les médias queries et obtenir des résultats très intéressants.

Cette méthode, au nom barbare de « The Fab Four technique », a été inventée par Remy Parmentier et vous pouvez retrouver l’article orignal en cliquant sur ce lien.

Ce nom est basé sur l’utilisation et le fonctionnement des 4 règles CSS suivantes :

  • min-width
  • max-width
  • width
  • calc()

1. La base :

Une fois n’est pas coutume, nous allons utiliser, pour cette méthode, des <div> d’une longueur fixe définie en « display:inline-block » (parfaitement compatible sur client de messagerie).
En fonction de la taille de l’écran ces <div> passeront les unes en dessous des autres comme sur le schéma suivant :

schema-explicatif-inline-block

Le problème : Les <div> ne prendront pas toute la largeur de l’écran à cause de leur largeur fixe. On pourrait alors résoudre rapidement ce soucis en utilisant la propriété css3 « flexbox » mais cette dernière est malheureusement très mal supportée par les clients mail !

Et c’est là qu’intervient « The Fab Four technique » …

2. Le principe

La solution au problème se trouve dans l’utilisation des 4 règles CSS présentées précédemment et surtout de leur interprétation par les navigateurs et clients de messagerie. En effet, celles-ci présentent des particularités surprenantes quand on les utilise ensemble :

  • Si « width » a une valeur plus grande que « max-width » alors cette dernière propriété sera prise en compte. (Jusque-là c’est logique !)
  • Si « min-width » a une valeur plus grande que « max-width » ou « width » alors celle-ci sera interprétée au détriment des 2 autres.

Cela veut dire que dans le cas de figure suivant, la largueur de mon élément sera de 200px :

A partir de ce principe on peut introduire la formule de calcul « calc » qui va nous permettre de gérer dynamiquement l’attribut « width » de notre élément en fonction de la largeur de son parent.

3. la formule magique

Voici un exemple concret de notre méthode pour concevoir 2 colonnes, qui, en dessous de 480px, passeront l’une en dessous de l’autre et s’adapteront à 100% de largeur.

Prenons le temps d’expliquer ce code un peu barbare en appliquant le principe vu précédemment :

« min-width : 50% » : Cette propriété va nous servir à déterminer la taille des colonnes pour la version desktop de notre email. Si vous voulez ajouter plus de colonnes, vous pouvez soit diminuer le pourcentage (Ex : 25% pour 4 colonnes), soit mettre directement une valeur fixe (Ex : 320px).

« max-width : 100% » : Cette propriété va déterminer la largeur de nos colonnes sur la version mobile de notre email. A 100%, les colonnes prendront la largeur maximum de leur parent. Si vous avez plus de 2 colonnes et que vous souhaitez conserver 2 colonnes sur la même ligne, vous pouvez modifier cette valeur à 50% par exemple.

width:calc((480px — 100%) * 480) : Et c’est là que tout se passe ! Calc permet de calculer via une formule mathématique la largeur « fixe » d’un élément. Ici, 480px représente la valeur à partir de laquelle vous voulez faire basculer votre email entre la version desktop et mobile. 100% correspond à la largeur du parent de notre élément. L’objectif de cette formule est de générer une valeur, soit supérieure à notre max-width, soit inférieure à notre min-width. Ainsi la valeur générée déclenchera le principe de fonctionnement vu précédemment.

Voici 2 exemples explicatifs :

Dans cet exemple, quand la largeur du parent est supérieure à 480px (ici 500px), « width » sera alors définie à -9600px ce qui rend sa valeur plus petite que « min-width ». Cette dernière propriété sera donc appliquée (ici 50%). Les 2 colonnes feront donc 250px de large.

Dans cet exemple, la valeur du parent est inférieure à 480px (Ex: La taille de l’écran est inférieure à 480px). On obtient alors une propriété « width » de 38400px bien supérieure à « max-width ». Donc selon notre principe précédent, c’est « max-width » qui sera interprétée et donc nos 2 colonnes se transformeront en lignes superposées de largeur 100% (ici 400px).

4. Demo

Vous trouverez ici une démo fonctionnelle de cette technique dont voici un aperçu :

demo-responsive-email-technique
Illustrations by Elias Stein

Cette démo présente différents types de colonage (2,3,4). Après des tests dans Gmail et Outlook on s’aperçoit, ci-dessous, que l’email s’adapte parfaitement à la taille de l’écran mais aussi à la taille de l’espace qui lui est dédié dans le client de messagerie :

demo-gmail-technique-responsive-email
Gmail desktop vs Gmail Apps

Et sur outlook.com (En fonction de la mise en page de la messagerie) :

demo-outlook-responsive-email
L’email est adapté en fonction de la mise en page de outlook.com

5. La compatibilité

La fonction « calc » est très bien supportée par les navigateurs nouvelle génération et même par internet explorer depuis IE9. Et, à la surprise générale,elle est plutôt bien intégrée dans les clients mail.

5.1 – Clients de messagerie compatibles :

  • Apple Mail (iOS & OS X)
  • Outlook (iOS & Android apps)
  • Gmail (Webmail, iOS & Android apps)
  • Thunderbird
  • AOL (Webmail)
  • Outlook.com ancienne version

Pour l’ancienne versions de Outlook.com il faut utiliser un « fixe ». En effet cette version interprétera « calc(480px – 100%) » mais pas « calc((480px – 100%) * 480) » en raison de la présence de parenthèses. Il faut donc réécrire la formule pour en tenir compte. On utiliserai donc :

5.2 – Clients de messagerie « incompatibles » :

  • Lotus Notes
  • Outlook for Windows
  • Outlook Web Apps (Office 365 et la nouvelle version de Outlook.com)
  • Yahoo (Webmail, iOS et Android apps)

Pour certains de ces clients mail vous pouvez mettre en place des solutions de remplacement pour les rendre tout de même compatibles en version desktop.

Solution de remplacement :

Ici, on place les propriétés « min-width » et « width » fixes avant l’utilisation standard de notre technique. On place aussi la fonction « calc » dans un « second » « min-width ». Cette manipulation permettra aux clients qui interprètent « calc » de remplacer les valeurs fixes définies.

Le cas Outlook web apps :

Les clients mail Outlook.com et Office 365 ont la fâcheuse tendance à retirer le CSS contenu dans l’attribut style d’un élément si celui-ci possède le caractère « * » !! Par conséquent, ces clients suppriment tout simplement le CSS quand ils rencontrent notre fonction « calc ». Mais avec un peu d’imagination on peut s’en sortir en calculant les multiplications avant et en n’utilisant plus que la soustraction. Ainsi « 480px * 480 » se transformera en « 230400px » et « 100% * 480 » se changera en « 48000% ».
On obtiendra alors :

Les vieilles versions de IOS et Android :

Les versions avant android 5 et iOS 7 ont besoin du préfix « -webkit- » pour fonctionner.

En prenant en compte tous ces cas de figure on obtiendra alors le code suivant :

ATTENTION : Pour plus de compréhension j’ai placé le code CSS comme s’il était dans la balise <style> de votre email mais il doit être utilisé en css INLINE dans l’attribut style des éléments que vous souhaitez rendre responsive et dans l’ordre d’affichage présenté.

6. Les limites de cette technique

Cette technique n’est pas parfaite, comme beaucoup d’autres dans le développement d’email. Vous devez bien garder en tête les limitations suivantes :

  • Il n’est possible de faire qu’une seule modification du design. Dans nos exemples, nous sommes partis sur un changement de la structure de l’email à partir de 480px. Il est donc impossible de faire un autre changement à 320px ou autres comme le permettent les médias queries.
  • Yahoo est incompatible avec cette technique !
  • L’écriture des formules (surtout la version corrigé pour outlook.com) n’est pas évidente. A vous de bien calculer.
  • Il est impossible de partir de 1 colonne pour arriver à 4 (Ce qui est possible dans l’autre sens).

Voila, j’espère que cet article vous aura ouvert les yeux sur cette nouvelle méthode pour faire des emails responsives sans utiliser les médias queries. N’hésitez pas à commenter et partager si l’article vous à plu.