Web Design

Sissejuhatus Kaasaegses veebiarenduses on kaks peamist viisi, kuidas muuta leht loetavaks erinevates seadmetes: reageeriv (Responsive) ja adaptiivne (Adaptive) disain. Kuigi mõlemad täidavad sama eesmärki, on nende tehniline teostus ja filosoofia erinevad.

1. Responsive Web Design (Reageeriv disain) See on lähenemine, kus veebileht kasutab paindlikke elemente ja protsendipõhist laiust.

• Põhimõte: Üks kood, mis “venib” vastavalt ekraani suurusele nagu kumm.
• Tehnoloogia: Kasutatakse CSS media queries funktsiooni ja suhtelisi ühikuid (%, em, rem).
• Eelis: Leht näeb hea välja igas seadmes, isegi nendes, mida pole veel leiutatud.

2. Adaptive Web Design (Adaptiivne disain) See meetod kasutab mitut fikseeritud suurusega paigutust.

• Põhimõte: Server tuvastab seadme ja saadab talle vastava valmis “šablooni” (nt eraldi vaade iPhone’i jaoks ja eraldi lauaarvuti jaoks).
• Tehnoloogia: Staatilised CSS raamid kindlatele laiustele (nt 320px, 760px, 1200px).
• Eelis: Võimaldab maksimaalselt optimeerida sisu konkreetse seadme jaoks.

Võrdlustabel

Koodinäited

Responsive näide (CSS)

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Adaptive näide (CSS)

@media (min-width: 1024px) {
  .sidebar { width: 300px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: 200px; }
}

Minu arvamus Minu arvates on Responsive disain oluliselt parem ja säästlikum valik. Peamine eelis on see, et arendaja peab tegema töö ära vaid ühe korra. Kuna uusi nutitelefone ja erinevaid ekraanimõõte lisandub turule pidevalt, on võimatu ja ebamõistlik luua igaühe jaoks eraldi disaini (Adaptive). Responsive disain tagab, et veebileht on tuleviku suhtes kindlustatud ning selle haldamine on soodsam ja kiirem.