Le partage à outrance s’applique-t-il aux emails ?

Certains pensent que nous vivons dans un monde de partage à outrance. On peut tout trouver sur les réseaux sociaux, que ce soit le repas consommé par vos amis à midi ou une vidéo d’écureuil ivre. Nous partageons du contenu unique (tout comme cet article) et nous partageons souvent car nous sommes encouragés par les « favoris », « J’aime » sur Facebook ou nouveaux abonnés. Cela s’apparente vite à un cycle, un mode de vie.
Mais cette tendance s’applique-t-elle à l’email marketing ? Nous nous sommes penchés sur le fonctionnement et l’efficacité du partage social dans les emails.

mj_social
 

Avis mitigés

Si vous avez déjà effectué des recherches sur le partage social, vous avez peut-être constaté des avis mitigés dans les études. Selon une étude récente, inclure des liens pour partager vos messages sur des plateformes sociales telles que Facebook et Twitter générerait un taux de clics plus élevé de 115 % par rapport aux emails sans cette option. Tandis qu’une étude de Marketing Sherpa indique que les boutons de partage social ne seraient pas efficaces.

On peut donc se demander quelle est la bonne réponse. Les boutons sociaux peuvent s’avérer très utiles si vous connaissez votre audience. Encore une fois, tout dépend de votre lectorat et du contenu que vous partagez.

 

Vous DEVEZ connaître votre audience

Au final, il faut garder vos destinataires et votre objectif final à l’esprit. Un contenu pertinent et de qualité sera toujours le facteur le plus important pour que vos clients le partagent.

Mais si vous n’êtes pas prudent, les boutons de partage social peuvent empiéter sur le trafic vers votre site et vos conversions. Si votre email a pour but d’augmenter le trafic du blog, vous devriez envisager des boutons de partage social qui promeuvent les articles mis en avant. Si vous avez l’intention de booster les inscriptions grâce au social, proposez un lien menant directement à la page de redirection que vos utilisateurs pourront partager.

Les utilisateurs mentionnant votre produit auprès d’un ami offrent des résultats bien plus organiques, avec la valeur ajoutée du social. Cela garantit en retour l’attraction des prospects dont les intérêts sont similaires à ceux de vos clients les plus engagés.

En outre, si vous souhaitez seulement booster votre présence sur les réseaux sociaux, vous pouvez envisager des boutons « Nous suivre » à la place. Je les utilise dans mes propres campagnes d’emails et j’ai observé un taux de clics de 20 % attribué aux abonnements via les réseaux sociaux.
Ayez toujours un objectif spécial à l’esprit et travaillez pour que tous les éléments de vos emails mènent à cet objectif.

 

Passez au social

Il existe différents moyens d’ajouter des boutons de partage social dans votre email.

Grâce à un éditeur de modèle tel que Passport, le nouvel outil de conception d’email lancé par Mailjet, vous pourrez glisser et déposer des boutons de partage social préfabriqués. Pour une approche plus personnalisée, vous pouvez coder votre propre bouton. Les réseaux sociaux comme Facebook et Twitter disposent d’une documentation avec des codes pré-créés sur lesquels vous pouvez vous appuyer.

Le bouton « Tweet » de Twitter vous permet de fabriquer des messages personnalisés que votre liste de contact peut partager. Le bouton Facebook est peut-être un peu plus compliqué à maîtriser pour les non-développeurs, mais les possibilités de personnalisation sont également très variées.
Les boutons de partage social ont un potentiel d’impact très élevé. Un retour sur investissement important par rapport au temps de création et d’intégration dans vos messages !

 

Comment votre entreprise utilise-t-elle les boutons de partage social ? Dites-le nous dans les commentaires ci-dessous !

Découvrez Passport : votre porte d’entrée vers un nouveau design d’email

