Gestaltung für lange Artikel

Das Entwerfen eines schönen „Artikels“ ist mit unzähligen Überlegungen verbunden. Anders als beispielsweise bei einer Homepage geht es bei einem Langform-Artikel weniger um das Design einer Benutzeroberfläche als vielmehr darum, Text so zu gestalten, dass ein entspanntes und komfortables Leseerlebnis entsteht.

Das liegt daran, dass Artikel lange Inhalte behandeln, die wiederum von einer "Verweildauer auf der Seite" bei den Nutzern geschätzt werden. Wir möchten, dass jemand eine vollständige Erzählung liest. Es gibt einen natürlichen Raum zwischen dem Zeitpunkt, an dem jemand auf einem Artikel landet, und dem Lesen aller Wörter. Und hoffentlich ist dieser Raum immersiv genug, um nicht nur die Aufmerksamkeit eines Nutzers zu fesseln, sondern auch Gedanken, Ideen und möglicherweise Handlungen zu provozieren. Zumindest hoffe ich das, während ich Ihre Aufmerksamkeit habe und Sie sich durch den Artikel arbeiten, den Sie gerade lesen.

Es gibt ein Gleichgewicht. Einerseits hören wir, dass „niemand das Internet liest.“ Andererseits erfordert ein langer Artikel sorgfältige Aufmerksamkeit. Angesichts des aktuellen Werts von Content-Marketing und der wachsenden Ungeduld der Nutzer sollte es ein Hauptanliegen sein, Leser so lange wie möglich zu fesseln. Betrachten wir einige Best Practices und Beispiele für unglaubliche Artikelseiten, um eine bessere Vorstellung davon zu bekommen, was eine visuell ansprechende Leseerfahrung für lange Artikel ausmacht (ohne die Benutzererfahrung zu beeinträchtigen) und wie wir die Effekte replizieren können.

Schnelle Erfolge

Ich liste kurz auf, was meiner Meinung nach für viele von Ihnen bereits offensichtlich ist, aber effektive Dinge für die Lesbarkeit von Inhalten sind

• Erhöhen Sie die Schriftgröße: Wir wissen, dass 16px der Standard ist und in vielen Designs vollkommen in Ordnung ist, aber eine größere Schriftgröße ist einladend, da sie impliziert, dass der Benutzer sich zurücklehnen und es sich gemütlich machen kann, ohne sich mit dem Bildschirm vor dem Gesicht vorbeugen zu müssen, um zu lesen.
• Zielen Sie auf Zeichen pro Zeile ab: Sehr wenige Leute, die ich kenne, arbeiten gerne härter als nötig, und das gilt auch für das Lesen. Anstatt die volle Viewport-Breite zu nutzen, versuchen Sie, die Dinge zu verengen und dies mit Ihrer größeren Schriftgröße auszugleichen, um weniger Zeichen in jeder Textzeile zu erhalten. Ihr Optimum kann variieren, obwohl viele Leute vorschlagen, irgendwo zwischen 45-75 Zeichen pro Zeile zu liegen, um die Entfernung zu begrenzen, die das Auge des Lesers von links nach rechts zurücklegen muss. Chris hat ein Bookmarklet, das beim Zählen von Zeichen hilft, aber wir haben auch die ch-Einheit in CSS, um vorhersagbare Ergebnisse zu erzielen.
• Erhöhen Sie die Zeilenhöhe: Eine Standard-Zeilenhöhe wird sich gequetscht anfühlen. Es ist lustig, aber mehr Platz zwischen den Zeilen (bis zu einem gewissen Punkt natürlich) ist weniger Arbeit für die Augen, was dem Rat für Zeichen pro Zeile widerspricht, wo wir im Allgemeinen möchten, dass die Augen eine kürzere Strecke zurücklegen. Eine Zeilenhöhe zwischen 1,2 und 1,5 scheint ein ziemlich typischer Bereich für lange Inhalte zu sein.

Wenn Sie es noch nicht gesehen haben, hat Pierrick Calvez eine großartige   "Fünf-Minuten"-Anleitung zur Typografie, die viele einfach zu erreichende Früchte wie diese enthält.

Design für zusätzlichen Freiraum

