Pocket-lint wordt ondersteund door zijn lezers. Wanneer u via links op onze site koopt, kunnen we een aangesloten commissie verdienen. Kom meer te weten

Deze pagina is vertaald met behulp van AI en machine learning.

(Pocket-lint) - De donkere modus was tot voor kort voorbehouden aan ontwikkelaars en professionele creatievelingen zoals fotografen en filmmakers.

Maar in 2019 veranderde dat. Een aantal bedrijven, van Apple tot Google tot Facebook , omarmden allemaal het idee dat niet alles altijd wit zou moeten zijn en begonnen gebruikers de mogelijkheid te bieden om een alternatief kleurenpalet te kiezen dat s avonds laat prettiger was voor de ogen.

We zijn verheugd te kunnen zeggen dat u nu Pocket-lint kunt toevoegen aan de lijst met bedrijven die een donkere modus aanbieden bij het browsen op de website, en vanaf vandaag kunt u uw favoriete nieuws, recensies, functies, koopgidsen en meer lezen in beide situaties modus of donkere modus op onze site.

Maar waarom hebben we ervoor gekozen om de donkere modus toe te voegen aan Pocket-lint, wat zijn de voordelen en hoe kunt u er zelf van genieten?

Is Apple Music het waard? Probeer de streamingdienst van Apple 3 maanden gratis

Waarom donker worden?

Er zijn een aantal voordelen bij het gebruik van de donkere modus, variërend van prettiger voor de ogen - vooral s avonds laat, beelden meer laten opvallen, de levensduur van de batterij verlengen en vooral de toegankelijkheid verbeteren.

Google zegt dat het heeft ontdekt dat een van de grootste voordelen van de donkere modus na implementatie op de nieuwste versie van Android (10) is dat het kan leiden tot een langere levensduur van de batterij.

Apple noemt geen verbetering van de batterijprestaties, maar heeft Pocket-lint eerder verteld dat de reden voor het omarmen van de donkere modus te wijten is aan talloze creatieve professionals die het bedrijf hebben gevraagd om de ervaring te omarmen om eventuele afleidingen weg te nemen.

AppleZaklint opnieuw ontwerpen voor de donkere modus Waarom hoe en de uitdagingen waarmee u wordt geconfronteerd Een donkere afbeelding van uw website maken 2

Voor Pocket-lint was de beslissing om "donker" te gaan een combinatie van al die redenen, maar ook vanwege een verzoek van het team dat het iets was dat ze wilden en zeker wisten dat onze lezers dat ook wilden.

Het is begrijpelijk om in verschillende omgevingen te werken, van een kantoor overdag of een vliegtuig dat over de Atlantische Oceaan vliegt tot een evenement op een verafgelegen locatie ergens over de hele wereld. Team Pocket-lint besteedt veel tijd niet alleen aan het staren naar een scherm op een telefoon, tablet of computer, maar ook aan Pocket-lint.

De donkere modus werd aangevraagd en de uitdaging om deze te implementeren begon.

Hoe het werkt

We zullen het ontwerpproces zo meteen bespreken, maar het is de moeite waard om op te merken hoe het werkt en hoe u de donkere modus kunt inschakelen.

Wat vanaf het begin duidelijk was, was dat de donkere modus niet geschikt is voor alle omgevingen en alle toepassingen. Het is daarom niet iets dat bezoekers automatisch moet worden opgedrongen, ongeacht of ze het willen of niet. En dat is dus de aanpak die we hebben gevolgd bij Pocket-lint. U kunt de donkere modus van Pocket-lint volledig negeren als u dat wilt en de lichte modus gewoon blijven gebruiken. Dat was belangrijk.

De donkere modus en de nu bijbehorende lichte modus zouden een gebruikersvoorkeur moeten zijn boven het genieten van de inhoud en niet iets waar je geen keus over hebt.

Sommigen houden van het idee van donkere achtergronden, lichte tekst en alles wat bij de donkere modus hoort, terwijl anderen het te polariserend en te schokkend vinden in vergelijking met de manier waarop ze gewend zijn websites te zien.

Met dat in gedachten bieden we de donkere modus op drie verschillende manieren:

  1. Bepaald via het besturingssysteem van het apparaat
  2. Geactiveerd via een tuimelschakelaar bovenaan de site in de masttop
  3. Gecontroleerd via de tijd van de dag

De eerste is logisch. Als u systeembreed de donkere modus gebruikt omdat u zich heeft aangemeld via de systeemvoorkeuren van het apparaat dat u gebruikt, is de kans groot dat u Pocket-lint in de donkere modus wilt zien.