Pour les email marketeurs, il n’y a rien de plus frustrant que de voir les messages qu’ils ont minutieusement designé et écrit ne pas s’afficher correctement sur l’ensemble des appareils de lecture (téléphones, tablettes, ordinateurs). Mais l’agacement est fini ! Au cours des derniers mois, les équipes de Mailjet ont développé un nouvel outil rendant le design responsif d’email accessible à n’importe qui. Nous sommes fiers de vous présenter Passport, l’outil qui vous donne accès à un design d’email plus moderne et efficace.

 
Passport est un outil en ligne comprenant un éditeur WYSIWYG (What You See Is What You Get – ce qui s’affiche à l’écran correspond au résultat final) simple d’accès, et un éditeur HTML répondant à tous vos besoins. Quelle que soit votre expérience du design d’email, vous pourrez envoyer de beaux messages, correspondant à vos besoins. Perdez moins de temps à créer vos messages, et réinvestissez ce gain de temps pour mieux penser vos stratégies d’envoi. Passport s’appuie sur la bibliothèque JavaScript React.JS : vous pouvez modifier vos contenus à la vitesse du son ! Passport est également compatible avec l’ensemble des fonctionnalités de test de Mailjet : Tests A/X, Comparateur de campagnes…

Concevez l’email que vous voulez : votre imagination est la seule limite

Pour commencer, sélectionnez un des nombreux modèles d’emails prêts à l’emploi disponible dans notre bibliothèque mise à jour en continu. Adaptez ce modèle à vos besoins en changeant ses couleurs et sa disposition. Personnalisez vos contenus pour mieux toucher vos destinataires, en les interpelant par leur prénom ou en faisant référence à des achats passés. Vous venez de créer un email à votre image en quelques clics, sans contrainte ! Les utilisateurs plus expérimentés peuvent également intégrer des éléments en HTML depuis l’outil WYSIWYG. Enfin, gagner du temps en sauvegardant vos modèles pour les réutiliser lors de futures campagnes.

Drag'n'drop

Le HTML en temps réel

Ne doutez plus ! L’éditeur HTML de Passport comprend une fenêtre de prévisualisation en temps réel. Vous savez ainsi instantanément à quoi ressemblera votre code une fois arrivé en boîte de réception.

CodePreview

Visualisez votre atterrissage

Enfin, avant que votre campagne ne décolle, assurez vous que votre message s’affiche correctement sur téléphone, tablette, ordinateur portable et ordinateur. Ayez un aperçu de vos emails sur chacune de ces plateformes. Le résultat vous convient ? Vous êtes prêt à envoyer !

previewTPL

 
Pour en savoir plus sur Passport, rendez-vous sur cette page, et essayez Passport dès aujourd’hui.

 

Les clés d’une campagne emailing réussie

Avec près de 3 milliards de comptes et de boîtes de réception actifs dans le monde, l’email reste le canal de communication le moins coûteux et le plus efficace pour toucher une audience large. Son ROI peut atteindre 3400% (là où Twitter et Facebook plafonnent à 1200% maximum). Mais pour lancer une campagne emailing efficace, il y a quelques règles à respecter.

 

La qualité des contacts

Première chose à avoir avant d’envisager d’envoyer des emails : des destinataires. Cela semble évident. Cependant, une campagne emailing efficace est une campagne envoyée à des contacts succeptibles d’être intéressés et d’interagir avec vous. Vous devez donc à tout prix éviter l’achat ou l’emprunt de listes tiers. D’une part, cela est contraire à la plupart des obligations légales : en France, l’article 22 de la loi dans la confiance en l’économie numérique stipule bien que les destinataires doivent avoir donné leur consentement à l’expéditeur pour que ce dernier leur communique ses messages. D’autre part, vous n’avez aucune certitude quant à la qualité de la liste en question.

Dans tous les cas, l’acquisition de liste tiers est à proscrire. Il y a de grandes chances pour que votre cible ne corresponde pas aux campagnes que vous allez envoyer. En conséquence de quoi, vos statistiques d’envoi ne vont pas décoller. Rapidement, les FAIs et webmails vont vous comme un expéditeur au comportement suspect et risquent de vous blacklister.

De nombreuses techniques existent pour faire croître votre liste de contacts de façon organique et légale. Nous avons répertorié quelques unes des techniques les plus efficaces dans cet article. N’oubliez pas de demander plus que leur adresse email à vos futurs contacts. Nom, prénom, localisation, préférences… sont autant de données qui vous permettront de mettre en place des campagnes emailing plus efficace.

 

Cibler juste

En effet, en segmentant vos listes d’envoi pour un ciblage plus précis d’abord, puis en personnalisant votre message, vous vous assurez de campagnes plus performantes.

