Kaj je odziven dizajn? (Video obrazložitve in Infografika)
Že desetletje traja odziven spletni dizajn (RWD), da postane mainstream od takrat Cameron Adams je prvič predstavil koncept leta 2010. Zamisel je bila genialna – zakaj ne moremo oblikovati spletnih mest, ki bi se prilagajala vidnemu polju naprave, na kateri si jih ogledujemo?
Kaj je odziven dizajn?
Odzivno spletno oblikovanje je oblikovalski pristop, ki zagotavlja, da spletno mesto zagotavlja optimalno izkušnjo gledanja na kateri koli napravi, ne glede na velikost zaslona ali ločljivost. Vključuje uporabo prilagodljivih postavitev, postavitev na podlagi mreže in medijskih poizvedb za ustvarjanje spletnega mesta, ki se prilagaja velikosti zaslona, na katerem se gleda. To pomeni, da bo spletno mesto, oblikovano z odzivnim spletnim dizajnom, izgledalo in dobro delovalo na namiznem računalniku, tablici ali pametnem telefonu.
Z drugimi besedami, elemente, kot so slike, je mogoče prilagoditi, pa tudi postavitev teh elementov. Tu je videoposnetek, ki pojasnjuje, kaj je odzivno oblikovanje in zakaj bi ga moralo vaše podjetje uvesti. Če pripravljate novo zasnovo spletnega mesta ali razvijate spletno aplikacijo, je odzivno spletno oblikovanje nujno, ne pa možnost, glede na to, da več kot polovica vsega spletnega prometa prihaja iz mobilnih naprav, ki imajo različne širine in višine vidnega polja.
Odzivno oblikovanje je tudi optimalno za spletne oblikovalce, ki jim ni treba graditi neodvisnih izkušenj, ki so edinstvene glede na napravo ali vidno polje. Odzivno spletno oblikovanje je mogoče doseči z uporabo CSS.
Odzivno oblikovanje CSS Viewport Queries
Tukaj je primer slogovne tabele, ki prilagaja velikost pisave glede na vidno polje z uporabo medijske poizvedbe:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
Brskalniki se sami zavedajo svoje velikosti in nalagajo slogovno tabelo od zgoraj navzdol. Če poizvedujete po ustreznih slogih za velikost zaslona, lahko nastavite posebne elemente sloga za vsako najmanjšo in največjo širino naprave. To ne pomeni, da morate oblikovati različna spletna mesta za vsako velikost zaslona, le premakniti morate potrebne elemente z uporabo medijskih poizvedb.
Dandanes je osnovni standard delovanje z mobilnostjo, ki je prva v mislih. Najboljše blagovne znamke ne razmišljajo le o tem, ali je njihovo spletno mesto prijazno mobilnim napravam, temveč o popolni izkušnji strank.
Lucinda Duncalfe, izvršna direktorica Monetate
Tu je infografika od Monetirati ki ponazarja možne prednosti ustvarjanja enega odzivnega dizajna za več naprav:
Ali je vaše spletno mesto odzivno?
Eden preprostih načinov, kako ugotoviti, ali je vaše spletno mesto odzivno, je, da samo povečate ali skrčite okno brskalnika, da vidite, ali se elementi premikajo glede na širino brskalnika.
Za večjo natančnost usmerite svojo Google Chrome brskalnik na vaše spletno mesto. Izberite Pogled> Razvijalec> Orodja za razvijalce iz menija. To bo naložilo veliko orodij v ploščo ali novo okno. Kliknite majhno ikono na levi strani menijske vrstice orodij za razvijalce, ki je videti kot ikona mobilnega in tabličnega računalnika. Izberete lahko nekaj standardnih naprav in celo spremenite, ali želite stran gledati vodoravno ali navpično.
Z navigacijskimi možnostmi lahko zgoraj spremenite pogled iz ležečega v pokončni ali celo izberete poljubno število vnaprej programiranih velikosti vidnega polja. Mogoče boste morali stran znova naložiti, vendar je to najbolj kul pripomoček na svetu za preverjanje odzivnih nastavitev in zagotovitev odličnega izgleda vašega spletnega mesta v vseh napravah!