320, 768 i 1024. Da li vam nešto znače ovi brojevi? Ne, to nije Da Vinčijev kod, to su širine u pikselima koje mnogi dizajneri povezuju sa širinama ekrana kod mobilih i tablet uređaja ili desktop računara.
A šta ako moj mobilni nije 320px, moj tablet nije 768px, moj desktop ekran svakako nije 1024px širine? Postoji hiljade različitih širina ekrana na raznim vrstama uređaja, a mi još uvek posmatramo responsive web dizajn kroz brojeve 320, 768 i 1024.
Za one koji koji možda nisu upućeni responsive (reagujući, prilagodljiv) web dizajn je pristup web dizajnu u kome je sajt napravljen tako da obezbedi optimalno korisničko iskustvo pri pregledanju sajta. Ovaj pristup se ogleda u jednostavnosti čitanja sadržaja, minimalnim promenama veličine navigacije, pomeranja i skrolovanja na velikom broju različitih uređaja (od monitora desktop računara pa do mobilnih telefona).
Šta se dešava sa svim tim veličinama ekrana izmedju?
U našem dugogodišnjem radu u oblasti web dizajna, videli smo mnoge sajtove koji ove koriste ove tri tačke preloma tako što kreiraju tri statična rasporeda koje centriraju u okviru najbliže širine.
Ovo je ipak bolje nego imati staromodni statički sajt dostupan samo za desktop računare, jer su bar ove tri veličine podržane, ali zašto odbaciti sve druge veličine i ne uzeti ih u razmatranje?
Naravno ovakav dizajn će funkcionisati i na drugim veličinama ekrana, ali kakav će biti efekat to je pitanje?
Ako je na primer širina ekrana tableta manja od 768px automatski će se prikazati stranica koja je predviđena za mobilne, ista situcija je i kada bi se takav sadržaj prikazao na desktopu širine manje od 1024px, automatski će biti prebačeni na tablet veličinu. Znači samo ćemo ih poslati na rezoluciju tableta i smejati im se što nemaju jednu od ove tri veličine ekrana koje mi smatramo dostojnim.
Procenti ili pikseli?
Kada dizajnirate responsive raspored, uvek trebate imati na umu da postavite što je više moguće dimenzija u procentima. Dimenzije u procentima omogućavaju ravnomerno povećavanje ili smanjivanje sadržaja na različitim veličinama ekrana i to proporcionalno zavisno od uređaja na kome se posmatra.
Ovaj pristup će takođe osigurati da sadržaj uvek ispunjava 90% (ili koliko vi definišete) veličine ekrana i tako izbeći situacije kada se dešava zauzima samo 50%. Na primer kada je sadržaj centriran, a veličina ekrana manja za nekoliko piksela sledeće tačke preloma.
Sadržaj je najvažniji
Kada birate tačke preloma, odluke uvek treba donositi na osnovu toga gde se sadržaj prelama, a ne prema širinama ekrana uređaja. Umesto da kreirate dizajn, a zatim modifikujete da bi odgovarao ekranu iPad uređaja, trebate da otkrijete na kojoj se širini sadržaj počinje opirati i suprostavljati.
Možete početi dizajnom 1400px širine, a zatim polako smanjivati veličinu browsera i videti gde se tekst počinje suprotstavljati. Na tome mestu kreiramo sledeću tačku preloma i tako redom. Dešava se da na kraju imamo 2, 6 ili 10 različitih tačaka preloma. Poenta je da sadržaj odlučuje umesto veličina ekrana.
Sa tolikim brojem uređaja i veličina ekrana koji se pojavljuju na tržištu svakog meseca, nemoguće je definisati skup određenih unapred definisanih tačaka preloma za naše responsive projekte. Istina je ta, da iako koristimo varijablu kao što je širina ekrana, nije lako dobiti savršen prikaz rasporeda za svaku različitu dimenziju ekrana, ali prateći savete koje smo iznad naveli možemo bar osigurati da se sadržaj prikazuje najbolje moguće.
Osnovno pravilo: ne dizajnirate za širinu ekrana, dizajnirate za sadržaj.
