Web Design: Responsive vs Adaptive
Responsive design – üks paindlik kujundus, mis kohandub ekraani laiusega CSS media query abil.
Adaptive design – mitu eraldi kujundust (layout’i) kindlatele ekraanisuurustele; leht “valib” sobiva variandi.
Võrdlustabel
| Kriteerium | Responsive design | Adaptive design |
|---|---|---|
| Põhimõte | Üks paindlik layout | Mitu fikseeritud layout’i |
| Kohandumine | Sujuv (fluid) | Astmeline (breakpointide kaupa) |
| Tehnika | CSS media queries + %/flex/grid | Eraldi stiilid/templated eri vaadetele |
| Arenduse keerukus | Tavaliselt lihtsam | Tavaliselt keerulisem (rohkem variante) |
| Hooldus | Lihtsam (üks süsteem) | Raskem (mitu süsteemi) |
| Sobivus | Enamik kaasaegseid saite | Spetsiifilised projektid/legacy |
Koodinäited
Responsive (CSS Grid + media query):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
main{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
@media (max-width: 900px){
main{ grid-template-columns:1fr; }
}
Adaptive (3 fikseeritud layout’i):
/* desktop */
.container{ width:1200px; margin:0 auto; }
/* tablet */
@media (max-width: 1024px){
.container{ width:768px; }
}
/* mobile */
@media (max-width: 480px){
.container{ width:100%; }
}
Kokkuvõte (minu arvamus)
Minu arvates on responsive design parem enamikul juhtudel, sest see on universaalne, lihtsam hooldada ning töötab sujuvalt eri seadmetel. Adaptive design võib olla kasulik siis, kui on vaja eraldi, väga täpselt kontrollitud vaateid (nt vanad süsteemid või erilahendused).
Minu veebilehe muudatus (index.php / CSS)
Muutsin oma lehe kujunduse responsive-ks: lisasin viewport meta ning kasutasin media query’t, et “main” läheks väiksel ekraanil 1 veerule.
Responsive kontroll: 3 ekraanipilti + analüüs
Vajuta pildile et suurendada.
Telefoon:
Tahvelarvut:
Arvuti:
responsivetesttool.com testid.
Telefoon:
Tahvelarvuti:
Küsimused:
Kas menüü muutus? Jah, väiksel ekraanil muutub menüü kompaktsemaks / vertikaalseks.
Kas tekst ja pildid kohandusid? Jah, sisu läheb 2 veerust 1 veerule, pildid skaleeruvad konteineri järgi.
Kas tekkis horisontaalne scroll? Ei, Kõik liigub vertikaalselt.