3 erreurs à éviter dans le design dans Mailchimp

3 erreurs à éviter dans le design dans mailchimp

Ce billet a été lu 1950 fois. À votre tour?

Le design dans Mailchimp est simple, pour autant que l’on puisse suivre quelques règles bien précises. Voici 3 erreurs à ne surtout pas commettre.

Avant de parler du design dans Mailchimp, quelques généralités

En 2012, le rapport d’activité Mailchimp indique que le nombre total d’e-mails envoyés s’élève à plus de 34 milliards (un peu plus de 95 millions par jour). Quand on sait que Mailchimp n’est pas du tout seul sur le marché, ça laisse présager le nombre astronomique de mails envoyés par l’ensemble des listes de diffusion (campagnes d’e-mailing et newsletter).

Dans tout ce ramdam d’e-mails, souvent considérés comme des Spams « Indésirables » ou, comme c’est le cas dans Gmail, classés directement dans la section « Promotions » (le terme est affreusement choisi), il y a à boire et à manger au niveau de l’ergonomie visuelle.

Mailchimp, esthète de l’esthétique, fait pourtant tout pour mâcher le travail aux « créateurs en herbe »: avec son système de drag and drop super facile à appréhender, la faute de construction de l’e-mail ne devrait plus avoir lieu. Et pourtant.

Voici donc un panel de 3 erreurs à éviter pour que votre newsletter, créée sur Mailchimp, soit professionnelle et pousse au clic.

Les 3 erreurs à ne pas faire

1. Mettre du contenu une fois à gauche, une fois à droite, et peut-être même au milieu

Avant de penser joli, il faut penser pratique. Et pratique pour les yeux, surtout. On vous a maintes fois parlé du « F » pattern ici-même, je vais donc en rajouter une couche: PENSEZ AU « F » PATTERN.

C’est à dire : l’oeil commence à lire en haut à gauche de l’écran et progresse vers le bas droit en diminuant l’importance de ce qu’il voit au fur et à mesure de sa descente.

L’alignement et le colonage sont donc primordial pour ne pas choquer l’oeil. Il faut guider le regard, lui montrer le chemin, vers ce qu’on veut lui faire voir, à savoir le (ou les) call to action, le lien sortant.

Félicie Aussi Newsletter

La newsletter de Félicie Aussi, par exemple, montre bien cet effort de colonage et de prioritisation de l’information : « lire l’article » est collé sur la gauche pour que le clic soit plus efficace.

On pourrait en dire encore plus sur les erreurs à ne pas commettre sur Mailchimp. Par exemple : ne pas mélanger deux langues; placer correctement les différents niveaux de titre (h1,h2,h3 …); ne pas oublier de bien remplir les cases dans le « Setup » …

2. Utiliser trois typos différentes, et les déployer sous toutes leurs formes possibles et imaginables

Tenez-vous à une police lorsque vous créez vos e-mails. C’est tout. A la limite une seconde pour démarquer un élément en particulier, une citation par exemple.

Il est aussi primordial d’accorder aux « options » de la police (le gras et l’italique) une utilisation plus que parcimonieuse. L’italique, dans le cadre d’une lecture hyper rapide (ce qui est le cas lors de l’e-mail), est plus un bruit visuel qu’autre chose. Le gras est là pour mettre un élément en valeur: si tout le corps de texte est en gras, ça bouffe le regard. Et ne parlons pas de souligner … Dois-je rappeler que c’est un « lien », même dans un e-mail?

Newsletter WAW

 

Ici, dans la newsletter de Wearethewords, il n’y a pas d’effets de typographie. Pas de gras ni d’italique dans les textes de la colonne gauche: les contenus sont courts et différenciés par l’usage des titres (h2,h3) et des majuscules.

3. Ne pas toucher aux options de design ni ne mettre de balises Alt sur vos photos

Lorsque l’on crée sur Mailchimp, il est très important de toucher à toutes les options: l’onglet « Design » doit absolument être réglé pour que votre newsletter soit lisible pour tout le monde. Mailchimp ne règle rien par défaut : il faut donc aller soi-même décider de la taille de police, de la couleur de celle-ci, de l’alignement, de l’espacement entre les lignes … Ces options se trouvent aussi dans l’éditeur de contenu, mais si elles ne sont pas normalisées par la suite, ceux qui ouvrent vos newsletter pourraient tomber sur des mauvaises surprises.

En terme d’option, il est aussi important d’aller chercher la balise Alt de votre photo, ainsi que le « Title Attribute » dans les options avancées. Parce que, la plupart du temps, les boîtes de réception n’affichent pas les images : il est important d’avoir une solution de secours qui n’affiche pas le nom « photo-id23658.jpg » que vous auriez pu donner à votre photo, et qui serait visible de tous.

Celtx Newsletter

 

Dans cette newsletter de Celtx, un logiciel permettant de créer des scénarios et de gérer des équipes de tournage, les images non affichées sont remplacées par des textes. On peut apprécier les informations principales sans que l’image ne nous aide.

Vous pouvez aussi lire cet article si vous désirez en savoir plus sur les bonnes pratiques dans Mailchimp.

A propos de Benoît Hautot

Tout fraichement diplômé de Saint Luc en Arts Numériques, Benoit se destinait, petit, à être curé, architecte ou journaliste. Le voilà qu'il sait faire du graphisme et qu'il est en stage -prolongé - chez WAW, pour apprendre cette nouvelle compétence qu'est l'écriture web. Pfiou, ce n'est pas une mince affaire !

Sur le sujet, avez-vous lu...

5 Responses to 3 erreurs à éviter dans le design dans Mailchimp

  1. Mathieu dit :

    J’ai longtemps utilisé Mailchimp mais je dois avouer que plus récemment je suis passé à des outils payants mais plus simples à utiliser : rapidmail (c’est une entreprise allemande, leur interface est agréable et leur taux de délivrabilité proche de 100%). Plus récemment, on m’a présenté cleverreach, qui semble aussi une bonne alternative et propose jusqu’à 250 abonnés gratuitement. À bon entendeur, Mathieu.

  2. Hello Mathieu, plus simple que Mailchimp, c’est possible? Attention, pour nos lecteurs: Mailchimp est payant également, dès 2500 adresses si je me rappelle bien.

  3. […] 3 erreurs à éviter dans le design dans Mailchimp […]

  4. […] les entrepôts d’Amazon), mais d’y mettre un souffle de vie. Je commence à prendre Mailchimp en affection, parce qu’égoïstement, c’est le média où je peux avoir un retour direct sur ce que […]

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>