Google+
Facebook
Twitter
YouTube
Rss
Jul
3

Hypeline djupdyker: Responsive web design del 1

Responsive web design, eller responsiv webbdesign som man kan säga på svenska, är något det talas väldigt mycket om i webbutvecklingsrymden just nu. Kortfattat innebär det att man utvecklar en webbsidelayout som anpassar sig efter webbläsarens fönsterstorlek. Eftersom vi idag inte bara surfar hemma vid en datorskärm som är ungefär 15-19″ stor utan har allt från en 27″ monitor till en 4″ mobilskärm räcker det sällan att skapa en layout för en skärmstorlek. Man kan lösa det genom att göra en mobilversion av sidan eller kanske en app, men man kan även göra en webbdesign som anpassar sig automatiskt beroende på skärmens upplösning. Det är alltså detta som kallas responsive web design.

Det finns flera svenska och utländska sidor som använder sig av responsive web design. Några svenska exempel är Unicef, TV4, SVT och Radiotjänst. Du kan testa de sidornas design genom att öppna dem i fullskärmsläge i en dator och sedan göra webbläsarfönstret smalare och smalare.

Varför använda responsive web design?

Genom att designa en webbsida responsivt behöver man inte göra samma jobb flera gånger för att sidan ska visas lika bra i en smartphone och tablet som på en rejäl bildskärm. Det finns då ofta inget behov att skapa en applösning för mobiler, den responsiva designen döljer eller designar om delar av sidan och lyfter fram det viktiga innehållet. Det fungerar genom att man designar med relativa mått istället för fasta pixlar. Om man vanligtvis skulle göra en webbsida med en stor vänsterkolumn och en mindre högerkolumn skulle CSS-koden kunna se ut såhär:

#main {
        float: left;
        width: 600px;
  }
  #right {
       float: right;
       width: 300px;
  }

Men om du ska göra designen responsiv gäller det att använda procent istället för pixlar då det måttet är relativt till webbläsarfönstrets storlek:

#main {
       float: left;
       width: 66%;
  }
  #right {
       float: right;
       width: 33%;
  }

Passar det för alla sidor?

Det låter ju som att responsive web design är något som borde användas på alla webbsidor, men sanningen är ju sällan så enkel. Även om det finns en massa exempel på sidor som är väldigt välgjorda responsivt så finns det också många exempel på sidor som skulle vara svåra att designa med en sådan lösning

Eftersom man med responsive web design i regel laddar allt innehåll på sidan men döljer det som inte får plats i en smartphone kan det innebära att onödigt mycket data måste skickas till enheterna, vilket både blir segt och kan kosta användaren mycket. Dessutom är det i dagsläget svårt att få exempelvis videoklipp att anpassas i bredd automatiskt, vilket gör att YouTube kanske inte alls fungerar bra som responsiv sida. Men om man har en blogg eller informationsbetonad sida kan responsive web design mycket väl vara the way to go.

Så skapar man en dynamisk webbsida

Det är egentligen inte särskilt svårt att skapa en enkel sida som är responsiv, men en sådan guide får inte plats i detta inlägg. I nästa del i Hypelines djupdykning i responsive web design kommer vi däremot gå igenom grunderna för hur man skapar en dynamisk webbsidelayout.

I en kommande del tar vi även upp några tips på mer läsning inom responsive web design och tipsar om ett par webbtjänster du inte får missa om du vill experimentera med en sådan webblösning.

Läs del 2.
Läs del 3.


Skrivet av Daniel Claesson

Teknikintresserad Södertäljebo. Hypelines grundare och meste skribent som gärna skriver om telefoner, tablets och webben, ofta med inslag av humor och självdistans. Utbildad kommunikatör som älskar webben.
Kontakt: daniel.claesson@hypeline.se

Annons ▼

Rekommenderad läsning

Relaterade artiklar