Reader-Modus: Die Taste zu Schlagen

0
12

Als junger nerd, ich liebte es, mich eintauchen in digitale Welten, lernen die ins und outs der Regeln, die jemand anderes hatte, für mich geschaffen (absichtlich oder nicht). Aber die älteren und crankier ich werde, desto mehr finde ich mich selbst verlieren Geduld bei der Navigation durch diese “reizende” Erfahrungen.

Diese Faszination war für meine eventuellen Karriere als designer, aber leider war es auch wie Unterricht jemand kerning—wenn Sie lernen, zu quantifizieren, wie eine schlechte user experience, Sie können nicht zurück gehen.

In diesen Tagen, ich bin ein ungeduldiger grump, die nicht wollen, nehmen Arbeit mit nach Hause. Ich möchte nur zu bekommen, bekommen, was ich brauche, und raus. Wenn es keine Freude erlebe ich, es ist verloren auf mich, denn ich hatte so eine mühelose und ärger-freie Zeit, dass es einfach nicht auffallen.

Eine der Funktionen, die ich finde mich zu drehen, immer und immer wieder ist der Safari Reader-Modus. Ich lese viele news, und damit kommt eine Menge bullshit. Ich habe jetzt Tippen der kryptischen Zeichen fast reflexartig, zuversichtlich, dass ich werde transportiert, um in ein land, wo kann ich das konzentrieren, was am wichtigsten für mich: Inhalten.

Tippen Sie auf diese Taste versetzt mich in ein land frei von newsletter signup modals, Umfragen, pop-ups, pop-unders, blinkende Werbebanner, automatisch-Abspielen von video -, app-install, breaking news-Warnungen, passiv-aggressive interstitials, und faux notification-Berechtigung-Banner. Es die Scheiben durch die unerwünschte und unnötige mit Leichtigkeit; der Alexander der Große den gordischen Knoten, der Armen user-interface-design.

Firefox bietet auch diese Lesen-Modus. So auch Edge. Ich finde mich mehr und mehr auf meinem laptop mit jedem Tag—vor allem zum Lesen long-form-Artikel, wie dieses Stück. Ich wäre sehr überrascht, zu sehen, Chrom-Institut ein nativ, Google ist schließlich in der Werbebranche.

Ich werde nicht darüber reden, wie man am besten Handwerk Ihre Inhalte für den Reader-Modus. Mandy Michael bereits bedeckt in Ihrem Artikel, der Erstellung einer Website für den Safari-Reader-Modus und andere lese-apps. Sie ist groß, und es ist ein must-read für Stück.

Gebäude mit barrierefreien HTML-standards ist kein dead-end-skill. Weit von es. Wenn Sie sich die Mühe Handwerk-Ihre Erfahrungen mit einem Geist zu Semantik von Anfang an Ihre Inhalte angepasst werden können, um spezielle lese-Modi, sowie, was die Zukunft bringt mit wenig bis kein zusätzlicher Aufwand. Die heutigen Reader Mode von morgen sein könnte, ist smart Bad Spiegel.

Die Ausgaben der Anstrengung ist ein wichtiger Punkt: Gutes design ist nicht etwa zwingt jemanden, eine Gratwanderung über Ihre sorgfältig gepflegten Rasen. Noch ist es ein puzzle-box beiläufig warf dem Benutzer, in der Hoffnung, Sie werden es entsperren und enthüllt einen verborgenen Schatz. Gutes design ist über die harte Arbeit, um Platz für die verschiedenen Möglichkeiten, die Menschen den Zugang eine Lösung für ein problem identifiziert.

