MDA Art & Design

Processanalys

kurs: WUH100 HSV, Ht 2020

Förord:

När jag tog tag I detta arbete, så började jag med att teckna och skriva en överblick I mitt anteckningsblock, över hur den färdiga sidan skulle se ut, och hur jag bäst skulle få allt att fungera på ett smidigt och bra sätt I praktiken. Jag skissade upp var jag skulle lägga div-ar I html och vad jag ville att float skulle göra, för att få sidan att göra vad jag ville när jag skrev min css. Att börja med en sådan enkel “ritning”, lärde jag mig bland annat i Patriks video om Clean code. När jag tittat på den mall/mockup som ingick i uppgiften, och begrundat allt vi lärt oss och läst alla instruktionerna så bestämde jag mig för att attackera uppgiften bakifrån. Detta då det numera blivit allt mer vanligt att man börjar med mobile first och sedan tänker vidare uppåt i storlekar som till surfplatta och desktop. (Joshua Johnson, 2019)

Processen:

Jag har valt att programmera i xhtml, då jag personligen uppfattar det som ett strukturerat och tydligt sätt att programmera på, som för mig är lätt att följa med i, och verkligen lära mig detta med programmering från grunden på ett bra sätt. Det fungerar också på ca 99,5% av webbläsare (caniuse.com). Däremot, med tanke på att jag arbetar utifrån mobile first, så borde jag nog övergå till html5 i framtida programmering, då det är bättre och mer flexibelt när man riktar sig till mobilmarknadens websurfare. (softwaretestinghelp.com) Jag har validerat sidorna ofta och märkt att det mer och mer sällan inte validerar, vilket jag tolkar som att jag lärt mig en hel del.

Vad gäller min CSS så valde jag att nollställa sidan med Meyers reset, då jag vill börja om från början och inte vill ha något kvar som kan förstöra min egen stilmall. Denna reset har jag valt att lägga i ett eget CSS dokument och länka in i HTML dokumentet för att min egen stilmall ska förbli renare och mer lättöverskådlig.

För att få önskat utseende på min sida valde jag att använda mig av float. Detta då jag tycker att float är smidigt att jobba med och lätta att följa, men även för att det var en spännande utmaning. Bonus med float är att det fungerar på över 97% av alla webbläsare (caniuse.com). För att få min sida att floata på rätt sätt använde jag mig av en “maincontainer” runt två av mina kolumner som jag ville hålla ihop lite extra. Jag valde ordet container då det kändes mer semantiskt riktigt i enighet med vad Kaloyan Kosev skrivit i en artikel på css-tricks.com.

