Utvecklardag: Responsive Design

Den mobila sajten har länge fyllt en viktig uppgift; att tillhandahålla en alternativ och mer åtkomlig version av webbsidan. Detta har ofta betytt en avskalad sida med mindre mängd grafik, kortare texter där endast den viktigaste informationen kommer med. För mycket information med avancerad grafik tar för lång tid att ladda, blir svårt att ta till sig på så begränsat utrymme och har ofta inte ens kunnat renderas av mobilens webbläsare.

Sen kom smartphone-explosionen och det blev populärt att iphone-anpassa sin hemsida. Ytterligare en anpassning alltså. Denna gång var kravet inte lika stort på begränsning eftersom dagens mobiler har en långt bättre surfupplevelse och mobilnätet har blivit snabbare.

Problemet är att det inte stannar där. Mobil surfning växer enormt och fler och fler enheter ser dagens ljus. Vi surfar med våra datorer, mobiler, spel-konsoller och tv-apparater. Vi styr våra enheter med tangentbord, mus, pekdon och fingrar och många av dessa enheter kan vi dessutom vrida för att visa innehållet stående eller liggande. En version för mobil visning räcker inte längre.

Tanken med responsiv design är att utforma webbsidor som helt anpassar sig till besökarens miljö, vare sig det gäller skärmstorlek, upplösning, renderingskapacitet, skärmorientering m.m. I dag har vi t ex ett flertal tekniker för att läsa av hur stort användarens webbläsarfönster är och kan på så sätt flytta om och skala innehållet, inte bara beroende på om det presenteras på en iPhone eller på en vanlig datorskärm utan även dynamiskt när användaren ändrar storlek på webbläsarens fönster.

Responsiv design bjuder inte bara användaren på en långt bättre upplevelse på olika plattformar, det ger oss som utvecklare nya möjligheter och utmaningar också. Beroende på webbläsarens format är det inte bara storleken som ska ändras. En begränsad yta kräver också att man funderar på vad som ska skalas, vilken information som är viktig och bör framhävas och vilka element som kanske bör döljas när informationsutrymmet minskas. Även när det tillgängliga utrymmet ökar kan man diskutera möjligheten att utnyttja detta bättre. Kan den horisontella huvudmenyn istället läggas vid sidan och bli vertikal? Ska vi har mer information på varje sida eller kommer detta förvirra besökaren?

Responsiv design är ett koncept som kommer ge våra kunder och deras besökare en bättre upplevelse samtidigt som det ger oss möjligheten att göra mer dynamiska och bättre hemsidor. Därför hade Odd Hill en dags workshop där vi jobbade fram en design och satte upp en enkel testsida.

Det var spännande men utmanande att designa något som ska se bra ut och vara användarvänligt men samtidigt så formbart att det fungerar i alla möjliga storlekar och miljöer. Det diskuterades livligt om hur långt vi skulle gå i anpassningen och var, när eller hur sidans olika element skulle flyttas. Samtidigt som arbetet fortskred fick vi hela tiden nya uppslag om bättre sätt att genomföra våra idéer och i slutändan var det kul att se en design som hela tiden bygger på samma grund men som ser helt naturlig ut oavsett hur den presenteras.

Nu behöver responsiv design inte nödvändigtvis vara en självklarhet för alla sajter. Som alltid behöver man fråga sig till vilken målgrupp man vänder sig, vilket innehåll sidan har och vilka kostnader en anpassning kan föra med sig. Det kan till och med vara en negativ upplevelse för användaren om sidan är för dynamisk och förändras till synes helt av sig själv. Vi är vana vid mer eller mindre statiska sidor och alla förändringar måste därför vara genomtänkta och logiska.

Responsiv design är inte en ny teknik utan mer ett nytt sätt att tänka kring webbdesign. Det är ett nytt och spännande verktyg för att med bra planering göra användarvänliga, plattformsflexibla sidor och där man faktiskt även framtidssäkrar en hemsida på ett kostnadseffektivt sätt.