Reader Mode: Der Knopf, der alles schlägt

Als junger Nerd liebte ich es, in digitale Welten einzutauchen und die Regeln zu lernen, die jemand anderes für mich geschaffen hatte (absichtlich oder nicht). Aber je älter und grantiger ich werde, desto mehr verliere ich die Geduld, wenn ich mich durch diese „entzückenden“ Erlebnisse navigiere.

Diese Faszination war großartig für meine spätere Karriere als Designer, aber leider war es auch wie jemandem Kerning beizubringen – sobald man weiß, wie man eine schlechte Benutzererfahrung quantifiziert, gibt es kein Zurück mehr.

Heutzutage bin ich ein ungeduldiger Griesgram, der keine Arbeit mit nach Hause nehmen will. Ich möchte einfach rein, holen, was ich brauche, und wieder raus. Wenn ich überhaupt irgendeinen Genuss empfinde, geht er an mir vorbei, weil ich eine so mühelose und ärgerfreie Zeit hatte, dass sie einfach nicht auffällt.

Eine der Funktionen, zu der ich immer wieder greife, ist der Reader Mode von Safari. Ich lese viele Nachrichten, und damit kommt auch eine Menge Mist. Ich tippe jetzt fast reflexartig auf das kryptische kleine Symbol, zuversichtlich, dass ich in ein Land transportiert werde, in dem ich mich auf das konzentrieren kann, was mir am wichtigsten ist: den Inhalt.

Das Tippen auf diesen Knopf transportiert mich in ein Land, das frei ist von Newsletter-Anmelde-Modals, Umfragen, Pop-ups, Pop-unders, blinkenden Werbebannern, automatisch abspielenden Videos, App-Installationsaufforderungen, Breaking-News-Alarmen, passiv-aggressiven Interstitials und gefälschten Benachrichtigungsberechtigungsbannern. Er durchschneidet das Unerwünschte und Unnötige mit Leichtigkeit; Alexander der Große für den Gordischen Knoten, der schlechtes User Interface Design darstellt.

Firefox bietet auch diesen Lesemodus. Genauso wie Edge. Ich benutze ihn auf meinem Laptop von Tag zu Tag immer mehr – besonders zum Lesen von langen Artikeln, wie diesem hier. Ich wäre sehr überrascht, wenn Chrome einen nativ einführen würde, da Google letztendlich im Werbegeschäft tätig ist.

Ich werde nicht darüber sprechen, wie man Inhalte am besten für den Reader Mode aufbereitet. Mandy Michael hat dies bereits in ihrem Artikel Building websites for Safari Reader Mode and other reading apps behandelt. Sie ist großartig und es ist ein Muss, diesen Artikel zu lesen.

Der Aufbau mit zugänglichen HTML-Standards ist keine Sackgasse. Ganz im Gegenteil. Wenn Sie sich die Mühe machen, Ihre Erlebnisse von Anfang an mit Blick auf Semantik zu gestalten, können sich Ihre Inhalte ohne großen Aufwand an spezialisierte Lesemodi anpassen, sowie an alles, was die Zukunft bringt. Der heutige Reader Mode könnte der intelligente Badezimmerspiegel von morgen sein.

Der Aufwand ist ein wichtiger Punkt: Gutes Design bedeutet nicht, jemanden über Ihren sorgfältig gepflegten Rasen auf einem Drahtseilakt gehen zu lassen. Es ist auch keine Schachtel, die man dem Benutzer lässig zuwirft, in der Hoffnung, dass er sie aufschließt, um einen versteckten Schatz zu enthüllen. Gutes Design bedeutet, die harte Arbeit zu leisten, um die unterschiedlichen Wege zu berücksichtigen, auf denen Menschen eine Lösung für ein identifiziertes Problem finden.

