Posted in

Web Design

by maksimts•

Mis on Responsive Web Design?

Responsive disain tähendab, et veebileht kohandub automaatselt vastavalt ekraani suurusele. Kasutatakse paindlikku CSS-i (grid, flexbox, protsendid, media queries), mis tähendab, et üks ja sama kujundus „venib” ja kahaneb sujuvalt – olgu ekraan 320px või 1920px lai.

Mis on Adaptive Web Design?

Adaptive disain tähendab, et veebilehel on mitu kindlat, fikseeritud paigutust (nt 320px, 768px, 1024px). Server või CSS tuvastab ekraani laiuse ja laeb sobiva versiooni. Elementide suurused ei muutu sujuvalt – toimub „hüpe” ühelt versioonilt teisele.

Võrdlustabel

OmadusResponsiveAdaptive
PaigutusÜks paindlik paigutusMitu fikseeritud paigutust
CSS tehnika%, vw, flexbox, grid, media queriesFikseeritud px väärtused + media queries
Arenduse keerukusVäiksem – üks koodSuurem – mitu versiooni
JõudlusLaetakse alati kõik ressursidSaab laadida ainult vajaliku versiooni
KasutajakogemusSujuv, ühtenäolineOptimeeritud, kuid hüppeline
HooldusLihtne – üks failKeerulisem – mitu faili/versiooni
KasutusBlogid, portfooliod, väikesed saididKeerukad rakendused, e-poed

Koodinäited

Responsive

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }

  header h1 {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

Adaptive

.container {
  width: 960px; /* desktop */
}

@media (max-width: 1024px) {
  .container {
    width: 768px; /* Tahvelarvuti */
  }
}

@media (max-width: 768px) {
  .container {
    width: 480px; /* Suur mobiil */
  }
}

@media (max-width: 480px) {
  .container {
    width: 320px; /* Väike mobiil */
  }
}

Kokkuvõte

Minu arvates on Responsive Web Design parem valik enamiku projektide jaoks. Sest siin on üks koodialus, töötab kõikidel ekraanisuurustel sujuvalt ja Google eelistab responsive saite SEO-s. Kuigi tänapäeval on seadmete ekraanid väga erinevad. Adaptive disain on kasulik ainult siis, kui on vaja täpset kontrolli konkreetse seadme kasutuskogemuse üle.

Minu uuendatud CSS index.html

Kasutasin Responsive Design, sest see on portfoolio saitidele parem valik.

Vaata kodulehte
/* Tahvelarvuti (tablet) – kuni 768px */
@media (max-width: 768px) {
    header img {
        width: 200px;
    }

    header h1 {
        font-size: 20px;
    }

    nav ul {
        gap: 6px;
        padding: 8px;
    }

    nav a {
        padding: 6px 10px;
        font-size: 14px;
    }

    main {
        margin: 10px auto;
        padding: 0 10px;
    }

    .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Mobiil – kuni 480px */
@media (max-width: 480px) {
    header img {
        width: 150px;
    }

    header h1 {
        font-size: 16px;
    }

    nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    nav a {
        display: block;
        text-align: center;
        padding: 10px;
        font-size: 14px;
    }

    section {
        padding: 12px;
        border-radius: 12px;
    }

    section h2 {
        font-size: 18px;
    }

    button {
        width: 100%;
        margin: 6px 0;
        font-size: 14px;
    }

    button#menuNupp {
        width: auto;
        font-size: 12px;
        padding: 6px 10px;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

    footer {
        font-size: 12px;
        padding: 15px 10px;
    }
}

Pildid

Mobiil (Vertical)

Dropdown

Mobiil (Horizontal)

Tahvelarvuti (Vertical)

Tahvelarvuti (Horizontal)

Küsimused

Kas menüü muutus?

Arvutil – horisontaalne rida, kõik lingid ühel real

Tahvelil – flex-wrap: wrap tõttu lingid mahuvad 2 ritta kui ekraan kitsas

Mobiiil – menüü muutub vertikaalseks (flex-direction: column), iga link on täislaiusega ja kergesti vajutatav

Kas tekst ja pildid kohandusid?

Logo: 300px → 200px → 150px vastavalt ekraanile

header h1: 24px → 20px → 16px

Sektsioonide pildid: max-width: 100% – ei lähe kunagi üle sektsiooni serva

Nupud mobiilil: width: 100% – lihtsam vajutada

Kas tekkis horisontaalne scroll?

Ei – tänu box-sizing: border-box ja max-width:

Peamine parandus oli <meta name=”viewport”> lisamine – ilma selleta oleks mobiil kuvand lehe väikese arvutivaatena ja tekitanud scrolli