Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

L’intégration emailing : vous avez dit casse-tête ?

L’intégration emailing : vous avez dit casse-tête ?

Il arrive toujours un moment dans la vie d’un webdesigner où on va lui demander la créa et/ou l’intégration d’un emailing.
Et là, c’est le drame !
Oui, c’est le drame car on le sait, ce n’est pas chose aisée. Des problèmes de décalages, d’espaces blancs, des clients mails
qui interprètent correctement et d’autres pas… bref on redoute à l’avance les tirages de cheveux pendant des heures.

Cependant, avec quelques astuces et un peu de pratique, on peut palier à tous ces petits problèmes.

Je vais vous présenter ici les bonnes pratiques qui vous permettront de mieux appréhender l’intégration et ne plus considérer l’emailing comme votre bête noire.

1. Étape de création

Tout d’abord…

Bien penser son intégration dès le maquettage

C’est un point primordial qui vous évitera pas mal de difficultés lors de l’intégration.
À l’étape du maquettage, il vous faudra penser à une mise en page simple mais impactante pour la mise en valeur de votre message. Un emailing doit être beaucoup plus simple qu’un site web. Voici quelques exemples de créations qui, à mon sens, allient une mise en page simple et soignée à un bon design :

Exemples de newsletters

Sources : Blog du webdesign et Naf-Naf

Dimensions d’un emailing

Pensez vos dimensions, notamment la largeur. Il n’existe pas réellement de taille standard, cependant je vous conseille de rester aux environs des 600 pixels, cela pour permettre une bonne lisibilité sur le plus grand nombre de supports. Prenons l’exemple de l’iPhone 3 avec ses 320 pixels de large : même si le contenu de l’emailing ne s’adaptera pas (comme avec du responsive webdesign) la lecture sera tout à fait acceptable.

La hauteur sera variable en fonction de votre contenu, mais gardez bien en tête que les éléments importants devront être placés là où ils seront le plus visibles, c’est à dire au dessus de la ligne de flottaison.
“Mais qu’est-ce que la ligne de flottaison” me direz-vous ? il s’agit d’une ligne “imaginaire”, fixée à 570 pixels de hauteur lorsque vous réalisez vos templates, qui symbolise la limite de la partie visible d’une page avant le scroll.

Ligne de flottaison

Illustration d'une ligne de flottaison

Le choix des polices

Lorsque de la création, il vous faudra penser aux questions de typographie, à savoir quels textes seront en images et lesquels seront en police web. Sur un emailing, il est conseillé de respecter un ratio texte/image de 50% environ, sous peine de passer en spam lors de l’envoi.
De même le choix des accroches, des textes est important ! Sachez que tout mot trop connoté commercial ou promotionnel est reconnu comme spam. Veillez donc à en utiliser le moins possible, voire pas du tout.

Éviter les choses trop alambiquées

Comme dit précédemment, il faut rester simple dans votre créa. Évitez par exemple les blocs aux bords arrondis avec du texte web
à l’intérieur, ou alors pensez bien qu’il faudra le découper correctement de chaque côté.
Préférez également les fonds unis aux dégradés pour les blocs de texte, car lors de l’intégration vous ne pourrez pas utiliser la propriété « background-image » qui n’est pas du tout interprétée.

Dernier conseil : n’oubliez pas d’optimiser le poids de vos images, tout comme vous le feriez pour un site web.

2. Passons à l’intégration

Votre maquette est prête, toute belle et validée. Il va falloir maintenant l’intégrer.

Vous avez deux choix : faire « à la mano » en utilisant Dreamweaver, le bloc note, ou autre ; ou l’intégrer avec l’aide d’un boilerplate.
Celui-ci est, disons, une base de travail saine pour commencer, qui vous permettra de minimiser votre temps d’intégration.

Je pense cependant qu’avant d’utiliser un boilerplate, il est impératif de savoir se débrouiller sans, c’est exactement la même chose que lorsque l’on apprend à faire un site web !

Retour vers le passé

Tout d’abord, ne pensez plus aux règles W3C, CSS, tout ça… nada, zéro.

Pour l’intégration d’emailing il faut faire un énorme bond en arrière et utiliser le système de tables pour la mise en page… c’est dur je sais…
Malheureusement il faut s’y résoudre car les <div> ne sont pas correctement interprétées par les clients mail de manière générale.

