mobilni i desktop ekrani

Šta je responsiv dizajn?

Responsiv dizajn (responsive design) je web dizajn prilagodljiv prikazu na ekranima različitih dimenzija. Danas korisnici ne posećuju internet prezentacije samo sa svojih računara već u sve većem broju sa svojih mobilnih telefona. Zato web sajt treba da je osmišljen i programiran tako da je sadržaj čitljiv i pregledan na uređajima različite širine i visine ekrana. Pregled web stranice koja nije responsiv na mobilnom telefonu može biti otežan, veličina slova može biti previše mala, delovi teksta i slika nevidljivi, korisnik se može zbuniti pokušavajući da pronađe traženu informaciju. Responsiv dizajn se postiže na nekoliko načina:

  • upotrebom medija upita
  • flex kontejnera
  • i/ili grid rasporeda elemenata stranice

Prilikom responsiv dizajna postavlja se pitanje koje dimenzije ekrana treba uzeti kao prelomne, gde dolazi do promene u načinu prikaza stranice, da li je to širina ekarana od 768px , 1024 px , 480 px… Odluka se može doneti:

  • na osnovu aktuelnih statističkih podataka, na primer sa sajta https://gs.statcounter.com/screen-resolution-stats .
  • na osnovu samog sadržaja koji se predstavlja. Prilikom određivanja prelomnih dimezija treba uzeti u obzir i sam sadržaj koji se predstavlja na web stranici, i prema njegovim karakteristikama odrediti kada dolazi do promene u načinu prikaza. Na primer, ako imate meni sa velikim brojem stavki, onda će do promene iz horizontalnog prikazivanja stavki menija u meni ikonu doći već pri većim rezolucijama.

Zbog učestalosti pregleda internet stranica sa mobilnog telefona, prednost se može dati dizajnu web sajta za mobilne telefone, prvo osmisliti web sajt za prikaz na mobilnom telefonu, pa tek kasnije za monitor računara.

Dizajner i developer za mobilne uređaje, Josh Clark , kaže za responsiv dizajn, sadržaj web sajta je kao voda…

You put water into a cup, it becomes the cup.
You put water into a bottle, it becomes the bottle.
You put it in a teapot, it becomes the teapot.

Inspiraciju je našao u filozofiji Brus Lija 🙂

Komentar

Vaša email adresa neće biti objavljena. Obavezan polja su označena *