Content MarketingVideo posnetki trženja in prodajeTrženje InfographicsMobilno in tablično trženje

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:

Odziven infografski dizajn spletnega oblikovanja

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.

  • chrome Developer Tools odziven tablični računalnik
  • orodja za razvijalce chrome odzivna mobilna vodoravna
  • orodja za razvijalce chrome odzivna mobilna naprava
  • odzivno namizje z orodji za razvijalce chrome

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!

Douglas Karr

Douglas Karr je CMO of Odpri INSIGHTS in ustanovitelj Martech Zone. Douglas je pomagal na desetine uspešnih startupov MarTech, pomagal je pri skrbnem pregledu več kot 5 milijard USD pri prevzemih in naložbah Martecha ter še naprej pomaga podjetjem pri izvajanju in avtomatizaciji njihovih prodajnih in trženjskih strategij. Douglas je mednarodno priznan strokovnjak in govorec za digitalno transformacijo in MarTech. Douglas je tudi objavljen avtor Dummie's guide in knjige o poslovnem vodenju.

Povezani članki

Nazaj na vrh
Zapri

Zaznan Adblock

Martech Zone vam lahko zagotovi to vsebino brezplačno, ker naše spletno mesto monetiziramo s prihodki od oglasov, pridruženimi povezavami in sponzorstvi. Hvaležni bi bili, če bi med ogledom našega spletnega mesta odstranili zaviralec oglasov.