Då jag utgick från mobile first, så var det semantiskt riktigt enligt min åsikt att lägga “maincolumn” först i mitt html-dokument och sedan fortsätta med de andra två kolumnerna som ska ligga under “maincolumn” i mobilläget, och sedan tagga upp dem med div och klasser för att kunna programmera mina css på ett semantiskt och tydligt sätt. (...men då jag senare förstod att ni ville att man skulle tänka desktop first och att kolumn 2 (den jag kallar maincolumn) då skulle lägga sig överst i mobil-läge, så har jag bestämt mig att ta en titt på det efter jag är färdig med denna examinationsuppgift. Det handlar ju bara om var man lägger sin div-box och hur man floatar. Känner dock att jag är väldigt nöjd med den programmering och design jag redan gjort och vill lämna in den som den är nu. Ska även ta en närmare titt på FLEX-box och GRID. (Läste till exempel på caniuse.com att grid numera fungerar på i stort sett alla nyare versioner av webbläsare och flexbox på alla nyare, mer eller mindre, efter uppdateringar som skett under 2020.) I tablet/surfplatteläget ville jag att de två kolumner som kändes viktigast för mig skulle få ligga bredvid varandra överst på sidan då jag också tyckte att detta såg designmässigt mest tilltalande ut.

I mitt arbete för att få sidan responsiv så ville jag inte att sidan vid någon storlek alls skulle gå sönder, så jag har använt mig av flera brytpunkter, men tre huvudsakliga skärmlägen, bestående av mobilläge, sufrplatteläge och desktopläge vilket jag tydliggjort genom layouten på själva designen. Att det skulle vara smidiga övergångar mellan de olika skärmstorlekarna tycker jag är viktigt för att alla skärmar är så olika stora att jag vill att sidan ska förbli hel vilken storlek på skärm man än använder sig av.

Som rubriktext valde jag att använda mig av ’Comic Neue’ från Google fonts, vars licens är open. Den får alltså användas fritt. Jag tyckte även att denna font var trevlig som rubrik i sammanhanget. Till brödtext valde jag dock enbart Arial och Helvetica, då jag anser att de matchar bra med Comic Neue. De är dessutom tydliga och lättlästa vilket är viktigt att tänka på för att tilltala användarna (Bergström, 2017), och de fungerar dessutom på majoriteten av alla webbläsare. Jag har kontrollerat att mina fontstacks fungerar som tänkt genom att ta bort en bokstav i vardera fonten i min stack för att se att det förändras. Jag har försökt optimera läsbarheten genom att välja en behaglig storlek och öka radavståndet något, så som beskrivs i kapitlet om typografi i Bergströms bok.

Valet av en headerbild som representerar mig var enkelt. Jag älskar solnedgångar och friheten i naturen och denna bild representerar just det. Jag redigerade bildens storlek och format i Photoshop, samt lade till en bildtext i själva bilden med credits till fotografen. Jag valde att lägga den som bakgrundsbild för att den på ett bra sätt skulle följa med i headerns responsivitet. Jag har också av designskäl valt att använda mig av floralwhite istället för vit i både “logga”, headertext och bakgrund för att det inte ska bli ett sådant vasst och högkontrasterat ljus från skärmen när man som användare tittar på min sida.

Den globala menyn valde jag att göra med en div, med klassen navmeny. Att jag inte valde att använda mig av en ul var för att minska mängden xhtml-kod. Enda egentliga fördelen med att använda en ul eller ol som finns, är enligt David Walsh (css-ticks.com), att li är färdiga små blockelement. Jag valde att låta menyn se likadan ut på alla sidor för att man enklare ska kunna navigera mellan dem. Loggan har jag länkat till hemsidan och lagt till titeln Startsida som visas vid hover, och i footern har jag lagt en knapp för att snabbt ta sig upp till toppen av sidan. Jag ville skapa faktiska menyknappar, som jag blev riktigt nöjd med, och som fungerade i mobilläget, då jag inte gillar hamburgermenyer och helst undviker att använda dem.

Kolumnbilderna är bilder jag tagit själv. För att de skulle vara lättarbetade i detta projekt så beskar jag dem till lagom stora kvadrater i photoshop och sparade som pgn-filer. Jag har lagt in alternativ text och titel på bilderna vilket gör sidan tillgängligare även för de med synproblem. Jag lade till finessen att “mainimg” ska bli lite större än de andra kolumnernas bilder om skärmen blir tillräckligt stor i desktopläge, från att ha utgått ifrån att alla bilder var lika stora i mobilläge. Detta gjorde jag dels för att det var en kul grej och dels för att min sida INTE skulle se exakt likadan ut som den mockup som presenterades med uppgiften. Att fixa så att bilderna i mina sidokolumner positionerades rätt med float var smidigt.

I footern skapade jag tre kolumner som jag floatade och anpassade storleksmässigt för att de inte skulle krasha in i varandra vid krympning av skärmen. Att sidor inte ska gå sönder någonstans fick jag verkligen upp ögonen för i paralellkursen “Grafisk Design för Webb”, när Stefan Nilsson fick oss att analysera responsiviteten hos olika webbsidor.

I min print-css tog jag bort menyn och den onödigt stora headern, men gjorde istället en av de mindre bilderna större och tog bort en av de andra. Menyn är också borta då det inte finns någon mening med att skriva ut den. Även knappen i footern för att komma till toppen av sidan är borttagen. Dessa fyller ingen funktion på papper. Tror koden på denna CSS talar för sig själv.

I minagrund och responsive CSS:ar jag använt mig av TOC för att lättare hitta de olika sektionerna och jag har städat i omgångar och gjort om en del och städat igen. Jag har försökt tänka på semantiken så mycket som möjligt och att koden ska vara så ren som möjligt, men tror fortfarande det finns gott om rum för förbättringar.

Avslutningsvis skulle jag vilja säga att jag aldrig trodde att jag skulle lära mig så mycket på så kort tid och samtidigt ha så kul! Jag har lärt mig mycket mer än vad jag skrivit om i denna analys, men jag hoppas en del även framgår av de anteckningar jag gjort i mina CSS- och HTML- dokument under arbetets gång.