Det är inte konstigt att nästan alla webbsajter ser likadan ut idag. Sedan webbens begynnelse har vi förlitat oss på tekniken och standarden som stöds bland majoriteten av alla webbläsare. Från början blev alla helt fanatiska över att man kunde “hyperlänka” text som skickade besökaren vidare till en annan sida. Lika glad blev man när man plötsligt kunde skapa animerade gif-bilder (brinnande dödskallar och dansande bebisar m.m.), blinkande texter och rullande textremsor.
På den tiden var det webbläsarna Mosaic och Netscape som regerade i var mans PC/MAC. Det var även då (runt 1996) som en ny html-standard skulle komma att revolutionera webben, med något som även lever kvar än i dag, nämligen tabeller. Förr användes det flitigt för att kunna åstadkomma en viss layout/design, men idag använder vi det för sitt rätta syfte, att presentera strukturerad data liknande tabeller i excel.
Standard styr ofta designen
Fig. 1
Så fort nya webb-standarder tas fram dyker det även upp exempel på hur man kan använda dem. Dessa exempel blir ofta grunden till hur en webbdesign föds. När tekniska barriärer rivs och nya möjligheter träder fram passar man på att ta tillfället i akt och applicerar dessa nya funktioner i sin design. Trender föds och alla vill hänga med!
Ett bra exempel på detta är CSS grid framworks. Ett framework är i grunden ett fördefinierat paket med “recept” och mallar som förenklare både design- och utvecklingsfasen av en webbsida/app. Genom att återanvända färdiga fördefinierade kodsnuttar kan man designa och programmera med vetskapen om att man följer en standard som idag fungerar på de flesta webbläsare och som dessutom är responsiv och fungerar på alla olika skärmstorlekar.
Fig.1 Exempel på hur vi har använt 12-kolumners grid på en av våra kunders webbsidor.
Men varför?
En tidning eller bok är ofta uppdelad i flera spalter. Layoutmässigt pratar man om grids/kolumner, vilket är ramverket för hur en layout ska se ut. På samma sätt arbetar vi när vi tar fram ny design för våra kunders webbsajter. Vi vill skapa flexibel design och lutar oss därför tillbaka till en teknik som faktiskt funnits sedan andra världskriget.
Men tekniken har inte stannat upp, tvärtom kommer det så klart hela tiden nya och med dem möjligheter som på sikt formar hur morgondagens webbsidor kommer att se ut och fungera.
Det är en stor anledning till varför webbdesign ser ut som den gör idag. Nya tekniska möjligheter skapar nya trender i webbvärlden.
Vi har nu i flera år jobbat efter fasta kolumner om t.ex. 12-, 16-, 18- eller 24-kolumner. Detta har varit möjligt att genomföra på ett effektivt sätt med hjälp av färdiga grid frameworks som exempelvis Bootstrap, Simple grid, Pure och Foundation.
Så vad kommer härnäst?
Inom kort (läs idag) kommer vi inte längre behöva förlita oss på ett fördefinierat antal kolumner. Vi behöver inte göra krångliga uträkningar för att presentera ojämna kolumnantal som ska fördelas på skärmen med lika storlek. Vi kan använda oss av något som heter Flexbox Layout, vilket är en ny CSS-standard som tagits fram av W3C för att förenkla hur en layout förbestäms och presenteras på en webbsida när vi inte vet hur stora kolumner ska vara eller om de ska vara dynamiska (flexibla).
Huvudkonceptet med Flexbox är att låta en så kallad container (behållare med webbinnehåll) få ta hand om bredd och höjd för dess innehåll. Så om det till exempel finns tre boxar med innehåll i en container och man ändrar storleken på skärmen/containern så anpassas bredden av boxarna i förhållande till sin containers bredd (och höjd om man så vill).
Nedan kommer 4 webbsajter som beskriver mer om Flexbox, hur det fungerar och vad man kan göra.
A Complete guide to flexbox
Chris Coyier från CSS-Tricks beskriver på ett pedagogiskt sätt med exempel på hur Flexbox fungerar i praktiken.
Flexbox in 5 minutes
En steg-för-steg guide som visar hur du skapar en design, stylar och justerar din första flexbox-baserade layout.
W3Cschool.com
Kodexempel och tester som låter dig prova på vad man kan göra med Flexbox layout.
A Visual Guide to CSS3 Flexbox Properties
Flera exempel och förklaringar hur man går tillväga för att arbeta med Flexbox.
