Kmom06: Tillgänglighet och prestanda

Som avslutning på kursen så ska vi kolla över två områden som lätt hamnar i skymundan. Vi börjar med att kolla på begreppet “the final touch” som är bra att vara medveten om i sammanhanget design. Det handlar om det sista penseldraget och att se när man är “färdig” med sin design.

Ibland händer det att man tittar på sin webbplats och ser att den inte känns komplett, något saknas, men man har svårt att sätta fingret på vad det är. Vi pratar om webbplatsens design och känslan den ger när man tittar på den. Det kan vara de små sakerna som gör det, the final touch.

Det är lätt att stirra sig blind på sin egen sida och det är därför viktigt att kolla på den utifrån en kritisk synvinkel. För att hjälpa med detta så kommer vi att analysera vår egen portfolio i jämförelse med tre andra sidor inom samma kategori, personsidor kan vi kalla det.

Vi kommer även att kolla på hur vi kan förbättra vår sida sett ifrån tillgänglighet, “accessibility” som det heter på engelska. Vi använder oss utav verktyget Google Lighthouse där vi siktar på att nå 100 på samtliga sidor.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läs & Studera

(ca: 8-10 studietimmar)

#Kurslitteratur

Läs följande:

1. Läs i boken “The principles of Beautiful Web Design”.

   • Kap 3: Texture
   • Kap 1: Layout and Composition (repetera kapitlet, främst delarna med Balance, Unity, Emphasis)

#Design med HTML5 och CSS3

1. Läs igenom följande sektion i guiden “Design med HTML5 och CSS3”.
   • Design

I sektionen Design tittar vi tillbaka på tidigare sektioner och använder vår kunskap för att skapa en helhet med ett stort fokus på detaljen.

#Designelement och designprinciper

Gå igenom följande material om designelement och designprinciper, det ger dig en grund i vad det handlar om. Du behöver veta det för att utföra uppgiften.

1. Titta igenom videos i spellistan Design – principer och element. Där finns samlat ett par korta videor som visualiserar, exemplifierar och förklarar designelement och designprinciper. Titta där för att få en uppfattning om begreppen och se hur de kan användas. I videoserien finns även en föreläsning om “Elements & Principles of Art” (överkurs) som kan vara intressant att titta på i sammanhanget.

2. Läs mer om designprinciper i “Design Elements & Principles” som visualiserar, beskriver och exemplifierar 20 designprinciper.

3. Hämta inspiration till designeffekter och designelement via exempel från CodePen. Här är en CodePen sökning på “effects” som ger en god start in bland exempel.

#Tillgänglighet

Gå igenom följande material om tillgänglighet, MDN erbjuder en liten mjukare läsning medans W3 är utförliga guidelines. Det finns även två verktyg som kan hjälpa dig, tillsammans med Google Lighthouse vi använder i uppgiften.

1. “What is accessibility - MDN” erbjuder en kort introduktion till begreppet “accessibility”.

2. “Web Content Accessibility Guidelines (WCAG)” är W3s guidelines kring “accessibility”. Som vanligt när det gäller W3 så är det ganska utförligt, men det är bra att veta att det finns.

3. Ett annat bra verktyg att använda på sin sida är Toptal Colorblind Web Page Filter som tillåter dig att se hur sidan ser ut med olika typer av färgblindhet. Det kan vara bra att använda på sin sida så man ser att inga färger får dålig kontrast eller överlag få ett hum om hur sidan kan uppfattas av andra.

4. Frida och Janni skrev häromåret ett föredömligt examensarbete om Utvecklarens förutsättningar för säkerställande av tillgänglig webb. I arbetet kan ni få en inblick i hur ett bra examensarbete struktureras och skrivs, samt skaffa er en uppfattning om utvecklares uppfattningar om och förutsättningar för att skapa en tillgänglig webb. Skumma igenom i mån av tid.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “Utvärdera designprinciper som webbplatser använder sig av”. Du skall skriva en rapport, enskilt eller i grupp.

2. Gör uppgiften “Förbättra din portfölj med designprinciper”. Där vi använder erfarenheter från analysen om designprinciper och förbättrar vår portfölj.

3. Gör uppgiften “Tillgänglighet med Google Lighthouse”. Du ska kolla på hur din sida presterar i tillgänglighet enligt Google Lighthouse.

4. Försäkra dig om att du har gjort dbwebb publishpure me och taggat din inlämning med version 6.0.0 (eller högre) samt pushat ditt repo och dess taggar till GitHub.

#Resultat & Redovisning

(ca: 1 studietimme)

Läs instruktionen om hur du skall redovisa.

Kom ihåg att publicera din portfölj till GitHub. Använd nedanstående kommandon i terminal när du står i `me/portfolio:

git push
git push origin --tags

Publicera sedan till studentservern med följande kommando:

dbwebb publishpure me

Gör Quiz på Canvas och lämna sedan in din inlämning i den nu upplåsta uppgiften. Länka till din portfölj på studentservern som en del av din inlämning.

#Testa din inlämning

Kommandot dbwebb test testar att grunderna för kmom’et är på plats. Vår rättning utgår från detta kommando. Viktigt att göra dbwebb update innan testerna körs då de har uppdaterats.

# stå i dbwebb-kurser/design

$ dbwebb update
$ npm install
$ dbwebb test kmom06

#Revision history