Web Design

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

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.