Mobile first responsive design

Vad är egentligen Responsive Design?

Ethan Marcotte myntade begreppen först och det blev Responsive Design. Här kommer vi gå igenom hur det fungerar och varför det är så bra!

Förkortat går begreppet under RWD och syftar till design för en anpassningsbar webbplats, lika användarvänlig i din PC eller MAC som på din BlackBerry, smartphone eller storbildstv. Med responsive design anpassar sig webbsidans layout och innehållet blir läsvänligt oavsett enhet. Länkar och navigation fungerar lika väl i din mobila enhet som på din dator utan att du som användare behöver scrolla ner eller zooma in för att smidigt ta del samma information.  

Den allt mer lavinartade ökningen av mobila enheter med internetaccess tillsammans med de nya surfplattorna ökar varje dag behovet av en anpassningsbar webdesign. KPCB uppskattar att antalet internetuppkopplade mobila enheter går om internetuppkopplade datorer redan i år 2013. Men trots att efterfrågan är stor är det många som inte har hunnit anpassa sin webbplats till den nya utvecklingen.

För att skapa en likvärdig upplevelse oavsett enhet krävs nya arbetsmetoder och RWD måste genomsyra hela arbetsprocessen. Inte bara layout, bilder och interaktionsdesign men även sidmallar måste anpassas. Att bygga en responsiv webbplats ställer således högre krav på både webdesigners och redaktör; arbetsprocessen blir mer komplex och anpassbarheten skapar merarbete jämfört med de, i jämförelse enkla, sidmallarna man tidigare arbetat efter.

Men i internetlandet Sverige kan vi se många goda exempel på responsiv design. Här kan du klicka dig in på ett urval:

Staffanstorp – Framtidens kommun: http://staffanstorp.se

Tv4: http://www.tv4.se

Webbkompaniet: http://webbkompaniet.com

Världskultursmuseet Göteborg: http://www.varldskulturmuseerna.se/varldskulturmuseet/

Radio tjänst Kiruna: http://www.radiotjanst.se

SVT tv tablå: http://www.svt.se/tv-tabla/



Dessa svenska sidor får alla höga betyg av Google Page Speed och är goda exempel på responsiv webbdesign. Att använda sig av RWD gör också appar onödiga och arbetet som istället läggs på att skapa en responsiv webbsida ger vinning på flera sätt. Inte bara nöjdare användare och kunder kommer ur smidigare navigation och en samstämmig upplevelse . Även Google föredrar webbplatser med responsive design och ger dessa högre status i en sökning.

En webbsida designad utan responsive design får två länkar beroende vilken enhet du surfar från och rankas då av Google som duplicerat innehåll. Sökmotorn  ger därför bättre resultat med responsive design. Responsive design är alltså inte bara en satsning på nöjdare kunder och smidigare webbplatser utan ger också bättre sökoptimering. Ett oumbärligt steg in i framtiden.


/hogbergsgatan.jpg

Läsa mer? Kika till exempel in på:

En scrolldeck presentation om responsive design av John Polacek: http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

Vi förklarar sökmotorns syn på webbplatser med responsive design: http://webbredaktorerna.com

Socialdriver listar de femtio bästa webbplatserna med responsive deign 2013: http://socialdriver.com/2013/06/50-best-responsive-website-design-examples-of-2013/

Fördjupa dig med myntaren av begreppet, Ethan Marcotte’s, syn på saken:

http://www.abookapart.com/products/responsive-web-design

Du kan också analysera din webbplats genom Googles verktyg Mobile Meter: http://www.howtogomo.com/en-gb/d/test-your-site/#getmo-meter


Hoppas du nu har en bättre bild över vad responsive design är.

20 dec 2014