27
21
3 SKAPANDET AV EN BOILERPLATE-SIDA
3.1 Beskrivning av sidan
Jag har skapat en modellsida där jag utgått från HTML5 Boilerplate -mallen. Som mål
hade jag att skapa en enkel responsiv bloggsida. Kravet för bloggsidan var att den skulle
vara så mobilvänlig som möjligt, dvs. ideal också för visning på apparater med små
skärmar. I utvecklandet utnyttjade jag några av H5BP:s funktioner och mot slutet tes-
tade jag sidans funktion. Följande kapitel är en beskrivning på hur jag gick till väga och
vilka tekniker jag använde.
3.1.1 Responsiv webbdesign och Mobile First
Responsiv webbdesign har utvecklats snabbt ända sedan Ethan Marcotte presenterade
termen tre år sedan. Sedan dess har nya tekniker dykt upp, blivit bästa praxis och blivit
del av vår ständigt föränderliga metodologi (Moore 2013). Grundpelarna i responsivt
tänkande finns ändå kvar. En responsiv sida innebär en sida med en layout som anpassar
sig till skärmen och apparaten den visas på. Exempelvis är texten alltid läsbar, bilderna i
anpassad storlek och horisontellt rullande är inte nödvändigt. Detta möjliggörs genom
CSS3:s Media Queries men flera faktorer bör tas i beaktande i designandet av ramen,
bilderna och utseendet. Den viktigaste poängen är att i stället för absoluta pixlar
använda relativa enheter som procenter och em. (Marcotte 2011)
Mobile First är en utvecklingsfilosofi och ett tillvägagångssätt där man designar först
för mobilen. Mobile First innefattar också det som anses vara bästa praxis för mobil an-
vändarvänlighet. Luke Wroblewski har skrivit en hyllad strategisk guide om detta ämne
(Wroblewski 2011). I guiden framkommer det bl.a. hurudant mobilanvändarens beteen-
demönster är, hur allt viktigt innehåll ska visas klart på sidan och hur stora länkar borde
vara för att kunna väljas med ett finger. Mobile First och Responsiv webbdesign går
mycket hand i hand och kompletterar varandra. Det är inte till exempel ovanligt att man
bygger upp en responsiv design så att man först gör en design för mobil. På så sätt säk-