Kaj je odziven dizajn? (Video obrazložitve in Infografika)

odziven spletni dizajn

Že desetletje traja odziven spletni dizajn (RWD), da bi od leta XNUMX prešel v mainstream Cameron Adams je prvič predstavil koncept. Zamisel je bila genialna - zakaj ne moremo oblikovati spletnih mest, ki se prilagodijo pogledu okolice naprave, na kateri si jo ogledujemo?

Kaj je odziven dizajn?

Odzivno spletno oblikovanje (RWD) je pristop k spletnemu oblikovanju, katerega namen je izdelati spletna mesta, da zagotovijo optimalno izkušnjo gledanja - enostavno branje in navigacijo z minimalnim spreminjanjem velikosti, premikanjem in pomikanjem - v številnih napravah (od mobilnih telefonov do namiznih računalnikov monitorji). Spletno mesto, zasnovano z RWD, prilagodi postavitev okolju gledanja z uporabo fluidnih, proporcionalnih mrež, prilagodljivih slik in medijskih poizvedb CSS3, razširitev pravila @media.

Wikipedia

Z drugimi besedami, elemente, kot so slike, je mogoče prilagoditi, pa tudi postavitev teh elementov. Tukaj je video, ki pojasnjuje, kaj je odziven dizajn in zakaj bi ga moralo izvajati vaše podjetje. Pred kratkim smo ponovno razvili Highbridge stran, da se odziva in zdaj dela na Martech Zone storiti enako!

Metodologija izdelave odzivnega spletnega mesta je nekoliko dolgočasna, saj morate imeti hierarhijo svojih slogov, ki so organizirani glede na velikost prikaza.

Brskalniki se sami zavedajo svoje velikosti, zato naložijo tabelo slogi od zgoraj navzdol in poizvedovanje glede ustreznih slogov glede velikosti zaslona. To ne pomeni, da morate oblikovati različne slogovne liste za zaslon vsake velikosti, le potrebne elemente morate premakniti.

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 podjetja Monetate, ki prikazuje potencialne koristi ustvarjanja enega odzivnega dizajna za več naprav:

Odziven infografski dizajn spletnega oblikovanja

Če želite videti odzivno spletno mesto v akciji, usmerite svojo google Chrome brskalnik (verjamem, da ima Firefox enako funkcijo) Highbridge. Sedaj izberite Pogled> Razvijalec> Orodja za razvijalce v meniju. To bo naložilo kup orodij na dnu brskalnika. Kliknite majhno ikono za mobilne naprave skrajno levo v menijski vrstici orodij za razvijalce.

odzivno-testiranje-krom

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!

3 Komentarji

  1. 1
  2. 2

    Najlepša hvala Douglas za ta dobro razložen članek. Moram se strinjati s tem, čeprav na vsebinski strani stvari. Za večino spletnih mest, ki jih naredimo, odzivna postavitev ne bo dovolj. Potrebujemo odzivno vsebino. Toda za bolj osnovna spletna mesta bomo zagotovo uporabili vaš dobro dokumentiran članek, kako to rešiti!

Kaj menite?

Ta stran uporablja Akismet za zmanjšanje nezaželene pošte. Preberite, kako se vaš komentar obravnava.