Responzivni web dizajn je postao ključni faktor u kreiranju web stranica koje pružaju optimalno korisničko iskustvo na različitim uređajima, od mobilnih telefona do desktop računara. Iako je ovaj pristup popularizovan 2013. godine, koncept se razvio i unapredio tokom vremena.
Kada je reč o responzivnom dizajnu, važno je razumeti da širina ekrana nije jedini faktor koji treba uzeti u obzir. Iako su nekada ključne tačke preloma bile definisane na osnovu određenih širina ekrana poput 320px, 768px i 1024px, danas postoje mnoge različite veličine ekrana na raznim uređajima. Stoga, umesto fiksiranja dizajna na određene širine ekrana, treba razmotriti fleksibilniji pristup koji će omogućiti optimalno prikazivanje sadržaja na svim uređajima.
Kada se radi o optimizaciji responzivnih sajtova, postoji nekoliko ključnih koraka koje treba preduzeti.
Slike trebaju biti pravilno optimizovane
Svi znamo da su slike obično problem sporog učitavanja stranica responsive sajtova. Najbrži način otklanjanja ovog problema je korišćenje Adoptive Images jer se tako detektuju dimenzije ekrana i sajt se srazmerno smanjuje na dimenzije monitora, iako ne menjamo <scr> i <img> oznake.
Š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.
Media queries
Postoji mnogo dobrih framework- a koji se mogu naći online, koji uklanjaju potrebu za media upitima kao što je Bootstrap, ali to ne znači da se oni mogu zanemariti. Media query u responsive dizajnu je CSS deklaracija koja se koristi da se pozovu ostale deklaracije, zasnovane na veličini ekrana.
Može se koristiti na dva načina:
external kod:
[html]<link rel=“stylesheet“ media=“screen and (min-width:320px) and (max-width:480px)“ href=“css/mobile.css“ />[/html]
direktno pozivanje:
[html]
@media screen and (min-width:320px) and (max-width:480px){
/*Deklaracija stilova za ovu veličinu ekrana */
}
[/html]
Smanjivanje HTTP zahteva
Kao što je spomenuto ranije, svi HTTP zahtevi se šalju na svaki uređaj, osim ako im ne kažemo da ne rade to. Da bi se smanjila ta vremena učitavanja koriste se JavaScript i CSS izvori kao što je Compass.
To je open source CSS framework koji omogućava developerima da kreiraju čist markup i kreiraju sprites (sprajtove) i ekstenzije jednostavno i lako.
Za JavaScript, alati kao što je UglifyJS su neprocenjivi jer kompresuju kod, omogućavajući automatizovan rad sa JavaScript-om.
Uslovno učitavanje
Ovo je idealno da se osigura to da mobilni uređaji i tableti ne preuzimaju sve vrste sadržaja, kao što su mape, slike…
To se posebno odnosi na skripte od trećih lica (third party) poput Gravatara i ikonica za društvene medije, jer će one uglavnom biti usmerene ka većim uređajima.
Da li je zaista neophodno da opterećujete sajt sa učitavanjem dugmića za društvene mreže? To zavisi od vaših potreba. Ako se oslanjate na SEO signale sa socijalnih mreža, onda jednostavan URL za deljenje nije dovoljan za vas. Obično deljenje URL adresa je dosta drugačije od lajkova ili G+ +1.
Međutim uvek postoji vaš glavni sajt za to, a obične URL adrese mogu biti uključene u styleseet za mobilne i tablet uređaje.
Na primer:
[html]<a href=“http://www.facebook.com/sharer.php?u=URL&t=TITLE“>link or image</a>[/html]
Sadržaj je najvažniji
Pri određivanju tačaka preloma, ključno je fokusirati se na to kako se sadržaj prilagođava, umesto da se samo gleda širina ekrana. Umesto da pristupate dizajnu prema fiksnim tačkama preloma, preporučuje se da pratite kako se sadržaj prikazuje i ponaša na različitim širinama ekrana. Time se postiže fleksibilnost u prikazu sadržaja, što omogućava bolje iskustvo korisnika.
Sa stalnim rastom različitih uređaja i veličina ekrana na tržištu, nemoguće je unapred definisati tačne tačke preloma za sve responsive projekte. Iako širina ekrana može biti korisna varijabla, važno je imati na umu da je pravi cilj prilagoditi se sadržaju, a ne samo veličini ekrana. Tako, osnovno pravilo je dizajnirati za sadržaj, ne za širinu ekrana.
Testiranje
Ključni korak u razvoju responsive sajtova je testiranje na različitim uređajima. Iako postoje online alati poput Screenfly, najbolje je testirati na stvarnim uređajima kako biste bili sigurni da sajt funkcioniše kako treba.
Pored testiranja izgleda, važno je obratiti pažnju i na funkcionalnost sajta. Alati poput FitText mogu pomoći u automatskom prilagođavanju veličine fonta kako bi se osiguralo da tekst bude prikazan na odgovarajući način.
Responsivni dizajn je ključna inovacija u izradi web sajtova, preporučena ne samo od strane Google-a, već i zbog svoje sposobnosti prilagođavanja različitim uređajima. Važno je da se fokusirate na funkcionalnost sajta, a minimalistički dizajn u kombinaciji sa responsivnim pristupom može pružiti optimalno iskustvo korisnika.
