Š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 DK New Media 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 tablicu 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 responzivnog dizajna za više uređaja:

Responzivni infografski web dizajn

Ako želite vidjeti responzivnu web stranicu na djelu, usmjerite svoju Google Chrome pretraživač (vjerujem da Firefox ima istu značajku) u DK New Media. 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 odozgo za promjenu prikaza iz pejzažnog u portretni prikaz ili čak odabrati 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 Douglasu na ovom dobro objašnjenom članku. Moram se složiti s ovim, iako na sadržajnoj strani stvari. Za većinu web lokacija koje napravimo odgovarajući izgled neće biti dovoljan. Potreban nam je odgovarajući sadržaj. Ali za osnovnije 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.