Vår nya webb byggs med ett så kallat responsivt gränssnitt (responsive web design). I veckan annonserade Svenska datatermgruppen den mer poetiskt klingande termen Följsam webbdesign för fenomenet. Responsiv design innebär att man kodar och designar gränssnittet så att layouten anpassar sig till olika skärmstorlekar och enheter. Interaktionen ska fungera både för pekdon och touchscreens. Vår nya design ska stödja datorskärm, surfplatta och smartphone. Webbyrån Dear Friends står för den responsiva grunddesignen och initialkodningen.

Fluid grids
Ett centralt begrepp för responsiv design är fluid grid för att anpassa layouten, där ”gridsen” kan flöda om och lägga sig bredvid och under varandra beroende på skärmstorek/upplösning. Lite som tetris!

Man behöver dessutom en del designelement som måste specialanpassas för touchscreens och/eller mindre ytor som smartphones. Menyer är ofta ett exempel på det.

Adaptiv vs. responsiv
Vi har, som ett första steg, valt att visa allt som finns för desktopen även i mobiltelefonen. Men det är diskutabelt om allt som visas i desktopmiljön egentligen passar för mobiltelefonanvändande. Att ha många bilder kan vara fint i desktop, men tar mest stor scrollplats i mobilgränssnittet och värdet kan vara tveksamt. Om man börjar särskilja innehåll beroende på enhet, börjar man  närma sig distinktionen mellan adaptiv och responsiv design, där adaptiv egentligen är den mer anpassningsbara metoden.

Responsive CTHB style
Hittills är vi dock väldigt nöjda med hur det fungerar. Magin i att se hur webbsidan krymper ihop, flödar rätt och anpassar sig i till ett smartphoneformat! Så här ser den nya menyn ut på olika enheter.

Smartphone

Surfplatta

Desktop

Inom kort tänker vi exponera vårt arbete med nya webben för omvärlden – vi provar publik utveckling. Titta gärna på hur olika delar av layouten anpassar sig till olika enheter. RWD Bookmarklet är ett fiffigt verktyg för att testa resultatet för desktop, stående/liggande surfplatta och stående/liggande mobil.

/Kristin Olofsson