Viktiga vägval med responsiv webbdesign

Responsiv webbdesign håller på att bli standard för nya webbplatser. Som jag skrivit tidigare så tycker jag att det finns stora utmaningar med responsiv webbdesign. Tanken är att kunna presentera samma innehåll oavsett vilken enhet besökaren använder.

Jag menar att det finns flera utmaningar, bland annat för att en dator, läsplatta och mobil har väldigt olika tekniska förutsättningar, exempelvis navigerar du med tre helt olika tekniker (peka, dra eller klicka med mus). Ett gemensamt gränssnitt för alla tre tekniker innebär i praktiken att inget blir riktigt bra. Ett annat problem är att vi använder de olika enheterna i olika situationer. Mobilen använder vi på kanske på bussen med dålig uppkoppling där vi vill snabbt vill få en överblick medan vi hemma vid en stor dator med fett bredband kan ta lång tid på oss att läsa och skriva ut texter.

Adaptiv eller responsiv layout?

Men responsiv webbdesign har absolut sina fördelar. Det är ett kostnadseffektivt sätt att erbjuda samma innehåll för många olika skärmupplösningar. Så om man nu ska göra en responsiv sajt, vad ska du då tänka på? Först och främst kan det vara bra att skilja på olika typer av layouter. Många sajter som idag saluförs som responsiva har i själva verket en adaptiv layout. Skillnaden är som följer:

• Adaptiv layout har flera förutbestämda bredder. När du ändrar fönstret med en sida med adaptiv layout så sker det hopp mellan olika skärmupplösningar. Scouterna.se är ett exempel på en sajt med adaptiv layout. Adaptiva layouter kombineras ofta med anpassningar för specifika enheter.
• Responsiv layout har en flytande layout som förändrar sajten stegvis om du ändrar på fönstrets storlek. Svt.se är ett exempel på en sajt med responsiv layout. Responsiva layouter brukar utgå från den minsta storleken i sin innehållsfilosofi, kallat Mobile First.

Fördelen med adaptiv layout är att du har större kontroll över hur sajten uppfattas för vissa förutbestämda skärmstorlekar. Det tar också mindre tid att utveckla (= billigare) eftersom du inte behöver anpassa layouten för alla typer av skärmupplösningar. Å andra sidan förlorar du en del av vinsten med responsiv layout som är att sajten ser snygg ut oavsett skärmupplösning. Se detta blogginlägg för mer om detta.

Andra viktiga vägval

Finns det något mer man ska tänka på? Ethan Marcotte, som lanserade begreppet responsiv webbdesign, brukar prata om fyra vägval:

• Bredd – vilka upplösningar är brytpunkterna? Se detta inlägg för mer om detta.
• Hierarki – hur ska olika objekt flöda på mindre skärmupplösningar? Vad ser besökare överst, i mitten och längst ner på sidan när objekten läggs efter varandra?
• Interaktion – hur ska menyer fungera i olika upplösningar?
• Densitet – ska du dölja något innehåll eller några menyer i mindre skärmupplösningar?

Här tycker jag att hierarki är den absolut viktigaste. Även om responsiv webbdesign är kul och snyggt, så får man aldrig glömma hur användaren uppfattar sidan. På samma sätt som du tänker att du ska lägga saker som leder till konvertering på din vanliga datorsajt ovanför vecket (det som syns utan att behöva scrolla) tycker jag att du måste fundera på vad mobila besökare ser först. Om du har en tydlig webbstrategi med syfte, mål och konverteringsprocess så är det mycket enklare att bestämma hierarki i din responsiva design.

Hur går dina tankar kring vägvalen med responsiv design?