Blogg

Ishihara test exempel

Vad ser du när du kollar på bilden ovan? Om du inte ser siffran 74 utan bara ser färgade cirklar eller någon annan siffra har du troligen någon form av färgblindhet, eller som det mer korrekt kallas generelt, defekt färgseende.

Den vanligast förekommande versionen är deuteranopia (röd-grön färgblindhet) och förekommer i varierande grad hos 6% av männen. Den mildare formen kallas deuteranomali (defekt grönseende) och är vanligare förekommande.

färghjul
Ett exempel för dom som inte har färgblindhet hur skillnaden ser ut för dom med deuteranopia

Varför ska då vi som front-end utvecklare ha personer med färgblindhet i åtanke när vi designar och väljer ett färgschema för våra hemsidor? En anledning är att c:a 8% av männen och 1% av kvinnorna har någon form av defekt färgseende.

Hur ska vi som front-end utvecklare göra för att inte skapa hemsidor som är omöjliga för färgblinda att navigera?
Jo, vi kan använda oss av något som kallas färglära (color theory), med kunskaper om färglära och hur olika färger komplimenterar och kontrasterar varandra kan vi underlätta inte bara för de med färgblindhet utan även se till att texter och liknande blir lätt lästa för alla som går in för att läsa hemsidans innehåll. T.ex. undvik att ha text som är snarlik bakgrundsfärgen.

Det finns flera sätt att testa din hemsida för färgblinda:
– Senaste versionerna av Photoshop har ett filter för de vanligaste förekommande varianterna och du kan redan i design stadiet testa hur ditt färgschema håller ihop för färgblinda. – Program som Color Oracle och hemsidor som Colblindor och liknande kan hjälpa dig simulera hur en person med någon form av defekt färgseende ser på din hemsida.

Men den viktigaste lösningen är att med analyser och undersökningar, sitta med en person med defekt färgseende och testa hur den personen hanterar din hemsida för att få en mer korrekt inblick i hur den personen hanterar att navigera på en hemsida.

Vad tar jag med mig vidare från det jag nu läst om färgblindhet?

Att det är viktigt att tänka på att t.ex. deuteranopia och deuteranomali förekommer ganska ofta bland män och att man har i åtanke när man bygger hemsidor för denna användargrupp, att ca 6% av de som besöker sidan inte kan se skillnad på rött och grönt, vilket gör det viktigt att tydliggöra med olika nyanser vad som är vad t.ex. eller att med text eller form visa vad som är vad.

Även jag som inte har färgblindhet, men är närsynt, kan ha nytta av att mina hemsidor och andras har bra kontrastrika innehåll som gör hemsidorna lätta att läsa och inte gör det jobbigt för ögonen att läsa en text. Man måste ha i åtanke för användarens skull att det finns många olika personer som kommer besöka dina hemsidor och att ta emot feedback för att förbättra hemsidans tillgänglighet och användbarhet.

Källor: Tuts+ – Designing For, and As, a Color-Blind Person, Svenska Wikipedia – Defekt färgseende, Colblindor – All about Color Blindness, An introduction to color thoery for Web Designers

Jag har för första gången röstat på Site of the Month på Awwwards.

Flera intressanta hemsidor var nominerade, men jag bestämde mig för att kolla in de två bidragen som fått flest röster av användarna.

Den första jag kollade in var ”Mobee” av Benjamin Guedj från Frankrike.
Länk: http://www.mobee.tm.mc/

Mobee

Sidan var väldigt snygg med intressant sätt att navigera på. Sidan laddade snabbt på min stationära dator.
Gillade text valen, de stora bilderna och animationen på sidan.

Men mitt val av sida föll på den här interaktiva filmen från grouek (också från Frankrike):
Länk: http://sortieenmer.com/

Sortie en mer

Upplevelsen är den största delen av den här hemsidan. Innan du läser vidare, testa hemsidan först.
Att fortsätta scrolla för att hålla sig ovan vattnet gjorde att jag började tycka att det blev jobbigt för handen.
Vilket jag tror var medvetet av de se skapade den här filmen. Karaktären som du ska hålla vid liv började ta sig för händer och fötter (kramp) ungefär samtidigt som jag själv började tröttna.
De fick fram sitt budskap på ett intressant sätt som kanske får folk att tänka till om de ska ut på sjön och saknar flytväst.
Ett stort plus är att filmen stoppar sig själv när du byter flik i webbläsaren vilket är väldigt uppskattat.

Om en månad och nio dagar har den här sidan varit uppe i sitt nuvarande utseende.
Var har ändrats sedan senaste inlägget?

Väldigt lite, förutom standard saker som uppdateringar av plugins, wordpress samt att jag sett till att uppdateringarna inte sabbat hemsidan.
Har förbättrat laddningshastigheten på hemsidan med hjälp av http://tools.pingdom.com och en del backend förbättringar.

Största boven just nu för hemsidan är laddningen av bilder. Ska försöka hitta en lösning som antingen snabbar upp laddningen eller någon annan lösning.

Twitter flödet i footern har genomgått flera versioner, och ser troligen ut att få ett nytt utseende igen, då jag troligen går ifrån nuvarande lösning till ett twitter plugin som jag använt på den här sidans syster hemsida tobiasarud.se.

Ett nytt personligt projekt är på gång, men det har dragit ut på tiden då jag har velat mellan olika skisser, wireframes och mockups.

Tror och hoppas att jag kan visa upp lite resultat i mitten på Februari och att jag äntligen kan gå vidare till andra projekt.

Uppdateringar gjorda sedan senaste uppdateringen:

  • Optimerade hemsidans laddningstid med  W3 Total Cache (Finns säkert mer att förbättra här.) (15 April)
  • Installerade uppdatering till portfolio pluginet, men nedgraderade igen eftersom uppdaterade koden gjorde att inget fungerade… (15 April)
  • Contact Form 7 pluginet uppdaterat, konflikt har uppstått den 15 April då jag jobbat med Total Cache, Ajax confirmation/error meddelande dyker inte upp som det ska utan det fastnar på de snurrande pilarna… Ska försöka fixa det problemet. (11 April och 15 April)
  • Uppdateringar i CSS koden. (11 April)
  • Nästan all text på sidan är nu på svenska istället för på engelska. Entry-meta koden och search knappen behöver översättas. (Mellan 26 Mars och 11 April)