French (Français) translation by Henri Lotin (you can also view the original English article)
Nous avons repensé récemment tous les e-mails que nous envoyons chez Envato Tuts+ ; les newsletters, les divers résumés, les e-mails de campagnes marketing et les e-mails de l’admin. Dans cette série de courtes études de cas, nous allons vous expliquer comment nous l’avons fait !
Pourquoi ?
Jusqu'à la refonte, nous avons eu une collection assez décousue de courriels sans aucune équipe principale pour s'en occuper. Il est apparu que nous pourrions simplifier les choses et rendre les choses moins coûteuses, nous avons décidé de concentrer nos efforts sur un compte central dans Campaign Monitor. Un ensemble central de thèmes serait utilisé dans tous les domaines et nous nous rassurerons qu’ils ont été conçus et construits de manière à représenter ce que nous représentons à Envato Tuts+.
Audit
La première étape de l’opération était de rassembler tous les divers courriels que nous envoyions actuellement aux masses. Cela signifiait se pencher sur nos newsletters MailChimp existantes et démanteler de ce que nous avions dans Exact Target.
Une fois que nous avons su ce que nous cherchions, nous avions pu choisir des éléments communs et les tenir prêt pour l’étape du design.
Nous avons tout résumé à :
Admin
- nouveau compte
- confirmation d’inscription par e-mail
- mot de passe perdu etc.
Marketing
- promos diverses
Actualités
- recueil mensuel
- recueil hebdomadaire
- newsletter du traducteur
- newsletter du contributeur
Besoins
Quelles étaient nos priorités pour cette refonte ? En liste en point, nous avions besoin :
- D'un design réactif
- D'un branding et d'une typographie à rattacher à Tuts+
- De quelque chose de représentatif de Envato en tant qu'entité
- D'appels à l’action clairs si nécessaire
Et nous avons voulu :
- Une typographie claire et lisible
- De l'intemporalité ; un style qui ne montrerait pas rapidement son âge
- Une différenciation entre les différents types de courrier électronique
Sketch
Il est temps de mettre en place quelques visuels ! J’ai utilisé Sketch pour ce processus de design, en raison de ses qualités pour le design d’interface utilisateur. La première étape a été de mettre sur pied un plan de travail et de travailler sur certaines dimensions de la grille.
J’ai utilisé les options de mise en pages de Sketch (View > Canvas > Layout Settings..) pour définir une grille de 640px, avec 8 colonnes. Mon plan de travail était beaucoup plus large que cela, pour me donner une marge de manoeuvre. En cliquant sur Center le décalage est calculé automatiquement, dans ce cas à 280px. La grille est donc positionnée à 280px du bord du plan de travail.
Une largeur de colonne de 62px avec gouttières de 20px, me donnant un bon point de départ horizontal.
Je voulais des lignes également, donc j'ai coché la case Rows. Ma police fonctionnerait à partir d’une base de 16px, alors je l’ai utilisée comme base rudimentaire pour la grille verticale.
Mise en pages
L’équipe de marketing au QG avait demandé que nous prenions des dispositions pour une sorte de section de large en-tête ; quelque chose qui leur permettrait d’utiliser des graphiques frappants si jamais ils en avaient besoin.
Je ne voulais pas que ce soit un standard sur tous les types de courriel, mais cela m’a donné un bon point de départ. À l’aide de blocs, j’ai pu mettre en place une mise en pages de base.
Avec un en-tête, une zone de contenu principale et une toile blanc cassée, le décor était planté. J’ai décidé de jouer avec les calques et fait en sorte que la zone de contenu chevauche légèrement l'en-tête. Je ne savais pas cela pourrait provoquer quelques maux de tête à Nicole (qui devait coder tout cela), mais je savais qu’elle trouverait la solution – c'est une magicienne après tout.
Les variantes de cet arrangement pourraient venir sous la forme de :
- En-tête de bloc de color (les foncés en haut)
- En-tête de splash image (ceux orange par exemple)
- En-tête transparent (en bas à gauche)
- Absence de tout en-tête (en bas à droite)
Mobile
Un des avantages d’une mise en pages simple, c’est que la réactivité est intrinsèquement plus simple à réaliser. Réduit dans une fenêtre plus étroite, nous cassons la colonne double, le cas échéant et coinçons la zone de contenu contre le bord de la fenêtre d’affichage, ce qui nous donne une série de sections et pas de chevauchement.
Dans Sketch, où deux arrangements de colonne différents sont nécessaires, il faut une deuxième page. Toute mise en pages de grille que nous définissons est appliquée à tous les plans de travail sur la même page, et nous avons besoins d'une grille beaucoup plus simple pour notre affichage mobile réduit.
Ce dont nous avons besoin ici est si simple, en fait, tout ce dont nous avons vraiment besoin est une unique colonne centrale, avec une gouttière (nous allons nous en tenir à 20px de chaque côté). Sketch ne peut pas créer de grille d’une seule colonne, donc nous devrons en utiliser deux.
Typographie
Nous utilisons Roboto ces jours-ci dans la majeure partie des supports Envato, alors la décision a été prise pour moi. Les couleurs sont largement dictées par les styles de Envato aussi, alors j’ai eu une palette à partir de laquelle choisir. J’ai dû décider laquelle serait utilisée pour le corps, les titres, les liens, tout texte avec moins d’emphase et les « appels à l’action ».
Mes priorités étaient que :
- Le texte doit être lisible, d'où mon choix d'un simple 16px pour le corps de texte, avec 24px (1,5) d'interligne.
- Les titres seraient plus lourd, mais pas beaucoup plus gros et utiliseraient la même couleur pour suggérer une relation entre eux.
- Les liens devraient être soulignés (c’est un peu un tic obsessionnel de ma part, mais je ne vois pas pourquoi les liens ne devraient pas l'être).
- Les éléments de liste devraient utiliser des puces
- Nulle part le texte ne serait forcé dans des espaces exigus !
- Les liens et « appels à l’action » utiliseraient la même couleur bleue dans la mesure du possible, aidant le lecteur à se concentrer sur tous les éléments actionnables.
En ce qui concerne la capacité de Sketch à rendre les choses plus facile ici, les styles de texte sont juste à un clic. Stylez un élément de texte comme vous le souhaitez, enregistrez-le comme style de texte, puis revenez-y, si jamais vous avez besoin de ce style à nouveau.
Recueils
Envato Tuts+ est une plateforme assez visuelle ; nous utilisons des vignettes dans tous les sens. Quelques commentaires de l’équipe ont laissé suggérer que la même mise en pages de carte que nous utilisions sur notre page d’accueil serait la meilleure façon de présenter les tutoriels dans un email digest. Les lecteurs feraient la connexion, comprendraient ce à quoi ils ont affaire, et dans tous les cas, c’est une façon claire de présenter l'information.
Les cours sont un peu différents ; j’ai voulu leur donner une emphase supplémentaire. Chaque section de la rubrique montrerait tout d’abord un cours disponible, en pleine largeur, avec un peu plus de détails que les tutoriels, ainsi qu’une image de bouton play superposée sur la vignette. Cela soulignerait la distinction entre les cours et les tutoriels tout en stimulant les lecteurs à cliquer (les boutons play sont bons pour cela).
Avoir la touche play dynamiquement placée sur le dessus aurait été difficile, donc nous nous sommes résignés à placer manuellement l'image du bouton sur les vignettes elles-mêmes (avec Photoshop, par exemple). Un peu de travail supplémentaire (désolé, Cameron), mais qui en vaut la chandelle, je pense .
Blocs de publicité
Nous voulions aussi une façon de présenter les blocs de publicité ; pas nécessairement des publicités de tierces parties, mais quelque chose qui nous donnerait l’occasion de parler de choses nouvelles et excitantes. J’ai ajouté une bannière optionnelle en haut de la mise en page – très similaire à ce que vous verrez sur le site Web de temps en temps.
J’ai ensuite décidé de fractionner tous les contenus en blocs, nous permettant de les placer dans n’importe quel ordre que nous choisirons et également de faire une distinction claire entre les sections.
Voici ce à quoi ressemble un bloc publicitaire, avec deux sections digest de chaque côté.
Pied de page
Le pied de page est un élément universel à travers tous ces courriels. Je ne voulais pas des tonnes d’informations enterrées là, mais ce que nous avons choisi de placer là, je l’ai voulu clair (je ne comprends pas pourquoi certaines entreprises rendent leurs pieds de page à peine visibles, avec des liens « unsubscribe » cachés).
Donc, avec des liens sociaux, une zone de texte pour expliquer pourquoi une personne pourrait recevoir l’email, des liens de désinscription, ainsi que l’adresse du Envato HQ, nous étions parés.
Newsletters
Nous avons maintenant la base pour tous les éléments dont nous avons besoin, ce qui nous donne les blocs de construction pour chacun de nos types de courriel.
Les newsletters sont probablement susceptibles de ne jamais avoir besoin d’un en-tête graphique quelconque, alors j’ai utilisé un titre simple mais gras pour démarrer la procédure à ce niveau. Les styles typographiques que nous avions déjà fixés seraient appropriés pour la plupart du contenu possible.
Une distinction entre les newsletters et les recueils a été faite en donnant aux newsletter un en-tête transparent, le rendant tout à fait plus... grand format.
Email d’admin
Le plus simple de tous nos emails (mis à part les versions texte brut) sont les messages d’admin. Dans leur cas absolument aucun style supplémentaire n’est nécessaire ; juste tout comprendre, rapidement et simplement. Un en-tête transparent et une absence de grand titre définit assez bien le ton admin ici. Tout le reste demeure pareil, y compris, éventuellement, un bouton d'appel à l'action. Voici les vues desktop et mobile :
Livraison
Avec les concepts et designs mis en place, il était temps d’envoyer les résultats à Nicole. Elle devait ensuite prendre ces idées et en faire des fichiers HTML statiques. J’avais besoin de m’assurer qu’elle avait compris les décisions qui ont été prises, et avait tous les atouts nécessaires pour coder les courriels.
InVision permet une annotation très rapide sur les documents visuels – et vous pouvez charger des fichiers Sketch directement. Une collection de visuels avec des commentaires et des pointeurs était un bon moyen de communiquer toutes les idées.
En termes de livrables, Sketch rend l'export de tous les bits et morceaux nécessaires très facile. Non seulement je pouvais préparer tous les éléments (tels que les logos, les boutons sociaux etc) mais je pouvais les livrer à différentes tailles également, nous couvrant pour les écrans à variation de densité de pixel. En savoir plus sur comment Sketch peut exporter vos éléments :
Avec tous les fichiers, ainsi que quelques instructions supplémentaires dans Dropbox, Nicole avait tout ce dont elle avait besoin pour faire opérer sa magie.
À venir...
Dans la partie suivante de cette étude de cas je vais passer le relais à Nicole pour le code. Elle va expliquer comment elle a posé les fondations adaptées pour ces e-mails et a surmonté les difficultés habituelles du développement d'email.
N’hésitez pas à récupérer les Sketch de démonstration dans le repo sur GitHub et voir les emails finis de vous-même : Inscrivez-vous ci-dessous !
