Odzivni dizajn oz. odzivno spletno oblikovanje

Odzivni dizajn

Predviden čas branja: 6 minut

Kazalo vsebine

Odzivno spletno oblikovanje, ali kot mu radi rečemo kar odzivni dizajn, opisuje pristop k razvoju spletnega mesta, ki je optimalno prikazano na različnih končnih napravah. Izraz odzivni dizajn je star le toliko kot mobilni splet in je postal splošno znan okoli leta 2013.

Pred pojavom mobilnega spleta je bila izbira naprav, ki omogočajo internet, zelo homogena: obstajali so namizni ali prenosni računalniki, ki so si bili precej podobni glede vhodnih in izhodnih medijev. Obe vrsti naprav sta imeli tipkovnico in miško ali sledilno ploščico ter zaslon s širino približno 1.000 do 2.000 slikovnih pik.

Kaj je odzivni dizajn?

Za razvoj spletne strani, ki bi se pravilno prikazovalo na večini uporabljenih naprav, v tistem času ni bilo treba vložiti pretiranega truda. Najpreprostejša rešitev je bila omejitev širine strani na najmanjši skupni imenovalec. Priljubljen pristop je bil prikazovanje strani v širini 800 slikovnih pik in sredinsko ali levo poravnano. Na večjem zaslonu je morda nekoliko več belega prostora, vendar so bile strani dobro berljive na vseh napravah.

S pojavom mobilnih naprav se je položaj spremenil in prišlo je do velike raznovrstnosti naprav. Zasloni mobilnih in tabličnih računalnikov se razlikujejo v več pogledih: Po eni strani so pomembne dimenzije slikovnih pik, po drugi strani pa je s pojavom retina zaslonov v ospredju tudi fizična ločljivost. Poleg tega teh naprav ne upravljamo z miško, temveč s prstom. Danes se temu pridružujejo še veliki monitorji visoke ločljivosti, tako da mora sodobno spletno mesto delovati na zaslonih širine od 320 do več kot 4.000 slikovnih pik.

Odzivna spletna stran se prilagodi razpoložljivemu prostoru na zaslonu. To se imenuje tudi "zaslonska površina". Spletno mesto mora biti pregledno na vseh napravah in hkrati zagotavljati optimalno uporabniško izkušnjo (UX).

Zakaj moral biti spletna stran odzivno oblikovana?

Razvoj odzivne spletne strani ima več prednosti. Poudarek je na uporabniški izkušnji. Načeloma lahko dobro uporabniško izkušnjo zagotovite tudi brez odzivnega oblikovanja. Vendar pa je za to potrebna ločena mobilna spletna stran ali uporaba JavaScripta. Na splošno je to veliko bolj zapleteno in zahteva več truda pri vzdrževanju večih različic spletišča, kot pristop odzivnega spletnega oblikovanja, ki temelji na CSS-u.

Odzivni dizajn za optimalno zasnovo

Oblika spletne strani je eden od odločilnih dejavnikov, ki vplivajo na to, kako obiskovalec dojema predstavljene informacije. Dobra zasnova odraža identiteto organizacije, ki stoji za spletno stranjo, in pomaga obiskovalcu, da se poveže z blagovno znamko. Obiskovalec se mora na spletni strani počutiti udobno in imeti pozitivno izkušnjo. Oglejmo si dva primera, kako odzivno spletno oblikovanje prispeva k optimalni uporabniški izkušnji:

  • Recimo, da naslov na mobilni napravi zapolni celoten zaslon. Vendar je naslov v namizni različici v enaki velikosti pisave komaj opazen. Na namiznem računalniku mora biti naslov prikazan v večji velikosti, da obiskovalcu dejansko pade v oči.

  • Predstavljajte si blog, v katerem je stranska vrstica prikazana na desni strani članka. V stranski vrstici so povezave do drugih člankov z majhnimi sličicami. V namizni različici stranska vrstica pomaga omejiti širino članka in tako prispeva k večji berljivosti. Na mobilni napravi pa bi stranska vrstica prekrila skoraj polovico zaslona. Na mobilnih napravah je treba postavitev preklopiti tako, da se vsebina stranske vrstice prikaže pod člankom.

Odzivni dizajn za optimalno uporabniško izkušnjo (UX)

