Comment faire un email responsive ? Partie 3

Nous voici à la fin de cette trilogie. Nous aborderons donc dans ce dernier billet la méthode à utiliser pour rendre vos emailings responsive. Normalement, sur une page web, les media queries sont utilisés pour spécifier l’agencement du contenu en fonction de l’écran. Seulement, il est impossible de les écrire inline, il faut donc les écrire dans une balise style de l’emailing. Mais rappelez-vous, certains clients mail ne supportent que le CSS inline… donc avec cette méthode pas de responsive pour ces clients. Consultez CampaignMonitor pour avoir le détail de compatibilité de chacun des clients. L’idée est de venir en support à ces media queries avec des tableaux fluides. Nous avons dit dans le billet précédent que l’on préfère des largeurs fixes pour les cellules, cependant il vous faudra faire des concessions sur certaines cellules, colonnes ou tables et déterminer des largeurs en pourcentages. Par ailleurs, vous pouvez aussi utiliser la propriété max-width pour imposer une largeur maximum. Emailology est un excellent site qui vous permet de comprendre comment chaque client mail interprète le code d’un emailing et qui surtout vous donne des réponses techniques aux problèmes les plus fréquents. A vos claviers, et surtout n’oubliez pas, pensez à tester vos emailings avant de les envoyer ! ➙ Retour partie 1 ➙ Retour partie 2