Uppdatering 2016-09-13

Efter mycket tid har jag äntligen aktiverat nya temat för min portfolio.

Detta temas kod och struktur är delvis baserat på _underscore samt mitt tema för min allmäna blogg på tobiasarud.se (Chessbox Theme).

Stilmässigt var jag främst influerad av ett projekt vi hade i HTML+CSS kursen på Nackademin där vi byggde en hemsida för en hypotetisk webbyrå. Det projektet gjorde att jag ville införliva delar av den designen samt lägga till mina egna design element för den här sidan.

Stilmallen är byggd med SASS och flexbox är ett viktigt inslag i temat.

Framtida uppdateringar under September

Nu när grunddesignen är klar kommer jag fokusera på bl.a. projekt/portfolio delen av sidan. För närvarande använder jag ett plugin Arconix Portfolio, men vill helst skriva min egen custom post type för projekt och bygga upp main sidan annorlunda.

Funderar också på att använda en page-builder (min egen kanske) för att bygga lite roligare pages.

CSS Frameworks

För att ta mig igenom Front-End Framework jungeln valde jag att rikta in mig på tre så kallade CSS Frameworks. Dessa frameworks är designade för att utvecklare snabbt ska kunna få till en snygg grund design för det projekt man skapat. Vissa går sedan vidare med egen skriven kod, medan andra forsätter använda ramverket i slutprodukten.

Antalet CSS Frameworks är över 40 stycken och det kan vara svårt att hitta det ramverk som passar sin kodstil bäst.

Men för att göra saken lättare för mig själv valde jag att kika på tre av de större ramverken på marknaden: Bootstrap, Foundation och Semantic UI.

Gemensamt för de tre är att de är responsiva, är licensierade med MIT och använder sig av CSS preprocessorer.

Foundation använder sig av SASS, Semantic UI och Bootstrap av LESS, dock har senaste versionen av Bootstrap gjort det möjligt att köra SASS.

Dags att ta fram macheten och grotta ner oss i det första ramverket jag listade, Bootstrap:

Bootstrap

bootstrap

Bootstrap, tidigare känt under namnen Twitter Bootstrap och Twitter Blueprint är som de gamla namnen förtäljer skapat av två utvecklare hos Twitter som heter Mark Otto och Jacob Thornton.

De två med ett litet gäng utvecklare ville med Bootstrap skapa ett designmönster för UI och minska problemen med att använda diverse bibliotek och element på ett inkonsekvent sätt.

Bootstrap är modulärt och du kan välja vilka komponenter du som utvecklare vill använda genom att justera i bootstrap.less för att lägga till och ta bort delar av koden.

På github har Bootstrap stjärnats över 87,000 gånger och är det mest använda CSS ramverket på marknaden just nu. Tack vare sin ställning finns det mycket information om Bootstrap att hitta och de är så stora att w3schools har en egen sektion om ramverket.

Komma igång med Bootstrap

Att komma igång med att bygga hemsidor med hjälp av Bootstrap går väldigt fort.

Det finns flera sätt att hämta hem filerna, men det första alternativet är att hämta hem en zip fil med den kompilerade och minifierade versionen av Bootstrap som du lägger in i din utvecklingsmiljö på datorn.

Bas template för att få med filerna i ditt projekts html fil finns efter nedladdnings alternativen och under den visar de olika exempel på element att strukturera upp sidan med.

En viktig sak att tänka på är att Bootstrap använder sig av en 12 kolumns grid som är baserad på procent.

Det finns en sak som kan vara negativ för vissa utvecklare med Bootstrap och det är att koden du skriver saknar tack vare grid classerna och andra class namn inte ser särskilt semantiska ut.

T.ex. så kan något som i vanliga fall hetat .primary visas som .col-md-8 och .secondary som .col-md-4. det gör att koden avhumaniseras lite och blir mer styrd.

Foundation

foundation

Det andra CSS Frameworket jag kikade på var Foundation som skapades av interaktionsdesignsföretaget ZURB, som bl.a. jobbat med Facebook, eBay och Walmart.

Projektet skapades för att snabba upp och förbättra front-end utvecklingen.

Foundation har många likheter med Bootstrap och är ett ramverk som är modulärt, responsivt (mobile first) och använder sig av preprocessorn SASS för att välja funktioner i det projekt du bygger.

Ramverket är med sina över 21,000 stjärningar det näst största ramverket på marknaden och är mer semantiskt än Bootstrap.

Komma igång med Foundation

Foundations nedladningssida ger flera olika val att börja med: Complete, Essential och Custom.

Custom ger dig möjlighet att innan du laddar hem filerna välja vad du vill använda. Denna variant finns också i Bootstrap, men du måste gå till en ny sida på hemsidan för att välja det alternativet.

När du laddat hem filerna och lagt de i en projekt mapp så får du i jämförelse med Bootstrap en index.html fil från start där du kan ändra utseendet på sidan.

De har flera templates för html koden som ligger i navigeringen på foundation sidan.

Semantic UI

semanticui

Semantic UI är en av många utmanare till de två stora som jag skrivit om här ovan. Projektet skapades av Front end utvecklaren och UI arkitekten Jack Lukic som är huvud författare på github.

En stor skillnad mot Bootstrap är att Semantic UI använder mer semantiska classer och liknande. Man vill undvika att utvecklaren måste lära sig namn- och programeringskonventioner för en viss utvecklare. Man vill använda vanliga termer för element istället för at kodifiera och använda kort hand.

Komma igång med Semantic UI

Av de tre ramverken jag testat är Semantic UI den absolut svåraste att få igång för de se inte är vana vid användandet av kommandotolken för att installera saker.

Först måste du installera NodeJS. Denna installation är olika beroende på om du använder linux, mac eller pc.

Som pc användare fick jag ladda hem en msi fil på nodeJS hemsida som jag installerade.

Sedan kommer flera bitar där det för de som inte kört CMD eller liknande behöver googla eller läsa på semantic uis guide vad man ska göra.

Tack vare lite vana med git så blev det inte så jobbigt för mig personligen, men jag kan förstå att många tycker Bootstrap och Foundation är smidigare på iaf den här biten.

När du väl fått Semantic UI installerat skapar du din index.html fil och lägger in scripts som aktiverar css/js koden ungefär som i Bootstrap.

Det finns exempel kod att kolla på i dokumentationen under fliken Layouts där man har lite olika användbara html sidor att ta inspiration från.

Vilken skulle jag välja?

Jag har jobbat väldigt mycket med Bootstrap under senaste tiden och har bra koll på hur Bootstrap kod ska skrivas, men jag tycker mer om semantiskt uppbygda hemsidor där man använder riktigt språk när man skapar classerna. Tycker inte att kod som skrivs typ: col-md-3, btn-xs etc. är snyggt och om man inte har koll på förkortningarna så blir det svårare att sätta sig in i ramverket fort.

Att använda sig av något av de större ramverken underlättar under utvecklingsfasen och sparar tid som man kan lägga på andra saker. Men det är viktigt att komma ihåg att du målar inte Mona Lisa utan att först förstå anatomi (html), perspektiv, skuggning (css) och annat.

Källor: Bootstrap, ZURB Foundation, Semantic UI, Learn Semantic UI, Wikipedia, Sitepoint, w3schools

Färgblindhet och webben

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

Awwwards Maj 2014

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.