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. Antal kolumner och bilder kan anpassas automatiskt, och bilder skalas om beroende på främst fönsterbredden. 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 mobil webbplats 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[redigera | redigera wikitext]
Några föregångare till responsiv webbdesign var Mobile first-design, unobtrusive JavaScript(en) och progressive enhancement(en), som liksom responsiv 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ående 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(en)") alternativt "mobile device detection", vilket inte är helt tillförlitliga metoder.[2]
Den allra första sidan som anpassade innehållet efter användarens webbläsare kom redan 2001 när byrån Razorfish(en) utvecklade en sida åt Audi som anpassade presentationen av innehållet efter webbläsarens bredd.[3] 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.[4]
Teknik[redigera | redigera wikitext]
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.[5]
- Fluid images har också dimensioner angivna i relativa enheter, vilket kan åstadkommas med Javascript.[6]
- CSS3 Media queries(en) (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 klientsidestekniker kombineras med serversideskomponenter. 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 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.[7]
Referenser[redigera | redigera wikitext]
- ^ [a b] Marcotte, Ethan (25 maj 2010). ”Responsive Web Design” (på amerikansk engelska). A List Apart. https://alistapart.com/article/responsive-web-design/.
- ^ http://www.mobilexweb.com/book
- ^ ”Responsiv design: samma innehåll, olika skärmar”. Internetmuseum. https://www.internetmuseum.se/tidslinjen/responsiv-design-samma-innehall-olika-skarmar/. Läst 10 april 2018.
- ^ Cashmore, Pete (11 december 2012). ”Why 2013 Is the Year of Responsive Web Design” (på engelska). Mashable. https://mashable.com/archive/responsive-web-design.
- ^ Marcotte, Ethan (4 mars 2009). ”Fluid Grids” (på amerikansk engelska). A List Apart. https://alistapart.com/article/fluidgrids/.
- ^ Marcotte, Ethan (7 juni 2011). ”Fluid Images” (på amerikansk engelska). A List Apart. https://alistapart.com/article/fluid-images/.
- ^ Wroblewski, Luke. ”LukeW | Which One: Responsive Design, Device Experiences, or RESS?” (på engelska). www.lukew.com. http://www.lukew.com/.