Neodzivna spletna stran se na majhnem zaslonu mobilne naprave prikaže na enak način kot na namiznem računalniku, le da je veliko manjša. To uporabnika prisili, da poveča posamezne dele strani. Zato je bolje ponuditi optimizirano različico. Nekaj primerov:

  • Z miško na namizju kliknete gumb na spletni strani. Mobilno napravo pa upravljate s prstom. Zato mora biti gumb v mobilni različici večji in bolj oddaljen od drugih elementov.
  • Predstavljajte si obrazec na strani. Običajno mu je s CSS dodeljen notranji razmik (padding), da je besedilo, ki ga vsebuje, lahko berljivo in se ne dotika robov obrazca. Notranji prostor 20 slikovnih pik na desni in levi strani je normalen in je dobro viden na velikih zaslonih. Na mobilni napravi s širino zaslona le 320 slikovnih pik pa se izgubi 40 od 320 slikovnih pik: ena osmina. Če ima obrazec tudi rob, na primer dodatnih 20 pik na stran, je na mobilni napravi že izgubljenih 25 odstotkov razpoložljivega prostora. Da bi to preprečili, je treba zmanjšati razmik v mobilni napravi.
Odzivni dizajn oz. odzivno spletno oblikovanje

Kakšne so posledice, če spletno mesto ni odzivno oblikovano?

Danes velik delež uporabnikov do spletnih vsebin dostopa prek mobilnih naprav. Če spletna stran ni zgrajena popolnoma odzivno, ima to lahko neprijetne posledice. Med njimi zlasti:

  • Slabe stopnje konverzije in visoke stopnje odklonov, ki so posledica neoptimalne zasnove in motenj v uporabniški izkušnji.
  • Slabše uvrščanje v iskalnikih, saj Google na primer prepozna, če so elementi preblizu drug drugemu.
  • Slabo delovanje zaradi nalaganja neoptimaliziranih virov, zlasti na mobilnih napravah.

Na katere vidike spletnega razvoja vpliva odzivni dizajn?

Odzivni dizajn vključuje različne pristope in tehnologije. Običajno obstaja več rešitev za različne scenarije. Razvoj se še vedno spreminja.

Odzivna postavitev

Izvajanje zapletenih postavitev na spletnih straneh je že od začetka svetovnega spleta znanost sama po sebi. HTML ima različne vrste elementov, ki se različno obnašajo glede postavitve. Obstajajo vrste elementov kot so block, inline in inline-block. Blokovni elementi zavzamejo celotno razpoložljivo širino in se postavijo v vrsto. Vmesni elementi zavzamejo le tisto širino, ki jo dejansko zahteva njihova vsebina, in se postavijo drug poleg drugega

Če želite izvesti postavitev, morate elemente blokov običajno postaviti enega poleg drugega. Za to se uporabljajo različne metode. Pred pojavom CSS so bile standardne postavitve, ki so temeljile na tabelah, s CSS pa so bile dodane postavitve, ki so temeljile na plavajočih postavitvah. Modul CSS Flexbox se danes uporablja za preproste postavitve, ki temeljijo na vrsticah ali stolpcih, modul CSS Grid pa se uporablja za kompleksne postavitve. V vseh primerih se za spreminjanje števila elementov, ki so prikazani drug ob drugem, uporabljajo relativne dimenzije CSS.

Odzivna tipografija

Za optimalno uporabniško izkušnjo je treba velikost pisave besedilnih elementov na spletni strani prilagoditi razpoložljivemu prostoru na zaslonu. Pri odzivnem spletnem oblikovanju se za to uporabljajo različne tehnike pisav.

Kot osnovno merilo se uporablja CSS enota rem ("korenski (root) element"), ki veže velikost pisave elementa sorazmerno s korenskim elementom. Potem je dovolj, da velikost pisave v korenskem elementu prilagodite s CSS prelomnimi točkami in tako dosledno skalirate vse pisave.

Drug pogost pristop je uporaba enot CSS vh in vw za tekoče prilagajanje velikosti pisave višini ali širini zaslona. Ta pristop načeloma ne zahteva prelomnih točk, vendar se lahko pisava na majhnih zaslonih prikaže majhna. V tem primeru se selektivno uporabljajo točke preloma ali pa se za določitev najmanjše velikosti uporabi funkcija CSS-calc().