Für das Lesen von Artikeln, das zentrale problem ist, drehen meine Unwissenheit über ein Thema, in das Verständnis (das Finanzierungsmodell für diese ist eine ganz andere komplizierte Anliegen). Je mehr Hindernisse Sie werfen mir in den Weg, dieses Ziel zu erreichen, desto mehr bin ich geneigt, zu verlassen und mein Verständnis woanders, ich werde nicht vergessen, wie schlecht eine Zeit, die ich hatte, während Sie versuchen, Zugriff auf Ihren Inhalt. Was ist der Wert einer ad impression, wenn es letztlich dazu führt, dass Benutzer nie wieder?

Aber dies ist nicht eine website über digital-media-Strategie, noch gibt es eine über Benutzer-Konvertierung. Dies ist eine Seite über CSS und front-end-Entwicklung. Was wir besprechen, wie man Leute wie mich aus Sie auf diesen button, indem Sie sich auf diese raffinierte programming language das W3C so Weise uns gegeben hat. Denn wenn Sie nicht, all die anderen Sachen—Ihre newsletter-Anmeldung-Boxen, Ihre Kommentare, Ihre verwandten Artikeln, Ihre engagement—wird Weg geschnitten.

Inklusivität

Was wollen Sie zuerst tun ist, werfen ein weites Netz. Je mehr Menschen Sie können proaktiv aufnehmen von Anfang an, mehr Leute, die Sie nicht ungewollt verfremden. Unsere design-Entscheidungen sollten nicht sichtbar sein—wir versuchen nicht, zu sagen, “das ist für Sie.” Das sollte eine Selbstverständlichkeit sein. Was wir versuchen zu vermeiden, sind Szenarien, in denen jemand auf etwas, das kommuniziert, “das ist für jemand anderen.”

Es ist nicht allzu schwierig, vorausgesetzt, Sie wissen, was zu suchen. Carie Fisher Umrisse der Großteil davon in Ihrem Brillanten Beitrag, der Gestaltung Barrierefreier Inhalte: Typografie, Font-Design und Struktur.

Priorität

Ein einfacher Absatz-Stil ist der Ursprung, aus dem alle Ihre anderen Entscheidungen geben soll fließen. Es ist wahrscheinlich das häufigste und oft beschworene content-type einer Webseite hat, so ist es wichtig, behandeln Sie es mit Sorgfalt und Respekt, die Sie verdient. Die web-Typografie, nachdem alle.

Heydon Pickering schrieb über styling Absätze Weg zurück, wenn im Jahr 2011 mit seinem post, Den Perfekten Absatz. Und hier ist das Ding: acht Jahre später, ist das alles noch solide Beratung (meine Güte, ich habe das getan, für eine Weile). Wenn Sie design-Entscheidungen, die die Arbeit mit dem Korn der web-Plattform, können Sie die zuversicht erlangen, die Sie erstellen belastbare, robuste und zugängliche Lösungen, die Letzte.

Das nette Teil über dieses ist, dass es schafft Zeit für andere Dinge, sagen wir Lesen über gender-bias und die Unterbewertung von HTML und CSS. Wenn überhaupt, dann tun es für mich. Ich bin ehrlich gesagt nicht sicher, ich kann damit umgehen ein weiterer Fall von 2.000 Zeilen JavaScript verwendet, um neu position: absolute;.

Umstand

Form

Auch wenn responsive design ist fast ein Jahrzehnt alt in diesem Punkt(!), wir scheinen immer noch zu ignorieren eine Menge von der Weisheit Ethan Marcotte so schön lehrt uns kostenlos. Er ist ein kluger Kerl, sollten Sie darauf achten, was er zu sagen hat.

Nach einem kompletten Mangel an Haltepunkten, vielleicht der größte Täter, die ich noch stoßen im Hinblick auf “responsive design” ist die Annahme, dass ein kleiner viewport bedeutet Klitzekleine geben. In der Regel, das Gegenteil ist wahr. Kleine Geräte aus, um getragen werden oder durchgeführt, was bedeutet, dass wir verschieben Sie Sie in einem physikalischen Raum, um Sie in eine bequeme Leseposition. Das ist das Gegenteil von einem größeren, stationären Gerät wie einen monitor, wo wir uns bewegen, unsere Körper zu beherbergen statt.

