Reageeriv veebidisain

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.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. Sisu, disain ja jõudlus on vajalikud kõigis seadmetes, et tagada kasutatavust ja rahulolu.Marcotte, Ethan (May 25, 2010). "Responsive Web design"."Ethan Marcotte's 20 favourite responsive sites" net magazine. Oktoober 11, 2011.Gillenwater, Zoe Mickley (December 15, 2010). "Examples of flexible layouts with CSS3 media queries". Rabav CSS3. p. 320Schade, Amy (2014-05-04). https://www.nngroup.com/articles/responsive-web-design-definition/. 

RWD-ga loodud veebileht Pettit, Nick (August 8, 2012). "Beginner's Guide to Responsive Web Design". kohandab kujundust vaatamiskeskkonnale, kasutades paindlikke, proportsionaalsusel põhinevaid võrgustikke,"Core concepts of Responsive Web design". September 8, 2014.Marcotte, Ethan (March 3, 2009). "Fluid Grids". paindlikke kujutisi,Marcotte, Ethan (June 7, 2011). "Fluid images".Hannemann, Anselm (September 7, 2012). "The road to responsive images".Jacobs, Denise (April 24, 2012). "50 fantastic tools for responsive web design". ja CSS3 meediumi päringuid.Gillenwater, Zoe Mickley (October 21, 2011). "Crafting quality media queries"."Responsive design—harnessing the power of media queries". 

 Paindlik võrgukontseptsioon nõuab lehekülje elementide suurust pigem suhtelistes ühikutes nagu protsent, mitte absoluutühikutes nagu piksel või punkt.
 Paindlikute piltide mõõtmed on samuti suhtelistes ühikutes, et vältida nende kuvamist väljaspool nende sisaldavat elementi.
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."Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper". Cisco. Jaanuar 30, 2015. Seepärast kuulutas välja Google 2015. aastal Mobileengdoni ja hakkas mobiilisõbralike veebilehtede hinnangut tõstma, kui otsing tehti mobiilseadmelt."Official Google Webmaster Central Blog: Rolling out the mobile-friendly update". Veebidisain on näide kasutajaliidese plastilisusest.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.

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

 Seotud mõisted 

 Mobiilid esimesena, märkamatu JavaScript ja progressiivne täiustus 
"Mobiilid esimesena", märkamatu JavaScript ja progressiivne täiustus on sarnased kontseptsioonid, mis eelnesid RWD-le."What is Responsive Web Design". 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.Wroblewski, Luke (November 3, 2009). "Mobile First".Firtman, Maximiliano (July 30, 2011). Programming the Mobile Web. p. 512. ISBN 978-0-596-80778-8."Graceful degradation versus progressive enhancement". Veebruar 3, 2009. Arhiveeritud originaalist November 13, 2014.Designing with Progressive Enhancement. February 2010. p. 456. ISBN 978-0-321-65888-3.

 Progressiivne täiustus, mis põhineb brauseril, seadmel või funktsioonide tuvastamisel 
Inimesed kasutavad internetti palju mobiilseadmetel. 2014. aastal kasutasid inimesed esimest korda ajaloos Interneti pääsemiseks rohkem mobiiltelefone kui lauaarvutiteid."Mobile Websites | All The Way Up Media". All The Way Up Media. 2016-10-31. 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"Server-Side Device Detection: History, Benefits And How-To". Smashing magazine. September 24, 2012.. 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."BlackBerry Torch: The HTML5 Developer Scorecard | Blog". Sencha. August 18, 2010. Arhiveeritud originaalist 2014-03-05. "Motorola Xoom: The HTML5 Developer Scorecard | Blog". Sencha. Veebruar 24, 2011. Arhiveeritud originaalist 2015-02-13.

 Viited 

Kategooria:Veeb