Veebidisain

Mis on Responsive Web Design?

Responsive disain tähendab, et leht kohandub ise ekraani suuruse järgi.

Kui vaatad lehte:

• arvutis – on mitu veergu
• tahvelarvutis – vähem veerge
• telefonis – üks veerg

Leht muutub sujuvalt.

Mis on Adaptive Web Design?

Adaptive disain tähendab, et tehakse mitu eraldi kujundust erinevatele seadmetele.

Näiteks:

• üks kujundus arvutile
• teine tahvlile
• kolmas telefonile

Kui ekraani suurus muutub, siis leht “hüppab” järgmise valmis kujunduse peale.

Võrdlustabel

Responsive koodi näide

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS:

body {
  margin: 0;
  font-family: Arial;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* Telefon */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

See tähendab:

• Arvutis – 3 veergu
• Telefonis – 1 veerg

Adaptive koodi näide

/* Desktop */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Tablet */
@media (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Siin on kindlad suurused, mille juures kujundus vahetub.

Kuidas parandada oma index.html lehte?

1. Lisasin viewport rea

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Muutsin menüü kujundust

Enne kasutasin:

float: left

width: 5%

See ei töötanud mobiilis hästi.

Muutsin menüü:

  display: flex;
  flex-wrap: wrap;  

Nüüd läheb menüü vajadusel uuele reale ja ei lähe katki väiksel ekraanil.

3. Muutsin sectionite laiused

Enne kasutasin:

width: 40%;
width: 30%;
width: 10%;

Nüüd kasutan:

    flex: 1 1 100%;

See tähendab, et kastid kohanduvad automaatselt vastavalt ekraani suurusele.

4. Lisasin media query mobiili jaoks

Lisasin CSS-i:

@media (max-width: 600px){
  header{
    background-image: none;
  }

See teeb nii, et telefonis lähevad kõik kastid üksteise alla.

5. Muutsin pildid responsive-ks

Lisasin:

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

See tähendab, et pilt ei lähe mobiilis liiga suureks.

6. Muutsin footerit

Enne oli footer:

position: fixed;

See kattis mobiilis sisu ära.

Muutsin selle tavaliseks footeriks, et ta oleks lehe lõpus ja ei segaks sisu.

Kontroll brauseris (praktiline test)

Mobiil:

Desktop (täisekraan):

Tahvelarvuti:

Kas menüü muutus?

Jah.

Arvutis on menüü reas kõrvuti.
Tahvlis ja mobiilis liiguvad menüüelemendid vajadusel uuele reale.

Menüü ei lähe katki ega suru teksti liiga kitsaks.

Kas tekst ja pildid kohandusid?

Jah.

• Tekstikastid liiguvad mobiilis üksteise alla.
• Pildid muutuvad väiksemaks tänu reeglile:

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

See tähendab, et pilt ei lähe ekraanist välja.

Kas tekkis horisontaalne scroll?

Ei.

Leht ei liigu külgsuunas ja horisontaalset scroll’i ei teki.
Sisu mahub ekraani laiusesse nii mobiilis, tahvlis kui ka arvutis.

Minu arvamus

Minu arvates on Responsive disain parem, sest:

• Seda on lihtsam teha
• Seda on lihtsam parandada
• See töötab paremini erinevatel seadmetel

Enamik tänapäeva veebilehti kasutab Responsive disaini.

index