Reageeriv veebidisain

Allikas: Vikipeedia
Jump to navigation Jump to search
Sisu on nagu vesi, mis illustreerib RWD põhimõtteid

Reageeriv veebidisain (inglise keeles Responsive web design, lühend RWD) on lähenemisviis veebidisainile, mis muudab veebilehe kujundust vastavalt erinevate seadmete, akende või ekraanide suurustele. Hiljutised uuringud käsitlevad vaataja lähedust kui osa konteksti vaatamist RWD laiendusena.[1] Sisu, disain ja jõudlus on vajalikud kõigis seadmetes, et tagada kasutatavust ja rahulolu.[2][3][4][5]

RWD-ga loodud veebileht [2][6] kohandab kujundust vaatamiskeskkonnale, kasutades paindlikke, proportsionaalsusel põhinevaid võrgustikke,[7][8] paindlikke kujutisi,[9][10][11] ja CSS3 meediumi päringuid.[4][12][13]

  • Paindlik võrgukontseptsioon nõuab lehekülje elementide suurust pigem suhtelistes ühikutes nagu protsent, mitte absoluutühikutes nagu piksel või punkt.[8]
  • Paindlikute piltide mõõtmed on samuti suhtelistes ühikutes, et vältida nende kuvamist väljaspool nende sisaldavat elementi.[9]
  • Meedia päringud lubavad erinevate CSS-stiilide kasutamise reegleid, toetudes seadme omadustele, mille peal kindel lehekõlg kuvatakse. Kõige levinum nendest on brauseri laius.

Reageeriv veebidisain on muutunud olulisemaks, kuna mobiilseadmed hõlmavad ligi poole kogu Interneti-liiklusest.[14] Seepärast kuulutas välja Google 2015. aastal Mobileengdoni ja hakkas mobiilisõbralike veebilehtede hinnangut tõstma, kui otsing tehti mobiilseadmelt.[15] Veebidisain on näide kasutajaliidese plastilisusest.[16]

Näide, kuidas veebilehe eri elemente kohandatakse erinevate seadmete ekraani suurusega, nagu lauaarvuti, tahvelarvuti ja nutitelefon

Seotud mõisted[muuda | muuda lähteteksti]

Mobiilid esimesena, märkamatu JavaScript ja progressiivne täiustus[muuda | muuda lähteteksti]

"Mobiilid esimesena", märkamatu JavaScript ja progressiivne täiustus on sarnased kontseptsioonid, mis eelnesid RWD-le.[17] Mobiiltelefonide brauserid ei mõista JavaScripti ega meedia päringuid, seega on soovitatav luua veebisaidi põhialus ja täiustada seda nutitelefonide ja arvutite jaoks, selle asemel et teha veebileht, kasutades sujuvat vähendust (graceful degradation), mis muudaks lehe keeruliseks ja koormaks seda piltidega.[18][19][20][21]

Progressiivne täiustus, mis põhineb brauseril, seadmel või funktsioonide tuvastamisel[muuda | muuda lähteteksti]

Inimesed kasutavad internetti palju mobiilseadmetel. 2014. aastal kasutasid inimesed esimest korda ajaloos Interneti pääsemiseks rohkem mobiiltelefone kui lauaarvutiteid.[22] Kui veebileht peab toetama põhilisi mobiilseadmeid, millel puudub JavaScripti toetus, on kaks võimalust saada aru, kas teatud HTML-i ja CSS-i funktsioonid on toetatud: brauseri tuvastamine ("user agent") ja moobilseadme tuvastamine[19][23]. Need meetodid on aga usaldusväärsed ainult juhul, kui seade on kooskõlas andmebaasiga.

Võimekamate mobiiltelefonide ja personaalarvutite jaoks on populaarsed JavaScripti raamistikud nagu Modernizr, jQuery ja jQuery Mobile, mis suudavad otse testida brauseri HTML/CSS-funktsioonide tugifunktsiooone (või tuvastavad mobiilseadet või brauserit). Polyfills saab kasutada, et lisada funktsioonide tuge, nt toetada meediapäringuid (vajalikud reageeriva veebidisaini jaoks) ja täiustada HTML5 toega Internet Explorerit. Funktsioonide tuvastamine ei pruugi olla täiesti usaldusväärne; mõned võivad teatada, et funktsioon on saadaval, isegi kui see on puuduv või nii halvasti rakendatud, et ei toimi.[24][25]

Viited[muuda | muuda lähteteksti]

  1. Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (5 June 2017). "Proximity-Based Adaptation of Web Content on Public Displays". International Conference on Web Engineering (ICWE):Web Engineering. Springer, Cham: 282–301. doi:10.1007/978-3-319-60131-1_16.
  2. 2,0 2,1 Marcotte, Ethan (May 25, 2010). "Responsive Web design".
  3. "Ethan Marcotte's 20 favourite responsive sites" net magazine. Oktoober 11, 2011.
  4. 4,0 4,1 Gillenwater, Zoe Mickley (December 15, 2010). "Examples of flexible layouts with CSS3 media queries". Rabav CSS3. p. 320
  5. Schade, Amy (2014-05-04). https://www.nngroup.com/articles/responsive-web-design-definition/.
  6. Pettit, Nick (August 8, 2012). "Beginner's Guide to Responsive Web Design".
  7. "Core concepts of Responsive Web design". September 8, 2014.
  8. 8,0 8,1 Marcotte, Ethan (March 3, 2009). "Fluid Grids".
  9. 9,0 9,1 Marcotte, Ethan (June 7, 2011). "Fluid images".
  10. Hannemann, Anselm (September 7, 2012). "The road to responsive images".
  11. Jacobs, Denise (April 24, 2012). "50 fantastic tools for responsive web design".
  12. Gillenwater, Zoe Mickley (October 21, 2011). "Crafting quality media queries".
  13. "Responsive design—harnessing the power of media queries".
  14. "Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper". Cisco. Jaanuar 30, 2015.
  15. "Official Google Webmaster Central Blog: Rolling out the mobile-friendly update".
  16. Thevenin, D.; Coutaz, J. (2002). "Plasticity of User Interfaces: Framework and Research Agenda". Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press. Edinburgh. pp. 110–117.
  17. "What is Responsive Web Design".
  18. Wroblewski, Luke (November 3, 2009). "Mobile First".
  19. 19,0 19,1 Firtman, Maximiliano (July 30, 2011). Programming the Mobile Web. p. 512. ISBN 978-0-596-80778-8.
  20. "Graceful degradation versus progressive enhancement". Veebruar 3, 2009. Arhiveeritud originaalist November 13, 2014.
  21. Designing with Progressive Enhancement. February 2010. p. 456. ISBN 978-0-321-65888-3.
  22. "Mobile Websites | All The Way Up Media". All The Way Up Media. 2016-10-31.
  23. "Server-Side Device Detection: History, Benefits And How-To". Smashing magazine. September 24, 2012.
  24. "BlackBerry Torch: The HTML5 Developer Scorecard | Blog". Sencha. August 18, 2010. Arhiveeritud originaalist 2014-03-05.
  25. "Motorola Xoom: The HTML5 Developer Scorecard | Blog". Sencha. Veebruar 24, 2011. Arhiveeritud originaalist 2015-02-13.