Conception d'articles longs

Concevoir un bel "article" est forgé avec des tonnes de considérations. Contrairement, par exemple, à une page d'accueil, un article long consiste moins à concevoir une interface qu'à concevoir un texte de manière à créer une expérience de lecture détendue et confortable.

C'est parce que les articles traitent du contenu long qui, à son tour, a tendance à être valorisé par une interaction de « temps passé sur la page » avec les utilisateurs. Nous voulons que quelqu'un lise un récit complet. Il y a un espace naturel entre le moment où quelqu'un atterrit sur un article et lit tous les mots. Et j'espère que cet espace est suffisamment immersif pour non seulement contenir un utilisateur, mais provoquer des pensées, des idées et, éventuellement, des actions. C'est du moins ce que j'espère, car j'ai votre attention et que vous parcourez l'article même que vous lisez.

Il y a un équilibre. D'un côté, on entend que "Personne ne lit Internet." D'autre part, un article long demande une attention particulière. Compte tenu de la valeur actuelle du marketing de contenu et de l'impatience croissante des utilisateurs, captiver les lecteurs le plus longtemps possible devrait être une préoccupation majeure. Jetons un coup d'œil à quelques bonnes pratiques et exemples de pages d'articles incroyables pour avoir une meilleure idée de ce qui rend une expérience de lecture visuellement attrayante pour les articles longs (sans sacrifier l'expérience utilisateur), et comment nous pouvons reproduire les effets.

Victoires rapides

Permettez-moi d'énumérer rapidement ce que je pense être déjà évident pour beaucoup d'entre vous, mais qui sont efficaces pour la lisibilité du contenu :

