Artikel: Grids (del 3/4 - Grids för webben)

Vi har i de två föregående delarna i denna artikelserie introducerat grids och kikat på tillämpningar i print. Denna del fokuserar på webbtillämpning men kommer inte att gå in på hur man rent praktiskt stylar webbsidor. Det kanske tas upp i artikelform framöver.

Precis som i trycksaker är det viktigt att ha struktur även i digitala medier. Förmodligen är det till och med ännu viktigare att layouten är väl avvägd, tydlig och användarvänlig eftersom det finns så många andra snygga och roliga webbsidor bara några knapptryckningar bort. I och med skrivandet av denna artikel fick jag chansen att testa 960-gridsystemet men givetvis kan man arbeta enligt gyllene snittet eller enligt andra geometriska förhållanden om man så vill.

960 px är tillräckligt!
960.gs är ett utmärkt exempel på där man försöker visa på hur mångsidigt ett 960 pixlar brett gridsystem kan vara. Till denna artikel har jag valt att utgå ifrån 12-spaltsversionen av detta system när jag skapat en webblayout för en portfolio/weblog (men jag utnyttjar bara 820 pixlar i bredd till innehållet, läs vidare...).

Gridsystemet byggs upp på ett liknande sätt som när pressen arbetar med layout (läs Grids - del 2/4), där ytan delas in i spalter. 960-gridsystemet bygger i detta fall på 12 spalter (12 x 60 px), spaltmellanrum (11 x 20 px) och spaltfyllnad i ytterkanterna (2 x 10 px). Se figur nedan.

Guides på enklaste sätt utdragna till rätt positioner i Illustrator. Arbetsytan är 1280x800 vilket ger oss en idé om hur bred sidan blir i en av dagens standardupplösningar*.

Det blir visuellt mer tilltalande och enklare att tyda gridsystemet om vi sätter lite färg på det.

Eftersom jag redan innan betämt innehållet på sidan så underlättade det framtagningen av en layout som passar mina behov. Som synes utnyttjas inte de yttre spalterna alls varför innehållet snällt får samsas om en bredd på 960-((2x60)+2x10)=820 pixlar.

Så här ser sidan ut på en skärm med upplösningen 1280x800. De 820 pixlarna ser ut att räcka gott och väl för denna webbsida som nu blir lätt och luftig utan att kännas tom.

Att skapa gridet och att ta fram layoutförslaget ovan tog ungefär en halvdag och ännu är själva webbsidan inte i närheten av klar. Ska man fortsätta skapa webbsidan kommer det att handla om färgval, texturer och typografi där olika varianter ska testas och dessutom måste ju sidan vara snabbnavigerad och enkel att uppdatera. Det är några veckors arbete kvar om man ska gå vidare med projektet alltså...


Sista delen av denna artikelserie blir av sammanfattande karaktär. Håll till godo!

* Att uppösningen 1280x800 benämns som standardupplösning ovan baseras på Google Analytics statistik om besökare på denna sida (lbsgraf.blogspot.com) där 31% hade denna upplösning vid besöket på sidan, 21%-1680x1050, 19%-1280x1024, 9%-1024x768 (som är lägsta uppmätta upplösning) och övriga har haft upplösning i ungefär samma storleksordning.