Tabel: Responsive vs Adaptive Web Design
| Omadus | Responsive Web Design (RWD) | Adaptive Web Design (AWD) |
|---|---|---|
| Põhimõte | “Voolav” disain. Sisu kohandub sujuvalt iga ekraanisuurusega, kasutades protsente ja paindlikke ruudustikke (fluid grids). | “Fikseeritud” disain. Tuvastab seadme ja laeb sellele konkreetsele seadmele (nt mobiil, tahvel) mõeldud kindla paigutuse (layout). |
| Tehnika | Kasutab peamiselt CSS Media Queries (@media) ja suhtelisi ühikuid (%, vw, vh). | Kasutab mitut erinevat fikseeritud paigutust (nt 320px, 768px, 1024px) ja serveripoolset või JavaScripti tuvastust. |
| Kasutajakogemus | Ühtlane kogemus kõigil seadmetel, kuid disain võib vahepealsetel suurustel veidi “katki” minna, kui pole hästi optimeeritud. | Väga täpne kontroll kindlate seadmete üle, kuid ei pruugi sobida ebatavaliste ekraanisuurustega seadmetele (nt uued volditavad telefonid). |
| Keerukus | Lihtsam alustada, üks HTML/CSS koodibaas. | Keerulisem arendada, kuna tuleb luua ja hallata mitut erinevat paigutust. |
Koodi näited
Responsive (CSS näide): Üks disain, mis muutub sujuvalt.
/* Põhistiil (Desktop) */
.container {
width: 100%;
display: flex;
}
/* Mobiilivaade - elemendid lähevad üksteise alla */
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}
Adaptive (Kontseptuaalne näide): Erinevad fikseeritud laiused vastavalt seadmele (tihti lahendatakse see ka JavaScripti või eraldi CSS failidega).
/* Fikseeritud laius mobiilile */
@media screen and (max-width: 480px) {
.container {
width: 320px; /* Kindel laius */
margin: 0 auto;
}
}
/* Fikseeritud laius tahvlile */
@media screen and (min-width: 481px) and (max-width: 1024px) {
.container {
width: 760px; /* Kindel laius */
margin: 0 auto;
}
}
Kokkuvõte (Minu arvamus)
Minu hinnangul on Responsive Web Design (RWD) tänapäeval parem valik enamike veebilehtede jaoks.
- Põhjendus: Google eelistab responsive disaini (SEO sõbralikkus). See on haldamise mõttes lihtsam, kuna on ainult üks koodibaas, mida uuendada. Adaptive disain on õigustatud vaid väga spetsiifiliste ja keerukate rakenduste puhul, kus mobiilikogemus peab drastiliselt erinema arvutikogemusest (nt pangarakendused või keerukad e-poed). Tavalise kodulehe jaoks on Responsive paindlikum ja tulevikukindlam (future-proof).
Kuidas parandada index.html (Responsive muutmine)
Et muuta oma index.html responsive (kohanduvaks), pead tegema kaks asja:
- Lisama HTML faili päisesse (
<head>sisse) viewport meta tagi. - Kasutama CSS-is Media Queries reegleid.
Kui sul on kood GitHubis, anna mulle repositooriumi nimi ja ma saan teha sulle Pull Requesti parandustega. Kui mitte, siis siin on juhis, mida pead faili lisama:
1. Lisa see rida <head> siltide vahele:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ilma selleta kuvab telefon veebilehte nagu väikest arvutiekraani (tekst on kribukirjas).
2. Lisa CSS faili (või <style> sisse) reeglid väikestele ekraanidele:
/* Näide: Muudame menüü vertikaalseks ja pildid paindlikuks */
/* Pildid ei tohi kunagi olla laiemad kui ekraan */
img {
max-width: 100%;
height: auto;
}
/* Mobiilivaade (ekraanid kitsamad kui 600px) */
@media screen and (max-width: 600px) {
/* Peida suur menüü või tee see vertikaalseks */
nav ul {
flex-direction: column;
padding: 0;
}
nav li {
margin-bottom: 10px;
text-align: center;
}
/* Tekstisuuruse kohandamine loetavamaks */
body {
font-size: 18px;
}
}