Responsiv design ger snygg surfupplevelse

Tack vare ny webbdesignteknik, såsom t.ex responsiv webbdesign, har webbsidor blivit lättare och roligare att navigera på från smartphones och surfplattor. Jag satte mig ned med webbutvecklaren Erik Pettersson för att ta reda på vad vi kan vänta oss av mobilt surfande i framtiden och hur design för mobila webbsidor går till.

Hur har man hittills jobbat med layout för webbsidor i mobilen?
– Man har gjort en separat mobil webbsida. Det är så de flesta jobbar fortfarande. Ett exempel på en mobil webbsida är mobil.aftonbladet.se. Mobila sidor har oftast inte samma innehåll som den vanliga webbsidan. En mobil sida är designad med speciella mått så att den ska se bra ut på en liten skärm, förklarar Erik.


mobil.aftonbladet.se i Safari på iPhone.

mobil.aftonbladet.se i Safari på datorn.

När man surfar in på en webbsida från mobilen så brukar den fråga om man vill gå till en mobilanpassad sida eller så slussas du vidare direkt. Hur kan en webbsida veta att jag surfar på min mobil?
– När du surfar in på en sajt från din smartphone så presenterar sig din mobil för webbplatsen genom att tala om vilken typ av mobil och webbläsare som vill se sidan. Webbplatsen ger då förslag på hur sidan ska visas för att passa din mobil. Antingen slussas man vidare till en mobil sajt automatiskt, eller så får man en fråga om man vill gå till en mobil sajt. Ibland är det svårt för webbplatsen att identifiera din mobil och den kan då misslyckas med att visa sidan på ett sätt som passar din mobil. Som en lösning på detta har responsiv webdesign kommit till, säger Erik.

Vad är responsiv webbdesign?
– Responsiv webbsdesign betyder att man har samma grundinnehåll på en webbsida, men innehållet visas ut på olika sätt beroende på hur stor din skärm är. Innehållet anpassar sig till storleken på skärmen helt enkelt, förklarar Erik.


Staffanstorp.se är en webbsida som är byggd med responsiv design. Staffanstorp.se i Safari på iPhone.


Staffanstorp.se i mindre storlek i Safari på datorn.


Staffanstorp.se i full bredd i Safari på datorn.

 

Vad skiljer responsiv webbdesign från vanlig design för mobila webbsidor?
– Istället för att webbplatsen bestämmer åt mobilen hur sidan ska se ut så bestämmer mobilen själv med responsiv design hur sidan ska visas. Mobilen vet ju själv bäst vilka begränsningar webbläsaren, operativsystemet och hårdvaran har. Med responsiv webbdesign så skickar webbplatsen alla instruktioner till mobilen, säger Erik.

Vad finns det för nackdelar med responsiv webbdesign?
– En sida med responsiv design kan vara seg att ladda. Media såsom bilder och video är lite bökigt att få till med responsiv webbdesign. Med en responsiv sajt så måste man skala ned bilderna allt eftersom storleken på webbläsarfönstret förändras. För att sidan ska kunna visas i stora respektive små storlekar så måste media vara stor från början och sidan blir kan då bli tung att ladda, säger Erik.

Vad finns det för fördelar med responsiv design?
– Responsiv webbdesign ger besökaren en mjuk och flytande surfupplevelse. Istället för att göra stegvisa layouter som är designade för vissa mått, så använder man sig av skalbar design. Om man skalar om sin webbläsare eller vrider på sin smartphone ser man att layouten flyttar sig smidigt och mjukt istället för hackigt som det blir ifall man använder fasta mått. Webbsidan kommer se bra ut och ha samma känsla vilken enhet du än surfar in ifrån, avslutar Erik.

 

Erik Pettersson
Ålder:
25 år
Bor: Stockholm
Yrke: Webbutvecklare
Gillar: Sambon Cicci, API:er och Tågtider.

 

 

Hittills ingen kommentar

Bli första att svara på inlägget!

Kommentera inlägget