Il y a deux choses que vous pouvez ajouter à n'importe quel site pour augmenter le nombre de lecteurs: les lettrines et les tirs de héros. Ce ne sont pas des nouveautés, et ce ne sont en aucun cas des "secrets". Mais beaucoup de designers ne réalisent pas qu'ils sont utilisés pour plus que des raisons esthétiques. Aujourd'hui, je vais vous expliquer pourquoi ils travaillent et vous montrer comment les mettre en œuvre au mieux.
Juste avant de plonger, un mot d'avertissement. En utilisant ces éléments, augmenter les taux de lecture. Autrement dit, plus de gens liront votre copie. Mais si votre copie est pauvre, utiliser des lettrines et des tirs de héros sera également utile. diminuer les taux de réponse. Il faut donc une copie forte pour utiliser ces éléments efficacement. Sinon, vous obtiendrez moins de conversions. Vous pouvez consulter mon article précédent ici à Design Shack pour un guide de démarrage rapide pour repérer et écrire une copie convaincante.
Lettrines
Chaque concepteur est familier avec les caractères élégants et surdimensionnés qui jaillissent au début d’un bloc de texte. Également appelées initiales, les lettrines ont leur origine dans l'art insulaire des îles britanniques au VIIIe siècle. Ils semblent avoir été entièrement décoratifs au début, et sont restés fidèles à la Renaissance et à une utilisation moderne parce que? bien, ils sont jolis.
En fin de compte, ils sont plus que faciles à regarder. Ils accroissent également le lectorat en s'attaquant à un besoin humain fondamental: le besoin de complétude. En termes simples, les gens ne peuvent pas rester en laissant quelque chose à mi-chemin. Ils doivent le finir. Lorsque vous lisez un livre avant de vous coucher et que vous pensez «Je vais le mettre au bas de la page», vous n’avez jamais faire-parce que la page se termine toujours à mi-chemin d'une phrase. Vous devez vous retourner pour le finir, n'est-ce pas?
Les lettrines fonctionnent de la même manière. Parce qu'ils se démarquent, et parce qu'ils sont parfaitement clairs dans votre trajectoire naturelle des yeux sur une page, ils sont presque impossibles ne pas lire. Vous n'avez besoin que d'un simple coup d'œil pour recevoir une seule lettre. Mais une fois que vous l'avez compris, votre besoin de complétude exige que vous lisiez au moins le reste du mot. Et une fois que vous avez lu le mot, ce même besoin vous oblige à aller jusqu'au bout de la phrase. Avec une bonne ligne d’ouverture, c’est tout ce qui est nécessaire pour lire le paragraphe. Etc.
Quelques meilleures pratiques pour lettrines
Gardez-les raisonnablement petits
Vous pouvez bien sûr créer une lettrine aussi énorme que vous le souhaitez. Mais c'est contre-productif. Une fois qu'ils ont plus de trois lignes de hauteur, les initiales commencent à se «détacher» du reste du texte et restent isolées, ce qui va à l'encontre de leur objectif. De plus, les premiers paragraphes peuvent être assez courts. Par conséquent, si vous appliquez de manière dynamique une très grande lettrine au début de chaque page à l'aide de CSS, cela risque de prendre plus de place que le paragraphe auquel elle est attachée. Ce qui semble idiot.
Laissez-moi également noter ici que vous voulez vous assurer que votre mesure (largeur de trait) n’est pas trop grande, sinon vous aurez toujours des problèmes avec cela. Plus de 80 caractères par ligne réduisent la lisibilité. Par conséquent, si vous avez des difficultés à mettre des lettrines, vous voudrez probablement que votre mesure reste belle et légère pour la rendre rentable. j'utilise largeur maximale: 75ex; pour tous mes wrappers de contenu.
Utilisez une couleur forte
Il est également sage de définir les lettrines dans une couleur attrayante, plutôt que dans un gris foncé ou noir comme le reste de votre texte (encore une fois, je suppose que vous utilisez la conception la plus lisible possible; le texte inversé réduit le nombre de lecteurs. ) L’orange ou le rouge sont naturellement les meilleurs, étant les couleurs les plus provocantes, mais toute couleur autorisée par votre conception fonctionnera probablement mieux que le gris ou le noir.
Coups de héros
Une photo de héros est un portrait de l'auteur, placé à côté du premier paragraphe. Il peut se distinguer du paragraphe à gauche ou à droite, ou flotter en ligne comme une lettrine.
Pourquoi ça marche? Deux raisons:
- Les visages attirent notre attention comme un fou. De toutes les formes et modèles du monde, ce sont ceux que nous sommes le plus durement cernés à reconnaître et à résoudre. Pourquoi pensez-vous que la Vierge Marie apparaît à tant de personnes dans leurs céréales?
- Nous faisons davantage confiance aux gens quand nous sentons que nous les connaissons. Si nous pouvons voir à quoi ressemble l'auteur d'une pièce, nous commençons à nouer une relation plus forte avec lui. C'est bon non seulement pour le lectorat, mais aussi pour les conversions. Le lien que nous sentons avec l'auteur augmente notre confiance en lui, ce qui accroît la valeur perçue de ce qu'il dit - et cette valeur perçue est ce qui pousse les prospects à cliquer sur des appels à l'action.
Quelques meilleures pratiques pour les tirs de héros
Rappelez-vous vos légendes
Toujours toujours utilisez une légende. Les légendes sont lues 200% de plus que la copie du corps - vous voulez donc en tirer le meilleur parti. En plus d'indiquer le nom complet et les références de l'auteur, il est judicieux d'inclure un argument de vente majeur: résumer un avantage clé, une garantie, une prime ou un élément similaire.
Correspondre à la voix de copie
Naturellement, il n’a de sens que d’utiliser un héros tiré lorsque la copie est écrite comme si elle émanait d’une seule personne. Pour les pigistes, les photos de héros sont donc excellentes - la plupart des grands rédacteurs les utilisent. (Je viole de manière flagrante cette règle sur mon propre site, à cause de ma personnalité mystérieuse en tant qu'Informateur des routes.) Cependant, pour les grandes entreprises, elles ne sont souvent pas appropriées sur toutes les pages.
Ne pas submerger votre lecteur
Rappelez-vous que les coups de héros tirent vraiment difficile. Cela signifie qu'ils seront en concurrence avec d'autres éléments de la page, notamment les lettrines. Si vous devez choisir entre l’un ou l’autre choix, c’est probablement la meilleure option (un test de division pour vous en assurer, bien sûr, votre kilométrage peut varier).Si vous n'utilisez que le tir du héros, positionnez-le sur la gauche pour soutenir, plutôt que casser, le paupier naturel du lecteur.
Utilisez uniquement une image de haute qualité
Il vaut mieux ne pas utiliser d'image du tout que d'utiliser une image moche. Si vous n’avez pas une bonne image, n’utilisez pas du tout un héros. Rappelez-vous que le but est d'encourager le lecteur à avoir le sentiment d'une relation avec l'auteur afin de renforcer la confiance. Une photo en dents de scie redimensionnée de 640 × 480 à 50 × 38 puis redimensionnée à une photo de héros 120 × 90, puis enregistrée au format JPEG à 40% de qualité? pas si bon. De manière générale, il n’ya pas non plus de photo de l’auteur qui semble mal rasé, échevelé, ivre, lapidé ou autrement douteux. Rappelez-vous que le style de la photo peut contribuer ou nuire à la crédibilité perçue de la personne représentée.
Cela signifie également que vous devez éviter d'utiliser une image qui se heurtera à votre conception. Dans l'exemple ci-dessous, vous verrez que j'utilise un héros stylisé pour correspondre à ma lettrine.
Exemples avec code
Je vous donnerai ci-dessous quelques indications pour coder à la fois une lettrine et un tir de héros. N'hésitez pas à participer ensuite et à critiquer mes méthodes. Je trouve que c'est ce qui fonctionne le mieux, mais il y a toujours plus d'une façon de peler un chat.
Créer une lettrine
À l’époque, les lettrines devaient être piratées avec des cellules de tableau. Heureusement, leur création est beaucoup plus facile et plus élégante de nos jours. En fonction de la manière dont vous souhaitez appliquer votre lettrine, vous devrez choisir d'utiliser une classe, des sélecteurs CSS ou les deux.
Si vous préférez appliquer une lettrine à la première lettre de chaque page, vous pouvez simplement utiliser des sélecteurs. Par exemple, supposons que le premier paragraphe suive toujours un en-tête de premier niveau dans votre balisage. Dans ce cas, vous pouvez utiliser le sélecteur CSS adjacent-frere avec le première lettre pseudo-classe:
C'est simple et agréable, et cela fonctionne dans tous les navigateurs dignes de mention (et d'autres non). Mais il est probable que votre marge bénéficiaire ne soit pas toujours aussi basique. Par exemple, que se passe-t-il si, sur certaines pages, vous utilisez à la fois un en-tête de premier et de second niveau? Encore une fois, ceci est facilement résolu avec le sélecteur frère / soeur adjacent:
Ou, si vous utilisez HTML5 et placez vos en-têtes dans des groupes:
Personnellement, je veux un contrôle plus granulaire que cela. En plus d'avoir une lettrine au début de chaque page, je souhaite parfois en placer une manuellement (après un saut de section, peut-être). Dans de tels cas, j'utilise un cours.
Maintenant, j'ai vu beaucoup de gens utiliser envergure éléments pour créer des lettrines-juste envelopper la lettre dans un avec la bonne classe attachée, et c'est parti. J'ai toujours considéré cela comme plutôt peu élégant - mais si vous avez une sorte de limitation avec votre CMS qui rend ma solution problématique, allez-y. Je préfère simplement attacher une classe à un paragraphe. Voici le CSS:
Je n'utilise pas p.drop-cap: première lettre {} parce que j'aime garder mes options ouvertes. Un jour, je pourrais par exemple vouloir mettre une lettrine sur une citation de bloc. Quoi qu'il en soit, le code HTML d'accompagnement est simple:
Très bien pour avoir déclenché la lettrine. Mais qu'en est-il réellement le style? Il y a deux petites mises en garde ici.
Choisissez une police appropriée
Vous devez vous rappeler que les différentes polices ont différents styles de majuscules. En règle générale, une lettre majuscule devrait être d'environ 1 em haut. Mais certaines polices ont? idiosyncrasies. Parfois, vous constaterez qu'un «A» occupe beaucoup plus d'espace vertical qu'un «H», par exemple. Ou un "J" va pousser en dessous de la ligne de base. Toutes sortes de petites bizarreries comme celle-ci peuvent rendre extrêmement difficile l'obtention d'une jolie casquette. Je vous suggère de faire le contraire de ce que j'avais fait lorsque j'ai créé mon site Web et de trouver une police avec des majuscules égales et cohérentes à utiliser pour vos lettrines. Dans les exemples ci-dessous, je vais utiliser League Gothic pour la lettrine et Aller Light pour la face d'affichage.
Hauteur de la ligne
Les navigateurs basés sur Gecko ne semblent pas se préoccuper de la hauteur de ligne, mais ceux de WebKit s’y intéressent. Si vous vous trompez de hauteur de ligne, vous ne le remarquerez pas dans Firefox, mais la lettrine sera placée à la mauvaise position verticale dans Chrome et Safari.
Alors, comment savoir quelle hauteur de ligne (et quelle taille de police) utiliser? Vous pouvez obtenir une bonne plage de départ en prenant le nombre de lignes de paragraphe que vous souhaitez que la lettrine couvre, puis en le multipliant par la hauteur de ligne de votre paragraphe. Dans l'exemple ci-dessous, j'utilise une hauteur de ligne de 24px, et la lettrine couvre trois lignes. Je commence donc par une taille de police de 24? 3 = 72px, définissez la hauteur de ligne sur le même et voyez à quoi ça ressemble.
Notez que je ne veux pas réellement occuper un espace vertical de 72px, car la lettrine devrait être plus ou moins alignée avec la ligne moyenne du paragraphe, pas le haut de la ligne. Mais la plupart des polices utilisent beaucoup moins d'espace vertical pour un em que la taille de police ne le permet; donc, à 72px, nous pourrions ne recevoir que 65px en hauteur de glyphe.
Passons maintenant au CSS actuel. Je vais vous donner ceci en format simple ligne au fur et à mesure que je le construis, puis vous donner le code final dans un format plus facile à lire à la fin. Le code pour le paragraphe est assez basique:
Et nous allons faire de la lettrine un élément de niveau bloc, puis faites-la flotter à gauche du paragraphe:
Ce qui sort comme ça:
Il était une fois une petite lettrine appelée «O». C’était un type généralement honnête, sans air, mais dans ses moments de vain temps, il aimait bien se considérer comme un remorqueur entraînant ses lecteurs sans crainte dans une vaste mer de textes par ailleurs indifférenciés. (Son concepteur avait oublié de composer son contenu avec d'autres éléments scannables tels que des paragraphes, des listes et des sous-titres. Une histoire très triste.)
Pas si mal, mais le glyphe occupe moins d'espace vertical qu'il ne le devrait. À une taille de police de 72px, le «O» de League Gothic ne fait que 55 pixels de haut. Et il faut aussi un peu de répit; c'est un peu coincé contre la copie pour le moment.
Vous avez peut-être remarqué que Firefox positionne le glyphe au-dessus de la ligne moyenne du paragraphe, alors que Chrome ou Safari le positionnent correctement. En effet, ils ont des idées différentes sur la position du haut du paragraphe. Nous allons devoir ajouter une marge supérieure pour que Firefox puisse positionner correctement le glyphe; ce qui signifie réduire la hauteur de ligne en conséquence pour Chrome. Avec un peu d'expérimentation, j'ai trouvé ce qui suit fonctionner dans ce cas, mais vous devrez modifier votre propre code en fonction des polices, des tailles de police et des hauteurs de ligne que vous utilisez:
Voici à quoi ça ressemble:
Il était une fois une petite lettrine appelée «O». C’était un type généralement honnête, sans air, mais dans ses moments de vain temps, il aimait bien se considérer comme un remorqueur entraînant ses lecteurs sans crainte dans une vaste mer de textes par ailleurs indifférenciés. (Son concepteur avait oublié de composer son contenu avec d'autres éléments scannables tels que des paragraphes, des listes et des sous-titres. Une histoire très triste.)
Je recommande vraiment de tester différentes lettres également. “M” et “A” révèlent souvent de légers problèmes de positionnement vertical, car leur hauteur de casquette est généralement supérieure à celle des autres lettres pour compenser l'illusion d'optique de brièveté créée par leurs pics. Vérifiez également à quoi ressemble «J», car il possède parfois un descendant, même en majuscule. Enfin, si votre police a des chiffres de style ancien, jetez-la et trouvez-en une avec des chiffres. C'est pour ça qu'ils sont!
Ok, ajoutons un coup de héros!
Créer un coup de héros
J'ai déjà dit que les tirs de héros et les lettrines peuvent rivaliser pour attirer l'attention. Dans ce cas, je vais essayer d'utiliser cela à mon avantage. Je vais utiliser un cliché de héros stylisé qui complète la lettrine et le placer étroitement dans le premier paragraphe. Parce que nous sommes déterminés à examiner et à scruter les visages au-dessus de presque tout le reste, les yeux des lecteurs seront attirés par le héros abattu en premier. Quand ils liront la légende, ils découvriront pourquoi ils devraient lire la copie. et puis la lettrine se met au travail, guidant leurs yeux au bon endroit.
Emballer un coup de héros
Il pourrait être tentant de créer un coup de héros en jetant simplement dans un D Bnonn Tennant, rédacteur Internet et expert en marketing direct, explique comment augmenter vos taux de conversion en augmentant le lectorat de votre copie. Ma préférence personnelle est de placer le tir du héros à droite, avec une lettrine le complétant à gauche. Cependant, comme toujours, le dernier mot à cet égard est le test. Différents arrangements fonctionnent pour différents publics et différentes conceptions. Vous constaterez peut-être que vous obtenez un meilleur lectorat avec juste un cliché du héros à gauche et aucune lettrine. Ou une lettrine et pas de héros tiré. Notez également que tout tir de héros de taille décente, avec toute légende utile, s'étend sur au moins deux paragraphes, même lorsque le premier paragraphe est relativement long. Assurez-vous de tenir compte de cela dans votre conception. Cela a l'air bien, mais il y a quelques problèmes. Tout d'abord, l'image est positionnée un peu bas, car il y a un espace invisible dans l'image. Deuxièmement, la légende semble un peu détachée de la photo prise par le héros. Et troisièmement, parce que l'image mesure 100 pixels de haut (ce qui n'est pas un multiple de la hauteur de ligne 24 pixels que j'utilise), la légende est située légèrement en dehors de la grille verticale. Avec quelques ajustements, j'ai trouvé qu'un 
haut de la marge de -15px pour .hero-shotet -11px pour .heroshot p, arrangez simplement les choses. (Si ces chiffres semblent faux, c'est probablement parce qu'ils sont toujours quelque peu approximatifs; aligner tout votre texte sur la même grille verticale est à peu près impossible). Vérifiez-le:
D Bnonn Tennant, rédacteur Internet et expert en marketing direct, explique comment augmenter vos taux de conversion en augmentant le lectorat de votre copie.
Ma préférence personnelle est de placer le tir du héros à droite, avec une lettrine le complétant à gauche. Cependant, comme toujours, le dernier mot à cet égard est le test. Différents arrangements fonctionnent pour différents publics et différentes conceptions. Vous constaterez peut-être que vous obtenez un meilleur lectorat avec juste un cliché du héros à gauche et aucune lettrine. Ou une lettrine et pas de héros tiré.
Notez également que tout tir de héros de taille décente, avec toute légende utile, s'étend sur au moins deux paragraphes, même lorsque le premier paragraphe est relativement long. Assurez-vous de tenir compte de cela dans votre conception.
Le CSS final
Voici le code CSS final, comme promis (vous pouvez le copier directement):
Conclusion
Et ça y est, nous sommes prêts à aller avec une casquette discrète et un héros à égaler. N'hésitez pas à offrir vos propres conseils ou critiques, ou poser des questions de suivi, dans les commentaires.