Responsive Web

Odzivno spletno oblikovanje pomeni, da se vsebina in postavitev spletne strani prilagajata velikosti zaslona in načinu uporabe. Tako je ista stran lahko pregledna na telefonu, tablici, prenosniku in namiznem računalniku.

Odzivno spletno oblikovanje

V preteklosti so bile strani pogosto načrtovane predvsem za večje zaslone. Ker danes uporabniki dostopajo do spleta na zelo različnih napravah, mora biti sodobna stran prilagodljiva in pregledna v različnih okoliščinah.

Osnovna pravila

• Vsebina mora ostati pregledna na majhnih in velikih zaslonih.
• Postavitev naj se prilagaja prostoru, ne pa posameznim modelom naprav.
• Pri odzivnem oblikovanju pogosto uporabljamo relativne enote, prilagodljive slike in medijske poizvedbe.
• Pomembno je, da ostaneta berljivost in uporabnost dobri tudi pri manjših širinah.
• Pri sodobnem pristopu pogosto začnemo z oblikovanjem za manjše zaslone in nato dodajamo prilagoditve za širše prikaze.

Kaj je odzivno spletno oblikovanje?

Pri odzivnem spletnem oblikovanju uporabljamo več pristopov, ki skupaj omogočajo prilagodljiv prikaz vsebine:

• prilagodljivo postavitev z relativnimi enotami,
• slike, ki se prilagajajo prostoru,
• medijske poizvedbe za različne širine zaslona in druge pogoje.

Ti pristopi sodelujejo med seboj. Postavitev določa razmerja med deli strani, slike se prilagajajo širini, medijske poizvedbe pa omogočajo, da se prikaz ob določenih pogojih spremeni.

Prilagodljiva postavitev

Včasih so bile širine strani in posameznih elementov pogosto določene v pikslih. Takšna rešitev je na spletu manj primerna, saj se stran prikazuje na zelo različnih napravah: od telefonov in tablic do velikih zaslonov.

Zato pri odzivnem oblikovanju pogosto uporabljamo relativne enote, na primer odstotke, enoto fr pri mrežah ali prilagodljive lastnosti postavitve. Klasičen način pretvorbe iz pikslov v odstotke lahko izračunamo po preprosti enačbi:

tarča / kontekst = rezultat

Če je na primer širina strani 960 pikslov, širina okna brskalnika pa 1920 pikslov, dobimo:

960px / 1920px = 50%

Oglejmo si primer, kjer imamo levi stranski stolpec širine 300 pikslov, desni stolpec glavne vsebine širine 640 pikslov in med njima 20 pikslov razmika:

Z uporabo enačbe dobimo naslednje odstotkovne vrednosti:

• sidebar: 300px / 960px = 31,25%
• main content: 640px / 960px = 66,66667%
• razmik: 20px / 960px = 2,08334%

Danes bi tak primer najpogosteje postavili s pomočjo flex ali grid, vendar je odstotkovna pretvorba še vedno uporabna za razumevanje prilagodljivih razmerij.

<div class="wrapper">
   <div class="sidebar"><h3>Sidebar</h3></div>
   <div class="content"><h3>Content</h3></div>
</div>

.wrapper {
   display: flex;
   flex-direction: column;
   gap: 2.08334%;
}

@media screen and (min-width: 600px) {
   .wrapper {
      width: 50%;
      margin: 0 auto;
      flex-direction: row;
   }

   .sidebar {
      flex: 0 0 31.25%;
   }

   .content {
      flex: 0 0 66.66667%;
   }
}

Prikaz primera v novem oknu oziroma zavihku.

Slike, ki se prilagajajo prostoru

Pri odzivni strani se mora skupaj z besedilom in postavitvijo prilagajati tudi velikost slik. Osnovno pravilo je zelo preprosto:

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

S tem dosežemo, da slika ne preseže širine svojega območja, hkrati pa ohrani pravilno razmerje med širino in višino.

Pri sodobnem spletnem razvoju pogosto uporabljamo tudi odzivne slike z elementi in atributi, kot so srcset, sizes in element <picture>, saj lahko tako brskalnik izbere primernejšo sliko glede na velikost in ločljivost zaslona.

Medijske poizvedbe

Z medijskimi poizvedbami v CSS določimo, pri kateri širini zaslona se slog spremeni. Tako lahko isto vsebino drugače razporedimo na telefonu in drugače na večjem zaslonu.

@media screen and (min-width: 600px) {
   /* slog za širše zaslone */
}

Pri pristopu mobile-first najprej napišemo osnovni slog za manjše zaslone. Nato z min-width postopoma dodajamo pravila za širše zaslone:

/* osnovni slog za manjše zaslone */

@media screen and (min-width: 600px) {
   /* slog za tablice in širše zaslone */
}

@media screen and (min-width: 900px) {
   /* slog za večje namizne zaslone */
}

To pomeni, da se stran postopoma nadgrajuje, ko je na voljo več prostora.

V naslednjem primeru je enaka postavitev izdelana po pristopu mobile-first. Na manjšem zaslonu sta elementa postavljena drug pod drugim, na širšem zaslonu pa se razporedita v dva stolpca:

<div class="wrapper">
   <div class="sidebar"><h3>Sidebar</h3></div>
   <div class="content"><h3>Content</h3></div>
</div>

.wrapper {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.sidebar,
.content {
   min-height: 250px;
}

@media screen and (min-width: 600px) {
   .wrapper {
      width: 50%;
      margin: 0 auto;
      flex-direction: row;
      gap: 2.08334%;
   }

   .sidebar {
      flex: 0 0 31.25%;
   }

   .content {
      flex: 0 0 66.66667%;
   }
}

Prikaz primera v novem oknu oziroma zavihku.

Priporočila

• Začni z osnovnim slogom za manjše zaslone in ga nato nadgrajuj.
• Uporabljaj prilagodljive postavitve, ki se smiselno odzivajo na širino prostora.
• Poskrbi, da se slike prilagodijo širini svojega območja.
• Medijske poizvedbe uporabljaj za vsebino in postavitev, ne za posamezne modele naprav.
• Na različnih širinah preveri berljivost, razmike, velikosti in uporabnost navigacije.

Pogoste napake

• Širine elementov so določene togo in se ne prilagajajo različnim zaslonom.
• Slike presegajo širino prostora ali se popačijo.
• Medijske poizvedbe so vezane na konkretne naprave namesto na potrebe vsebine.
• Pri manjših zaslonih ostane postavitev enaka kot na velikem zaslonu, čeprav ni več pregledna.
• Odzivnost se preveri le na enem tipu zaslona ali v eni širini okna.