Reader Mode: De Knop om te Slaan

0
13

Als een jonge nerd vond ik het heerlijk om me te verdiepen in digitale werelden, het leren van de ins en outs van de regels van iemand anders had gemaakt voor mij (opzettelijk of niet). Maar de oudere en crankier ik krijg, hoe meer ik vind mezelf te verliezen geduld bij het navigeren door deze “heerlijke” ervaringen.

Deze fascinatie was geweldig voor mijn uiteindelijke carrière als ontwerper, maar helaas, het was ook het onderwijs iemand kerning—zodra u leren hoe om te kwantificeren in een slechte user experience, je kunt niet meer terug.

Deze dagen, ik ben een ongeduldig grump die niet wil nemen werk mee naar huis. Ik wil gewoon in, krijg wat ik nodig heb, en uit te komen. Als er een grote vreugde ben ik het ervaren, het is verloren op mij, want ik had zulk een moeiteloze en ergernis-vrije tijd dat het gewoon niet opvallen.

Een van de functies die ik vind mezelf te draaien om over en weer is Safari Reader-Modus. Ik lees veel nieuws, en dat komt veel onzin. Ik tik nu de cryptische kleine pictogram bijna reflexmatig, ervan overtuigd dat ik zal worden getransporteerd naar een land waar ik me kan focussen op wat belangrijk is voor mij: de inhoud.

Door op deze knop vervoert me naar een land gratis nieuwsbrief, inschrijving modals, enquêtes, pop-ups, pop-unders, knipperende banners, wordt automatisch het afspelen van video, app installeren vraagt, breaking news alerts, passief-agressieve interstitials, en faux kennisgeving toestemming banners. Het snijdt door de ongewenste en onnodige met gemak; de Alexander de Grote aan de Gordiaanse Knoop dat is een slechte user interface design.

Firefox biedt u ook deze te lezen modus. Zo is de Rand. Ik vind dat ik het meer en meer op mijn laptop met elke dag die voorbijgaat, vooral voor het lezen van lange artikelen, zoals dit stuk. Ik zou erg verbaasd zijn om te zien Chrome instituut een ‘native’, zoals Google is uiteindelijk in de reclame business.

Ik ben niet van plan om te praten over hoe het beste het ambacht van uw inhoud voor de Lezer Modus. Mandy Michael reeds dit in haar artikel aan dat het Bouwen van websites voor Safari Reader-Modus en het lezen van andere apps. Ze is geweldig, en het is een must-read stuk.

Gebouw met toegankelijke HTML-standaarden is geen dead-end vaardigheid. Verre van dat. Als je de inspanning voor vaartuigen uw ervaringen met een geest te semantiek van de start van uw content zal in staat zijn om zich aan te passen aan gespecialiseerde lezen modi, evenals wat de toekomst in petto heeft met weinig tot geen extra inspanning. Voor de Lezer van nu-Modus kan morgen smart badkamer spiegel.

De besteding van de inspanning is een belangrijk punt: een Goed ontwerp is niet iemand dwingen om een koord lopen over uw zorgvuldig onderhouden gazon. Noch is het een puzzel doos nonchalant gooide de gebruiker, in de hoop dat ze je het ontgrendelen van het onthullen van een verborgen schat. Een goed design is over het doen van het harde werken voor de verschillende manieren waarop mensen toegang hebben tot een oplossing voor een geconstateerd probleem.

Voor het lezen van artikelen, het grootste probleem is het draaien van mijn onwetendheid over een probleem in het begrijpen van (de financiering van het model voor dit is een hele andere ingewikkelde zorg). Hoe meer obstakels je in mijn weg om dit doel te bereiken, hoe meer ik geneigd om te vertrekken en mijn begrip elders—ik zal niet vergeten is hoe slecht een tijd die ik had terwijl het proberen om toegang te krijgen tot uw inhoud. Wat is de waarde van een advertentie indruk als het uiteindelijk leidt tot die gebruiker nooit terug te keren?

Maar dit is niet een website over digitale media strategie, noch is het een over de gebruiker conversie. Dit is een website over CSS en front-end development. Wat we gaan bespreken is hoe om te houden van mensen zoals ik op die knop door te vertrouwen op deze handige programmeertaal de W3C dus verstandig ons gaf. Want als je het niet, al die andere dingen—uw nieuwsbrief, inschrijving dozen, uw opmerkingen, uw verwante artikelen, uw engagement zal worden weggesneden.

Integratie

Wat je als eerste wilt doen is een breed net gegoten. Hoe meer mensen je kunt proactief tegemoet vanaf het begin, hoe meer mensen je niet per ongeluk vervreemden. Onze design keuzes moet onzichtbaar zijn—we proberen niet te zeggen, “dit is voor jou.” Dat moet vanzelfsprekend zijn. Wat we proberen te voorkomen dat zijn scenario ‘ s waar iemand tegenkomt iets dat communiceert, “dit is voor iemand anders.”

