Processanalys
Sidan är responsiv vilket innebär att den använder sig av media-queries som genom breakpoints anpassar sidinnehållet efter olika skärmupplösningar (Bernhardsson, u.å.-a). För att innehållet ska hålla för upplösningar mellan dessa breakpoints är designen dessutom fluid, vilket innebär att storlekar i anges i relativa enheter som % eller em så att innehållet att anpassas när viewportens storlek förändras (Bernhardsson, u.å.-b). För vanliga desktops utgår Bootstrap i sina media queries (Bootstrap, u.å.) från max 1200px, vilket därför blir max-width på min sida och den storlek jag utgår ifrån. I övriga media queries utgår jag från var mitt innehåll går sönder snarare än utifrån viewports för specifika enheter eftersom det finns så otroligt många olika storlekar att ta hänsyn till (se media queries nedan).
I html-dokumentens head återfinns (förutom det uppenbara) en länk till normalize.css som gör att sidan ser likadan ut i olika webbrowsers (Gallagher, 2018). Detta är ett mer praktiskt alternativ än en css-reset eftersom inte alla inställningar nollställs. Här finns också en länk till Google fonts fonten Oswald, en modern men uttrycksfull sans-serif som passar bra in i den övriga designen.
Eftersom koden är skriven i xHTML strict består strukturen inom body av div-taggar med semantiska id- eller klassnamn (t.ex. wrapper, header och nav). I de fall där respektive div bara förekommer en gång och inte delar egenskaper med något (t.ex. header) får den ett id, och i de fall där jag behöver nå flera div samtidigt (t.ex. content), får dessa ett gemensamt klassnamn (Bernhardsson, u.å.-c).
Wrappern omsluter de synliga elementen och behövs för att styra bredden på dessa. Egenskapen max-width anges istället för width så att sidan blir fluid. Wrappern får en tunn ram som omsluter övriga element och på detta sätt ger intrycket av en sammanhållen helhet.
Header
Sidans header är fäst längst upp på sidan (position:fixed) för att användaren alltid ska ha tillgång till menyn även när hen scrollar. Här krävs även en justering av subheaderns topp-marginal så att den inte täcks av headern (w3schools.com u.å.-a.). Eftersom element med position:fixed inte längre är en del i det naturliga flödet måste vi specificera headerns bredd så att den håller sig inom wrappern (CSS-tricks, 2014).
Sidans header innehåller en logotyp (logo) och en meny (nav). Logo är uppbyggd av två separata span-taggar eftersom den så småningom ska delas. Nav består av en ul-lista, en onumrerad lista som passar bäst när list-elementen inte står i någon särskilt inbördes ordning (Bernhardsson, u.å.-d) vilket ju är fallet i en meny. List-elementen fungerar även som länkar till första (index-sidan) respektive andra sidan (process-sidan). En reell webbplats hade förmodligen haft en särskilt sida med kontaktinfo men i detta fall länkas list-elementet "kontakt" till kontaktinformationen i footern (vilket egentligen bara är relevant i de upplösningar som inte har en fixed footer).
Headern byggs med hjälp av ett grid för att de olika elementen lätt ska kunna positioneras och även byta inbördes ordning vid vissa upplösningar. Även flexbox gör det lätt att positionera element, men med tanke på att jag behöver organisera flera olika element inte bara i x- utan också så småningom i y-led är grid ett lämpligare val (Sarker, 2018). Genom att välja den relativa enheten fr på kolumnerna i grid blir layouten fluid. Headern får en tunn ram enligt layouten i uppgiftsbeskrivningen samt en försiktig antydan till gradient. Slutfärgen är en blågrön nyans som återfinns i en bild längre ner på sidan och en mer mättad version av samma färg blir startfärg. Skillnaden mellan start- och stoppfärg är liten eftersom målet är att få lite dynamik i header och footer utan skapa ett rörigt intryck, särskilt längst upp på sidan där det redan händer väldigt mycket. Enligt CanIuse (Can I use, 2020) har linear-gradients ett bra stöd, men gradientens startfärg sätts ändå som fallback ifall enstaka webbläsaren inte klarar av denna funktion (Bernhardsson, u.å.-e).
Logon byggs upp enligt layouten i uppgiftsbeskrivningen. Basen är en mörkgrå nyans som är snällare mot ögonen än svart (Osbourne, 2015). Denna nyans används genomgående i stället för svart även i span och paragrafer. Istället för vit använder jag av samma anledning den lite mjukare whitesmoke. Fonten Oswald från Google Fonts får här, och på alla andra ställen där den förekommer, en font stack som säkerställer att texten blir läsbar även om länken till Google Fonts av någon anledning inte skulle fungera.
Designen på länkarna justeras genom att default-värdet för färg samt understrykningen för länkar tas bort. I en löpande text är färg och understrykning bra för att tydliggöra länkar, men att en meny består av länkar är uppenbart. Besökta länkar får färgen whitesmoke för att hålla ihop designen. De länkar som muspekaren rör sig över tydliggörs genom att markeras genom fet stil. Slutligen försvinner den röda default-färgen för aktiva länkar, också av estetiska skäl (Bernhardsson, u.å.-f).
Subheader
Bakgrundsbilden till subheadern bearbetas om till rätt storlek i Photoshop. Det finns ju ingen anledning att ha en bild med större upplösning än som faktiskt ska visas. Bildformatet jpg passar bäst för denna typ av bild som är ett fotografi med många färger men utan transparens (Högskolan Kristianstad, u.å.).
Subheaderns bakgrundsbild kan inte vara fluid eftersom höjden är fast. Om bredden, men inte höjden, skulle förändras relativt skulle bakrundsbilden förvrängas. Istället sätts background-position: center så att bakgrundsbilden skalas av från båda sidor när viewporten förändras. Bildens motiv gör att denna metod fungerar och bilden är snygg ända till 700px (se nedan).
I subheadern återfinns också en h1 vars syfte är att underlätta för skärmläsare och därmed göra sidans innehåll tillgängligt för alla. I möjligaste mån ska varje sida ha en h1 (Bernhardsson u.å.-g). Eftersom en huvudrubrik i form av en h1 inte passar i min layout göms den genom att puffas ut i periferin med hjälp av indentering och blir osynlig (Bernhardsson, u.å.-h).
I subheadern finns också tre punkter som beskriver mig. Dessa är uppdelade i tre spans eftersom de ska staplas ovanpå varandra, vilket sker med hjälp av float: right och clear: right. Float lyfter elementen ur det normala flödet och låter dem ”flyta” inom sin förälder (Bernhardsson, u.å.-i) , medan clear anger att flytandet ska upphöra (Bernhardsson, u.å.-j). Punkterna positioneras horisontalt genom att bredden på dessa element samt deras marginaler utgör en sammanlagd bredd på 100%. Vertikalt puffas punkterna ner från subheaderns övre kant genom att en topp-marginal sätts på span nummer ett. På index-sidan gör den gömda h1-rubriken visserligen att punkterna placerar sig snyggt vertikalt per automatik men inställningarna behövs ändå för process-sidan.
Huvudinnehåll
MainContent får en behaglig, ljusgrå bakgrundsfärg. Här finns tre olika innehåll på index-sidan och två på process-sidan. Dessa har en gemensam klass (content) som fångar upp deras gemensamma egenskaper samt varsitt individuellt id för indviduella inställningar.
#mainContentIndex syfte är att göra enbart huvudinnehållet på index-sidan nåbart. Det är nödvändigt eftersom dess struktur skiljer sig från process-sidans. På index-sidan byggs strukturen med hjälp av ett grid av samma anledning som när headern byggdes.
På process-sidan behövs inget särskilt id för mainContent. Här organiseras innehållet inte med hjälp av ett grid utan helt enkelt genom att de två barnen till mainContent (#analysis och #aside) får bredden 57% respektive 37%, vilket tillsammans med marginaler och ramar utgör 100%. De placeras sedan bredvid varandra med hjälp av float: left. Detta resultaterar i att en clearfix (Gallagher, 2011) måste sättas på mainContent eftersom egenskapen float gör att ett elements barn försvinner ur det naturliga flödet. MainContent känner inte längre av sina barn och kollapsar. Detta åtgärdas genom en clearfix knyts till det kollapsande elementet med hjälp av klassen cf. Där genereras innehåll på ett sådant sätt att föräldern fortfarande känner av sina barn och inte längre kollapsar (Bernhardsson, u.å.-k). På process-sidan får huvudinnehållet en synlig h1-rubrik eftersom det på denna sida, till skillnad från index-sidan, finns ett tydligt huvudinnehåll (denna processanalys).
Footer
Footern fästs på sidan genom position:fixed på samma sätt som headern. Den får en fast höjd för att det ska bli möjligt att ställa in mainContents nedre marginal exakt så att denna inte täcks av footern.
Footern får en försiktig gradient på samma sätt som headern. Koden för detta återfinns under #header eftersom jag vill undvika att behöva göra en eventuell uppdatering på två ställen.
I footern finns inget behov att skapa ett grid eftersom de tre elementen inom klassen footerContent kan positioneras genom att bredden anges i procent (från 15-100% beroende på upplösning). Dessutom används float i de fall där elementen ligger bredvid varandra. När footerns barn blir floats behövs en clearfix även på footern.
Media queries
Den första media-queryn dyker upp vid upplösningen 808px. Denna breakpoint väljs eftersom headern går sönder här. Med hjälp av ett nytt grid delas den upp på två rader. En annan anledning är att index-sidans tre spalter med huvudinnehåll börjar bli väldigt smala och svårlästa. Spaltbredden ökas genom att #about får ta upp hela sidans bredd medan de två övriga innehållen ligger bredvid varandra med en bredd på 50%. Gridet på index-sidan justeras genom att den inbördes ordningen av content ändras med hjälp av grid-template-areas, så att #about hamnar överst. På process-sidan blir #aside alltför smalt och elementen placeras därför under varandra genom att deras respektive bredd sätts till 100%. Slutligen förminskas subheaderns punkter som en anpassing till en mindre viewport.
Nästa media-query återfinns vid upplösningen 700px. Gridet på index-sidan görs om så att samtliga element med klassen content tar upp hela sidans bredd, allt för läsbarhetens skull. Vid 700px är dessutom subheaderns bakgrundsbild så avskalad att den inte längre ser bra ut. Enligt w3schools.com är en lösning på detta att byta ut bilden mot en bild som är anpassad för upplösningen (bredd 700px, höjd 300px)(w3schools.com, u.å.-b).
Den tredje media-queryn återfinns vid upplösningen 620px eftersom innehållet går sönder här. En ny justering av headerns grid sker. Förr eller senare måste logo delas upp på två rader av platsskäl och för ett mer dynamiskt utseende görs det redan här även om ett alternativ hade varit att vänta till nästa media query. Subheaderns beskrivande punkter försvinner eftersom de nu snarare ger ett rörigt intryck än bidrar till layouten på ett positivt sätt.
Den sista media-queryn har en breakpoint på 427px. Denna breakpoint är nödvändig så att layouten håller ända ner till de riktigt små enheternas skärmupplösning på 320px. Här krävs ytterligare en justering i headerns grid, nu med två rader även för nav. Den största skillnaden är dock i footern där dess barn inte längre får plats bredvid varandra. De arrangeras istället under varandra genom att bredden på samtliga sätts till 100% och höjden inte längre begränsas till 90px utan ställs in på height:auto. Header och footer är numera inte längre fästa med position:fixed eftersom de nu är så pass höga att de tar upp för mycket plats av en liten skärm.
Utskriftsversion
På Meyerwebb står beskrivit hur man länkar till en utskriftsversion på ett separat stylesheet genom att lägga in en länk i html-dokumentets head med tillägget ”media=”print” (Meyerwebb, u.å.). Här finns också information om att ändra textfärgen till svart och bakgrundsfärgen till vit för ökad läsbarhet på en svart-vit utskrift. Vidare försvinner subheaderns bakgrundsbild, menyn och vissa detaljer som förlorar sin relevans vid utskrift. På webriktlinjer.se föreslås även att teckensnitten byts ut mot ett teckensnitt med serifer som är lättare att läsa i tryck, t.ex. Century Schoolbook (Webbriktlinjer, u.å.). Vid utkrift blir särskilt de tre spalterna med innehåll på index-sidan svårlästa för att de blir så smala. För läsbarhetens skull används kod från media queryn 808px som positionerar innehållet i bredare spalter vid utskrift. På en webbplats där bilderna står i centrum, t.ex. på en sida med recept som ju ofta skrivs ut, skulle jag lägga stor vikt vid att bearbeta bilderna i Photoshop till en perfekt gråskala som fungerar vid utskrift. Som det är nu är kvaliteten ändå acceptabel. Slutligen stängs fixed footer och header ner eftersom de annars skrivs ut på varje sida och då delvis täcker innehållet.
Avslutningsvis en lärdom inför nästa projekt: Under arbetets gång ser jag att många professionella webdesigners börjar med den minsta upplösningen och jobbar sig uppåt, istället för tvärtom, som jag. Denna sk. Mobile-first metod verkar ha många fördelar t.ex. när det gäller laddningstid men också designmässigt då man redan på ett tidigt stadium tvingas bestämma sig vad som verkligen måste vara med på sidan och vad som är överflödigt (iocea, u.å.).
Alla sidor är självklart validerade och har varken error eller varningar.