De tweede is ontworpen om u in staat te stellen de donkere modus uit te schakelen als u dit niet leuk vindt, maar ook om deze in te schakelen als u de donkere modus niet op systeemniveau gebruikt.

De derde, denken we, is proberen de behoeften van de gebruiker te begrijpen zonder dat ze zich daar zelf zorgen over hoeven te maken. De donkere modus kan het beste worden genoten als het buiten donker is - dat wil zeggen s nachts - en daarom hebben we ervoor gekozen om deze automatisch in te schakelen van 22.00 uur tot 07.00 uur, zelfs als je systeeminstellingen zijn ingesteld op de lichtmodus. We kunnen dit doen door te begrijpen in welke tijdzone de gebruiker zich bevindt en deze dienovereenkomstig in te stellen. Natuurlijk kunt u de instelling desgewenst opheffen via die allerbelangrijkste tuimelschakelaar.

Ontwerpen voor donkere modus

De donkere modus gaat niet alleen over het omkeren van de kleuren van zwart naar wit en van wit naar zwart.

Bij Pocket-lint hebben we een aantal paletten in de donkere modus bekeken om te analyseren wat het beste is, niet alleen vanuit het oogpunt van toegankelijkheid, maar ook vanuit het oogpunt van leesbaarheid.

Documentatie op internet staat nog in de kinderschoenen en hoewel sommige paletten in sommige omgevingen goed zijn, werken ze in andere niet.

Ga "volledig zwart" en lange artikelen met veel woorden worden vermoeiend om te lezen, terwijl het kiezen van een te licht grijs betekent dat de effecten van de donkere modus verloren gaan. Je moet ook rekening houden met lettertype en lettertypekleuren, lettertypespatiëring in termen van tekenspatiëring en regelafstand, evenals elementen zoals hyperlinks, bijschriften, afbeeldingscredits en andere "font-meubels" rond de pagina.

colorhuntHerontwerp van Pocket-lint voor donkere modus Waarom hoe en de uitdagingen waarmee u wordt geconfronteerd als u een donkere afbeelding van uw website maakt 3

Het eindresultaat was om een kleurenpalet te kiezen met een sterke blauwgrijze en turkooise invloed die, naar onze mening, een donkere modus oplevert die op een aantal niveaus benaderbaar is en die ook een aantal toegankelijkheidstests doorstaat voor bruikbaarheid en leesbaarheid.

Om te beginnen hebben we colorhunt.co gebruikt. Op de eenvoudig te gebruiken website kunt u verschillende kleurenpaletten zien en zien hoe de kleuren elkaar aanvullen. Het is een fantastische bron, ongeacht uw ontwerpbehoeften in de donkere modus.

Toen we eenmaal een palet hadden uitgekozen waarmee we wilden werken, gingen we die kleuren vertalen naar het ontwerp van Pocket-lint.

We gebruikten de donkerste kleur in het palet als onze standaardachtergrond met de op een na donkerste kleur als markeerstift voor die achtergrond.

U ziet deze kleuren het meest prominent op onze nieuw ontworpen hubpaginas . Het kleurgebruik hier tilt ons "kaart" -ontwerp van de pagina en verbetert de leesbaarheid aanzienlijk. We hebben de kleur ook gebruikt voor de horizontale regels rond de site om bijvoorbeeld lijsten op de homepagina op te splitsen.

De onderbuikreactie zou zijn om de turkooizen kleur in het palet te gebruiken voor hyperlinks, op een lichte achtergrond die goed werkt, maar dit is een van de meest voorkomende fouten als het gaat om de donkere modus. Gekleurde tekst op een donkere achtergrond werkt niet.

Pocket-lintZaklint opnieuw ontwerpen voor de donkere modus Waarom hoe en de uitdagingen waarmee u wordt geconfronteerd Een donkere afbeelding van uw website maken 4

Om dit tegen te gaan, hebben we de hyperlinkstijl van Pocket-lint gewijzigd in een dikke onderstreping die benadrukt wordt bij zweven in plaats van het gekoppelde woord of de gekoppelde zin te kleuren. Door deze aanpak te gebruiken, wordt het veel gemakkelijker voor het oog, en we hebben het zelfs in ons lichtmodus-thema in de toekomst overgenomen.

Om de leesbaarheid te verbeteren, hebben we ervoor gekozen om de tekst op de pagina een gebroken wit / lichtgrijs te kleuren, de uiteindelijke kleur in ons gekozen palet, in plaats van te kiezen voor "volledig wit". Dit zorgt voor een veel zachtere ervaring, en een ervaring waarvan we denken dat deze veel gemakkelijker voor het oog is als het om lezen gaat.