Het is niet te moeilijk, mits je weet wat om naar uit te kijken. Carie Fisher schetst de bulk van het in haar briljante post, het Ontwerpen van Toegankelijke Inhoud: Typografie, Lettertype vormgeving en Structuur.

Prioriteit

Een basis lid stijl is de bron van waaruit al uw andere soort beslissingen moet stromen. Het is waarschijnlijk de meest voorkomende en vaak ingeroepen van het type inhoud van een website, het is dus belangrijk om het te behandelen met zorg en respect die het verdient. Het web is typografie, na alle.

Heydon Pickering schreef over de styling van de leden terug wanneer in 2011 met zijn post, De Perfecte Lid. En hier is het ding: acht jaar later, is dit nog steeds een gedegen advies (sheesh, ik doe dit voor een tijdje). Wanneer u ontwerp beslissingen die werken met de nerf van het web-platform, je krijgt het vertrouwen dat je aan het maken bent veerkrachtig, robuust en toegankelijk oplossingen die laatste.

Het leuke hieraan is dat het maakt tijd vrij om andere dingen te doen, zeg het lezen over gender bias en de onderwaardering van HTML en CSS. Als er iets, doe het dan voor mij. Ik ben eerlijk gezegd niet zeker of ik kan omgaan met een ander geval van 2.000 lijnen van JavaScript gebruikt om te recreëren position: absolute;.

Omstandigheden

Formulier

Hoewel responsive design is bijna tien jaar oud zijn op dit moment(!), we lijken nog steeds te negeren veel van de wijsheid Ethan Marcotte zo mooi leert ons gratis. Hij is een slimme vent, moet je aandacht besteden aan wat hij te zeggen heeft.

Na een compleet gebrek aan breekpunten, misschien wel de grootste overtreder ik nog tegenkomen met betrekking tot responsive design is de veronderstelling dat een klein kijkvenster betekent piepklein type. Meestal is het tegendeel waar. Kleine apparaten zijn gemaakt om te worden gedragen of meegevoerd, wat betekent dat we verplaatsen in de fysieke ruimte te krijgen om ze in een comfortabel lezen positie. Dit is het tegenovergestelde van een grotere, meer stationair apparaat aan, zoals een monitor, waar we verplaatsen ons lichaam aan te passen in plaats daarvan.

Een comfortabele lezen positie betekent niet iemand dwingen tot het houden van een telefoon twee centimeter van hun gezicht. Ergonomie zal waarschijnlijk niet veranderen, maar apparaten. Want van dat, je moet ambachtelijke uw breekpunt namen te abstract. Ik persoonlijk vind de namen die houden van usability in het achterhoofd, dus iets in de trant van, “pols, palm, schoot, bureau, aan de muur.” Het helpt om de gebruiker omstandigheid top-of-mind en je verder van het koppelen van alleen bepaalde soorten inhoud levensvatbare op bepaalde soorten apparaten.

Deze ergonomisch-afgeleide modellen kan worden bereikt met de hulp van mensen zoals Rachel Andrew, waarvan de in-diepte verkenningen van CSS grid ons helpen met het begrijpen van de kracht achter een echte CSS-lay-out-systeem. Sass deskundigen, zoals Mirjam, Suzanne dan leer ons hoe om Ware tot codificatie van deze lay-outs en betrouwbaar te integreren in onze grotere Sass systemen.

U wilt ook om te voorkomen dat de vogels apparaat snuiven benaderingen, of het maken van grove aannames over een gebruiker omstandigheden en mogelijkheden. Laat mij het verhogen en verlagen van dat formaat. Reader Mode laat me, dus ga ik er op een of andere manier.

Verbinding

Het andere ding dat je nodig hebt om na te denken over hoe die ideale alinea ontwerp daadwerkelijk wordt geserveerd met een apparaat. Een groot deel van dat omvat het laden van onze lettertypen, en ervoor te zorgen dat het proces van laden prioriteert de gebruikerservaring.

Tekst

Tekst downloads snel, veel sneller dan andere exotische soorten content. Browsers zullen renderen vrolijk, want het is historisch gezien het belangrijkste deel van de lading. Dit betekent dat de Reader Mode-toets gaat zien is een stuk sneller dan dat het afleiden van auto-playing video van talking heads dus zorgvuldig vastgelopen in de onderste rechter hoek van mijn viewport.

En wat als we op een langzame, intermitterend, en/of verbinding met datalimiet? Top-van-de-lijn MacBooks nog gebruik maken van hotel is prima, net als iedereen.

