| Reageeriv (Responsive) | Adaptiivne (Adaptive) |
| Responsiv veebidisain võimaldab veebilehe kujundust ja paigutust automaatselt kohandada mis tahes ekraanisuurusele. | Adaptiivne veebidisain võimaldab veebilehele laadida staatilise, eelnevalt valmistatud kujunduse vastavalt tuvastatud seadmele. |
| Responsive design jõudis veebidisaini 2010. aastal, kui Ethan Marcotte tutvustas seda Seattle’is toimunud üritusel An Event Apart. Ta selgitab, mis ajendas teda andma uuele kujundusviisile nime: | Kohanduv disain on veebidisaini valdkonnas püsivalt juurdunud, sest ettevõtted soovivad üha enam kontrollida, kuidas nende sisu nutitelefonides kuvatakse. |
| Järjepidev sisukogemus kõikidel platvormidel Töötab uutes seadmetes, isegi mittestandardsete ekraanimõõtmetega seadmetes. | Loob igale platvormile ja kontekstile ideaalselt kohandatud kogemuse. Suure jõudlusega, kuna kujundus on optimeeritud sihtseadme jaoks. |
| Vähem kontrolli selle üle, kuidas sait igas seadmes kuvatakse Võib takistada visuaalset hierarhiat, kui elemendid voolavad vales järjekorras või vales suuruses. | Võib negatiivselt mõjutada SEO-d, kui sisu on ebajärjekindel kõikides seadmetes. |
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
#images {
flex-direction: column;
}
section {
width: 90%;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li a {
font-size: 1rem;
}
section h2 {
font-size: 1.2rem;
}
}
Index.html: https://romansandakov23.thkit.ee/index.html
Reageerimisvõime eest vastutav osa näeb välja selline, see vähendab saidi elemente sõltuvalt olemasolevatest pikslitest.
Kokkuvõte: Usun, et kasutajatele on adaptiivne veebidisain lähemal, sest hoolimata sellest, millise seadmega kasutaja läheb, saab ta mugavalt veebilehega suhelda. Responsive disainil on ka oma koht, ehk on see lihtsam ja kiirem kirjutada programmeerijatele