| Responsive Web Design (RWD) – Reageeriv veebidisain | Adaptive Web Design (ADW) – Adaptiivne veebidisain |
| Reageeriv veebidisain 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. | Adaptiivne veebidisain soodustab veebilehe mitme versiooni loomist, et see sobiks paremini kasutaja seadmesse, mitte ühele staatilisele lehele, mis laadib kõigis seadmetes sama, või ühele lehele, mis sisu ümber järjestab ja suurust muudab reageerib vastavalt kasutaja seadmele/ekraani suurusele/brauserile. |
I believe that responsive design is better than adaptive, because working with responsive design is easier and more convenient since it itself adapts to the size of the screen.
What is a responsive website?
See on veebisait, mis kohandub automaatselt seadmete erinevate ekraanisuurustega, millel seda kuvatakse. Selleks kasutatakse veebidisaini tehnikaid, näiteks reageerivat CSS-i.
Mobile responsive website.
See on veebisait, mis on loodud ja arendatud selleks, et kohaneda tõhusalt erinevate mobiilseadmetega, nagu nutitelefonid ja tahvelarvutid.
Elements of RWD:
Fluid Grid
See on paigutus, mis kasutab veebilehel elementide laiuse ja paigutuse määramiseks fikseeritud ühikute (nt pikslite) asemel suhtelisi ühikuid (nt protsenti).
Näiteks:
img { width: 100%; }
Flexible Media
Kasutatakse selleks, et muuta teie veebisait erinevate suuruste ja eraldusvõimetega suurepäraseks. Kujutiste paindlikuks muutmiseks saate määrata nende maksimaalseks laiuseks 100% konteinerist, milles need asuvad.
Näiteks:
img { max-width: 100%; }
Media Queries
See on responsiivse veebidisaini aluseks, võimaldades rakendada erinevaid CSS-i reegleid olenevalt kasutaja seadme või brauseri omadustest.
Näiteks:
@media (max-width: 600px){ .nav{ display: none; } }
Responsive Web Design
Responsiivse veebisaidi loomiseks peate lisama html-märgendi:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Responsive website: https://antonbuivol22.thkit.ee/RWD/index.html
Adaptive website: https://antonbuivol22.thkit.ee/AWD/index2.html