Processanalysen
Här kommer det att beskrivas hur sidan är uppbyggd och varför den är byggd på detta sätt.
1 Dokumenttyp
Här valdes html5 som är den senaste standarden för att webbplatsen skall vara framtidsanpassad samtidigt som html5 också har stöd av majoriteten av dagens webbläsare enligt webbsidan ”Can i use” (Can I Use…, n.d.).
2 Dokumenthuvud
I head elementet finns det flera meta-taggar, en för charset som är inställt på UTF-8 teckenuppsättning för att våra svenska tecken åäö skall visas korrekt på skärmen. En annan meta-tagg för viewport för att kontrollera att layouten på mobiltelefoner skalas ner på ett visuellt verklighetstroget sätt. Visserligen använder denna webbplats media-query för att visa sidan på mindre enheter på bästa sätt, så den skulle egentligen inte behövas. Description och Author har använts för att beskriva vad sidan handlar om och vem som är författare av sidan. Däremot valdes det att inte använda keywords då sidan inte innehåller en riktig text som sökmotorerna kan använda för att ranka sidan. link har använts för att länka till två olika typsnitt från Google fonts och för att länka in CSS-reset, på denna sida har jag valt att använda CSS Normalize för att den hjälper till att få utseendet på de olika webbläsarna så lika som möjligt (Elad Shecher, 2019). När jag har lärt mig mera kommer valet att falla på CSS Reset då det finns större möjligheter att styra allt själv. Valet av just Google fonts är för att dessa typsnitt är tillgängligt för alla och att man på detta vis inte behöver ha typsnittet i koden som kan göra att webbsidan laddas långsammare. Skulle Google font ligga nere när en användare besöker sidan kommer användarens egna lokala typsnitt att användas. De resterande två länkarna är CSS länkar, en för att styra sidans utseende i datorskärmstorlek och en för att styra om skärmstorleken ändras eller vid utskrift av sidan. Jag har valt att ha tre CSS stilmallar för att det ska vara enklare att hitta i koden och för att filerna inte ska bli allt för långa.
3 Dokumentkropp
I body elementet finns en div-tagg med namnet container som omsluter hela bodyn. Via CSS styrs containers bakgrundsfärg och bredd som den ska ha utifrån skärmstorleken. Genom att låta container omsluta hela body så är det lättare att styra hela sidans bredd även om sidan ändrar bredd och centrera innehållet. Detta gör att textraderna bred begränsas och då blir läsbarheten bättre men även att bilderna behåller sina platser i förhållande till texten. (Knowledge Kitchen, 2016-05-27).
I header finns en bakgrundsbild och på den ett filter, linear-gradient, som gör att bakgrundsbilden tonas mörkare för att texten i call to action-taggen cta ska få en bättre läsbarhet. Cta-taggen är en lista med ord som placeras med hjälp av float. För att styra placeringen av de olika objekten så har float använts, detta för att float är en äldre metod att styra placeringen och har då den fördelen att den fungerar även på äldre webbläsare.
Överst till vänster på sidan finns en textlogga som är markerad som en h1. Det är sidans huvudrubrik för att sökmotorerna ska ranka sidan högre (Sam Hollingsworth, 2020-11-20). Textloggan är även klickbar och gör att man kommer tillbaka till första sidan. För att som användare ha möjlighet att komma tillbaka till första sidan på ett enkelt sätt och även för de användare som kanske kommit in på en annan sida än startsidan då man inte vet vilken sida användaren först kom till på webbplatsen (Vägledning för webbutveckling, 2018-02-12).
Därefter ligger navigeringen, nav i en ul-lista med fyra li-element dessa flyter till höger med hjälp av float. Beroende på vilken sida man befinner sig på, har en class lagts till på den aktuella sidan, som med hjälp av CSS mallen färgar bakgrundens menytext röd så att man lätt kan se vilken sidan man befinner sig på.
I main finns tre parallella article-element som innehåller en bild med en ram och efterföljande text. Det första stycket är märkt upp med em för att betona det inledande stycket. I resten av stycket har det använts p-taggar för att det är en löpande text.
Därefter en footer vilket har tre divar som bildar tre kolumner. I varje kolumn finns en h3-tagg som berättar om innehållet och ett antal p-taggar som är själva innehållet.
3.1 Vid utskrift
När användaren vill skriva ut sidan så döljs den stora bakgrundsbilden, navigeringen och ”call to action” texten då dessa inte fyller någon funktion när sidan skrivs ut utan tar bara upp plats från det som är viktigt.
3.2 Vid storlek motsvarande platta
När en användare går till sidan via en plattas storlek ändras sidan till att den första spalten får ta hela sidans bred medan de andra två får dela på sidans bredd. Även bilden centreras över varje spalt. Detta görs för att texten fortfarande skall vara läslig även fast bredden på sidan har minskat.
3.3 Vid storleken motsvarande mobil
När en användare använder en mobils storlek, ändras loggan och får ta hela sidbredden och centreras för att fingrarna skall rymmas och kunna trycka på loggan för att komma tillbaka till start sidan. Under ligger nu navigeringen som också tar upp hela sidans bredd. Call to action texten har dolts då den tar upp för stor den av bilden och inte ger någon viktig information.
Spalterna tar nu upp hela sidbredden vardera. Där andra kolumnen ligger först och för att få till detta används flexbox, det för att man ska kunna använda order för att bestämma ordningen, i detta fall på kolumnerna. Vid användandet av denna metod behövs mindre kod och sidan laddas snabbare även om det kan finnas äldre webbläsare som inte fungerar. Men detta gäller mobilen och då har den större delen av användarna en modern sådan.
4 Reflektion
Det har varit en rolig och lärorik uppgift, bra att den var uppstyrd hur sidan skulle se ut, så jag kan fokusera på att koda själva sidan. Svårigheten har varit att hitta andras åsikter varför jag har gjort si och så.
Då jag har gjort mer av erfarenhet hur en webbsida ser ut och genom att göra sidan på detta sätt har jag även gjort en sida som ger trygghet att använda, då användaren känner igen sig.
Referenslista
Can I Use (n.d). Can I Use…? [Elektronisk]. Tillgänglig: https://caniuse.com/ [2021-11-07].
Elad Shechter (2019-05-19) Normalize CSS or CSS Reset?! [Elektronisk]. Tillgänglig: https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e [2021-11-07].
Knowledge Kitchen (2016-05-27) Using a container or wrapper element on HTML web pages [Elektronisk]. Tillgänglig: https://knowledge.kitchen/Using_a_container_or_wrapper_element_on_HTML_web_pages [2021-11-07]
Sam Hollingsworth (2020-11-20) How important is an H1 Tag for SEO? [Elektronisk]. Tillgänglig: https://www.searchenginejournal.com/h1-tag-seo-how-important/387306/#close [2021-11-07]
DIGG (Myndigheten för digital förvaltning) (2018-02-12) Länka alla sidor till startsidan [Elektronisk]. Tillgänglig: https://webbriktlinjer.se/riktlinjer/31-alla-sidor-ska-ha-lankar-till-startsidan-och-andra-sidor-som-ar-viktiga-for-orienteringen/ [2021-11-07]