Beim Lesen von Artikeln ist das Kernproblem, meine Unwissenheit über ein Thema in Verständnis zu verwandeln (das Finanzierungsmodell dafür ist eine ganz andere komplizierte Angelegenheit). Je mehr Hindernisse Sie mir auf dem Weg zu diesem Ziel in den Weg legen, desto eher neige ich dazu, wegzugehen und mein Verständnis woanders zu suchen – alles, woran ich mich erinnern werde, ist, wie schlecht die Zeit war, als ich versuchte, auf Ihre Inhalte zuzugreifen. Was ist der Wert eines Anzeigen-Impressions, wenn er letztendlich dazu führt, dass dieser Benutzer nie wieder zurückkehrt?

Aber dies ist keine Website über digitale Medienstrategie, und auch keine über Benutzerkonversion. Dies ist eine Website über CSS und Frontend-Entwicklung. Wir werden darüber sprechen, wie wir Leute wie mich davon abhalten können, auf diesen Knopf zu drücken, indem wir uns auf diese nette Programmiersprache verlassen, die uns das W3C so weise gegeben hat. Denn wenn Sie das nicht tun, wird all das andere Zeug – Ihre Newsletter-Angebote, Ihre Kommentare, Ihre verwandten Artikel, Ihr Engagement – weggeschnitten.

Inklusivität

Was Sie zuerst tun sollten, ist, ein weites Netz auszuwerfen. Je mehr Menschen Sie von Anfang an proaktiv unterbringen können, desto mehr Menschen verstoßen Sie nicht unbeabsichtigt. Unsere Designentscheidungen sollten unsichtbar sein – wir versuchen nicht zu sagen: „Das ist für dich.“ Das sollte selbsterklärend sein. Was wir vermeiden wollen, sind Szenarien, in denen jemand auf etwas stößt, das kommuniziert: „Das ist für jemand anderen.“

Es ist nicht zu schwierig, vorausgesetzt, Sie wissen, worauf Sie achten müssen. Carie Fisher fasst das meiste davon in ihrem brillanten Beitrag Designing Accessible Content: Typography, Font Styling, and Structure zusammen.

Priorität

Ein grundlegender Absatzstil ist die Quelle, aus der alle Ihre anderen Typografie-Entscheidungen fließen sollten. Es ist wahrscheinlich die häufigste und am häufigsten verwendete Inhaltsart, die eine Website hat, daher ist es wichtig, sie mit der Sorgfalt und dem Respekt zu behandeln, die sie verdient. Das Web ist Typografie, schließlich.

Heydon Pickering schrieb bereits 2011 über die Gestaltung von Absätzen in seinem Beitrag The Perfect Paragraph. Und hier ist die Sache: acht Jahre später ist das alles immer noch solider Rat (Mensch, ich mache das schon eine Weile). Wenn Sie Designentscheidungen treffen, die *mit* dem Fluss der Webplattform arbeiten, gewinnen Sie die Zuversicht, dass Sie belastbare, robuste und zugängliche Lösungen schaffen, die Bestand haben.

Das Coole daran ist, dass es Zeit freimacht, um andere Dinge zu tun, wie über Gender Bias und die Unterbewertung von HTML und CSS zu lesen. Wenn überhaupt, tun Sie es für mich. Ich bin ehrlich gesagt nicht sicher, ob ich noch einen Fall von 2.000 Zeilen JavaScript verkraften kann, die verwendet werden, um position: absolute; nachzubilden.

Umstände

Form

Obwohl Responsive Design inzwischen fast ein Jahrzehnt alt ist(!), scheinen wir immer noch viel von der Weisheit zu ignorieren, die Ethan Marcotte uns so nett kostenlos lehrt. Er ist ein kluger Kerl, Sie sollten darauf achten, was er zu sagen hat.

Nach einem vollständigen Fehlen von Breakpoints ist vielleicht der größte Verstoß, dem ich in Bezug auf Responsive Design immer noch begegne, die Annahme, dass ein kleiner Viewport winzige Schrift bedeutet. Typischerweise ist das Gegenteil der Fall. Kleine Geräte werden zum Tragen oder Mitnehmen hergestellt, was bedeutet, dass wir sie im physischen Raum bewegen, um sie in eine bequeme Leseposition zu bringen. Dies ist das Gegenteil von einem größeren, stationäreren Gerät wie einem Monitor, bei dem wir stattdessen unseren Körper bewegen, um ihn anzupassen.

