Bibliothèque de blocs
Chaque bloc ci-dessous est un composant autonome, en format courriel. On en pige quelques-uns pour monter un envoi, et l'ordre change d'une édition à l'autre. Rien ici n'est un gabarit fixe.
Règle de fond, tranchée le 15 septembre : trois couleurs, jamais plus. Le blanc est le défaut de lecture, le violet sert aux blocs qui doivent ressortir, le sombre reste l'exception. Aucun orange, sauf pour évoquer une autre marque.
01a · En-tête clair · le défaut
Le fond blanc retenu par Matt et Jérémy au call du 15 : « le hero du first blanc, j'aime mieux ça ». Logo et numéro seulement, sans titre ni slogan : la une qui suit est le premier titre de l'envoi. Le mot personnel vit dans son propre bloc à la fin.
01b · En-tête compact · fond sombre
Version compacte, sans titre. Sert quand le courriel ouvre directement sur son contenu.
01c · En-tête compact · fond violet
Pour les envois d'un seul bloc. Ça les distingue de l'infolettre mensuelle dès la boîte de réception.
02 · Le mot de Matt · freestyle
Écrit par Matt, pas par moi. Son avatar GS, jamais une photo. Ce bloc n'est pas obligatoire et n'ouvre pas forcément l'envoi.
03a · Séparateur · filet plein sous le libellé
Libellé aligné à gauche, filet violet de 3 px sur toute la largeur en dessous. Le plus lisible des trois, et le plus proche de ce qu'on a aujourd'hui.
03b · Séparateur · libellé centré entre deux filets
Filet épais au-dessus, filet fin en dessous, libellé centré au milieu. Le plus éditorial, façon journal. Prend plus de hauteur verticale.
03c · Séparateur · pastille, sans filet
Aucun filet, juste la pastille violette. Le plus compact et le plus moderne, mais il marque moins fort la coupure entre deux sections.
04a · Nouvelle majeure · image pleine largeur
Le défaut. Titre d'abord, image ensuite, puis la conséquence en serif sur violet. Demande une image forte, elle occupe toute la largeur.
04b · Nouvelle majeure · image en colonne
Plus compact, et beaucoup plus tolérant : une image moyenne passe mieux en carré de 220 px qu'en pleine largeur. Utile quand la semaine n'a rien donné de bon côté visuel.
05 · Brèves en double
Le format que Matt a nommé le meilleur pour les nouvelles. Même règle : titre, puis image. S'empile en une colonne sur téléphone.
06a · Use case · fiche avec barres de progression
Barres à l'échelle réelle des deux taux, jamais étirées pour dramatiser l'écart. Fond blanc, donc ce bloc ne consomme pas un des deux blocs pleine couleur permis par envoi.
06b · Use case · fond violet plein
La version que Matt avait aimée : « des cases de même mauves, j'aime ça ». Plus de présence, mais elle mange un des deux blocs pleine couleur.
07a · Statistique · chiffre renversé à gauche
Chiffre en renversé sur violet à gauche, explication à droite. 150 px, soit 2,3 fois la taille d'origine : c'est le maximum avant que la colonne de texte devienne inutilisable. Fond blanc dominant, donc combinable avec un autre bloc pleine couleur.
07b · Statistique · pleine couleur, centré
Tout le bloc en violet, chiffre centré sur toute la largeur. 192 px, soit le vrai 3x, parce qu'il n'a aucune colonne de texte à côté. Fait un excellent courriel d'un seul bloc.
08 · Guide ou lead magnet · nouveau bloc
Le seul bloc où le sombre est justifié : il doit trancher avec le reste pour signaler qu'on donne quelque chose. Un envoi d'un bloc là-dessus sert de test de lead magnet.
09 · Call to action · obligatoire
Le seul bloc obligatoire avec les nouvelles. Il va normalement en dernier, parce que la fin est la deuxième zone la plus lue après le début.
10 · Pied de page
› Voir l'exemple d'infolettre