La segmentation des listes est particulièrement pratique lorsque vous avez des message ou promotions spécifiques à proposer à vos destinataires. En fonction des données récoltées lors de l’inscription de vos contacts, vous pouvez par exemple décider de n’envoyer les offres qu’aux hommes âgés de 18 à 35 ans vivant en Bretagne et s’intéressant aux sports extrêmes. La segmentation vous permet d’envoyer des campagnes d’emailing précises à partir d’une liste de contacts globale.

La personnalisation quant à elle, va vous permettre d’avoir un rapport plus proche avec vos destinataires. Que ce soit en utilisant des données statiques (en les appelant par leur prénom ou en leur souhaitant leur anniversaire, par exemple) ou des données dynamiques (préférences d’achat, parcours sur votre site…), vous intéresserez davantage vos contacts à partir d’une même campagne.

personnalisation

 

Composer votre message

Une fois ces tris préliminaires effectués, vous allez pouvoir vous mettre à la création de votre email à proprement parler. Ici, il n’y a pas de recette secrète. Tout dépend du type de contenu que vous voulez envoyer. Cependant, nous vous recommandons de suivre quelques lignes directrices qui aideront vos campagnes d’emailing à être mieux délivrées et surtout à mieux s’afficher, quelque soit l’appareil, le webmail ou le navigateur sur lequel votre message sera lui :

Ces différents points sont déterminants : d’eux dépendront la réussite de votre campagne emailing, réussite que vous mesurerez d’abord grâce aux taux d’ouvertures et de clics générés.

tests

 
Pour vous assurer d’envoyer le message qui fait mouche, n’hésitez pas à tester vos différentes compositions avec les tests A/B, voire A/X !

 

Suivre, analyser, recommencer

Dernière étape pour maîtriser pleinement votre campagne emailing : l’analyse des données. En comprenant comment vos destinataires ont réagi à votre message (L’ont-ils ouvert ? Si oui, sur quel appareil ou navigateur ? Sur quels liens ont-ils cliqué ?), vous pouvez améliorer vos envois à venir.

Inspirez-vous des éléments visuels qui ont eu le plus d’effet, reprenez les formulations ou les sujets qui ont généré le plus d’ouvertures et observez. Surtout, continuez à tester. Plus vous analyserez vos campagnes emailing, plus vous en aurez envoyé, et plus cette démarche empirique portera ses fruits. Notez qu’avec des outils comme le comparateur de campagnes d’emailing, vous pourrez plus facilement visualiser ces données.

analyse

 
Les règles d’une campagne emailing performante réalisée dans les normes sont donc simples : une liste de contacts propre et qualifiée, un message juste et intéressant, et surtout une analyse minutieuse des campagnes passées. L’essentiel étant de toujours proposer le message le plus pertinent à vos lecteurs. Vous utilisez des méthodes différentes ? N’hésitez pas à nous en faire part dans les commentaires !

Cloud emailing ou logiciel emailing : que choisir ?

Votre entreprise vient de ce lancer et vous voulez profiter du canal qu’est l’emailing pour pouvoir fidéliser vos premiers clients. Une question se pose alors : comment envoie-t-on des emails à nature commerciale ? Vous n’allez pas monter votre propre système : on ne s’improvise pas service emailing comme ça. Restent alors deux solutions : passer par une solution d’emailing logiciel, ou par un service basé dans le cloud.

Fonctionnalités

La première chose que vous allez regarder, c’est la qualité du produit. Globalement, aujourd’hui, la plupart des services d’emailing, qu’il s’agisse de logiciels emailing ou d’emailing cloud, offrent une délivrabilité optimisée.

La question des services va alors se poser. De leur côté, la plupart des logiciels emailing proposent une série de fonctionnalités dynamiques qui vous permettent de suivre le parcours de vos destinataires à travers l’email puis dans votre site. Plus que des solutions d’emailing, il s’agit de CRM vous facilitant le suivi des conversions de vos clients.

De leur côté, les solutions de cloud emailing font avant tout de l’envoi d’email. Cependant, la mojorité des services cloud intègrent également des fonctionnalités de création de message, de suivi et d’analyse des envois. Par ailleurs, grâce aux APIs mises à disposition par ces solutions, vous pouvez très facilement connecter votre service emailing à votre solution CRM basée dans le cloud. Au final, pour un coût moindre, vous disposez des mêmes fonctionnalités que des solutions logicielles.

