Responsiv webbdesign

Responsiv webbdesign
Webbdesign som automatiskt anpassar sig till olika skärmplattformar
Under­klass tillwebbdesign

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

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

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]

Utmaningar och andra tillvägagångssätt

Luke Wroblewski sammanfattade några av utmaningarna med RWD och mobil design och skapade en katalog med layoutmönster för flera enheter.[8] Han föreslog att jämfört med den enkla HWD-metoden, kan metoder för enhetsupplevelse eller RESS (adaptiv webbdesign med komponenter på serversidan) ge användarupplevelser som är bättre optimerade för mobila enheter.

Många publicister har implementerat adaptiv design, men en av utmaningarna med att implementera RWD var att vissa bannerannonser och videor inte var responsiva. Sökannonser och (banner-) mediaannonser började dock stödja inriktning på specifika enhetsplattformar och olika annonsstorleksformat för stationära datorer, smartphones och enkla mobila enheter. Olika URL:er för landningssidor användes för olika plattformar,[9] eller så användes Ajax för att visa olika annonsvarianter på sidan.[10][11] CSS-tabeller möjliggör hybrider av fasta och variabla layouter.[12]

Relaterade begrepp

Mobilvänlig design och progressiv förbättring är relaterade begrepp som föregick RWD.[13] Google föredrar mobilvänliga webbplatser.[14] Google skannar först en webbplats på mobila enheter, sedan på stationära datorer och andra enheter. Grundläggande webbläsare för mobiltelefoner förstår inte JavaScript eller mediafrågor, så den rekommenderade praxisen var att skapa en grundläggande webbplats och förbättra den för smartphones och persondatorer, snarare än att förlita sig på stegvis försämring för att säkerställa att en komplex, bildrik webbplats skulle fungera på mobiltelefoner.[15]

Referenser

  1. ^ [a b] Marcotte, Ethan (25 maj 2010). ”Responsive Web Design” (på amerikansk engelska). A List Apart. https://alistapart.com/article/responsive-web-design/. 
  2. ^ http://www.mobilexweb.com/book
  3. ^ ”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. 
  4. ^ Cashmore, Pete (11 december 2012). ”Why 2013 Is the Year of Responsive Web Design” (på engelska). Mashable. https://mashable.com/archive/responsive-web-design. 
  5. ^ Marcotte, Ethan (4 mars 2009). ”Fluid Grids” (på amerikansk engelska). A List Apart. https://alistapart.com/article/fluidgrids/. 
  6. ^ Marcotte, Ethan (7 juni 2011). ”Fluid Images” (på amerikansk engelska). A List Apart. https://alistapart.com/article/fluid-images/. 
  7. ^ Wroblewski, Luke. ”LukeW | Which One: Responsive Design, Device Experiences, or RESS?” (på engelska). www.lukew.com. http://www.lukew.com/. 
  8. ^ ”Mobilism: jQuery Mobile”. www.lukew.com. https://www.lukew.com/ff/entry.asp?1330. Läst 8 december 2023. 
  9. ^ ”How can we help you?”. support.google.com. https://support.google.com/google-ads/?hl=en&guide=23292#topic=10286612. Läst 8 december 2023. 
  10. ^ ”Server-Side Device Detection: History, Benefits And How-To”. www.smashingmagazine.com. https://www.smashingmagazine.com/2012/09/server-side-device-detection-history-benefits-how-to/. Läst 8 december 2023. 
  11. ^ ”Mobile site and mobile-first indexing best practices”. developers.google.com. https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing. Läst 8 december 2023. 
  12. ^ ”The Role of Table Layouts in Responsive Web Design”. webdesign.tutsp. https://webdesign.tutsplus.com/the-role-of-table-layouts-in-responsive-web-design--webdesign-10294t. Läst 8 december 2023. 
  13. ^ ”What is Responsive Web Design?”. www.webhostdesignpost.com. https://www.webhostdesignpost.com/webdesign/whatisresponsivewebdesign.html. Läst 8 december 2023. 
  14. ^ ”Why to Optimize Your Website for Mobile”. www.design-hero.com. https://www.design-hero.com/business-tips/optimize-website-for-mobile/. Läst 8 december 2023. 
  15. ^ ”Programming the Mobile Web”. books.google.com. https://books.google.com/books?vid=ISBN9780596807788&newbks=0&redir_esc=y. Läst 8 december 2023. 

Externa länkar

Media som används på denna webbplats

Arbcom ru editing.svg
Icon of simple gray pencil. An icon for Russian Wikipedia RFAR page.
Responsive design - Commons Android app.jpg
Författare/Upphovsman: User:tfinc, Licens: CC BY-SA 3.0
Example of responsive design on Commons Android app