RESPONSIVE DESIGN

Ett ämne som diskuterats flitigt inom webbkretsar senaste året är Responsive design. Responsive design syftar till att anpassa layouten av en webbplats till att passa på alla skärmstorlekar. Utbudet av enheter som kan surfa webben ökar lavinartat. Vid skrivbordet kanske du använder din dators 28″ skärm, på mötet använder du laptopens 15″ skärm, på kvällen använder du din tablets 11″ skärm och när du är på språng använder du mobilens lilla skärm. Hur kan man erbjuda en anpassad och passande upplevelse för besökaren på alla dessa olika enheter? En del av svaret kan vara responsive design.

VAD ÄR DET?

Enkelt förklarat kan man säga att en responsive design ”svarar” på besökarens skärmstorlek genom att skala och/eller ändra layout. Bilder och kolumner blir smalare eller bredare. När storleken går förbi en viss gräns där endast skalning inte räcker, då ändras layouten för att passa den nya storleken. Tex kan kolumner staplas under varandra istället för brevid varandra, en meny kan gå från horisontell till vertikal för att få plats bättre osv. Det är svårt att förklara i ord, men enkelt att förstå när man ser det in action. Allt du behöver göra är att dra i din webbläsares nedre högra hörn och ändra storleken på fönstret så kommer du se den här sajten förändras. Testa lite och så väntar vi sålänge…

Testat? Häftigt va? Och inte minst praktiskt. En stor fördel med responsive design är dess framtidsäkerhet. Eftersom layouten skalas så kommer små skillnader i skärmstorlekar inte kräva något nytt arbete. Om nästa iPhone eller Android-telefon har en lite annorlunda skärmstorlek och upplösning så anpassar sig ändå layouten snyggt.

En annan fördel är att allting är en och samma webb, oavsett enhet. Det är bara designen som förändras. Man undviker då att behöva administrera tex en separat mobilwebb.

ALTERNATIV?

Det finns alternativ till responsive design som ger en del av vinsten med något mindre ansträngning. Det man kallar för ”adaptive design” innebär att man har ett antal fasta layouter och beroende på besökarens skärmstorlek så serveras mest passande layout. Detta är alltså responsive men utan skalningen. Det innebär att layouten inte kommer passa perfekt i de stolekar som ligger mellan de fasta layouter man har definierat. Man är då inte lika framtidssäkrad inför kommande nya enheter. Det är ett steg i rätt riktning och kan vara ett något enklare sätt att implementera principerna på en redan befintlig webbplats.

LÄSTIPS

Myntaren av uttrycket Responsive design heter Ethan Marcotte. Han är den som såg sambandet och potentialen i att kombinera de olika teknikerna och principerna som innefattas av Responsive. Hans artikelserie på A list apart är  bästa stället att börja på om man vill lära sig mer. Det är ganska tekniskt men förklarar även tanken med principerna på ett bra sätt. Ett annat läs/lyssningstips är Paul Boags intervju med Ethan Marcotte som är lite mindre tekinsk och fokuserar mer på principerna och problemen man kan stöta på när man försöker göra sin sajt responsive.

Vi tycker det här är en otroligt spännande teknik som har stor potential att förändra vårt tänk kring webben och de enheter vi använder för att surfa den. Om du också tycker det låter intressant så varför inte komma förbi oss och snacka lite om det? 

Andra Artiklar