La question du coût

Le prix de la solution est évidemment un des principaux paramètres que vous allez étudier au moment du choix de votre nouveau service. Les solutions d’emailng n’échappent donc pas à cette règle. En tant qu’entreprise aux besoins d’emailing fluctuants, vous cherchez une solution pouvant facilement s’adapter à vos besoins.

Si vous optez pour un logiciel emailing, sachez que la plupart des éditeurs fonctionnent au coût par email et par destinataire. Chaque email envoyé aura un prix fixe, offrant finalement peu de souplesse et d’adaptabilité. Par ailleurs, la plupart des contrats vous liant à des solutions d’emailing logicielles sont annuels. Vous devez donc être prêt à vous engager sur 12 mois minimum.

Pour leur part, les solutions de cloud emailing s’adaptent à vos besoins. Déterminez le volume d’email ou le nombre de contacts de vos listes pour le mois, et commencez à envoyer vos emails sans souci. L’avantage de ces formules sans engagement annuel est l’adaptabilité à vos besoins. D’un mois à l’autre, changez de plan en fonction de vos besoins, sans problème. Surtout, ces formules vous garantissent un tarif toujours juste et dégressif : plus vous envoyez d’emails, moins le coût par email sera élevé !

Partage et flexibilité

Comme dit dans le point précédent, un autre des nombreux avantages des solutions d’emailing cloud sur les logiciels d’emailing est leur souplesse. Contrairement aux logiciels d’emailing, vous allez pouvoir changer de formule mois après mois, et ainsi planifier et adapter vos dépenses emailing en fonction de vos besoins.

Par ailleurs, en tant que solutions basées dans le cloud, les services d’emailing cloud peuvent être utilisés de n’importe où : vous n’avez besoin que d’une connexion Internet pour retrouver vos listes, campagnes précédentes et données d’envoi précédentes. Les logiciels d’emailing n’offrent pas une telle flexibilité.

Un peu en retrait par rapport aux logiciels d’emailing à leur début il y a une dizaine d’années, les services de cloud emailing n’ont désormais plus rien à leur envier, tout en étant plus souples et moins coûteux. Alors pourquoi hésiter ? Optez pour le cloud emailing !

Soldes 2015 : pour un emailing réussi !

Les soldes sont un moment privilégié pour les e-commerçants : les réductions attirent de nombreux clients à l’affût d’une bonne affaire. Dans ce contexte, l’email est un excellent levier pour susciter l’attention et générer davantage de ventes. A une semaine de l’ouverture des soldes d’été 2015, voici quelques recommandations à suivre pour des campagnes réussies.

Cliquez sur l’image pour l’agrandir.

solodes_ete_2015_infographie

Flat design et email : retirer le superflu pour aller à l’essentiel

« Les ogres sont comme les oignons… Ils ont des couches ! », comme le disait Shrek dans le film d’animation de DreamWorks. Le célèbre personnage vert se sert de cette analogie pour décrire sa personnalité complexe. Tout comme un oignon, il faut prendre le temps d’ôter toutes les couches extérieures de son apparence pour comprendre l’essence même de Shrek. Cet ogre serait sûrement bien étonné face au monde des emails.

Récemment, le design d’email a lui aussi « ôté plusieurs couches » en retirant certaines textures complexes de l’univers 3D, pour obtenir le désormais bien connu « flat design ». Avec le flat design, en 2D donc, les formes tridimensionnelles sont rarissimes. Quelques clics de souris suffisent à faire apparaître le message principal. Voilà pourquoi tout le monde passe au flat design et pourquoi vous devriez suivre le mouvement.

Une évolution prévisible

iphone_flatdesign

 
Souvenez-vous de la première application Notes d’iOS. Elle se présentait sous forme d’un bloc-notes relié, avec ses pages jaunes, ses lignes etc. Ce design proche du véritable objet permettait de faciliter la transition du traditionnel papier/stylo au bloc-notes sur écran tactile. Aujourd’hui, cette application est une simple toile blanche.

