Analystext av X

1. Inledning

Examinationsuppgiften innebar att skapa två HTML-filer med en CSS-fil för en fiktiv webbshop och analyssida, där korrekt syntax, semantik och best-practice skulle användas.

2. Programmeringsval och kodstruktur

De val som uppstod vid framtagningen av hemsidan handlade initialt om hur jag skulle strukturera den på ett optimalt sätt. Initialt användes flexbox, men övergång till grid-layout genomfördes då det är bättre lämpat för att hantera både kolumner och rader, vilket hemsidan bestod av (Faraon & Holmberg, 2022, s. 256). I vissa sektioner, exempelvis i header-nav, hade flexbox varit mer lämpligt för att skapa en rad. Bedömningen var dock att grid-layout skulle vara enklare att hantera vid behov av omstrukturering.

2.1 HTML5

Sidan följer praxis för semantiska element som header, main, section, article och footer för att förbättra tillgänglighet och SEO. Produkterna ligger i article-element eftersom dessa, enligt Faraon och Holmberg (2022, s. 70), är avsedda för fristående innehåll som kan spridas.

2.2 CSS-reset

Jag har använt CSS-reset "normalize", vilket är ett nyare sätt att utföra en CSS-reset jämfört med traditionella metoder. Vid en vanlig CSS-reset tas all styling bort, men så är inte fallet med Normalize. Här behålls användbara standardvärden samtidigt som skillnader mellan olika webbläsare hanteras. Detta är mer effektivt än att ta bort all styling. Jag valde just Normalize av denna anledning, men också för att det rekommenderades i videomaterialet som ingick i kursen.

2.3 Box-model

Hemsidan använder sig av box-sizing: border-box för att enklare kontrollera elementens storlek, eftersom padding och border inkluderas i höjd och bredd. Detta underlättar skapandet av hemsidan genom att göra det mer intuitivt (Faraon och Holmberg, s.227).

3. Layout, responsiv design och användarvänlighet

Hemsidan har en retro-arkad-stil inspirerad av tidig internetdesign, skapad med moderna tekniker och layout-praxis.

3.1 Navigation

Navigeringen på hemsidan sker genom en meny som är placerad högst upp. Placeringen av navigationen i sidans övre del valdes eftersom det är där navigationsmenyer vanligtvis placeras (Faraon & Holmberg, 2022, s. 62). Dessutom framhåller Dos Santos et al. (2011) att horisontella menyer högst upp på sidan är den föredragna placeringen för navigering. Bedömningen är att denna placering är logisk, då användaren snabbt får en överblick över hemsidans innehåll och de möjliga navigeringsvägarna. Menyn skapades med hjälp av en "nav-tagg" och en "ul", där varje länk ligger i ett "li-element". En oordnad lista användes detta eftersom det inte finns någon inneboende hierarki mellan länkarna är det korrekt att använda en ul (Faraon och Holmberg, 2022, s. 132).

3.2 Sidfot

Sidfoten har placerats längst ner på sidan vilket är i linje med praxis för hur en hemsida struktureras upp (Faraon & Holmberg, 2022, s. 62). Föreliggande hemsida innehåller den information som en användare förväntar sig att finna där, vilket enligt Faraon och Holmberg (2022, s. 78) är exempelvis kontaktuppgifter, köpevillkor samt länkar till sociala medier.

3.3 CSS Grids

Hemsidan är byggd med en grid-layout, ett val baserat på dess förmåga att effektivt hantera både kolumner och rader, vilket gör den särskilt lämplig för detta ändamål (Faraon och Holmberg, 2022, s. 256). Ursprungligen använde hela hemsidan en grid-layout, men det visade sig att detta blev onödigt komplicerat för enklare layouter. Därför gjordes justeringar för att kombinera grid-layout och flexbox, vilket möjliggjorde en mer flexibel och optimerad lösning. Detta förfarande är i linje med rekommendationerna från Faraon och Holmberg (2022, s. 259). En aspekt kopplat till grid-layout som jag kommer ta med mig är att använda mig av metoden "grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))" för att minska ner den manuella hårdkodningen, vilket har tagit mycket tid i anspråk.

3.4 Flexbox

Flexbox användes framförallt för att hantera justering av element där layouten var endimensionell, vilket är i linje med hur flexbox bör användas enligt Faraon och Holmberg (2022, s. 269). Filterfunktionen och sökfunktionen justerades med hjälp av flexbox eftersom användandet av grid-layout blev överkomplicerat. För den övergripande navigationen borde flexbox ha använts, då det ligger i linje med flexboxens avsedda användningsområde. Vid skapandet av hemsidans grund var bedömningen dock att grid-layout skulle göra det enklare att flytta runt navigationslänkarna vid förändringar av skärmstorleken. Med facit i hand skulle flexbox även ha fungerat väl där.

3.5 Läsbarhet

För att göra texten lättare att läsa används en större fontstorlek på hemsidan. Enligt WCAG rekommenderas minst 16px som textstorlek, och lite större kan vara ännu bättre för att förbättra läsbarheten. Jag har valt ett retroinspirerat typsnitt som passar designen, och flera olika alternativ testades för att säkerställa att det inte försämrar läsbarheten. Det typsnitt jag till slut valde fungerar bra, och jag har också lagt till fallback-typsnitt som Arial ifall det primära inte laddas. Hemsidan följer WCAG och klarar nivå AAA på alla delar utom "lägg i kundvagn"-knappen, som ligger på nivå AA. Jag valde att inte nå AAA där eftersom det skulle försämra den design jag ville ha. Eftersom AA ändå är godkänt enligt WCAG kändes det som en bra kompromiss. Vidare för att göra hemsidan mer tillgänglig har jag lagt till alt-attribut på bilder och anpassat kontraster och färgval så att de stämmer med WCAG:s riktlinjer (WCAG Learning, u.å.).

