Content marketingVideozapisi o marketingu i prodajiMarketing InfografikaMarketing za mobitele i tablete

Što je prilagodljivi dizajn? (Video za objašnjenje i Infografika)

Treba desetljeće responzivni web dizajn (RWD) postati mainstream jer Cameron Adams prvi je predstavio koncept 2010. Ideja je bila genijalna – zašto ne možemo dizajnirati stranice koje se prilagođavaju prozoru za prikaz uređaja na kojem se gledaju?

Što je prilagodljivi dizajn?

Responzivni web dizajn je pristup dizajnu koji osigurava da web stranica pruža optimalno iskustvo gledanja na bilo kojem uređaju, bez obzira na veličinu ili razlučivost zaslona. Uključuje korištenje fleksibilnih izgleda, rasporeda temeljenih na mreži i medijskih upita za stvaranje stranice koja se prilagođava veličini zaslona na kojem se gleda. To znači da će web stranica dizajnirana responzivnim web dizajnom izgledati i dobro funkcionirati na stolnom računalu, tabletu ili pametnom telefonu.

Drugim riječima, elementi poput slika mogu se prilagoditi, kao i raspored tih elemenata. Evo videozapisa koji objašnjava što je responzivni dizajn, kao i zašto bi ga vaša tvrtka trebala implementirati. Ako razvijate novi dizajn web-mjesta ili web-aplikaciju, responzivni web-dizajn je neophodan, a ne opcija, s obzirom na to da više od polovice cjelokupnog web-prometa dolazi s mobilnih uređaja koji imaju različite širine i visine okvira za prikaz.

Responzivni dizajn također je optimalan za web dizajnere, koji ne moraju graditi neovisna iskustva koja su jedinstvena na temelju uređaja ili okvira za prikaz. Responzivni web dizajn može se postići korištenjem CSS.

Responzivni dizajn CSS Viewport Queries

Evo primjera stilske tablice koja prilagođava veličinu fonta na temelju okvira za prikaz pomoću medijskog upita:

/* 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;
  }
}

Preglednici su sami svjesni svoje veličine i učitavaju stilsku tablicu od vrha do dna. Upitom o primjenjivim stilovima za veličinu zaslona možete postaviti specifične elemente stila za svaku minimalnu i maksimalnu širinu uređaja. To ne znači da morate dizajnirati različite stranice za svaku veličinu zaslona, ​​samo trebate premjestiti potrebne elemente pomoću medijskih upita.

Operiranje s mentalitetom koji je prvi od mobilnih uređaja danas je osnovni standard. Najbolje marke u klasi ne razmišljaju samo o tome je li njihova web stranica prilagođena mobilnim uređajima, već o potpunom korisničkom iskustvu.

Lucinda Duncalfe, izvršna direktorica Monetatea

Evo infografije od Monetate ilustrirajući potencijalne prednosti stvaranja jednog responzivnog dizajna za više uređaja:

Odzivni infografski web dizajn

Je li vaša stranica responzivna?

Jedan jednostavan način da vidite je li vaša web-lokacija responzivna jest da jednostavno povećate ili smanjite prozor preglednika kako biste vidjeli pomiču li se elementi ovisno o širini preglednika.

Za veću preciznost, usmjerite svoj Google Chrome preglednik na svoju stranicu. Odaberi Pogled> Razvojni programer> Alati za razvojne programere iz izbornika. Ovo će učitati hrpu alata na ploči ili novom prozoru. Kliknite na malu ikonu lijevo od trake izbornika alata za razvojne programere koja izgleda kao ikona za mobitel i tablet. Možete odabrati neke standardne uređaje i čak promijeniti želite li stranicu gledati vodoravno ili okomito.

  • chrome developer tools responsive tablet
  • chrome developer tools responsive mobile horizontal
  • chrome developer tools responsive mobile
  • chrome developer tools responsive desktop

Opcije navigacije možete koristiti gore da biste promijenili prikaz iz pejzažnog u portretni prikaz ili čak odabrali bilo koji broj unaprijed programiranih veličina okvira za prikaz. Možda ćete morati ponovo učitati stranicu, ali to je najcool alat na svijetu za provjeru vaših responzivnih postavki i osiguravanje sjajnog izgleda web stranice na svim uređajima!

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.