Za optimizacijo celozaslonskih naslovov na napravah z majhnimi zasloni se uporablja pristop brez uporabe CSS. Naslovi morajo pritegniti pozornost obiskovalca. Uporabnik tako lažje in hitreje razume vsebino strani. Vendar so lahko besede zelo dolge, kar lahko povzroči težave s prikazom. Pri tem sta v pomoč HTML enoti "Non-breaking space" ( ) in "Soft hyphen" (­). Z njimi lahko natančno določite, kje se lahko ločijo besede v naslovu.

Odzivne slike

Poleg postavitve in tipografije je v ospredju odzivnega oblikovanja tudi optimiziran prikaz slik. Očitno je nesmiselno, da bi v mobilni telefon s 400 pik širokim zaslonom naložili sliko z robom dolžine 1.920 pik. Po eni strani je treba sliko, ki je veliko prevelika, nato v brskalniku pomanjšati, kar zahteva relativno veliko računalniške moči. Drugič, velikost slike se kvadratno povečuje z velikostjo najdaljše stranice.

Slika z 1920x1080 slikovnih pik bo potrebovala približno štirikrat več prostora za shranjevanje kot slika z 960x540 slikovnih pik. Tudi prenos take slike v mobilno napravo bo trajal ustrezno dlje. Če slike niso odzivno optimizirane, ima to skupaj izrazito negativen učinek na zmogljivost in uporabnost spletnega mesta.

Z uvedbo standarda HTML5 sta bila uvedena dva nova atributa. Atributa srcset in sizes se uporabljata za določitev več grafičnih datotek za sliko; te se imenujejo tudi "sredstva". Vsaka posamezna datoteka je povezana s poizvedbo medijske funkcije CSS. Tako lahko brskalnik s seznama razpoložljivih sredstev naloži tisto, ki je optimalno za zadevno napravo.

Odzivna navigacija

Navigacija je običajno prikazana v glavi strani. Pogosto je to vodoraven seznam menijskih elementov s podmeniji, ki se prikažejo, ko se z miškinim kazalcem pomaknete nanje. Tega ni mogoče izvesti v mobilnih napravah. Prvič, na majhnih zaslonih ni dovolj prostora za meni, drugič, ni kazalca miške.

Obstajajo različni pristopi za prikazovanje navigacijskih menijev v mobilnih napravah. Vsi ti načini varčujejo s prostorom in ne zahtevajo kazalca miške. Aktiviranje navigacije pogosto spremlja animacija, ki pritegne uporabnikovo pozornost. Najpogostejši pristopi k odzivni navigaciji so:

  • Ikona "hamburger meni" (tri vodoravne črte)
    Služi kot osrednji nadzorni element za aktiviranje menija.
  • "Off Canvas" navigacija
    Meni se pomakne z roba zaslona in potisne dejansko vsebino strani na stran.

Potrebujete pomoč?

Darko Kostić
Imate vprašanja ali posebno zahtevo?
Naša strokovna ekipa vam je na voljo.

Dogovorite se za brezplačno in nezavezujoče svetovanje!

Pošlji sporočilo

Najnovejše z bloga

Zakaj moje spletne strani ni v Googlu

Zakaj moje spletne strani ni v Googlu?

6. marca 2023
Obstaja veliko razlogov, zakaj spletna stran ni dobro uvrščena v iskalniku. Vzrok je lahko pomanjkanje vsebine, slaba navigacija ali zastarela zasnova.
Vpis spletne strani v Google, Bing in Yahoo

Vpis spletne strani v Google, Bing in Yahoo

20. februarja 2023
Za vpis spletne strani v Google potrebujete le Google račun in URL vašega spletnega mesta. Prijava poteka v treh korakih in traja le nekaj minut.
Izdelava spletne strani za frizerja

Izdelava spletne strani za frizerja

5. februarja 2023
Preverite, kako hitro, enostavno in predvsem poceni ustvariti spletno stran frizerskega salona ter kakšno strukturo mora imeti spletna stran frizerja.
Top homeapartmentmagic-wandenvelopebookusercartphone-handsetmap-markerlaptop-phonegiftdiamondearthmagnifierlayers