Le flat design est le produit d’une évolution naturelle dans l’expérience utilisateur. Les consommateurs sont désormais bien plus à l’aise avec les technologies (ou dans notre cas, avec les emails). Ils n’ont plus besoin de supports visuels qui les aident à passer de l’action A à l’action B. D’après une étude récente, les Français passent plus de 5 heures par jour sur Internet. Pour remettre les choses en perspectives, rappelons que la plupart des gens sont éveillés 16 à 18 heures par jour.

Le design plat s’adapte parfaitement aux limites de l’écran au lieu de le décorer comme le faisait son prédécesseur, le skeuomorphisme. Comme on peut le voir sur le bloc-notes jaune à gauche, le skeuomorphisme représente les objets tels qu’ils sont dans la réalité. Si vous observez attentivement les deux designs côte à côte, vous pourrez constater que le skeuomorphisme et ses nombreux détails prennent plus de place sur l’écran. L’approche minimaliste du flat design réduit le temps de chargement et laisse davantage d’espace pour la création.

Place au contenu

Le flat design est également héritier de l’idée selon laquelle le contenu est roi. Compte tenu de notre capacité d’attention très réduite lorsque nous sommes sur Internet, faire le tri dans sa boîte de réception n’est pas toujours chose aisée. Retirer certains éléments de design plus tape-à-l’œil permet ainsi à l’utilisateur d’identifier immédiatement la valeur du message.

Cet email de bienvenue d’Invision tape en plein dans le mille. Quatre vidéos d’introduction sont mises en avant par leur couleur rose qui appelle à l’action. Cette approche progressive est un moyen rassurant qui permet à un utilisateur débutant d’en apprendre davantage sur le produit et de se lancer.

invision_welcome

 
L’email de Litmus, quant à lui, affiche une mise en page marquée avec un bloc coloré. C’est un moyen plus subtil de fournir un contexte à vos utilisateurs et de les pousser à interagir avec votre contenu.

litmus_welcome

 
Le message envoyé par Dropbox est un autre exemple montrant comment un message contenant beaucoup de texte peut être amélioré grâce à un design minimaliste. L’email utilise l’espace négatif (l’espace blanc que l’appareil photo et le matériel de bureau ne recouvrent pas) pour créer un équilibre et attirer l’attention sur le message personnalisé placé en dessous.

dropbox_email

 

Adapté à tous les écrans

Comme nous l’avons évoqué précédemment, le flat design, parce qu’il épouse les limites de l’écran, créé une expérience email plus responsive. Invision et Litmus utilisent tous deux le modèle d’email à colonne unique largement répandu aujourd’hui. La hiérarchie claire créée par les blocs facilite l’affichage d’un email sur des écrans de tailles variées.

Le retrait de motifs et de textures encombrants font également gagner beaucoup de temps au designer. Ils n’ont plus besoin de se préoccuper du temps de chargement de certains éléments sur un téléphone portable ou sur une tablette.

Au bout du compte, tout le monde s’y retrouve, tant vos destinataires que votre équipe design. Le flat design est un mouvement axé sur l’utilisateur et cherche à fournir un contenu de qualité de la manière la plus digeste qui soit. Impossible de savoir combien de temps durera cette tendance, mais elle continuera certainement d’évoluer à mesure que les utilisateurs interagissent avec de nouveaux appareils.

 
L’équipe Mailjet a travaillé d’arrache-pied pour mettre au point un moyen plus facile et plus rapide pour créer de beaux emails. Restez à l’écoute, notre annonce arrive dans quelques semaines !

Des clients plus heureux avec Mailjet et le Help Desk Hub

Voici le troisième et dernier billet de notre série sur Cloud Elements, le service de gestion et d’intégration d’API basées dans le cloud tout-en-un. Dans notre premier billet, nous avons découvert comment les entreprises d’e-commerce pouvaient utiliser Mailjet et Cloud Elements pour envoyer des emails au contenu ciblé. Notre second billet traitait de la façon dont les entreprises utilisent notre intégration pour se connecter facilement à Mailjet à une plateforme CRM, telle que Salesforce, afin de renforcer les données des consommateurs afin de mieux comprendre les besoins des clients. Dans cet article, nous irons au bout du cycle de vie de la relation client en jetant un œil à la façon dont l’intégration Mailjet-Cloud Elements peut être utilisée afin que vos clients soient heureux et vous restent fidèles.