Eine bequeme Leseposition bedeutet, dass man jemanden nicht zwingen muss, ein Handy zwei Zentimeter vom Gesicht entfernt zu halten. Ergonomie wird sich wahrscheinlich nicht ändern, aber Geräte werden es tun. Deshalb sollten Sie Ihre Breakpoint-Namen abstrakt gestalten. Ich persönlich mag Namen, die die Benutzerfreundlichkeit im Auge behalten, also etwas wie „Handgelenk, Handfläche, Schoß, Schreibtisch, Wand“. Das hilft, die Umstände des Benutzers im Vordergrund zu halten und bewegt Sie weg davon, nur bestimmte Arten von Inhalten als auf bestimmten Arten von Geräten lebensfähig zu betrachten.

Diese ergonomisch abgeleiteten Designs können mit Hilfe von Leuten wie Rachel Andrew erreicht werden, deren eingehende Erforschung von CSS Grid uns hilft, die Kraft hinter einem echten CSS-Layoutsystem zu verstehen. Sass-Experten wie Miriam Suzanne lehren uns dann, wie man True verwendet, um diese Layouts zu kodifizieren und zuverlässig in unsere größeren Sass-Systeme zu integrieren.

Sie wollen auch fehlerhafte Geräteerkennungsansätze vermeiden oder grobe Annahmen über die Umstände und Fähigkeiten eines Benutzers treffen. Lassen Sie mich einfach diese Schriftgröße vergrößern und verkleinern. Reader Mode erlaubt mir das, also werde ich es sowieso auf die eine oder andere Weise schaffen.

Verbindung

Das andere, worüber Sie nachdenken müssen, ist, wie dieses ideale Absatzdesign tatsächlich auf ein Gerät geliefert wird. Ein großer Teil davon beinhaltet das Laden unserer Schriftarten und die Sicherstellung, dass der Ladevorgang die Benutzererfahrung priorisiert.

Text

Text lädt schnell; viel schneller als andere exotische Inhaltstypen. Browser rendern ihn gerne, da er historisch gesehen der wichtigste Teil der Nutzlast ist. Das bedeutet, dass der Reader Mode-Button viel schneller erscheint als das ablenkende, automatisch abspielende Video von sprechenden Köpfen, das so durchdacht in die untere rechte Ecke meines Viewports gestopft wird.

Und was ist, wenn wir eine langsame, intermittierende und/oder begrenzte Verbindung haben? Spitzen-MacBooks müssen immer noch Hotel-WLAN nutzen, genau wie alle anderen auch.

Sie möchten verhindern, dass die Seite beim Laden unserer Absatzschrift springt. Dies verhindert die schreckliche Erfahrung, dass ich scrollen muss, um meine Position wiederzufinden, während sich Dinge verschieben. Es verhindert auch, dass ich mich verklicke und weg von dem, was ich lesen möchte, gebracht werde, weil ich den Mut hatte, mit der Seite zu interagieren, bevor die Bitcoin-Miner bereitgestellt werden (zum Glück können uns gute Leute wie Laura Kalbag dabei helfen).

Die Versuchung, auf diesen Reader Mode-Knopf zu drücken, ist groß, denn wenn ich den Haupttext der Seite sehe, weiß ich, dass ich all diese potenziellen Probleme einfach und zuverlässig vermeiden kann.

Helen V. Holmes schrieb Type is Your Right!, einen wunderschönen Artikel, der mühelos typografische Geschichte, Fähigkeiten und Leistung miteinander verbindet. Bemerkenswerterweise diskutiert sie, wie man den Flash of Invisible Text (FOIT) und Flash of Unstyled Text (FOUT) verwaltet, um alle oben genannten Probleme bestmöglich zu bewältigen. Als Reaktion darauf erstellte Monica Dinculescu Font style matcher, ein fantastisches Werkzeug, mit dem Sie Schriftarten biegen, strecken, quetschen, stauchen und foltern können, was Ihren steifen Typografieprofessor zum Ohnmächtigen bringen würde, alles im Dienste der Vermeidung von Layout-Ruckeln.