Pour éviter les espaces blancs et autres déconvenues, il n’y a qu’une seule solution : imbriquer les tables dès que plusieurs colonnes ou lignes sont requises dans un tableau.
Pour que chaque dimension des cellules soient les bonnes à l’affichage, il est nécessaire d’indiquer systématiquement la largeur exacte (en pixels), au risque de voir des décalages apparaître.

De la bonne utilisation des CSS (et compatiblités)

C’est là que tout va se jouer. Il faut savoir que chaque client mail interprète à sa façon les styles CSS dans un emailing. Certains accepteront telle propriété alors que d’autres ne la reconnaîtront pas.

Déjà, ne jamais ô grand jamais ! utiliser une feuille de style CSS à part (vous pouvez toujours essayer, ceci dit, mais ça ne fonctionnera pas). Toujours mettre chaque style à l’intérieur de la balise concernée, à l’aide de la propriété « style ».

Il existe heureusement des sites qui répertorient les compatibilités CSS en fonction des clients, notamment campaignmonitor.com et emailology.org.
Dans tous les cas, comme pour la créa, il faut rester basique et éviter d’utiliser trop de propriétés CSS.

La propriété html « height » est très peu reconnue également. Il faut donc ruser et utiliser soit une image d’espace style « blank.gif » (mais avec modération), soit jouer avec la balise <br/> ou bien encore utiliser &nbsp; entre deux balises <td>.

Là, vous pleurez, je sais, mais vous n’aurez pas d’autres choix.

Les messageries Hotmail et Gmail insèrent par défaut des marges entre les images. Pour palier à ce problème, la solution : la propriété CSS « display:block; ». Avec ça vous n’aurez plus de problème.

Vous avez le choix de l’envoi

Dans le cas où votre emailing serait destiné à un groupe restreint de destinataires, vous pourrez utiliser simplement votre client mail ou votre navigateur pour l’envoi de votre emailing. Sur Safari (sous Mac) par exemple, si vous cliquez sur Fichiers > Envoyer le contenu de cette page par courrier électronique, la newsletter sera directement insérée sur votre client de messagerie et prête à l’envoi.

Mais assez fréquemment vous allez devoir créer une campagne emailing à l’aide d’outils de reroutage. Il en existe un certain nombre sur le net et ceux-ci vous permettront de bénéficier de services et d’outils de statistiques approfondis.
Une liste non-exhaustive des plus connus : Dolist, CampaignMonitor, Mail Performance, YMLP

Et n’oubliez pas de tester !

Testez sur un maximum de clients mails afin de vous assurer que tout est bien monté. Il existe des outils en ligne comme EmailOnAcid (préconisé par La Ferme Du Web) qui permettent notamment de le faire.

Une dernière chose avant de vous lancer à corps perdu dans votre montage. Un lien du genre “Si vous ne parvenez pas à lire cet email, cliquez ici” est toujours le bienvenu dans le cas où on ne pourrait pas lire correctement l’email, voir les images, etc. Il vous suffira de mettre votre fichier html sur un ftp (avec les images, cela va de soi) et de le lier correctement au message.

Pour conclure

Voilà vous savez maintenant à peu près tout. J’espère que tout ceci vous aura permis de mieux appréhender le montage de nos chers emailings et de ne plus broyer du noir dès qu’un tel projet vous tombera dessus.

Pour compléter cet article, vous trouverez un ensemble de ressources utiles, notamment sur l’utilisation de boilerplate.

Merci pour votre lecture !

Emailology
http://www.emailology.org/

HTML Email Boilerplate
htmlemailboilerplate.com/

Smashing magazine
http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-CSS/

http://www.smashingmagazine.com/2010/01/19/design-and-build-an-email-newsletter-without-losing-your-mind/

Propriétés CSS supportées dans les emails
http://www.campaignmonitor.com/css/

Templates gratuits sur CampaignMonitor
http://www.campaignmonitor.com/templates/

 

A propos de l'auteur : Enza Chaffron

Webdesigner et intégratrice sur Bordeaux, passionnée de design et accessoirement fan de japanimation & mangas.

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !