Marcus Wilje

Analystext av Marcus Wilje

Examinationsuppgift i Webbutveckling med HTML och CSS HT23 LP1

2023-10-22

1. Inledning

Denna examinationsuppgift syftar till att ge oss studenter chansen att visa upp våra kunskaper kring uppbyggnad av en simpel hemsida utifrån de moment i HTML och CSS vi har haft fram tills nu. Huvudsaklig bedömning är på HTML samt CSS-kod men också argumentation samt reflektion över val av just denna kod över andra metoder som kan uppnå samma resultat. Utöver uppvisning av våra kunskaper inom kodning, är den även till för att öva på korrekt referenshantering enligt Harvardmodellen.

2. Programmeringsval

HTML-koden använder en standardstruktur för att organisera och presentera webbsidans innehåll på ett överskådligt sätt för användaren. Den är indelad i olika standardsektioner, inklusive header, main och footer, för att förenkla navigeringen för kodaren. Den inkluderar också CSS och JavaScript-funktioner för att förbättra användarupplevelsen. Sidan är skapad med användarvänlighet i åtanke, då den genomgår responsiva förändringar vid visning på olika skärmupplösningar.

3. Layout

3.1 Responsiva förändringar

De större responsiva förändringarna sker vid 960px (tablet) samt 768px (mobil). För tablet valde jag att göra produktkorten 3 horisontellt och på mobil 2. Även footern förändras och följer nästan samma koncept, men vid tablet är max 3 element och vid mobil 2 synliga. Detta då det är tillräckligt lättläst och klickbart utan att behöva förstöra utseendet alltför mycket. I övrigt skalar sidan på egen hand och vissa element med hjälp av flexbox.

3.2 Användarvänlighet

I helhet har jag försökt hålla sidan användarvänlig genom att begränsa antalet synliga element och se till att produktkorten är i fokus, eftersom hemsidans mål är att sälja produkter. Sidan anpassar sig enligt skärmstorlek, och med hjälp av lite JavaScript får tablet- och mobilanvändare en knapp för att ta sig till toppen. Valet för detta är att PC-användare redan har möjligheten att snabbt navigera på sidan med hjälp av antingen mus eller pekplatta på laptopen och scrollfunktion. Vi introducerar även lite effekter vid bland annat hovering och vid tryck på länkarna för att tydliggöra vart slutanvändaren befinner sig men också för estetiska skäl.

3.3 Header

Headern består av en klickbar logotyp och en simpel navigeringsmeny. Den klickbara logotypen är till för att enkelt kunna navigera sig till hemsidans indexsida. Denna funktion är relativt använd på de flesta hemsidor och förväntas i allmänhet vara närvarande. Logotypen görs synlig med elementet img omslutet av en href som pekar på index.html-filen, vilket gör den klickbar. Sedan har man också navigeringsmenyn, som i detta fall består mest av fluff, men hade i en riktig situation varit väldigt viktig för slutanvändaren för att ta sig runt på sidan. Navigeringsmenyn är skapad med elementet nav, som indikerar "navigation," följt av a-elementen som pekar vart vardera länk ska ta användaren.

3.4 Main

Main-delen består huvudsakligen av våra produktkort, som är huvudsidans fokus för försäljning. Jag valde att omsluta samtliga produktkort av elementet "section." Här hade jag valet mellan att använda section eller article. Det finns inga strikta användningsområden för section vs article, men det finns riktlinjer som man kan följa. Enligt (Sabya_Samadder, 2022) kan man kortfattat säga att sammanhängande element eller information som kan ta användaren vidare, ska omslutas av elementet section, medan information som kan "stå på egen hand" och inte nödvändigtvis har något sammanhängande med övriga element ska använda sig av elementet article. Då produktkorten följer samma struktur, har samma användningsområde och skulle i en riktig situation ta användaren vidare till mer information eller kundkorgen, tyckte jag att elementet section var det rätta valet. Sedan har jag valt att omsluta produktbilderna av elementet picture, som i mitt fall tillåter sidan att ha 2 olika bildformat. Om webbläsaren stödjer bildformatet webp, så visar vi det i första hand, annars faller vi tillbaka till en bild med jpg-format. Anledningen till detta är att webp är ett bättre val (Matteo Duò, 2023) då bilderna är mindre i storlek och skalar bättre, vilket ger hemsidan en snabbare laddningstid och bättre bildkvalitet på mindre skärmar. Men eftersom webp fortfarande är relativt nytt och inte tillgängligt i alla webbläsare, har vi bildformatet jpg som backup.

3.5 Footer