Bilder

Sie können (und sollten) alle möglichen cleveren Optimierungen vornehmen, um sicherzustellen, dass wir unsere Bilder so effizient wie möglich liefern. Aber was passiert, während ich darauf warte, dass diese Bilder erscheinen? Was, wenn sie nie auftauchen?

Da Sie ein verantwortungsbewusster, inklusiver Webprofi sind, haben Sie bereits sichergestellt, dass Sie alternative Textbeschreibungen für unsere Bildinhalte bereitstellen. Ire Aderinokun lehrt uns, dass man diesen Schritt noch weiter gehen und kaputte Bilder gestalten kann. Jetzt sieht auch der Inhalt, der nicht wie beabsichtigt funktioniert, gut aus. Kein sprödes, überladenes JavaScript hier – nur gutes, altmodisches progressives Enhancement.

Die andere Art von Bildern, die Sie berücksichtigen sollten, sind Icons. Es gibt viele Gründe, keine Icon Fonts zu verwenden. Ein weiterer Grund, der zur Pile hinzugefügt werden kann: Icon Fonts halten im Reader Mode möglicherweise nicht stand, da sie aus Textglyphen aufgebaut sind. Wenn Reader Mode über eine Seite geht, kann er die Glyphe konvertieren, um die von Ihnen angegebene Schriftart zu verwenden. Dies könnte zu einer katastrophalen Erfahrung führen, insbesondere wenn das Symbol zur Kommunikation kritischer Funktionen verwendet wird (z. B. „Drücken Sie die Home-Taste (☒), um zum Hauptmenü zurückzukehren.“).

Um dieses Problem zu vermeiden, lehrt uns Sara Soueidan, wie man diese Icon Fonts in SVG konvertiert. Aber wissen Sie was? Sie ist viel mehr als nur eine SVG-Expertin. Sie ist eine unglaubliche UX-Entwicklerin, und Sie täten gut daran, zu lesen, was sie geschrieben hat. Ich persönlich habe viel gelernt.

Kontrolle

Um mein Leseerlebnis so angenehm wie möglich zu gestalten, erlaubt mir der Reader Mode, Dinge wie die Schriftart, die Text- und Hintergrundfarben, die Schriftgröße und den Zeilenabstand sowie die Anzahl der Wörter pro Zeile anzupassen. Das ist großartig. Ich wechsle häufig zwischen hellen und dunklen Hintergründen, je nach Tageszeit.

Ich trage auch eine Brille, und ich weiß, dass meine Sehkraft mit zunehmendem Alter schlechter wird. Dank Jennifer Aldrichs Schreibens weiß ich, dass das die Norm ist. Schließlich sind wir alle nur vorübergehend befähigt. Ich brauche vielleicht eines Tages auch etwas wie den Windows High Contrast Mode. Dank Amelia Bellamy-Royds weiß ich jetzt, wie ich meine Inhalte so gut wie möglich darstellen kann, wenn sie in diesem Modus betrachtet werden.

Das Web ist flexibel. An ihm zu arbeiten bedeutet, sein Ego zu überwinden und loszulassen. Das bedeutet zu akzeptieren, dass das Medium nie pixelperfekt sein wird. Es bedeutet, Technologien wie relative Einheiten zu umarmen und, was noch wichtiger ist, Philosophien wie Intrinsic Web Design. Das wird uns von Jen Simmons gebracht, einer unermüdlichen und leidenschaftlichen Fürsprecherin für Webstandards.

---

Ich würde gerne Ihre Website lesen. Ich würde gerne, dass Ihre harmonische Typografie mich leise in einen Flow-Zustand versetzt und mich vergessen lässt, dass ich überhaupt Ihre Seite durchstöbere.