Avec le Help Desk Hub, l’API de Mailjet est la première du genre à intégrer un service client aux services d’assistance cloud leaders de l’industrie. Ces services comprennent Zendesk, Salesforce Service Cloud et JIRA. Cela signifie que les développeurs doivent n’ont que quelques modifications à faire dans l’API afin d’intégrer ces solutions de services d’assistance pour gérer les incidents, les priorités, les statuts et les utilisateurs.

Vous pourrez ainsi créer des listes de contacts selon les tickets d’incident précédents et envoyez des emails ciblés. Par exemple, si de nombreux clients vous demandent comment ajouter votre produit à leur système, l’intégration peut être utilisée pour envoyer un tutoriel expliquant l’utilisation de certains de vos services.

Nous avons configuré une de nos listes avec Zendesk. Partant de là, nous avons défini quels clients allaient se retrouver dans cette liste en ajoutant des messages automatiques. Ceux-ci indiquent à Zendesk quelles actions suivre.

mailjet_zendesk_cloudelements
Rendez-vous sur le blog de Cloud Elements pour plus d’études de cas d’utilisation.

Comment j’ai appris à coder un email HTML de A à Z

email_html01
On dit que pour apprendre une langue, il faut s’immerger dans la culture. Si c’est le cas pour les langues, c’est donc également vrai pour le HTML, n’est-ce pas ? Pour moi, spécialiste du marketing, le HTML est une langue étrangère comme une autre.

Chez Mailjet, nous utilisons notre éditeur de template WYSIWYG pour créer des emails, mais nous ajoutons des bribes d’HTML pour dynamiser certaines parties. Ces derniers mois, j’ai remarqué que nous envoyions de petites tâches à nos designers (créer des tableaux imbriqués, redimensionner des images, créer des bannières d’emails), qui prenaient du temps sur d’autres projets plus importants. Et si, en tant qu’email marketeur, je pouvais moi-même travailler avec l’éditeur WYSISWYG et l’HTML ?

C’était le début d’une session de deux semaines d’apprentissage pour coder un email HTML de A à Z. Voici ce que j’ai appris.

Pour commencer avec l’email HTML

email_html02
Tout d’abord, vous pouvez commencer avec un simple nouveau document HTML (un document texte enregistré avec l’extension « .html ») ou tout simplement utiliser directement l’éditeur HTML de votre fournisseur de services d’emailing. J’ai choisi cette deuxième option, en travaillant directement sur l’éditeur HTML avancé de Mailjet. Nous créerons l’en-tête en utilisant un format standard tel que celui-ci-dessous. L’en-tête indique au navigateur comment lire le document, en spécifiant quel langage et quelle version sont utilisés.

email_html03
Coder en HTML, c’est un peu comme élaborer un plan pour un article de blog : il faut identifier l’intro (ou l’en-tête), le corps (le frame) et la conclusion (le footer). Les navigateurs aiment que ces parties soient clairement identifiées. Ils savent ainsi comment les assembler pour créer un design uniforme.

Construire le frame : tout est une question de grille

On peut ensuite commencer à créer notre grille. Comme pour tout bon design, travailler sur une grille permet d’apporter un équilibre esthétique, d’organiser votre contenu et surtout de garantir un design responsif. Les emails en grille peuvent être facilement réorganisés en un design à colonne unique pour les plus petits écrans.

Pour construire mon design en grille, j’ai dû apprendre à coder des tableaux. C’est là que ça s’est compliqué. Difficile d’imaginer comment transformer un élément visuel tel qu’un tableau en texte !

Commencez avec une esquisse

Ma première erreur a été de plonger tête la première dans le code sans avoir fait d’esquisse. Les tableaux peuvent être difficiles à visualiser quand on commence à coder, c’est donc très important d’avoir une idée du contenu que l’on souhaite inclure et de la façon dont on souhaite le disposer. Chaque élément, image ou texte, devra généralement être codé comme une cellule du tableau.

Coder le tableau

Concernant le code, <tr> signifie « rangée du tableau » et <td> « données du tableau » ou colonne. Utilisez <tr> pour créer une nouvelle rangée, puis <td> et le texte que vous souhaitez ajouter dans la cellule.

email_html04
Voici le premier frame qui supportera le reste du contenu de l’e-mail.

