Das Entwerfen eines schönen „Artikels“ erfordert unzählige Überlegungen. Anders als beispielsweise bei einer Homepage geht es bei einem Longform-Artikel weniger um die Gestaltung einer Oberfläche als vielmehr um die Gestaltung von Texten, die ein entspanntes und angenehmes Leseerlebnis schaffen.
Das liegt daran, dass sich Artikel mit Inhalten in Langform befassen, die wiederum tendenziell durch eine „Time on Page“-Interaktion mit Benutzern bewertet werden. Wir möchten, dass jemand eine vollständige Erzählung liest. Es gibt einen natürlichen Abstand zwischen der Zeit, in der jemand auf einem Artikel landet und alle Wörter liest. Und hoffentlich ist dieser Raum immersiv genug, um nicht nur die Benutzer zu halten, sondern auch Gedanken, Ideen und möglicherweise Handlungen zu provozieren. Zumindest hoffe ich das, da ich Ihre Aufmerksamkeit habe und Sie sich durch den Artikel, den Sie gerade lesen, durcharbeiten.
Es gibt ein Gleichgewicht. Einerseits hören wir das „Niemand liest das Internet.“ Andererseits erfordert ein Artikel in Langform sorgfältige Aufmerksamkeit. Angesichts des aktuellen Stellenwerts von Content Marketing und der wachsenden Ungeduld der Nutzer sollte es ein zentrales Anliegen sein, die Leser so lange wie möglich zu fesseln. Werfen wir einen Blick auf einige Best Practices und Beispiele für unglaubliche Artikelseiten, um eine bessere Vorstellung davon zu bekommen, was ein optisch ansprechendes Leseerlebnis für lange Artikel ausmacht (ohne die Benutzererfahrung zu opfern) und wie wir die Effekte replizieren können.
Schnelle Gewinne
Lassen Sie mich kurz auflisten, 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
16pxist die Standardeinstellung und in vielen Designs völlig in Ordnung, aber eine größere Schriftgröße ist einladend, da sie impliziert, dass sich der Benutzer zurücklehnen und es sich bequem machen kann, ohne sich mit dem Bildschirm vor dem Gesicht zum Lesen nach vorne neigen zu müssen. - Zeichen pro Zeile anstreben: Sehr wenige Leute, die ich kenne, arbeiten gerne härter als nötig, und das gilt auch für das Lesen. Anstatt die volle Ansichtsfensterbreite zu verwenden, versuchen Sie, die Dinge einzugrenzen und dies mit Ihrer größeren Schriftgröße auszugleichen, um dies zu erreichen Weniger Zeichen in jeder Textzeile. Ihr optimaler Punkt kann variieren, obwohl viele Leute zwischen 45 und 75 Zeichen pro Zeile vorschlagen, um zu begrenzen, wie weit das Auge des Lesers arbeiten muss, um von links nach rechts zu gehen. Chris hat eine Bookmarklet zum Zählen von Zeichen, aber wir haben auch die
chEinheit in CSS, um vorhersagbare Ergebnisse zu erhalten. - Erhöhen Sie die Zeilenhöhe: Eine Standardzeilenhöhe wird sich zerschlagen anfühlen. Es ist lustig, aber mehr Abstand zwischen den Zeilen (natürlich bis zu einem gewissen Punkt) ist weniger Arbeit für die Augen, was im Gegensatz zu dem Ratschlag steht, Zeichen pro Zeile zu verwenden, bei dem wir im Allgemeinen möchten, dass die Augen eine kürzere Strecke zurücklegen. Eine Zeilenhöhe zwischen
1.2und1.5scheint ein ziemlich typischer Bereich für Langform-Inhalte zu sein.
Wenn Sie es noch nicht gesehen haben, Pierrick Calvez hat eine große "fünf Minuten" Anleitung zur Typografie das packt einen Haufen niedrig hängender Früchte wie diese.
Design für zusätzlichen Raum zum Atmen
Sie sind es vielleicht gewohnt, „above the fold“ zu entwerfen, wo Immobilien ein erstklassiges Gut sind. Das ist so etwas wie ein Strandgrundstück in der Webwelt, weil wir es gewohnt sind, hochwertige Dinge wie Heldenbanner, Handlungsaufforderungen und alles andere einzupacken, um etwas zu verkaufen. Above the fold kann einer dichten städtischen Innenstadt mit hohem Verkehrsaufkommen und Hochhäusern ähneln.
Artikel sind unterschiedlich. Sie ermöglichen es Ihnen, sich ein wenig auszustrecken. Wenn wir die Analogie zur Stadtentwicklung ein wenig weiterführen wollen, haben Artikel die Möglichkeit, sich einem „Weniger ist mehr“-Designansatz zuzuwenden. Das macht scheinbar kleine Designentscheidungen – wie Schrift – so wichtig für das Gesamterlebnis.
Sehen Sie sich das Beispiel unten an. Die Link-Unterstreichungen haben etwas mehr Raum zum Atmen (insbesondere erscheinen sie unter den Unterlängen). Dies ist eigentlich etwas, das Sie auf der gesamten Website aktivieren können, sieht aber auf Artikelseiten besonders gut aus, da es die Lesbarkeit erhöht. Das ist die Art von subtiler Designwahl, die zu zusätzlichem Raum zum Atmen beiträgt.
text-underline-position: under; ist die CSS-Linie, die diese Arbeit ermöglicht. Natürlich, text-decoration muss auf etwas anderes als eingestellt werden none (underline auch in diesem Fall).
Das obige Beispiel ist ebenfalls enthalten text-decoration-thickness, wodurch die Dicke von Unterstreichungen (und anderen Linientypen) geändert wird. Sie können diese CSS-Eigenschaft verwenden, um die Stärke einer Linie an die Größe und/oder Stärke einer Schriftart 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 nach dem greifen text-decoration Kurzschrift, Šime Vidas hat ein paar "Fallstricke" wenn es um die Verwendung geht, die es wert sind, überprüft zu werden.
Überleitung in den Inhalt
Kappen fallen lassen sind stilisierte Buchstaben, die an den Anfang eines Dokuments oder Dokumentabschnitts gestellt werden können. Sie wurden einst in lateinischen Texten verwendet, aber heute werden sie hauptsächlich aus dekorativen Gründen verwendet.
Ich persönlich finde, dass Initialen die Lesbarkeit behindern. Sie können jedoch eine gute Möglichkeit sein, einen Leser in den Hauptinhalt „zu führen“, und sie sollten keine ernsthaften Probleme mit der Barrierefreiheit aufwerfen, solange Sie die verwenden ::first-letter Pseudo-Element. Es gibt andere (älter) Methoden die mehr HTML und CSS sowie die Verwendung von ARIA-Attributen beinhalten, damit der Inhalt zugänglich bleibt.
Die richtigen ::first-letter, würde das CSS in 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 sicher schön, wenn wir das nutzen könnten initial-letter -Eigenschaft, aber zu dem Zeitpunkt, an dem ich dies schreibe, gibt es so gut wie keine Unterstützung dafür. Wenn wir es hätten, würde all diese Mathematik für Schriftgröße und Zeilenhöhe für uns berechnet!
CodePen forderte die Leute vor einigen Jahren heraus, ihre Drop-Cap-Styling-Fähigkeiten zu zeigen, und Sie können eine ganze Reihe netter Beispiele davon sehen diese Sammlung.
Direkt zum Inhalt
Screenreader ermöglichen es Benutzern, zum Hauptinhalt zu springen, solange er in ein eingeschlossen wird <main> Element. Wer jedoch per Tab auf Webseiten navigiert, profitiert davon nicht. Stattdessen müssen wir einen Ankerlink „Zum Hauptinhalt springen“ erstellen. Dieser Link ist normalerweise verborgen, wird aber angezeigt, sobald der Benutzer seinen ersten Tab erstellt (dh im Fokus anzeigen).
Es 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 Möglichkeiten, es anzugehen. Hier sind ein paar tiefere Tauchgänge zum Erstellen von Skip-Links.
Nahtlose Grafik
Ich liebe die Illustrationen in Dieser Artikel. Obwohl sie unglaublich aussehen, erfordern sie nicht zu viel kognitive Aufmerksamkeit. Sie leiten kurze Glücksmomente ein, suggerieren aber auch, dass der Artikel selbst etwas Wichtigeres zu sagen hat. Dies ist teilweise auf die Verwendung von Transparenz zurückzuführen, während rechteckige Bilder mehr negativen Raum einnehmen und daher mehr Aufmerksamkeit erfordern (was in Ordnung ist, wenn dies der gewünschte Effekt ist und Bilder für die Geschichte entscheidend sind).
Es ist jedoch wichtig zu wissen, dass die Bilder überhaupt nicht transparent sind, sondern nicht transparente JPEGs mit derselben Hintergrundfarbe wie der Inhalt. Ich nehme an, dass dies dazu dient, die Größe der Bilder im Vergleich zu PNGs, die Transparenz unterstützen, kleiner zu halten.
Der Nachteil des „Fälschens“ eines transparenten Hintergrunds wie diesem besteht darin, dass zusätzliche Tricks (und Wartungsarbeiten) erforderlich wären, um a Dunkelmodus-Benutzeroberfläche wenn Ihre Website zufällig eine anbietet. Wenn die Illustrationen ziemlich flach und einfach sind, dann könnte SVG stattdessen der richtige Weg sein, da es klein, skalierbar und in der Lage ist, sich in jeden Hintergrund einzufügen, auf dem es sich befindet.
Wenn Sie jedoch an die Verwendung von Rasterbildern gebunden sind und aus Transparenzgründen lieber mit PNG-Dateien arbeiten möchten, sollten Sie sich mit der Verwendung befassen ansprechende Bilder und für loading="lazy" Attribut für schnellere Ladezeiten.
Legen Sie den Fokus auf Typ und Semantik
Sie haben vielleicht sehr wenig Mitspracherecht wie or woher jemand liest heutzutage Inhalte im Web. Unabhängig davon, ob der Benutzer ihn in einem RSS-Feed erhält, per E-Mail zugestellt bekommt, sieht, wie er von einem Kollegen kopiert und eingefügt wird, ob er ihn auf einer gekratzten Website findet oder was auch immer, Ihr Inhalt könnte aussehen anders als Sie bevorzugen. Sie könnten das entwerfen, was Ihrer Meinung nach der schönste Artikel im ganzen Land ist, und der Benutzer könnte es immer noch tun zerschmettere die Lesemodus-Taste zu deiner Bestürzung.
Das ist okay! Die Auffindbarkeit von Inhalten ist genauso wichtig wie ihr Design, und viele Benutzer haben ihre eigenen Möglichkeiten, Inhalte zu entdecken, und Vorlieben, was ein gutes Leseerlebnis ausmacht.
Aber es gibt Gründe, warum jemand einen Lesemodus haben möchte. Zum einen ist es so, als würde man überhaupt kein CSS sehen. Damit meine ich Lesemodus von Safari or Mutiger SpeedReader, die maschinelles Lernen verwenden, um Artikel zu erkennen. Es gibt kein Abrufen oder Ausführen von CSS, JavaScript oder Nicht-Artikelbildern, was die Leistung steigert und auch Anzeigen und Tracking blockiert.
Diese Art von „roh Minimalismus" legt den Fokus auf den Inhalt und nicht auf die Stile. Sie könnten also tatsächlich wollen den rechthaberischen Lesestil eines Browsers speziell für diesen Zweck zu übernehmen.
Der Weg, dies zu tun, besteht nicht darin, CSS zu verwenden, sondern indem Sie Ihrem HTML mehr Aufmerksamkeit schenken. Reader-Modi funktionieren am besten mit Markup, das einfaches, semantisches, artikelbezogenes HTML verwendet. Du musst mehr tun, als nur zu schlagen Tags um den Artikel herum, um das Beste daraus zu machen.
Vielleicht stellen Sie einfach fest, dass ein minimales Design, das die Lesbarkeit über die Geschmeidigkeit stellt, tatsächlich eine gute Strategie für das Design Ihrer Website ist. Ich würde dringend empfehlen, Robins Post auf dem zu lesen „am kleinsten CSS“ für ein solides Leseerlebnis.
Zusammenfassung von Langformartikeln!
Ich habe viel 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 zeigen, was wir behandelt haben.
-
Polygon verwendet ein starkes, provokantes Bild, um die Leser in den Inhalt einzubinden. Beachten Sie, wie sich diese Seite durch die Initiale, die größere Schriftgröße und die erhöhte Zeilenhöhe wie eine Seite anfühlt, auf der Sie sich zurücklehnen und entspannen können. -
Die TASTE-Website verwendet transparente Bilder, die sich in die Hintergrundfarbe des Inhalts einfügen. Es gibt viel Platz zwischen den Elementen und kräftige Akzente – wie dicke Ränder und eine schwere Initiale – ziehen den Blick des Lesers auf der Seite nach unten. -
The Outline ist ein Paradebeispiel für Minimalismus. Beachten Sie, wie etwas so Subtiles wie eine verschnörkelte horizontale Linie eine auffällige Verschönerung sein kann, wenn weniger Dinge um Aufmerksamkeit konkurrieren. -
Der brutalistische Stil des Dropbox-Blogs ist wahrscheinlich umstritten. Die Farben, Schriftarten und die Raumnutzung sind überall und der Inhalt, der nach rechts schwebt, fühlt sich einfach ungewohnt an. Aber verstößt es gegen Designregeln? Nö. Mit der Zeit könnte ich daran Gefallen finden, vor allem in einer milderen Form. -
Das Design von Urban Beardsman ist extrem geradlinig. Als jemand, der Konzentrationsschwierigkeiten hat und leicht von Seitenleisten, CTA-Boxen in Artikeln und sogar Blockzitaten abgelenkt wird, genieße ich es sehr, wie einfach es ist, diesen Blog wie ein Buch zu lesen. Das perfekte Beispiel für „Weniger ist mehr“. -
Der GoSquared-Blog ist nicht einzigartig, aber er hat es geschafft, so ziemlich alle Dinge einzubeziehen, die wir in dem Artikel besprochen haben – ein besseres Unterstreichungsdesign, nahtlose Bilder und eine sehr gut lesbare Typografie. Ziemlich beeindruckend. -
Der Blog Smart Passive Income beweist, wie weit man allein durch die Wahl einer gut lesbaren Schriftart und die Verwendung lesbarer Schriftgrößen, Zeilenhöhen, Buchstabenabstände und Absatzabstände kommen kann. -
Rezeptseiten sind durchweg beschissen, aber nicht Little Fat Boy. Der Mangel an Einheitlichkeit auf der gesamten Seite macht es einfach, zu verschiedenen Teilen des Rezepts zu springen, ohne sich zu verirren. Außerdem sind die Zutaten für Ihre Bequemlichkeit oben rechts angeheftet.
