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

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 pregledava?

Š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 ponovo razvili Highbridge 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:

Ako želite vidjeti responzivnu web lokaciju na djelu, usmjerite svoju Google Chrome preglednik (vjerujem da Firefox ima istu značajku) za Highbridge. 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.

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!