Responsiv webbdesign
Responsiv webbdesign (engelska Responsive Web Design, RWD) innebär webbdesign som tillåter layouten att förändras beroende på vilken skärmstorlek och skärmupplösning som besökaren har, och beroende på vilka funktioner som webbläsaren stödjer. Det innebär att besökare kan se samma webbplats från exempelvis en mobiltelefon, en läs/surfplatta eller en persondator utan att behöva scrolla och zooma så mycket som hade krävts vid traditionell webbdesign.
Responsiv webbdesign är ett alternativ till att designa olika versioner av webbplatsen för olika skärmupplösningar, exempelvis en desktopversion kallad http://www.… och en mobilversion kallad http://m.… . Responsiv webbdesign bygger bland annat på att webbutvecklare anger sidelementens storlekar i procent relativt skärmens storlek istället för absoluta storlekar mätt i pixlar eller em (det vill säga bredden av en punkt).[1]
Historia
Några föregångare till responsiv webbdesign var Mobile first, unobtrusive JavaScript och progressive enhancement, som liksom responsive webbdesign var koncept som gick ut på att det är bättre att först designa en webbplats optimerad för enkla mobiler och sedan utöka den med mer avancerad grafik och funktionalitet för persondatorer, än att utgå från en grafiktung webbplats för persondatorer och sedan försöka skala ned den till en mobilvariant. Ovanstånde kan åstadkommas exempelvis med Javascript eller Jquery, men för enklare mobiler som inte stödjer dessa klientsidesscript måste de åstadkommas med användaragentsidentifiering ("browser sniffing") alternativt "mobile device detection", vilket inte är helt tillförlitliga metoder.[2]
Ethan Marcotte myntade begreppet Responsiv webbdesign (RWD) i maj 2010.[1] Utvecklingen av internetaccess från mobila enheter har påskyndat utvecklingen av responsiv webbdesign. Nyhetssajten Mashable kallade år 2013 för The Year of Responsive Web Design.[3]
Teknik
Responsiv webbdesign baseras på flera nya tekniker och arbetssätt:
- Fluid grids (Flytande rutnät), för att ange kolumners och sektioners storlek med relativa värden i procent.[4]
- Fluid images har också dimensioner angivna i relativa enheter, vilket kan åstadkommas med Javascript.[5]
- CSS3 Media queries (mediaförfrågningar) tillåter klienten att begära olika CSS-stilregler beroende på enhetens egenskaper, oftast webbläsarens bredd. Detta används för att anpassa vad som ska visas och hur det ska se ut i ett visst intervall av skärmstorlekar. Webbdesignern kan exempelvis välja att inte visa ikoner eller att minska antalet kolumner vid liten skärmbredd.
- RESS (responsive web design + server-side components) innebär att ovanstående klientsiderstekniker kombineras med server-side-komponenter. RESS möjliggör mer detaljerad kontroll, snabbare nedladdning och fler funktioner jämfört med att enbart använda klientbaserade tekniker. Istället för att webbutvecklaren utformar flera alternativa uppsättningar CSS-stilregler så anpassar serversidan css-stilreglerna individuellt för vissa nyckelkomponenter genom att hämta kod från en databas över olika enheter. Varje sidelement kan då anpassas separat enligt egna regler, och kodens ordningsföljd kan optimeras för snabbare visning.[6]