email_html05
Pour ajouter plus de sections au sein du frame, suivez simplement le format que nous avons utilisé pour créer le tableau initial ci-dessus. J’ai copié-collé deux rangées supplémentaires. Nous avons maintenant un frame plus large et un ensemble de trois rangées.

email_html06

Remplir les détails

Ajouter un autre langage

Le frame que nous venons de voir était uniquement en HTML, mais pour la présentation, nous devons passer à un autre langage, le CSS. Ces deux langages sont souvent associés pour créer des sites internet et des emails car l’HTML crée la structure, tandis que le CSS décrit les détails visuels tels que les couleurs et les polices.

Pour compliquer les choses, la plupart des clients emails ne s’allient pas très bien au CSS. La façon dont ils affichent le CSS manque de cohérence. Par exemple, Gmail enlève tout CSS inclus dans l’en-tête d’un email, mais Outlook accepte les balises <style> dans <head> et <body>. J’étais très confuse ! Les clients emails n’aiment pas le CSS, mais il faut quand même l’utiliser pour la présentation ?

Il s’avère qu’il existe plusieurs types de CSS, mais je vais seulement vous présenter le CSS « inline », qui s’affiche correctement, car il s’applique à chaque balise HTML individuelle.

Si tous vos éléments de style sont déjà codés dans votre en-tête, il existe de nombreux outils bien pratiques pour aligner le code pour vous, comme Inky’s Inliner.

Ajouter l’image et la couleur de l’en-tête

Ci-dessous, j’ai ajouté l’image d’en-tête de l’email à l’aide de la balise <img src= “link”>.

De plus, j’ai ajouté la couleur d’arrière-plan des rangées 2 et 3 an pour qu’elles soient aux couleurs de Mailjet, doré <bgcolor=”#ffbf40”> et gris <bgcolor=“#989dac”>. D’ici peu, je créerai ces deux rangées pour créer le corps de l’email.

email_html07

Padding

Afin d’étoffer le reste du corps de l’email HTML, il faut ajouter du padding. Par exemple, <“style=”padding: 40px 30px 40px 30px;”> indique au client la façon dont le haut, la droite, le bas et la gauche (danc cet ordre) doivent être espacés.

email_html08

Boutons sociaux

Pour compléter le corps de l’email, j’ai ajouté une rangée supplémentaire en bas pour inclure les liens de réseaux sociaux. Faites toujours de même : cela ne prend que quelques secondes. Non seulement vous générerez du trafic supplémentaire vers vos autres canaux sociaux, mais cela vous permettra également d’étendre la portée du contenu de votre email HTML.

email_html09
email_html14

Lien de désinscription

Enfin, n’oubliez pas d’inclure un lien de désinscription en bas de chaque email ! Si vous oubliez d’en ajouter un, Mailjet vous le rappelle avant de passer à l’étape suivante :

email_html10
email_html11
À l’aide du lien de désinscription fourni ci-dessous, j’ai ajouté un attribut href, qui indique au client email quel lien ajouter au texte.

Tests et erreurs

Surtout, soyez patient lorsque vous venez de démarrer. Parfois, vous oublierez de fermer une balise, ou vous ajouterez un caractère qui « cassera » le design. Petit conseil : surveillez les couleurs surlignées en syntaxe !

L’outil de création HTML de Mailjet vous permet de prévisualiser l’apparence de votre campagne selon les tailles d’écran. Je peux également m’envoyer un test. J’ai vérifié mon code à chaque étape pour m’assurer que le design s’affichait comme je le souhaitais. Si quelque-chose n’était pas aligné ou était cassé dans l’aperçu, je pouvais le réparer immédiatement.

email_html12

Pour finir

Et voilà, vous avez le produit fini. Il m’a fallu trois bonnes heures pour faire cette simple mise en page ! À moins que vous vouliez mettre en place des personnalisations particulières, commencer par l’éditeur WYSIWYG et ajouter de l’HTML si besoin peut être un processus plus efficace.

email_html13
L’équipe Mailjet a travaillé dur pour créer un moyen plus simple et rapide de créer de magnifiques emails. Restez connectés, nous ferons une annonce dans quelques semaines !

 

Le design d’email en 2015

