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

responzivni web dizajn

Treba desetljeće responzivni web dizajn (RWD) za ulazak u glavni tok od Cameron Adams prvi je predstavio koncept. Ideja je bila genijalna - zašto ne bismo mogli dizajnirati web stranice koje se prilagođavaju vidnom polju uređaja na kojem se gleda?

Što je prilagodljivi dizajn?

Responzivni web dizajn (RWD) pristup je web dizajnu usmjeren na izradu web mjesta kako bi pružio optimalno iskustvo gledanja - jednostavno čitanje i navigaciju uz minimalno mijenjanje veličine, pomicanje i pomicanje - na širokom spektru uređaja (od mobilnih telefona do stolnog računala monitori). Web mjesto dizajnirano s RWD prilagođava izgled okruženju za gledanje koristeći fluidne mreže, proporcionalne mreže, fleksibilne slike i CSS3 medijske upite, produžetak pravila @media.

Wikipedija

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. Nedavno smo ponovno razvili DK New Media web mjestu kako bi reagirao i sada radi na Martech Zone učiniti isto!

Metodologija izrade web stranice koja reagira pomalo je zamorna jer trebate imati hijerarhiju svojih stilova koji su organizirani na temelju veličine okvira za prikaz.

Preglednici su svjesni svoje veličine, pa učitavaju tablicu stilova od vrha do dna, pitajući primjenjive stilove za veličinu zaslona. To ne znači da morate dizajnirati različite stilske tablice za zaslon svake veličine, samo trebate pomaknuti potrebne elemente.

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 tvrtke Monetate koja ilustrira potencijalne koristi stvaranja jednog responzivnog dizajna za više uređaja:

Odzivni infografski web dizajn

Ako želite vidjeti responzivnu web stranicu na djelu, usmjerite svoju Google Chrome preglednik (vjerujem da Firefox ima istu značajku) za DK New Media. Sada odaberite Pogled> Razvojni programer> Alati za razvojne programere s jelovnika. Ovo će učitati hrpu alata na dnu preglednika. Kliknite malu ikonu za mobitel krajnje lijevo od trake izbornika Alati za programere.

responzivno-testiranje-krom

Možete koristiti navigacijske opcije gore da biste promijenili prikaz iz pejzaža u portret ili čak odabrali bilo koji broj unaprijed programiranih veličina okvira prikaza. 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!

3 Komentari

  1. 1
  2. 2

    Puno hvala Douglasu na ovom dobro objašnjenom članku. Moram se s tim složiti iako se radi o sadržaju. Za većinu web stranica koje napravimo odgovarajući izgled neće biti dovoljan. Trebamo responzivan sadržaj. Ali za osnovna web mjesta sigurno ćemo koristiti vaš dobro dokumentirani članak o tome kako to riješiti!

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.