Responsive-Web-DesignResponsiv webbdesign innebär att layouten förändras beroende på besökarens skärmupplösning eller skärmstorlek, samt beroende på vilka funktioner som webbläsaren stödjer. Tanken med responsiv webbdesign är att det inte ska spela någon roll vilken enhet som används. Det ska gå lika bra att använda webbsidan på en surfplatta eller mobiltelefon som på dator. Hade istället traditionell webbdesign använts skulle en besökare med en liten skärm få scrolla och zooma ovanligt mycket, vilket lätt blir frustrerande.

Hur fungerar responsiv webbdesign?

Till stor del bygger det på att en webbutvecklare skriver kod som anger sid-elementens storlek i procent av skärmstorleken. Alternativet är att använda absoluta mått i pixlar och det ses inte som ett särskilt bra tillvägagångssätt inom modern webbdesign.

  • Fluid grids. Används för att ange kolumners och sektioners storlek med relativa värden i procent. Viktigt för att bland annat menyer på en webbsida inte ska bli för små för att kunna användas när en besökare har en liten skärm.
  • Fluid images. Bilder som har sin storlek angiven i relativa enheter. Javascript brukar användas för att lyckas med detta. Bilder med sin storlek angiven i pixlar riskerar att täcka för mycket av skärmen eller rentav hela skärmen för besökare med låg skärmupplösning.
  • CSS3 Media queries. En viktig teknik i responsiv webbdesign där olika CSS-stilregler används beroende på vilka egenskaper besökarens enhet har. Genom att utnyttja tekniken kan webbdesignen se annorlunda ut när till exempel webbläsarens bredd ligger inom ett visst intervall. Bland annat kan det handla om att helt ta bort kolumner eller ikoner om bredden är för liten.

Varför har responsiv webbdesign blivit så populärt?

Eftersom dagens internetanvändare i allt större utsträckning surfar på sina smartphones och surfplattor. Tidigare gick det att komma undan med webbsidor som saknade mobilanpassning, men idag riskerar man att tappa en betydande andel besökare om layouten inte anpassas för små skärmar, eller i värsta fall inte fungerar alls för de med för liten skärmstorlek.