Responsiv webbdesign

Idag besöker fler och fler personer webbsidor från mobiltelefoner, tablets och andra enheter. Många surfar också fortfarande från datorer, och alla hemsidor besöks numera från alla möjliga olika enheter. För att kunna erbjuda bästa möjliga upplevelse för alla besökare, oberoende av vilken enhet de besöker hemsidan från, så måste hemsidans design och layout vara dynamisk. Det blir därför viktigt att ha en hemsida vars innehåll kan anpassas automatiskt efter besökarens skärmstorlek. Responsiv webbdesign kallas den metod som numera vanligen används för just detta syfte: att tillåta layouten att förändras beroende på enskilda besökarens skärmstorlek och skärmupplösning.

Historia och utveckling av responsiv webbdesign

Från början var alltså hemsidor statiska och inte anpassade efter skärmstorleken hos den enskilde besökaren. Anledningen till detta var helt enkelt att det inte riktigt var nödvändigt. All internettrafik skedde ju på datorer, vilket kan vara svårt att förstå idag. Det var först år 2010 som Ethan Marcotte myntade begreppet Resposive Web Design (RWD). Sedan dess gick utvecklingen i rasande tempo tack vare den extremt snabba utvecklingen av mobiltelefoner och internetaccess från dessa mobila enheter. Det blev plötsligt absolut nödvändigt att skapa hemsidor som var snygga och användarvänliga även på mobilen. Företag kunde plötsligt inte veta om besökaren kommer att läsa hemsidan från en högupplöst 28-tumsskärm eller på sin smartphone. Den allra första hemsidan som anpassades efter besökarens skärm kom dock innan responsiv webbdesign var ett begrepp, år 2001. Det var Audis hemsida som hade detta och den hade utvecklats av byrån Razorfish.

Teknik och fördelar

Man brukar säga att responsiv webbdesign har några grundläggande tekniker och arbetssätt: flytande rutnät, flytande bilder, samt medieförfrågningar (CSS3 Media queries). Flytande rutnät och bilder innebär helt enkelt att kolumners, sektioners och bilders storlekar och dimensioner är angivna i relativa värden och enheter. Det innebär att webbdesignern anger sidelementens storlek i procent till skärmens storlek istället för det traditionella sättet då de skrivs i absoluta mätstorlekar pixlar eller EM (bredden av en punkt). Medieförfrågningar innebär att man tillåter klienten att begära olika stilregler för CSS beroende på till exempel webbläsarens bredd. Då kan man förändra det som visas på hemsidan beroende på skärmstorlek. Till exempel kan man välja att minska antalet kolumner eller bilder på en rad eller inte visa ikoner eller menyrad om det blir för litet.

Teknik och fördelar

Fördelarna med responsiv webbdesign är många, men det viktigaste är såklart att hemsidans layout, innehåll och beteende är oberoende av besökarens skärmstorlek, skärmupplösning och även vilka funktioner som besökarens webbläsare stödjer. Det innebär att besökaren inte behöver hålla på och zooma och scrolla på samma sätt som den kan behöva då den besöker en traditionell hemsida från en mobil eller tablet. Framför allt är detta en stor fördel för e-handelsföretag, eftersom responsiv webbdesign bland annat gör det möjligt att anpassa antalet bilder och kolumner automatiskt samt att bildernas storlek skalas beroende på fönsterbredden. Nuförtiden är det vanligt att företag väljer att lägga ner pengar på att utveckla särskilda appar för den trafik som ska ske från mobiltelefoner och tablets. Fördelen med responsiv webbdesign för företagen och webbdesignern är dock att de kan ha all kod på ett och samma ställe istället för att ha både en webbsida och en app. Det är därför ett kostnadseffektivt alternativ.