Så funkar responsiv webbdesign

Responsiv webbdesign (Responsive web design) är en metod för att bygga webbsajter som är tillgängliga för alla typer av besöksenheter. Beroende på om en besökare använder dator, läsplatta eller mobiltelefon, anpassar sig sajten på olika sätt för att besökaren vid alla tillfällen ska få en så komplett och rik upplevelse som möjligt.

Emilia Blom, gränssnittsutvecklare på Malmöbyrån Good Old, förklarar fördelarna:
– Gör du det rätt och använder hela filosofin kring responsive web design får du en väldigt bra användarupplevelse, oavsett vilken enhet besökaren använder. Dessutom ökar chansen att din webbsida blir framtidssäkrad.

Responsiv webbdesign har blivit svaret på hur du kan utveckla webbsajter som kan hantera våra förändrade digitala beteenden.

Det mobila surfandet väntas mängdmässigt gå om datorsurfandet inom några år och redan i dag är telefoner och läsplattor vanliga enheter.

– Fungerar din sajt dåligt utanför persondatorn är det ett dåligt sätt att slänga bort pengar, säger Mårten Björk på webbyrån Upperdog.

Ditte Hammarström, creative director på Snowfire, håller med.

– Hemma surfar folk på mobilen, på jobbet sitter de med en stor skärm. Företagen måste lyckas möta behoven oavsett var besökaren befinner sig. Responsive web har kommit som en fantastisk brygga mellan de olika enheterna, säger hon.

Att kunna presentera hela eller större delen av sin sajts innehåll för alla besökare, oavsett vilken enhet de besöker med, har en direkt koppling till affären.

– Välutvecklade webbplatser bygger på ett tydligt mål. För en mäklare kan det till exempel vara att locka folk till visningar, för Greenpeace kanske det är att få pengagåvor. Om den mobila webbplatsen inte gör att besökaren kan bidra till dessa mål, kommer man aldrig att nå sina mål när mobil­surfet ökar, säger Mårten Björk.

En responsiv sajt ger också möjligheten att ge samma upplevelse till alla besökare.

– Du möter samma instans visuellt, bara i nedskalad version. Du känner igen dig. Det låter kanske inte så viktigt, men det gör mycket för varu­märket. Det finns en trygghetsfaktor i att direkt känna igen sig, säger Ditte Hammarström.

– Fler och fler hävdar att designupplevelsen är en konkurrensfördel i dag när många tjänster liknar varandra allt mer. Med responsiv design kan jag säkra att upplevelsen blir lika bra oavsett enhet. Helhetsupplevelsen av sajten blir mer än att den bara är användbar, säger Emilia Blom.

Filosofin bakom responsiv webbdesign grundar sig på en artikel från maj 2010, skriven av webb­designern Ethan Marcotte. Artikeln är en blandning av manifest och förslag. Ethan Marcotte lägger fram ett förslag till en alternativ strategi för webbutveckling, förklarar varför den är bättre och berättar i korthet hur det görs.

De tre viktiga elementen i Ethan Marcottes artikel är: fluid grid, att sajten kan förändras i bredd beroende på besökarens skärmstorlek, fluid images, bilder som kan skalas upp eller ner i storlek, och media queries, frågor som ställs av webbsidan om den enhet besökaren använder, till exempel om skärmbredd och upplösning.

Ethan marcottes artikel har förändrat spel­planen. Den tydliga förklaringen gör hela idén med responsiva webbsidor fullständigt begriplig och fördelarna tydliga.

– Teknikerna och tänket har funnits länge i webb­branschen. Vad Ethan Marcotte och andra senare har lyckats med är att paketera dem väldigt bra och logiskt i begreppet responsive web design, säger Martin Edenström, marknadschef på Nansen.

– Det handlar om att skapa en aha-känsla hos mottagarna. Något som gör det enkelt att direkt förstå vad det handlar om.

I dag har responsiv webbdesign utvecklats och blivit en utvecklingsfilosofi. Förutom de tekniker som Ethan Marcotte tog upp har flera andra tankar integrerats i begreppet. Centralt är det som kallas mobile first (mobilt först) och content first (innehåll först).

Mobilt först innebär att du börjar med att utveckla din sajt i sin mobila version. Eftersom mobil­skärmarna är minst blir kraven på struktur, mängd innehåll och så vidare tuffast här.

Innehåll först innebär att du utgår från innehållet när du utvecklar sajten. Vad måste vara med på sajten? Utifrån det, hur bör sajten se ut?

– Du behöver skaffa dig en innehållsstrategi. Ju mindre innehåll, desto bättre, säger Emilia Blom och refererar till Kristina Halvorsens bok ”Content strategy for the web”.

– Innehållet ska antingen hjälpa dig att uppnå affärsmål eller hjälpa användaren att utföra en uppgift. Annars ska det bort.

– Att våga skära bort är det största kravet på beställaren. Jag har suttit i många samtal under hösten med beställare som har velat ha en mobil webb, men som inte vill kapa bort funktionalitet.

Mobilanvändarna har ofta andra önskemål än ­datorbesökarna. Det måste kanske inte vara ett kontaktformulär med tolv steg. Kill your darlings, säger Martin Edenström.

Kraven ökar också på utförarsidan
– Detta är väldigt komplext för utvecklare. Det är inte lätt skala om en sajt till mobilt format, men det är bättre att vi gör jobbet än att användarna måste göra det själva, säger Mårten Björk.

Responsiva sajter kräver en annan utvecklingsprocess än traditionella sajter. Den traditionella vattenfallsprocessen, där en art director eller designer gör en mall för sajten i Photoshop, som sedan lämnas till utvecklarna som klipper, klistrar och kodar ihop sajten, fungerar inte. Problemet är att en responsiv sajt är just föränderlig.

– Med det klassiska sättet att jobba har utvecklaren plötsligt ingen designer att fråga om hur sajten ska se ut när den skalas om. Stafettpinnetänket fungerar helt enkelt inte i dag, säger Mårten Björk.

Det håller Johan Edlund på Edlund Design med om. Han ligger bakom en av Sveriges mer kända responsiva sajter, kommunsajten staffanstorp.se.

– Med responsive web design närmar sig design och utveckling varandra allt mer. Man måste samarbeta bättre för att få ett lyckat resultat, säger han.

– Responsiv webb innebär att det blir mycket mer design. Interaktionsdesignmässigt handlar det om hur saker ska fungera i en mobil. Jag tror att man ska försöka lämna de fasta skisserna så mycket som möjligt och jobba mer modulärt med de olika elementen, fortsätter han.

Även om fördelarna med med responsiv webbdesign är många finns det också nackdelar. Kritiken mot metoden handlar bland annat om att besökarna har olika syften eller behov när de besöker sajten via olika enheter. En responsiv sajt kan inte heller ersätta allt du kan göra i till exempel appar.

Trots begränsningarna ser det ändå ut som om responsiv design har framtiden för sig.

– Min rekommendation är: Stressa inte med responsive, men när ni gör om sajten, skriv för guds skull in responsive i kravspecifikationen, säger Mårten Björk.

Eller som Martin Edenström formulerar det:
– Det här är ett bra sätt att investera sina pengar. Det är ett roligt sätt att jobba för att få in sajten i folks mobiltelefoner. Och så framtidssäker som en responsiv webbsajt blir, så trygg har webben aldrig varit förut. Det är nog därför vi och kunderna gillar detta just nu.