U wilt de pagina van het heen en weer springen bij ons lid lettertype belastingen. Dit voorkomt dat de verschrikkelijke ervaring van mij dwingen om te bladeren rond om het herontdekken van mijn plaats als dingen verschuiving in de plaats. Het helpt ook dat ik het mis op, die me weg van wat ik wil lezen, want ik had het lef om te communiceren met de pagina voor de bitcoin miners zijn geïmplementeerd (gelukkig, goed volk als Laura Kalbag ons kan helpen met die ene).

De verleiding te raken dat de Reader Mode-toets is sterk, want als ik zie dat de tekst van de pagina te zien zijn, ik weet dat ik het kan gemakkelijk en betrouwbaar te voorkomen dat al deze mogelijke problemen.

Helen V. schreef Holmes Type is Uw goed Recht!, een mooi artikel die moeiteloos typografische geschiedenis, vermogen en prestaties. Met name, zijn ze over het beheren van de Flash van Onzichtbare Tekst (FOIT) en Flash van Unstyled Tekst (DEPARTEMENT) voor de beste corral alle bovengenoemde aspecten. In reactie, Monica Dinculescu gemaakt Lettertype matcher, een fantastische tool waarmee je buigen, strekken, squish, squash, en foltering type op manieren die zou je op de bodem typografie professor vaag, allemaal in dienst van het voorkomen van lay-out jank.

Beelden

Je kunt (en moet) maken van allerlei slimme optimalisaties om te zorgen dat we leveren onze foto ‘ s zo efficiënt mogelijk. Maar wat gebeurt er terwijl ik wacht op die beelden te zien zijn? Wat als ze nooit doen?

Omdat je een verantwoordelijke, inclusief web professional, die u al hebt gemaakt ervoor dat alternatieve tekst beschrijvingen voor onze inhoud van de afbeelding. Ire Aderinokun leert ons dat je een stapje verder gaan en stijl gebroken beelden. Nu nog de inhoud dat niet werkt zoals de bedoeling ziet er goed uit. Geen broos, overspannen JavaScript-hier—gewoon goed, ouderwetse progressive enhancement.

Het andere type van de afbeelding die u wilt om te overwegen zijn iconen. Er zijn heel veel redenen om geen gebruik pictogram lettertypen. Het toevoegen van een extra reden om te gooien en op de stapel: pictogram lettertypen worden mogelijk niet houden in de Reader Mode, omdat ze zijn gebouwd met behulp van tekst glyphs. Wanneer Reader Modus gaat over een pagina, kan het converteren het glyph gebruik van het lettertype dat u hebt. Dit kan zorgen voor een rampzalig ervaring, vooral als het pictogram wordt gebruikt om te communiceren kritische functionaliteit (bijvoorbeeld “Druk op de Home-knop (☒) om terug te keren naar het hoofdmenu.”).

Om dit probleem te vermijden, Sara Soueidan leert ons hoe we zetten mensen pictogram lettertypen naar SVG . Maar weet je wat? Ze is zo veel meer dan alleen een SVG-expert. Ze is een ongelooflijke UX ontwikkelaar, en je zou er goed aan doen om te lezen over wat ze heeft geschreven. Ik, voor een, hebben geleerd een ton.

Controle

Om te helpen met het maken van mijn leeservaring zo comfortabel mogelijk te maken, Reader Modus stelt me in staat om zaken aan te passen, zoals het lettertype, de tekst-en achtergrondkleuren, de lettergrootte en regelhoogte, en het aantal woorden per regel. Dit is geweldig. Ik zal regelmatig heen en weer schakelen tussen lichte en donkere achtergrond afhankelijk van de tijd van de dag.

Ik heb ook een bril, en ik weet dat de ouder ik word, het ergste mijn visie zal worden. Met dank aan Jennifer Aldrich ‘ s schrijven, ik weet dat dit de norm is. Immers, we zijn allemaal slechts tijdelijk valide. Ik zou ook iets nodig zoals Windows Modus Hoog Contrast op een dag. Met dank aan Amelia Bellamy-van der does van noordwijk, nu weet ik hoe mijn inhoud worden het best kan worden gezien in die modus.

Het web is flexibel. Werken aan het verkrijgen over je ego en leren loslaten. Dat betekent accepteren dat het medium zal nooit pixel perfect. Het betekent dat het omarmen van technologie, zoals relatieve eenheden, en nog belangrijker, filosofieën, zoals Intrinsieke Web Design. Dat is bij ons gebracht door Jen Simmons, een onvermoeibaar en gedreven pleitbezorger voor webstandaarden.

Ik zou graag om uw website te lezen. Ik zou graag voor uw harmonieuze typografie om rustig te luiden me in een flow state, waardoor ik vergeten was ik zelfs surfen op uw site.