Les contraintes de création pour l’intégration d’un email

L’intégration d’un email est sujette à de nombreuses contraintes techniques, en raison de la multitude de clients mails qui interprètent chacun à sa manière le HTML et le CSS. Certains rajoutent ou transforment des balises, d’autres ne comprennent pas certaines propriétés CSS… Dans ces conditions, harmoniser le rendu d’un template mail est un vrai casse-tête. Encore plus lorsqu’on le souhaite responsive.

Afin de faciliter la tâche des intégrateurs, voici quelques règles simples à respecter côté création.

Dimensions

Certains clients de messagerie ne gèrent pas correctement le redimensionnement. Il est donc important de prévoir une maquette qui s’adapte à toutes les configurations desktop. La largeur classique d’un template mail est de 600 px.

Version mobile

Si le gabarit desktop est simple à adapter pour mobile, nous aurons alors besoin des visuels en taille double pour les écrans retina. Ils peuvent être intégrés dans la créa desktop sous forme d’objets dynamiques que nous pourrons exporter en taille double.

Si vous souhaitez produire une version mobile de la créa, l’idéal est de la prévoir en 1200 px de large en doublant les tailles de visuels et de typo (toujours pour les écrans retina). Cette version sera affichée sur toutes les résolutions inférieures à 600 px de large.

Typos

Les web fonts ne sont pas prises en compte par tous les clients de messagerie, notamment Outlook. Il faut donc utiliser des typos système (Arial, Helvetica…). Les typos non-systèmes pourront néanmoins être traitées en image. Cela permet un peu de souplesse sur la titraille par exemple.

Images de fond

Les visuels sont à proscrire en background, au même titre que les dégradés. Seules les couleurs unies seront correctement interprétées sur l’ensemble des clients de messagerie. Cela est valable pour le fond global du gabarit, mais il faut également faire attention à ne pas inclure de chevauchement texte / image.

MERCI POUR LE PARTAGE !
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *