Web Design - Martin Rossakov portfoolio

Responsive vs Adaptive Web design :

	Responsive :	Adaptive :
Kuidas töötab	Üks leht, mis muutub sujuvalt igale ekraani suurusele.	On mitu valmis kujundust erinevatele seadmetele (telefon/tahvel/PC).
Suuruse muutmine	Elemendid venivad ja paigutus muutub järk-järgult.	Kujundus vahetub “astmetega” kindlates punktides.
Kuidas tehakse	Tavaliselt kasutatakse paindlikke suurusi (%) + Flexbox/Grid ja vajadusel media query.	Peamiselt kasutatakse media query kindlate laiuste jaoks.
Plussid	Lihtne: üks kujundus, sobib enamikule ekraanidele.	Saab täpselt kontrollida, kuidas leht igas seadmes välja näeb.
Miinused	Mõnikord on keerulisem teha, et kõik näeks igal laiusel perfektne välja.	Tuleb teha ja hooldada mitut versiooni, rohkem tööd.
Millal kasutada	Enamasti tänapäeval parim valik.	Kui on vaja väga kindlat kujundust konkreetsetele seadmetele.

Responsive koodi näited :

Näide 1: Sisu ei ole liiga lai (max-width)

main{
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

Miks see on responsive:
Leht ei lähe liiga laiaks suurtel ekraanidel, aga väiksel ekraanil main muutub automaatselt kitsamaks (sest max-width on ainult maksimaalne piir).

Näide 2: Menüü kohandub ja läheb uuele reale (flex-wrap)

nav ul{
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

Miks see on responsive:
Kui ekraan on kitsas, lingid ei lähe ühte ritta välja, vaid keeravad uuele reale. See aitab telefonis.

Näide 3: Header ei “lõhu” väiksel ekraanil (flex-wrap)

header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

header h1{
  flex: 1 1 300px;
}

Miks see on responsive:
Headeri elemendid (pealkiri ja nupp) saavad ümber paigutuda. Kui ruumi pole, siis nad lähevad järgmisele reale, mitte ei suru üksteist kokku.

Näide 4: Pildid muutuvad automaatselt väiksemaks (max-width: 100%)

img{
  max-width: 100%;
  height: auto;
}

Miks see on responsive:
Pilt ei lähe ekraanist välja. Telefonis ta lihtsalt vähendab ennast ja kõrgus jääb õigeks (height:auto).

Adaptive koodi näited :

Näide 1: Laius muutub teatud punktides kõigi seadmete puhul

.container{
  width: 960px;     /* arvuti versioon */
  margin: 0 auto;
}

@media (max-width: 768px){
  .container{
    width: 720px;   /* tahvli versioon */
  }
}

@media (max-width: 480px){
  .container{
    width: 100%;    /* telefoni versioon */
  }
}

Miks see on adaptive:

Siin on konkreetsed laiused (960, 720) — see on nagu eraldi versioonid.
Kui ekraan muutub väiksemaks, disain vahetub “astmega” teiseks.

Näide 2: Lülitame elemendid eri suurustel sisse/välja

.menu{
  display: block;   /* arvutis menüü on nähtav */
}

@media (max-width: 480px){
  .menu{
    display: none;  /* telefonis peidame menüü */
  }
  .burger{
    display: block; /* telefonis näitame burgerit */
  }
}

Miks see on adaptive:

Me teadlikult peidame/näitame asju kindla ekraani järgi — nagu erinevad variandid.

Kokkuvõte :

Minu arvates on responsive disain parem enamiku juhtudel. Põhjus on see, et ta kohandub sujuvalt iga ekraani suurusega — leht näeb hea välja nii telefonis, tahvlis kui ka arvutis. Lisaks on see üks kujundus, mida on lihtsam hooldada ja parandada. Adaptive disain on ka okei, aga seal peab tegema mitu erinevat versiooni erinevatele laiustele ja see võtab rohkem aega. Seega koolitöö jaoks valiksin mina responsive disaini, sest see on lihtsam ja tänapäeval tavalisem.

Responsive minu index.html leht :

Index.html

Laptop :

iPad :

iPhone XS ( näidatakse nuppu peida või näita navmenüüs ) :