Responsive vs Adaptive Design

Mis on Responsive Web Design?

Responsive web design tähendab seda, et veebileht muudab ennast automaatselt vastavalt ekraani suurusele.
Ehk siis sama HTML ja sama CSS, aga layout kohandub telefoni, tahvli või arvuti jaoks.

Näiteks, tavalisekt kasutatakse:

  • media queries
  • flexbox
  • grid
  • protentsuaalsed laiused

Mis on Adaptive Web Design?

Adaptive web design tähendab seda, et tehakse mitu erinevat kindla suurusega layouti.
Server või CSS valib sobiva layouti vastavalt seadmele.

Näiteks, tavalisekt kasutatakse:

  • eraldi layout telefonile (480px)
  • eraldi layout tahvlile (768px)
  • eraldi layout desktopile (1200px)
Responsive Web DesignAdaptive Web Design
PõhimõteLeht kohandub automaatselt vastavalt ekraani suuruseleLeht kasutab erinevaid kindlaid kujundusi erinevatele seadmetele
Kuidas töötabKasutab CSS media queries ja flexbox/gridServer või CSS valib kindla layouti (nt mobile, tablet, desktop)
PaindlikkusVäga paindlikVähem paindlik
ArendusLihtsam teha ja hallataKeerulisem, sest mitu layouti
TulemusÜks disain, mis “venib”Eraldi disainid eri seadmetele

Responsive Näide

.container {
  display: flex;
}

.box {
  flex: 1;
  padding: 20px;
  background-color: lightblue;
  margin: 10px;
}

/* Kui ekraan on väiksem kui 600px */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Adaptive Näide

<script>
if (window.innerWidth < 600) {
  window.location = "mobile.html";
} else {
  window.location = "desktop.html";
}
</script>

Kokkuvõte (minu arvamus)

Minu arvates Responsive Web Design on parem, sest:

  • Seda on lihtsam teha
  • Ei pea tegema mitut erinevat lehte
  • Tänapäeval kõik kasutavad seda
  • Google eelistab responsive lehti

Adaptive võib olla kasulik, kui on vaja väga spetsiifilist disaini erinevatele seadmetele, aga üldiselt responsive on targem valik.

Minu index.html muutused

https://artjompoldsaar24.thkit.ee/index.html

Mina muutuksin oma index.html lehe, et kasutatakse Responsive disaini.
Menüü muutus väiksematel ekraanidel (<768px) kuvatakse menüü nupp „Menu“, mis avab ja sulgeb lingid, nii et menüü ei võta kogu ekraani ära. Tekst ja pildid kohandusid, pildid ei ole enam fikseeritud laiusega, vaid vähenevad väiksemal ekraanil, samuti sektsioonide laius muutub, et need mahuksid ekraanile. Tänu sellele ei teki horisontaalset scrolli, kõik sisu mahub nüüd hästi ekraani sisse.

Mobiil

Tahvelarvuti

Desktop (täisekraan)