Responsive web dizajn je omiljen među web dizajnerima već nekoliko godina, mada je postao popularan tek od 2013.
godine iz raloga što je lakše dizajnirati jedan responsive sajt koji će se srazmerno prikazivati na svim uređajima, nego dizajnirati različite sajtove za svaki uređaj.
Jedina mana mu je brzina. Bez optimizacije, responsive sajt će se svuda prikazati kao full desktop sajt, pa ako optimizacija nije dobro urađena, znatno će produžiti vreme učitavanja stranice na mobilnim uređajima.
Postoji nekoliko stvari koje možemo da uradimo kako bi tako nešto sprečili.
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.
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]
Testiranje
Koju god tehniku i izvor da koristimo, najvažnije u kreiranju responsive sajta treba da bude testiranje. Mogu se koristiti izvori kao što je Screenfly, ali najbolje je testirati na pravim uređajima.
Stvar na koju najviše treba da obratite pažnju je korisnost, tako se treba fokusirati ne samo na izgled, nego i funkcionalnost.
Treba obratiti pažnju i na tekst, da li se prikazuje pravilno. Alat koji rešava problem teksta je FitText, koji je Jquery plugin za automatsko ažuriranje veličine fonta. Dozvoljava da CSS font size bude ignorisan i korišćen jedino za naslove.
Responsiv dizajn je inovacija i preporučuje pri izradi web sajtova. Čak ga i Google preporučuje kao najbolji način dizaniranja mobilnih sajtova.
Sve se svodi na funkcionalnost, tako da dizajn web sajta treba krenuti od mobilne aplikacije, odnosno sajta za telefone.
Minimalistički dizajn je trenutan trend, zajedno sa responsiv dizajnom i te dve stvari izgledaju savršeno zajedno.