Sie sind es vielleicht gewohnt, "oberhalb der Falz" zu gestalten, wo der Immobilienwert ein wichtiges Gut ist. Das ist im Web so etwas wie Strandgrundstück, weil wir dort normalerweise hochwertige Dinge unterbringen, wie Heldenbanner, Aufrufe zum Handeln und alles andere, um etwas zu verkaufen. Oberhalb der Falz kann viel wie ein dichtes Stadtzentrum mit hohem Verkehrsaufkommen und Hochhäusern sein.

Artikel sind anders. Sie erlauben es Ihnen, sich ein wenig auszudehnen. Wenn wir die Analogie der Stadtentwicklung noch etwas weiter spinnen wollen, haben Artikel die Fläche, um sich einem Designansatz von "weniger ist mehr" zu widmen. Deshalb sind scheinbar kleine Designentscheidungen – wie Typografie – für das Gesamterlebnis so wichtig.

Schauen Sie sich das folgende Beispiel an. Die Link-Unterstreichungen haben etwas mehr Raum zum Atmen (insbesondere erscheinen sie unter den Unterlängen). Dies ist tatsächlich etwas, das Sie sitewide aktivieren können, aber besonders schön auf Artikelseiten aussieht, da es die Lesbarkeit erhöht. Das ist die Art von subtiler Designwahl, die zu zusätzlichem Freiraum beiträgt.

text-underline-position: under; ist die CSS-Zeile, die dies ermöglicht. Natürlich muss text-decoration auch auf etwas anderes als none (in diesem Fall underline) gesetzt werden.

Das obige Beispiel enthält auch text-decoration-thickness, das die Dicke von Unterstreichungen (und anderen Linientypen) ändert. Sie können diese CSS-Eigenschaft verwenden, um die Dicke einer Linie an die Größe und/oder das Gewicht einer Schrift anzupassen.

Hier ist ein vollständiges Beispiel

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

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

Aber bevor Sie zum text-decoration-Kurzbefehl greifen, hat Šime Vidas ein paar „Fanggrübchen“ bezüglich seiner Verwendung, die es wert sind, durchgesehen zu werden.

Einführung in den Inhalt

Initialen sind stilisierte Buchstaben, die am Anfang eines Dokuments oder einer Dokumentenabschnitt platziert werden können. Sie wurden einst in lateinischen Texten verwendet, werden aber heute meist aus dekorativen Gründen eingesetzt.

Ich persönlich denke, dass Initialen die Lesbarkeit beeinträchtigen. Sie können jedoch eine schöne Möglichkeit sein, einen Leser in den Hauptinhalt einzuführen, und sie sollten keine ernsthaften Barrierefreiheitsprobleme verursachen, solange Sie das Pseudo-Element ::first-letter verwenden. Es gibt andere (ältere) Methoden, die mehr HTML und CSS sowie die Verwendung von ARIA-Attributen beinhalten, damit der Inhalt barrierefrei bleibt.

Bei Verwendung von ::first-letter würde der CSS etwa so aussehen

/* 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;
}

Es wäre schön, wenn wir die Eigenschaft initial-letter verwenden könnten, aber zum Zeitpunkt des Schreibens gibt es dafür so gut wie keine Unterstützung. Wenn wir sie hätten, wäre die ganze Mathematik für Schriftgröße und Zeilenhöhe für uns berechnet worden!

CodePen hat vor einigen Jahren Leute herausgefordert, ihre Fähigkeiten im Styling von Initialen zu zeigen, und Sie können in dieser Sammlung viele tolle Beispiele sehen.

Zum Hauptinhalt springen

Screenreader ermöglichen es Nutzern, zum Hauptinhalt zu springen, solange dieser innerhalb eines <main>-Elements umschlossen ist. Diejenigen, die Websites per Tab-Taste navigieren, profitieren jedoch nicht davon. Stattdessen müssen wir einen "Zum Hauptinhalt springen"-Ankerlink erstellen. Dieser Link ist üblicherweise versteckt, wird aber sichtbar, sobald der Nutzer zum ersten Mal tabbt (d.h. bei Fokus anzeigen).

Das würde ungefähr so aussehen

<!-- 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 */
}

Es gibt natürlich auch andere Wege, dies zu tun. Hier sind ein paar tiefere Einblicke in die Erstellung von Skip-Links.

Nahtlose Bilder