3.6 Responsiv design och brytpunkter

Hemsidan innehåller flera brytpunkter för att skapa en användarvänlig design som stöder en mängd olika enheter med varierande skärmstorlekar. Brytpunkterna har valts med utgångspunkt i standardstorlekar för stora skärmar, laptops, surfplattor samt stora och små mobiltelefoner. Detta har undersökts genom att använda sig av dels av utvecklarläget, dels skarp testning genom uppladdning av hemsidan. Utöver detta har specifika brytpunkter implementerats för att säkerställa att designen inte påverkas negativt. Till exempel har en brytpunkt lagts in när fönstrets bredd närmar sig wrapperns bredd, för att säkerställa att bakgrunden förblir synlig. Detta för att bibehålla den design jag eftersträvat. Vidare bidrar flertalet brytpunkter till att webbläsar-fönstret kan justeras till ett flertal olika storlekar och ändå bibehålla god överblick.

3.7 Utskrift

Hemsidan är anpassad till att kunna skrivas ut i både stående och liggande läge. De avgränsningar som gjorts gällande utskrifter är att det enbart är produkterna som kommer att skrivas ut. Begränsningen är gjort därför att hemsidan innehåller mycket grafik och bilder vilket innebär att både papper och skrivarbläck kommer gå åt. Bedömningen att om utskrift sker så är det framför allt produkterna som är av intresse och övrig layout på hemsidan blir då överflödigt.

4. Bildoptimering och kompabilitet

Bilderna som används på hemsidan har anpassats i förväg efter dimensioner som bedömts som lämpliga. Bildformatet JPEG har valts, eftersom det är det rekommenderade formatet för fotografier (Faraon och Holmberg, 2022, s. 120). För att förbättra tillgängligheten har alt-attribut använts på samtliga bilder, vilket gör det möjligt för personer som av olika skäl inte kan se bilderna att ändå förstå deras innehåll. Detta är en rekommenderad praxis vid användning av bilder (Faraon och Holmberg, 2022, s. 121). Bildernas format och storlek påverkar hur snabbt hemsidan laddas. Efter att ha testat hemsidan i ett externt program föreslogs att istället använda formaten WebP eller AVIF, som erbjuder bättre prestanda. Eftersom jag inte är bekant med dessa format valde jag att fortsätta använda JPEG. I framtida projekt planerar jag dock att utforska dessa format, då snabba laddningstider är en viktig del av användarupplevelsen. För att minimera problem med layoutskiften (CLS) har höjd och bredd angetts för bilderna direkt i både HTML och CSS. Höjd och bredd utan enheter i HTML fungerar som en fallback om CSS-filen av någon anledning inte laddas. Detta säkerställer att webbläsaren reserverar rätt utrymme för bilderna innan de laddas, vilket bidrar till en stabilare och mer förutsägbar användarupplevelse.

4.1 Kompabilitet

Gridlayout används eftersom det är en modern layoutmetod som stöds av 97,51 till 97,95 % av alla användare globalt, med Opera Mini som det enda större undantaget (Can I Use, u.å.). I en verklig situation skulle en kostnad-nytto-analys behöva genomföras för att avgöra om det är värt att utveckla en fallback-lösning, exempelvis med Flexbox, eller om det är bättre att prioritera modern teknik. För de få användare vars webbläsare inte stödjer Gridlayout kan en lösning vara att visa ett meddelande som informerar om att deras webbläsare inte fullt ut stöds. Meddelandet kan samtidigt uppmana dem att byta till en modern webbläsare, som exempelvis Firefox, för att kunna använda sidan optimalt. Valet av Gridlayout motiveras av att det är den senaste tekniken, med ett stadigt ökande stöd (Can I Use, u.å.). Genom att använda grid-layout kan sidan optimeras för majoriteten av användarna och är forsatt framtidssäker.

5. Buggar och felaktigheter

En bugg som noterades på iphone där hemsidans font inte visas korrekt. Arcade-fonten blev inte en heldragen linje över och under texten utan separerade linjen. Detta leder till ett visuellt problem som bryter mot den önskade designen. Problemet verkar vara specifikt för Safari och iOS-enheter. Ingen lösning på problemet har hittats.

6. Summering

Uppgiften har varit utmanande många gånger. Att få sidan att fungera och se korrekt ut på olika webbläsare och enheter var krävande. Trots användning av CSS-reset uppstod avvikelser mellan Firefox, Edge och mobila enheter. Centreringen av filter- och sökfunktionen var ett problem som löstes genom att byta från grid-layout till flexbox, vilket fungerade på alla enheter. Trots utmaningarna är jag nöjd med resultatet.

Referenser

• Faraon, M., & Holmberg, L. (2022). Introduktion till HTML och CSS. Lund: Studentlitteratur.
• WCAG Learning. (u.å.). Kontraster och färger. Hämtad 19 januari 2025, från https://wcaglearning.com/learn-lessons/kontraster-och-farger/
• Dos Santos, E. P. B., De Lara, S. M. A., Watanabe, W. M., Filho, M. C. A., & Fortes, R. P. M. (2011). Usability evaluation of horizontal navigation bar with drop-down menus by middle-aged adults. Proceedings of the 29th ACM International Conference on Design of Communication (SIGDOC '11), 3–5 October, Pisa, Italy. https://doi.org/10.1145/2038476.2038504
• Can I Use. (u.å.). Can I Use... Support tables for HTML5, CSS3, etc. Hämtad 18 januari 2025, från https://caniuse.com/