Jedna od najaktuelnijih tema u krugovima web developera ove godine je pristupačnost u izradi sajtova na različitim uređajima pored standardnih desktop ili laptop ekrana.

Sa mobilnim uređajima, tabletima i sličnim gežetima koji postoje na tržištu teško je održati korak i rešiti sva pitanja vezana za korisničku interakciju.

Korisnike koji pristupaju vašim web sajtovima preko mobilnih ili drugih uređaja ne zanima koji metod koristite, sve dok mogu da se efektivno kreću kroz sajt nezavisno od uređaja.

Zbog toga, web developeri su razvli dva metoda da bi ispunili ove zahteve korisnika. Radi se o responsive i adaptive web dizajnu.

Dok oba metoda referenciraju ka rešavanju istog problema, prikaza sajtova na mobilnim uređajima, postoje suptilne razlike između njih koje ćemo objasniti u nastavku.

Responsive web dizajn

Termin responsive web dizajn je definisan pre nekoliko godina od autora Ethan Marcotte-a u knjizi „A Book Apart- Responsive Web Design“.

Responisive dizajn počinje sa primarnim zadacima inkorporiranja CSS3, medija upitima, media@ pravilima, fluidnim mrežama koje koriste procente da bi kreirali fleksibilnu osnovu.

Ovi primarni poslovi, kao i korišćenje EM-ova, fleksibilnih slika, videa i prilagodljivih tipova, omogućavaju responsive web sajtu da prilagodi svoj raspored uređaju, korisničkom agentu i okruženju na kome se prikazuje.

Uopštena definicija responsive web dizajna je da se on fluidno menja i prilagođava bilo kojoj veličini ekrana.

Adaptive web dizajn

Termin adaptive web dizajn je definisao Aaron Gustafson i knjizi koja nosi isti naziv. U suštini koriste se mnoge komponente progresivnog unapređenja (progressive enhancement – PE) kao način definisanja seta metoda dizajna koje se fokusiraju na korisnika, a ne na browser.

Korišćenjem unapred definisanih veličina rasporeda na osnovu veličina ekrana zajedno sa upotrebom CSS-a i JavaScript-a, adaptive web dizajn se prilagođava detektovanom uređaju.

Tri sloja PE:

  • sloj sadržaja = rich semantic HTML markup
  • sloj prezentacije = CSS i stilizovanje
  • sloj skripti sa klijentske strane = JavaScript ili jQuery ponašanje

Definicija adaptive dizajna je da se on prilagođava unapred definisanim vrednostima veličina ekrana i uređaja.

Poređenje i razlike

Najveća sličnost ova dva metoda je da oba omogućavaju da web sajtovi budu pregledani na mobilnim uređajima različitih veličina ekrana, pružajući posetiocima bolje korisničko iskustvo.

Ono u čemu se ova dva metoda razlikuju je isporuka responsive/adaptive strukture: RWD se oslanja na fleksibilne i fluidne mreže, dok se AWD zasniva na unapred definisanim veličinama ekrana.

Jedna od glavnih razlika je u tome da RWD može zahtevati više koda i težu strategiju implementacije fluidnih mreža i CSS-a, dok AWD ima unapređeni slojevit pristup, koji koristi skriptovanje za pomoć u prilagođavanju različitim uređajima i veličinama ekrana.

Pogledajte odličnu infografiku sa sajta visual.ly koja sagledava osnovne razlike između ova dva pristupa.

adaptive-vs-responsive

Jovan Ivezic

E-business and internet marketing specialist.