Eine komfortable Leseposition, bedeutet nicht, daß jemand, der ein Telefon zwei Zentimeter entfernt von Ihrem Gesicht. Ergonomie wahrscheinlich nicht ändern, aber die Geräte werden. Weil das so ist, sollten Sie Ihr Handwerk Haltepunkt Namen zu Abstrakt. Ich persönlich mag Namen, die halten Benutzerfreundlichkeit im Hinterkopf, so etwas entlang der Linien von, “Handgelenk -, Handflächen -, lap -, Schreibtisch -, Wand.” Es hilft dem Benutzer den Umstand, top-of-mind, und Sie bewegt sich Weg von verknüpfen nur bestimmte Arten von Inhalten als lebensfähig auf bestimmte Arten von Geräten.

Diese ergonomisch-designs abgeleitet werden kann, erreicht mit der Hilfe von Menschen wie Rachel Andrew, dessen eingehende Erkundungen von CSS-grid-helfen uns zu verstehen, die Kraft, die hinter einer echten CSS-layout-system. Sass Experten wie Miriam Suzanne dann lehren Sie uns, wie für die Nutzung von True zu kodifizieren diese layouts zuverlässig und integrieren Sie in unsere größere Sass-Systeme.

Sie wollen auch zu vermeiden, Falsches Gerät sniffing Ansätze, oder machen grobe Annahmen über einen Benutzer der Umstände und Fähigkeiten. Nur lassen Sie mich erhöhen und zu verringern, geben Sie Größe. Reader-Modus ermöglicht es mir, so werde ich es die eine oder andere Weise.

Verbindung

Die andere Sache, die Sie brauchen, um darüber nachzudenken, wie das ideale Absatz-design wird tatsächlich diente ein Gerät. Ein großer Teil davon gehört das laden unserer Schriften, und sicherzustellen, dass die Beladung priorisiert user experience.

Text

Text-downloads schnell; viel schneller als andere exotische Arten von Inhalten. Browser Rendern wird es genüsslich, denn es ist historisch der wichtigste Teil der Nutzlast. Dies bedeutet, dass der Reader-Modus-Taste zeigt an, viel schneller als das störende auto-Wiedergabe von video von talking heads so nachdenklich eingeklemmt in der unteren rechten Ecke von meinem viewport.

Und was ist, wenn wir auf einem langsamen, intermittierenden und/oder getaktete Verbindung? Top-of-the-line-MacBooks müssen noch hotel wifi, genau wie alle anderen.

Sie möchten, halten Sie die Seite aus und springt herum, wenn unsere Absatz-schriftart geladen. Dies verhindert, dass die schrecklichen Erfahrungen zwingen mich zu Blättern, um zu entdecken, meinen Platz als Dinge, die Verschiebung in Ort. Es hilft auch verhindern, dass ich von mis-Klick auf, nahm mich Weg von dem, was ich Lesen möchte, weil ich hatte die Kühnheit, mit der Seite interagieren, bevor der bitcoin-Miner bereitgestellt werden (zum Glück, gute Menschen wie Laura Kalbag können uns helfen, mit, dass man).

Die Versuchung, Sie zu schlagen, Reader Mode-Taste ist stark, weil, wenn ich die Haupt-text der Seite auftauchen, ich weiß, ich kann leicht und zuverlässig zu vermeiden, all diese potenziellen Probleme.

Helen V. Holmes schrieb, der Typ ist Ihr Recht!, ein schöner Artikel, der mühelos verbindet typografische Geschichte, Funktion und Leistung. Insbesondere bespricht Sie, wie die Verwaltung der Flash Unsichtbaren Text (FOIT) und Flash of Unstyled Text (FOUT) am besten corral alle die oben erwähnten Probleme. In der Antwort, Monica Dinculescu gemacht Schriftschnitt matcher, ein fantastisches tool, mit dem Sie biegen, dehnen, Stauchen, squash und Folter geben in einer Weise, die machen würde Ihrem schwerfälligen Typografie-professor in Ohnmacht, alle in den Dienst der Verhinderung layout jank.