Ich liebe die Illustrationen in diesem Artikel. Trotz ihrer unglaublichen Optik fordern sie nicht zu viel kognitive Aufmerksamkeit. Sie bieten kurze Momente der Freude, deuten aber auch darauf hin, dass der Artikel selbst etwas Wichtigeres zu sagen hat. Teilweise liegt das an der Verwendung von Transparenz, während rechteckige Bilder mehr negativen Raum einnehmen und daher mehr Aufmerksamkeit erfordern (was in Ordnung ist, wenn das der gewünschte Effekt ist und Bilder für die Geschichte entscheidend sind).

Es ist jedoch wichtig zu wissen, dass die Bilder nicht wirklich transparent sind, sondern stattdessen nicht-transparente JPEGs mit der gleichen Hintergrundfarbe wie der Inhalt. Ich vermute, das soll die Größe der Bilder im Vergleich zu PNGs, die Transparenz unterstützen, kleiner halten.

Der Nachteil des "Fakens" eines transparenten Hintergrunds wie diesem ist, dass er zusätzliche Tricks (und Wartung) erfordern würde, um eine Dark-Mode-Benutzeroberfläche zu unterstützen, wenn Ihre Website eine anbietet. Wenn die Illustrationen ziemlich flach und einfach sind, dann ist SVG vielleicht die bessere Wahl, da es klein, skalierbar und in der Lage ist, sich in jeden Hintergrund einzufügen.

Aber wenn Sie sich auf Rasterbilder beschränken müssen und lieber mit PNG-Dateien für Transparenz arbeiten möchten, sollten Sie sich mit responsiven Bildern und dem Attribut loading="lazy" für schnellere Ladezeiten beschäftigen.

Fokus auf Typografie und Semantik legen

Sie haben heutzutage vielleicht wenig Einfluss darauf, wie oder wo jemand Inhalte im Web liest. Ob der Benutzer sie in einem RSS-Feed erhält, per E-Mail zugestellt bekommt, von einem Kollegen kopiert und eingefügt sieht, auf einer geklauten Seite findet oder was auch immer, Ihr Inhalt sieht vielleicht anders aus, als Sie es bevorzugen. Sie könnten den Artikel gestalten, den Sie für den schönsten im ganzen Land halten, und der Benutzer könnte trotzdem auf die Reader-Modus-Schaltfläche klicken, zu Ihrem Leidwesen.

Das ist in Ordnung! Die Auffindbarkeit von Inhalten ist genauso wichtig wie deren Gestaltung, und viele Nutzer haben ihre eigenen Wege, Inhalte zu entdecken und Präferenzen dafür, was ein gutes Leseerlebnis ausmacht.

Aber es gibt Gründe, warum jemand einen Reader-Modus wünscht. Zum einen ist es wie "keine CSS sehen" überhaupt. Damit meine ich Safaris Reader Mode oder Brave SpeedReader, die maschinelles Lernen zur Erkennung von Artikeln verwenden. Es werden keine CSS, JavaScript oder Nicht-Artikel-Bilder geladen oder ausgeführt, was die Leistung steigert und auch Anzeigen und Tracking blockiert.

Diese Art von "roher Minimalismus" legt den Fokus auf den Inhalt und nicht auf die Stile. Sie möchten vielleicht tatsächlich die meinungsstarken Lesestile eines Browsers gerade zu diesem Zweck nutzen.

Der Weg dorthin ist nicht die Verwendung von CSS, sondern die genauere Beachtung Ihres HTML. Reader-Modi funktionieren am besten mit Markup, das einfache, semantische, artikelbezogene HTML verwendet. Sie müssen mehr tun, als nur <article>-Tags um den Artikel zu legen, um das Beste daraus zu machen.

Sie werden vielleicht feststellen, dass ein minimalistisches Design, das die Lesbarkeit über Eleganz stellt, tatsächlich eine gute Strategie für das Design Ihrer Website ist. Ich würde dringend empfehlen, Robins Beitrag zum "kleinsten CSS" für eine solide Leseerfahrung zu lesen.

Zusammenfassung von langen Artikeln!

Ich habe vieles von dem geteilt, was meiner Meinung nach ein großartiges Leseerlebnis für lange Artikel im Web ausmacht. Aber Sehen ist Glauben, und ich habe eine Reihe von Beispielen zusammengestellt, die das von uns Besprochene veranschaulichen.