Le design d’email a toujours plus ou moins suivi les tendances du webdesign en général. Nos premiers emails étaient relativement austères figés. Peu à peu, les technologies et la rapidité croissante des réseaux aidants,  ils sont devenus plus colorés, mieux illustrés, plus dynamiques. Mais les tendances évoluant constamment, il est parfois difficile de s’y repérer. Pour y voir plus clair, nous avons interviewé Marc Charon, graphiste et intégrateur chez un grand distributeur de gaz et d’électricité français. Passionné de design d’email et de respect des bonnes pratiques, il dresse un tableau de ce à quoi devrait ressembler un bel email aujourd’hui.

 

Aujourd’hui, qu’est-ce qui définit un bon design d’email ?

Il est impératif que l’on puisse lire l’email n’importe où. Aujourd’hui, un bon design d’email passe par son adaptation aux supports sur lesquels il sera lu. On veut éviter au maximum que l’utilisateur ait une action supplémentaire à faire pour pouvoir lire le message. Aussi, nous devons impérativement faire de nombreux compromis qui rendent, graphiquement et techniquement, l’exercice du design d’email unique.

de_phone de_tab 
de_webmail

Le même email sur téléphone, tablette et webmail

 

Actuellement, quelles sont les grandes tendances du design d’email ?

Influencé par les frameworks américains et leur tendance à ouvrir les email en mobile first (ce qui n’est pas forcément le cas en France), je dirai le skinny email à 1 colonne et le responsive.

Le skinny, où l’on propose une largeur maxi de 400 à 500 pixels (grand maximum) est très intéressant car il permet de ne pas s’encombrer de trop de contraintes techniques et de tests fastidieux. Il peut facilement se décliner et être injecté dans le système d’information. Spotify en est un très bon exemple : la marque utilise ce design autant sur les push de disponibilité d’un disque que dans ses newsletters. Mais il faut noter que la marque a la chance d’avoir un produit (la musique) qui ne nécessite qu’un nom et une image carrée.

Pour ceux qui ont un vrai besoin éditorial, le responsive est vraiment le passage obligé aujourd’hui. Un responsive 2 colonnes (où, en lecture mobile, la 2e colonne tombe sous la première, donc) peut apporter une valeur ajoutée énorme aux emails avec peu de travail supplémentaire en terme d’intégration.

Quels designs d’email t’ont marqué récemment ?

Je suis obligé de citer ce que propose Litmus en terme de responsive design. Dans un joli flat design, on scrolle et on lit l’email avec bonheur.

exemple_litmus
 

Dans le secteur de l’énergie (mon secteur), les email « Home Report » des thermostats nest sont également très intéressants.

nest_exemple
 

Quels sont les principaux défis que l’on peut rencontrer lors de la création d’un nouveau template ?

Pour ma part, j’ai la chance d’être autant le graphiste que l’intégrateur. Quand il s’agit de concevoir le design des emails, j’ai donc 2 défis : aidez à hiérarchiser le contenu pour maximiser l’objectif du mail, et répondre à la question : une fois ouvert, cet email sera-t-il lisible sans contrainte ? Si le contenu est bien en place, il n’y a plus aucune raison technique que ça se passe mal graphiquement.

A quel moment le design global des emails de l’entreprise doit être pensé ?

L’email est vraiment un objet à part. Ce n’est pas vraiment un travail de webdesigner, ni de graphiste, mais des deux à la fois. Le charte graphique doit guider le design de l’email mais ne doit pas l’imposer. Si la charte graphique impose trop d’éléments dès le début, on se retrouve avec beaucoup de contraintes qui ne correspondent pas forcément aux objectifs de fidélisations et d’accompagnement client. Ca peut être une problème dans le cadre de la création d’emails de prospection. L’email est un support de communication qui se doit d’être fluide et être considéré un peu à part. Son design doit être pensé plus indépendamment que le reste de la charte graphique de l’entreprise.

Qui doit primer : le design de l’email ou son contenu ?

Pour moi, le contenu doit rester au cœur de l’email. Le design vient juste guider ce contenu. Dans l’entreprise où je travaille, j’ai créé 3 templates pour les campagnes d’emailing marketing. En fonction des besoins et des messages à faire passer, nous pouvons donc sélectionner et adapter celui qui correspondra le mieux.

Lors de l’élaboration d’un brief, c’est le contexte qui décide du choix du template, puis le contenu qui finit par guider les choix graphiques. A aucun moment le contenu lui-même ne doit s’adapter au design.