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. Sisu, disain ja jõudlus on vajalikud kõigis seadmetes, et tagada kasutatavust ja rahulolu.

RWD-ga loodud veebileht  kohandab kujundust vaatamiskeskkonnale, kasutades paindlikke, proportsionaalsusel põhinevaid võrgustikke, paindlikke kujutisi, ja CSS3 meediumi päringuid.

 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. Seepärast kuulutas välja Google 2015. aastal Mobileengdoni ja hakkas mobiilisõbralike veebilehtede hinnangut tõstma, kui otsing tehti mobiilseadmelt. Veebidisain on näide kasutajaliidese plastilisusest.

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. 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.

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. 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. 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.

Viited 

Veeb