Footer-sektionen är relativt enkel och är uppdelad med hjälp av klassen "grid-container," som använder sig av "display: flex," följt av klassen "grid-item" med procentandelar för att skapa en responsiv förändring beroende på skärmstorlek. Dessa procentandelar ger oss möjlighet att bestämma hur mycket plats vardera element ska ta på skärmen. På så sätt behöver vi inte ange storlek eller placering på alla olika skärmstorlekar, utan vi har alltid en viss procentandel på högsta upplösning (1300px i detta fall) och sedan ökar den på mindre skärmar, vilket tvingar elementen att anpassa sig. Det som skiljer sig lite i footern är att sista sektionen "about us" i mitt fall får en egen kolumn på "rad 2" genom att använda "flex: 2" (där 2:an säger att detta element ska ta upp dubbelt så mycket plats som element med "flex: 1"). Valet där är då sidan är till för organiska produkter, vilket troligtvis skapar en fråga hos slutanvändaren om varför man ska lita på företaget, och det är viktigt att det är lätt att hitta och läsa. Man skulle kunna använda grid istället för flex och skapa en statisk plats för elementen, men då det inte nödvändigtvis var tanken, använder jag mig av flex istället och ser bara till att "about us" sektionen prioriteras. Har dessutom valt att lägga till padding 8px på footer-list vid 960px upplösning och neråt för att undvika en fel-klickning på mindre skärmar med större händer. Denna padding skapar alltså ett större mellanrum för vardera li-element.

3.6 Läsbarhet

Sidan använder flera sätt för att göra den mer läsbar för slutanvändaren. Bland annat den responsiva designen, som gör det möjligt oavsett skärmstorlek, att få element och text att anpassa sig. Jag har även valt att blanda fontstilar då "robotobold" gör sig bra på titlar och mindre stycken men blir väldigt svårläst i övrigt. Så jag valde att istället använda "quicksandregular" i övrigt. Om användaren inte har möjlighet att ladda ner eller se dessa extra fonter, så använder vi 2 mer användarvänliga fonter (Irfan F., 2023) som backup, "Verdana" och "sans-serif," för att säkerställa att texten syns på alla enheter/webbläsare. Teckenstorleken ändras lite beroende på skärmstorlek och sida. På index.html sidan använder vi en mindre fontstorlek, då det inte förväntas vara några längre textstycken. På analys.html sidan har vi längre textstycken med större fontstorlek för att underlätta läsningen (Erik D. Kennedy, 2021). Vi gör även fontstorleken lite större på mindre enheter för att göra sidan tydligare. Färgerna hålls enkla med svart text på vit bakgrund eller svart bakgrund med vit text. Sedan bryter den blåa färgen på produktkorten för att fånga slutanvändarens uppmärksamhet. Oavsett så görs texten tydlig att läsa. Det finns även effekter på både länkar och produktkort som inte bara skapar en trevligare interaktion för slutanvändaren, utan även tydliggör vart på sidan man hovrar/klickar.

4. Summering

Hemsidans koncept är då försäljning av diverse hälsoprodukter, så målgruppen är mer inriktad mot tonåringar och vuxna. Detta i åtanke gjorde så att jag valde en relativt minimalistisk sida så att fokuset ligger på produkterna. De utmaningar jag stötte på initialt var om jag skulle koda PC- eller mobile-first, hemsidans koncept, utseende och målgrupp. Då jag kände mig mest bekväm med PC-first, utgick jag ifrån det och skalade ner allt eftersom med hjälp av flexbox och @media. Färgvalen är enkla och följer en svart/vit/grå standard, förutom på produktkorten där jag inkluderar en blå färg för att fånga användarens blick mot "köp nu"-knappen. Sedan blev det uppenbart att vid användning av tablet och mobil skulle det bli en utmaning att behöva navigera sig upp och ner på sidan, särskilt vid tillägg av fler produktkort. Så valet här stod då mellan att göra headern och loggan statisk med sidan, så att användaren alltid har tillgång till den, eller använda någon sorts knapp för att hjälpa användaren. Initialt valde jag det förstnämnda och gjorde headern statisk med hjälp av "position: fixed," men tyckte det blev alldeles för kladdigt och fokus på bland annat mobil blev då istället headern istället för produkterna. Så jag valde istället att med hjälp av lite Javascript och CSS lägga till en knapp som enbart blir synlig på mindre skärmar och när man scrollat ner på sidan. Annars gick det mesta relativt enkelt och jag stötte inte på några långvariga problem och kan inte på egen hand upptäcka några större fel på hemsidan i dess nuvarande status.

Referenser

Erik D. Kennedy (2021). The Responsive Website Font Size Guidelines. https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html [2023-10-28].
Irfan F. (2023). The 20 Best HTML Fonts to Use in 2023. https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html [2023-10-28]
Matteo Duò (2023). 15 Best Image File Types (Pros vs Cons + Use Cases for Each Format). https://kinsta.com/blog/image-file-types/#4-webp [2023-10-25]
Sabya_Samadder (2022). Difference between <article> tag and <section> tag. https://www.geeksforgeeks.org/difference-between-article-tag-and-section-tag/ [2023-10-21]