Bilder

Sie können (und sollten) alle Arten von clevere Optimierungen sicherstellen, dass wir liefern unsere Bilder so effizient wie möglich. Was aber passiert, während ich warte für die Bilder zu zeigen, bis? Was, wenn Sie nie tun?

Da bist du verantwortlich, inclusive web professional haben Sie bereits sicher sind die alternative text-Beschreibungen für unsere Bildinhalte. Ire Aderinokun lehrt uns, dass Sie einen Schritt weiter und der Stil gebrochen Bilder. Jetzt noch den Inhalt, der nicht wie vorgesehen funktioniert, sieht gut aus. Keine spröde, überreizt JavaScript hier—nur gute, altmodische progressive enhancement.

Die andere Art von Bild, das Sie möchten, zu berücksichtigen sind Symbole. Es gibt viele Gründe warum nicht verwenden, um nicht-Symbol-Schriftarten. Hinzufügen ein Grund mehr, werfen Sie auf den Haufen: Symbol-Schriftarten können nicht halten bis in den Reader-Modus, wie Sie aufgebaut sind mit Glyphen. Wenn der Reader-Modus geht über eine Seite, es kann konvertieren Sie die Glyphe zu verwenden, die schriftart, die Sie angeben. Dies könnte für eine verheerende Erfahrung sein, besonders, wenn das Symbol wird verwendet, um zu kommunizieren, kritische Funktionen (z.B. “Drücken Sie die Taste Home ( ☒ ), um zum Hauptmenü zurückzukehren.”).

Um dieses Problem zu vermeiden, Sara Soueidan lehrt uns, wie wir wandeln diese icon-fonts im SVG-Format . Aber wissen Sie was? Sie ist so viel mehr als nur eine SVG-Experte. Sie ist eine unglaubliche UX-Entwickler, und Sie würden gut daran tun, zu Lesen, was Sie geschrieben. Ich habe gelernt, eine Tonne.

Kontrolle

Zu helfen, meine lese-Erlebnis so angenehm wie möglich, Reader-Modus erlaubt mir, passen Sie Dinge wie die schriftart, die text-und Hintergrundfarbe, die Schriftgröße und Zeilenhöhe sowie die Anzahl der Wörter pro Zeile. Das ist großartig. Ich werde oft hin und her wechseln zwischen hellen und dunklen Hintergründen in Abhängigkeit von der Tageszeit.

Ich habe auch eine Brille tragen, und ich weiß, dass je älter ich werde, schlimmsten, meine vision sein wird. Dank Jennifer Aldrich schreibt, weiß ich, dass dies die norm ist. Nachdem alle, wir alle sind nur vorübergehend Behinderte. Ich könnte auch noch etwas wie Windows High-Kontrast-Modus einen Tag. Dank Amelia Bellamy-Royds, jetzt weiß ich, wie mein Inhalt sein, der beste sein kann, wenn die Anzeige in diesem Modus.

Das web ist flexibel. Daran zu arbeiten bedeutet, über dein ego und lernen, loszulassen. Das bedeutet, zu akzeptieren, dass das medium nie pixel-perfekt. Es bedeutet umarmen Technologie wie die relative Einheiten, und noch wichtiger, Philosophien wie Intrinsische Web-Design. Das brachte uns von Jen Simmons, ein unermüdlicher und leidenschaftlicher Verfechter von web-standards.

Ich würde gerne Ihre website Lesen. Ich würde gerne für Ihre harmonische Typografie zu leise usher, mich in einen flow-Zustand, machen mich vergessen, ich war sogar beim surfen auf Ihrer Website.