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

responzivni web dizajn

Treba deset godina responzivni web dizajn (RWD) od danas Cameron Adams je prvi put 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?

Šta je prilagodljivi dizajn?

Responzivni web dizajn (RWD) pristup je web dizajnu čiji je cilj izrada web lokacija kako bi se pružio optimalan doživljaj gledanja - lako čitanje i navigacija uz minimalno mijenjanje veličine, pomicanje i pomicanje - na širokom spektru uređaja (od mobilnih telefona do stolnog računara monitori). Web lokacija dizajnirana sa 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.

Wikipedia

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 kompanija trebala implementirati. Nedavno smo ponovo razvili Highbridge web lokacija kako bi odgovarala i na kojoj sada rade 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 tabelu stilova od vrha do dna, pitajući primjenjive stilove za veličinu ekrana. 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 razmišljaju ne samo o tome je li njihova web stranica prilagođena mobilnim uređajima, već i o potpunom korisničkom iskustvu.

Lucinda Duncalfe, izvršna direktorica Monetate

Evo infografije tvrtke Monetate koja ilustrira potencijalne koristi stvaranja jednog odzivnog dizajna za više uređaja:

Responzivni infografski web dizajn

Ako želite vidjeti responzivnu web lokaciju na djelu, usmjerite svoju Google Chrome pretraživač (vjerujem da Firefox ima istu značajku) u Highbridge. Sada odaberite Pogled> Programer> Alati za programere iz menija. Ovo će učitati hrpu alata na dnu preglednika. Kliknite na malu ikonu za mobilne uređaje krajnje lijevo od trake izbornika Tools Developer Tools.

responzivno-testiranje-hrom

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 za prikaz. Možda ćete morati ponovo učitati stranicu, ali to je najcool alat na svijetu za provjeru vaših prilagodljivih postavki i osiguravanje sjajnog izgleda web stranice na svim uređajima!

3 Komentari

  1. 1
  2. 2

    Puno hvala Douglas na ovom dobro objašnjenom članku. Moram se složiti sa ovim iako sa sadržajne strane stvari. Za većinu stranica koje napravimo responzivni izgled neće biti dovoljan. Potreban nam je responsive sadržaj. Ali za bazičnije web stranice sigurno ćemo koristiti vaš dobro dokumentirani članak o tome kako to riješiti!

Šta ti misliš?

Ova stranica koristi Akismet kako bi smanjila neželjenu poštu. Saznajte kako se podaci vašeg komentara obrađuju.