Ja, de donkere modus gaat over contrasten, maar je wilt niet dat het te contrasterend is. Zwart en wit kunnen echt heel hard naast elkaar zijn.

Nadat we de donkere modus hadden voltooid, gingen we over op het bijwerken van onze nu nieuwe lichtmodus. Voorheen de enige modus, om een consistente ontwerpstijl en ethos te behouden, moest het ook veranderen om overeen te komen met dezelfde aanpak en overtuigingen.

Voor Pocket-lint betekent dat een nieuwe hyperlinkstijl en een nieuwe lettertypekleur - de donkerste kleur in ons nieuwe palet, evenals een paar tweaks en veranderingen elders om de zaken consistent te houden.

Toegankelijkheid

Hoewel velen de donkere modus alleen zien als iets dat "cool" is, zijn er een aantal belangrijke redenen waarom het ook echt goed is in termen van toegankelijkheid. Het was iets waarvan we zeker wilden zijn dat het een van de voordelen was van het implementeren van de donkere modus op Pocket-lint.

Er zijn een aantal tools die u kunt gebruiken om contrasterende kleuren te testen. Het World Wide Web Consortium is de belangrijkste internationale standaardenorganisatie voor het World Wide Web en heeft een aantal richtlijnen om het web toegankelijker te maken.

a11yZaklint herontwerpen voor de donkere modus Waarom hoe en de uitdagingen waarmee u wordt geconfronteerd Een donkere afbeelding van uw website maken 6

Web Content Accessibility Guidelines (WCAG) 2.1 omvat in het bijzonder een breed scala aan aanbevelingen om webcontent toegankelijker te maken.

Ervoor zorgen dat zowel de lichte als de donkere modus geïntroduceerd door Pocket-lint deze tests doorstaan, was van het grootste belang.

En dus hebben we met de richtlijnen gewerkt om contrasterende kleuren te gebruiken om alles zo goed mogelijk te laten werken.

Ontwerp uitdagingen

Toen we eenmaal een kleurenpalet hadden uitgewerkt, is het vertalen naar de website vrij eenvoudig, hoewel tijdrovend.

Pocket-lint draait al 16 jaar en dus was dit een goed moment om de code in het master CSS-bestand op te ruimen en te verbeteren. Het CSS-bestand is het bestand dat alle stijlen en lay-outs van de artikelen en paginas op de site verwerkt, dus het is een flinke klus.

In de loop van de jaren, met talloze ontwikkelaars die de code hebben toegevoegd en gewijzigd, is er een neiging geweest om stijlen toe te voegen op basis van hoe ze eruit zien, inclusief hun kleur. Dat is een grote nee-nee als het gaat om het implementeren van een donker en licht ontwerp en is iets dat, als je een positief en een negatief kleurenpalet hebt, moet worden veranderd.

Pocket-lintZaklint opnieuw ontwerpen voor de donkere modus Waarom hoe en de uitdagingen waarmee u wordt geconfronteerd Een donkere afbeelding van uw website maken 5

De andere uitdaging die we hadden, was het kiezen van een uniform pictogram dat op de hele site zou worden gebruikt om aan lezers te laten zien dat ze konden schakelen tussen de lichte en donkere modus wanneer ze dat wilden.

Nu de donkere modus nog in de kinderschoenen staat, is er nog geen uniform pictogram dat op internet wordt gebruikt. Degenen die een donkere modus hebben geïmplementeerd, hebben gekozen voor een reeks verschillende pictogrammen en formuleringen om te symboliseren dat er een keuze is. Manen, zonnen, gloeilampen en woorden worden allemaal met weinig zorg of aandacht gebruikt.

Na het uitproberen en testen van een aantal verschillende pictogrammen met leden van het team, familie en vrienden, hebben we besloten tot een pictogram van een halve maan dat vast of leeg is, afhankelijk van of de donkere modus is in- of uitgeschakeld. Wij denken dat dit het meest logisch was en gemakkelijk te begrijpen, ongeacht waar u bent of welke taal u spreekt.

Volgende stappen

Nu we de donkere modus op Pocket-lint hebben geïmplementeerd, zijn we van plan om te blijven volgen hoe het door lezers wordt gebruikt en of een van onze ontwerpkeuzes zorgen of problemen oplevert wanneer deze beschikbaar zijn voor een veel breder publiek.

Geschreven door Stuart Miles. Oorspronkelijk gepubliceerd op 19 December 2019.