Analystext av Karl Håkansson

Examinationsuppgift i Webbutveckling med HTML och CSS HT23

2023-12-01

Inledning

Syftet med denna uppgift var att skapa en sematisk och responsiv webbshop från grunden genom att avända sig av HTML och CSS.

Programmeringsval

HTML5

Strukturen på källkoden i den här webbshoppen är uppbyggd på så sätt att den ska vara lätt att läsa och förstå, med uppenbara klassnamn, tabulatoravstånd och klassdjup.

CSS-Reset

Jag har valt att använt mig av en CSS-Reset från Josh Comeau, eftersom den är väligt simpel och skapar en förutsägbar design för webbshoppen. Den innehåller alla de små knep som han har upptäckt för att förbättra både användarupplevelsen och CSS-författarupplevelsen. (Josh Comeau, 2023)

Box-model

Jag valde att använda mig av Flexbox modellen då den kändes mest lämplig för en webbshop av denna struktur. I just denna uppgift så kändes flexbox som det mer flexibla och uppenbara valet.

Enheter

Storleksrelaterat så har jag använt mig av px (pixlar) på i stort sätt hela webbsidan då jag upplever att det är en mer precis enhet att använda sig av. På typsnitt har jag dock använt mig av em för att enklare relatera till den nuvarande storleken på typsnittet.

Färgrelaterat så har jag använt mig av en blandning av HEX och RGBA. HEX där jag vill ha en specifik färg och RGBA där jag vill blanda in transparens utan att använda mig av opacity i stillmallen.

Layout

Jag har alltid tyckt om genomskinligheten som Microsoft debuterade, även känd som Windows Aero, på sitt operativsystem Windows Vista, och som blev ännu mer rafinerat på efterträdaren Windows 7. Så i denna uppgift har jag försökt att återskapa lite av nostalgin genom att ha genomskinliga "fönster" med en aning suddighet bakom.

Navigation

Det ska vara lätt att navigera en hemsida, så min vision var att ha så få knappar som möjligt för att underlätta för användaren, och detta gjordes med ul listor. Enligt mig är det uppenbart då en meny är en lista med alternativ. Det finns många debatter om varför man borde använda sig av ul istället för div och tvärtom. Fördelen med en ul lista är att skärmläsare ser listan på ett helt annat sätt än div och kan använda sig av den på ett bättre sätt. (Chris Coyier, 2013)

I denna uppgift så är företagslogotypen en "impsum" logga från LogoIpsum (https://logoipsum.com/) till vänster, huvudmenyn centrerat i mitten av headern, och snabbknappar i ikonform för konto-hantering till höger.

Sidfot

Jag tycker om att vara minimalistisk av mig och gillar inte när det är för mycket "onödig" information överallt. Jag tycker att det ser stökigt ut med en massa text i sidfoten på hemsidor, så jag valde då att sprida ut denna text på olika sidor istället. Då kom jag fram med idén att ha tre länkar till dessa sidor, under företagslogotypen, om användaren så skulle vilja läsa mer.

Flexbox eller CSS Grids

Personligen så tycker jag att CSS Grids gör en hemsida för statisk, det vill säga, för låst. Samt att det kan bli väldigt plottrigt och svårläst i källkoden. Jag gjorde valet att bara använda mig av flexbox då jag anser att det är fullt tillräckligt för att göra en hemsida både responsiv och snygg på det sättet. Man slipper då använda sig av "fyllnadsklasser" i sin kod för att bygga sin hemsida.

Läsbarhet

Att vara en webbdesigner innebär att man måste få skriven text att se bra ut, vilket inte alltid är så lätt. Förutom att välja estetiskt tilltalande typsnitt så måste man välja lämpliga radhöjder och bokstavsavtånd, vilket snabbt kan göra projektet mer komplicerat. (Bureau of Internet Accessibility, 2023) Jag har lyckats med att hålla en WCAG AAA standard mellan 18.99 och 20.00 på denna webbshop.

Typsnitt

När det kom till valet av typsnitt så är det viktigt för mig att det ska vara lättläst och snällt för ögonen. Efter lite research på Google Fonts så kom jag tillslut fram till det lättlästa typsnittet "Poppins" (https://fonts.google.com/specimen/Poppins). Ett typsnitt med mjuka linjer och bra tjockhet.

Brytpynkter

Jag har gjort valet att bygga hemsidan så dynamisk och responsiv som möjligt, för att kunna ge alla möjligheten att använda hemsidan oavsätt enhet. Med det sagt så byggdes menyn på det sättet att den blir två rader när storleken underskrider 700px. Utöver menyn så är allt innehåll på hemsidan dynamisk och behöver ingen större ändring för att funka på andra enheter.

Bildoptimering

Alla bilder som används i denna examinationsuppgift är konverterade till filtypen WebP för att hålla storleken nere och kvaliteten uppe. WebP är ett rastergrafikfilformat utvecklat av Google avsett som en ersättning för filformaten JPEG, PNG och GIF. Den stöder både förlustig och förlustfri komprimering, samt animering och alfatransparens. (Michael Calore, 2010)

Utskrift

Då denna webbsida bara innehåller en riktig sida med information (analys) så valde jag att bara göra utskriften på analystexten behaglig på fysiskt papper, genom att ta bort menyer och logotyper.

Kompatibilitet

I stort sätt det mesta som jag har använt mig av funkar på alla möjliga webbläsare. Ett undantag är bildformatet WebP, som inte funkar på Internet Explorer. Fast av säkerhetsskäl så bör du inte använda den webbläsaren längre, så det finns ingen anledning till att stödja denna.

Buggar och felaktigheter

Ett känt fel som jag inte lyckats hitta orsaken till är att i Google Chrome så verkar texten vara lite slät och ytterst suddig. I Firefox så är texten skarpare. Utöver det så har jag inga problem med källkoden eller skillader mellan webbläsare.

Summering

När jag påbörjade den här uppgiften, så förväntade jag mig att det skulle vara ganska enkelt. Jag menar, jag har ju programmerat webbsidor tidigare, så det borde inte vara så svårt, eller hur? Men jag insåg snabbt att jag hade fel.

Själva programmeringsdelen gick relativt smidigt, men jag kämpade lite med det kreativa. Efter många försök och omfattande research hittade jag till sist min inspiration: Windows Aero. Jag fick en riktig nostalgi-feeling av genomskinligheten och effekten av glas och kännde att jag kunde bygga på det.

Den verkligt utmanande delen av denna uppgift var dock att skriva analystexten. Det var en helt ny erfarenhet för mig, och utan tidigare kunskap var det verkligen inte enkelt.

Referenser