Intégration HTML/CSS d’un template emailing
Out Of Design pour Sotheby's
Une grande agence immobilière de luxe a fait appel à nos services pour l’intégration HTML/CSS d’un template emailing créé par une graphiste indépendante.
La demande de Sotheby’s International
Sotheby’s International Realty France – Monaco est un grand réseau immobilier de luxe. Ses agents immobiliers sont spécialisés dans les biens et propriétés haut de gamme. Des appartements de luxe aux demeures d’exception, cette agence offre un choix exceptionnel de propriétés de prestige à la vente ou à la location dans toute la France et à Monaco.
Cette agence immobilière souhaitait créer un template emailing personnalisé. Ce template servirait de base pour l’envoi de ses newsletters hebdomadaires. Ce template se devait d’être personnalisable à chaque envoi pour chaque client et chaque nouvelle semaine.
Souhaitant réaliser un design sur-mesure pour sa newsletter, cette agence immobilière a contacté Out Of Design, un studio créatif dirigé par madame Séverine Verdan. Cette graphiste indépendante est chargée de design graphique et de direction artistique. C’est elle qui s’est occupée de toute la conception, du design et donc de la création de la maquette de cette newsletter.
Une fois la maquette réalisée, l’agence Sotheby’s n’avait plus qu’à trouver un prestataire pour l’intégration HTML et CSS de ce template emailing personnalisé. Notre agence digitale lui proposait le codage HTML/CSS soigné de son template mail tout en respectant son responsive design et en assurant sa compatibilité avec le client email utilisé par l’agence immobilière. Ces propositions étant à la hauteur des espérances de ce professionnel de l’immobilier, celui-ci nous confia le projet en toute confiance.
Nos conseils pour un affichage optimal de ce template emailing
Une fois ce projet confié et la maquette de ce template emailing transmise, nous devions dans un premier temps nous assurer de la compatibilité technique de cette création graphique. En effet, une maquette doit être bien pensée pour qu’une fois codée elle soit bien visible sur les différents supports de réception. Un email peut très bien s’afficher sur desktop mais poser problème sur téléphone ou tablette. Le codage doit donc être particulièrement soigné pour qu’il s’affiche de manière performante sur les différents devices. Il est nécessaire d’anticiper les contraintes dès la phase de design afin de ne pas avoir de mauvaises surprises lors du codage de cet email.
Nous avons donc fait certains commentaires sur la structure du contenu des maquettes réalisées par Séverine Verdan afin de les optimiser pour l’intégration HTML/CSS. Dans le but de contrer tous les problèmes de réception, il est nécessaire de construire un mail le plus simple possible. Premièrement, il doit être construit sur une seule colonne afin de réduire les problèmes d’affichage. De plus, l’utilisation d’un design à colonne unique améliore le confort de lecture des prospects. Par la suite, pour obtenir un affichage sur mobile optimal nous avons pensé en premier au design sur mobile avant même le design sur desktop. Puis nous avons conseillé l’utilisation équivalente de textes et d’images dans le contenu car beaucoup de programmes n’affichent pas les images par défaut. Il vaut mieux éviter de mettre trop d’images et penser à les renommer si l’on veut que le contenu soit lu.
Enfin, il est important de structurer l’email en plusieurs tableaux ou blocs. En effet, il est très difficile d’afficher correctement les mails sur les différents clients de messagerie et webmails car ils ne les lisent pas tous de la même manière. Ces webmails imposent des règles très strictes sur le code HTML et CSS contenu dans les emails. L’utilisation de tableaux ou blocs est la seule manière d’avoir une structure complexe lisible sur toutes les messageries. Nous avons donc fait certains commentaires en préconisant le déplacement de certaines photos et de certains textes afin de bien respecter la disposition en blocs nécessaire.
L’intégration HTML/CSS de ce template emailing
Une fois la maquette validée par notre agence digitale d’un point de vue technique, nous avons pu la transmettre à notre client Sotheby’s. Une fois ces maquettes validées par cette agence immobilière, notre développeur web a pu entamer leur intégration HTML/CSS. Il a donc intégré ces templates en prêtant une attention particulière au responsive design et à la compatibilité avec le webmail Outlook utilisé par cette agence immobilière.
Une phase de recette a suivi le codage HTML/CSS de ce template mail. Nous avons donc testé celui-ci sur différents supports grâce au logiciel Litmus. Cette solution fournit des aperçus de l’email sur plus de 90 applications et appareils en quelques secondes. Il demande aux clients de messagerie d’ouvrir l’email. Ce logiciel prend ensuite des captures d’écran de l’affichage du mail reçu par les destinataires. Grâce à ces tests nous avons pu vérifier que l’email s’affichait bien sur les différents devices mais aussi sur les différents clients e-mails et webmails.
Enfin, nous avons livré le mail codé et prêt à être envoyé sur la solution Mailchimp du client. Il s’agit d’une plateforme qui permet aux entreprises de gérer l’envoi de leurs campagnes emailing et newsletters. Cet outil permet aussi de gérer les listes de diffusion, de programmer des newsletters et suivre les résultats des campagnes mail. Nous avons bien évidemment rendu ce template emailing totalement personnalisable, modifiable par cette agence immobilière pour ses prochaines campagnes mail.
Cette réalisation vous inspire ?
Ouvrez simplement la discussion et nous vous répondrons sous 24h.Découvrez d'autres projets web menés par SWAT
