Mardi​ 20​ février​ 2018​

Bonjour,
Faire un email responsive multi-colonnes qui fonctionne correctement avec tous les mailers est une tâche très complexe !;
Mais grace à quelques expérimentateurs expérimentés, il existe des solutions.
En fait, il en existe trois :
- La méthode "fluid hybrid" ;
- La technique "Fab Four" ;
- Les @breakpoints CSS.
Afin d'assurer une compatibilité maximale, j'utilise les trois en même temps, ceinture & bretelles !

La méthode "fluid hybrid"
Basée sur le bon vieux principe des tables en pourcentages auquel on ajoute le principe CSS de max-width.
Pour Outlook qui ne comprend pas les max-width, on utlise les commentaires conditionnels pour écrire des tables avec width fixées. Ces tables encadrent les tables qui ont les largeurs en pourcentage+max-width.
> En savoir plus

La technique "Fab Four"
Dans des attributs style, on joue avec les propriétés width, min-width, max-width et la fonction calc() rajoute la couche "formule magique".
min-width:50%;: la largeur pour desktop.
width:50%;: la largeur pour les quelques mailers qui ne comprennent pas la fonction calc().
max-width:100%;: la largeur pour mobiles.
width:-webkit-calc(360000px - 60000%): pour les vieux webkit.
width:calc(360000px - 60000%): la formule magique est :
calc((LARG — 100%) * LARG); où LARG est le breakpoint du conteneur
Pour des raisons de compatibilité, il faut supprimer les parenthèses internes au calc(), cette formule est décomposée ainsi : width:calc(LARG * LARG — 100% * LARG);, puis, comme la multiplication pose aussi pb de compatibilité, on écrit finalement les résultats des deux opérations en dur...
Bon, oui, c'est tordu... mais ça marche très bien.
> En savoir plus

Les @breakpoints CSS:
Comme dans une page HTML pour le web, on utilise des classes sur les blocs et on déclare le(s) @breakpoint(s) dans le header. No comment...

Ce code a été testé avec AppleMail, Thunderbird, Gmail Android, Android Mail, Iphone6 en conditions réelles et avec Litmus pour les autres mailers (Outlook en particulier qui utilise toujours le moteur Word pour rendre le HTML...!).

* À noter : malgré l'utilisation des trois méthodes, gMailApp iOs et outlookApp Androïd/iOs ne comprennent pas le responsive...

Mais assez de théorie, passons à la pratique :
"view-source/copier-coller" et à vous de jouer !