• Augmentez la taille de la police : Nous savons que 16px est la valeur par défaut et convient parfaitement à de nombreux modèles, mais une taille de police plus grande est attrayante car elle implique que l'utilisateur est libre de se pencher en arrière et de s'installer sans avoir à s'incliner vers l'avant avec l'écran face à lui pour lire.
• Visez des caractères par ligne : Très peu de gens que je connais aiment travailler plus dur que nécessaire, et cela vaut aussi pour la lecture. Plutôt que d'utiliser toute la largeur de la fenêtre d'affichage, essayez de réduire les choses et d'équilibrer cela avec votre taille de police plus grande pour obtenir moins caractères sur chaque ligne de texte. Votre sweet spot peut varier, bien que de nombreuses personnes suggèrent quelque part entre 45 et 75 caractères par ligne pour aider à limiter la distance que l'œil du lecteur doit travailler pour aller de gauche à droite. Chris a un bookmarklet pour aider à compter les caractères, mais nous avons aussi le ch unit en CSS pour obtenir des résultats prévisibles.
• Augmentez la hauteur de la ligne : Une hauteur de ligne par défaut va se sentir écrasée. C'est drôle, mais plus d'espace entre les lignes (jusqu'à un certain point, bien sûr) demande moins de travail pour les yeux, ce qui semble contraire au conseil caractères par ligne où nous voulons généralement que les yeux parcourent une distance plus courte. Une hauteur de ligne entre 1.2 et les 1.5 semble être une gamme assez typique pour le contenu long.

Si vous ne l'avez pas encore vu, Pierrick Calvez a un grand "Cinq minutes" guide de la typographie qui emballe dans un tas de fruits à portée de main comme ceux-ci.

Conception pour plus d'espace respiratoire

Vous avez peut-être l'habitude de concevoir « au-dessus du pli » où l'immobilier est une denrée de choix. C'est un peu comme une propriété en bord de mer dans le monde du Web, car c'est là que nous avons l'habitude d'emballer des choses de grande valeur, comme des bannières de héros, des appels à l'action et toute autre chose pour aider à vendre quelque chose. Au-dessus du pli peut ressembler beaucoup à un centre-ville urbain dense avec un trafic élevé et des immeubles de grande hauteur.

Les articles sont différents. Ils permettent de s'étirer un peu. Si nous voulons pousser l'analogie du développement de la ville un peu plus loin, les articles ont la capacité de se pencher sur une sorte d'approche de conception «moins c'est plus». C'est ce qui rend les choix de conception apparemment petits - comme le type - si importants pour l'expérience globale.

Consultez l'exemple ci-dessous. Les soulignements de lien ont un peu plus de place pour respirer (en particulier, ils apparaissent sous les descendeurs). C'est en fait quelque chose que vous pouvez activer sur tout le site, mais qui est particulièrement agréable sur les pages d'articles, car cela augmente la lisibilité. C'est le genre de choix de design subtil qui contribue à une marge de manœuvre supplémentaire.

text-underline-position: under; est la ligne de CSS qui fait que cela fonctionne. Naturellement, text-decoration doit être réglé sur autre chose que none (underline dans ce cas), aussi.

L'exemple ci-dessus comporte également text-decoration-thickness, qui modifie l'épaisseur des traits de soulignement (et d'autres types de lignes). Vous pouvez utiliser cette propriété CSS pour faire correspondre l'épaisseur d'une ligne à la taille et/ou au poids d'une police.

Voici un exemple complet :

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;
}

Mais avant d'atteindre le text-decoration sténographie, Šime Vidas a quelques "pièges" quand il s'agit de l'utiliser qui valent la peine d'être examinés.

Diriger vers le contenu

Lettrines sont des lettres stylisées qui peuvent être placées au début d'un document ou d'une section de document. Ils étaient autrefois utilisés dans les textes latins, mais aujourd'hui, ils sont surtout utilisés pour des raisons décoratives.

Personnellement, je pense que les lettrines gênent la lisibilité. Cependant, ils peuvent être un bon moyen de "mener" un lecteur dans le contenu principal, et ils ne devraient pas introduire de problèmes d'accessibilité sérieux tant que vous utilisez le ::first-letter pseudo-élément. Il y a autre (plus vieux) méthodes qui impliquent plus de HTML et de CSS ainsi que l'utilisation d'attributs ARIA afin que le contenu reste accessible.

En utilisant ::first-letter, le CSS ressemblerait à ceci :

/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

Ce serait certainement bien si nous pouvions utiliser le initial-letter propriété, mais il n'y a pratiquement aucun support pour cela au moment où j'écris ceci. Si nous l'avions, tous ces calculs pour la taille de la police et la hauteur des lignes seraient calculés pour nous !

CodePen a mis les gens au défi de montrer leurs compétences en matière de style de lettrine il y a plusieurs années et vous pouvez en voir tout un tas d'exemples soignés dans cette collection.

Passer au contenu principal

Les lecteurs d'écran permettent aux utilisateurs de passer au contenu principal tant qu'il l'enveloppe dans un <main> élément. Cependant, ceux qui naviguent sur les sites Web en tabulant n'en bénéficient pas. Au lieu de cela, nous devons créer un lien d'ancrage "passer au contenu principal". Ce lien est habituellement caché mais révélé une fois que l'utilisateur fait son premier onglet (c'est-à-dire afficher sur le focus).

Cela ressemblerait à ceci:

<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>

<!-- target -->
<main class="main">
  <!-- main content -->
</main>

#skip-link {
  position: absolute; /* remove it from the flow */
  transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
  position: unset; /* insert it back into the flow */
  transform: unset; /* move it back onto the screen */
}

.main {
  scroll-margin: 1rem; /* adds breathing room above the scroll target */
}

Il y a d'autres façons de s'y prendre, bien sûr. Voici quelques plongées plus approfondies sur la création de liens de saut.

Visuels homogènes

j'adore les illustrations de cet article. Malgré leur apparence incroyable, ils ne demandent pas trop d'attention cognitive. Ils introduisent de brefs moments de plaisir mais suggèrent également que l'article lui-même a quelque chose de plus important à dire. Cela se résume en partie à l'utilisation de la transparence, alors que les images rectangulaires capturent plus d'espace négatif et exigent donc plus d'attention (ce qui est bien si c'est l'effet souhaité et que les images sont cruciales pour l'histoire).

Cependant, il est important de savoir que les images ne sont pas du tout transparentes, mais plutôt des JPEG non transparents avec la même couleur d'arrière-plan que le contenu. Je suppose que c'est pour garder la taille des images plus petite par rapport aux PNG qui prennent en charge la transparence.

L'inconvénient de "simuler" un fond transparent comme celui-ci est qu'il nécessiterait une ruse (et une maintenance) supplémentaire pour prendre en charge un interface utilisateur en mode sombre si votre site en propose un. Si les illustrations sont assez plates et simples, alors SVG pourrait être la voie à suivre car il est petit, évolutif et capable de se fondre dans n'importe quel arrière-plan sur lequel il se trouve.

Mais si vous êtes obligé d'utiliser des images raster et que vous préférez travailler avec des fichiers PNG pour la transparence, vous voudrez peut-être envisager d'utiliser images réactives et les terres parsemées de loading="lazy" attribuer pour des temps de chargement plus rapides.

Mettre l'accent sur le type et la sémantique

Vous pouvez avoir très peu à dire sur how or De quelqu'un lit du contenu sur le Web ces jours-ci. Que l'utilisateur le reçoive dans un flux RSS, le reçoive par e-mail, le voie copier-coller d'un collègue, le trouve sur un site scrapé, etc., votre contenu peut ressembler à différent que vous préférez. Vous pourriez concevoir ce que vous pensez être l'article le plus magnifique de tout le pays et l'utilisateur pourrait toujours écrasez ce bouton du mode lecteur à votre grand désarroi.

C'est bon! La découvrabilité du contenu est tout aussi importante que sa conception, et de nombreux utilisateurs ont leurs propres façons de découvrir le contenu et leurs préférences pour ce qui fait une bonne expérience de lecture.

Mais il y a des raisons pour lesquelles quelqu'un voudrait un mode lecteur. D'une part, c'est comme "ne voir aucun CSS" du tout. Par là, je veux dire Mode lecteur de Safari or Lecteur de vitesse courageux, qui utilisent le machine learning pour détecter les articles. Il n'y a pas de récupération ou d'exécution d'images CSS, JavaScript ou non-articles, ce qui améliore les performances et bloque également les publicités et le suivi.

Ce genre de "brute minimalisme » met l'accent sur le contenu plutôt que sur les styles. Donc, vous pourriez en fait souhaitez adopter les styles de lecture opiniâtres d'un navigateur spécifiquement à cette fin.

La façon de le faire n'est pas d'utiliser CSS, mais en accordant une plus grande attention à votre code HTML. Les modes de lecture fonctionnent mieux avec un balisage qui utilise du code HTML simple, sémantique et lié à l'article. Tu dois faire plus que simplement gifler balises autour de l'article pour en tirer le meilleur parti.

Vous constaterez peut-être qu'une conception minimale qui met l'accent sur la lisibilité plutôt que sur la finesse est en fait une bonne stratégie à utiliser dans la conception de votre site. Je suggère fortement de lire le message de Robin sur le "le plus petit CSS" pour une expérience de lecture solide.

Tour d'horizon des articles longs !

J'ai partagé beaucoup de ce qui, à mon avis, constitue une excellente expérience de lecture pour les articles longs sur le Web. Mais voir c'est croire et j'ai rassemblé un tas d'exemples qui montrent ce que nous avons couvert.