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.
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).
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.
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:
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:
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:
Odzivni dizajn vključuje različne pristope in tehnologije. Običajno obstaja več rešitev za različne scenarije. Razvoj se še vedno spreminja.
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.
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.
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.
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:
