S obzirom da zadnjih godina pametni telefoni preuzimaju primat u pristupu internetu računarima a da korisničko iskustvo pri pregledu preko telefona ili tableta web stranice koja je dizajnirana za posete preko računara veoma loše i najčešće odvraća posetotioce od takvog sajta nameće se potreba za responzivnim dizajnom.
Nekada su se koristili samo CRT monitori u razmeri ekrana 4:3 pa se dizajn stranica odnosio isključivo na prilagođenost takvim monitorima.
Danas imamo širok spektar različitih ekrana, različitog promera, različite rezolucije počev od manjih telefona, touch-screen telefona, raznih tablet uređaja, lap topova, monitora pa sve do velikih televozora, preko kojih se pristupa internetu.
Responzivni dizajn(responsive web design) podrazumeva prilagođenost za svaki od ovih uređaja posebno.
Na primer dok elementi sajta na monitoru računara idu u širinu kako bi imali bolji i lepši pregled svega što se nalazi na sajtu na telefonu ti elementi moraju da se prikazuju jedan ispod drugog, uklopljeni u širinu ekrana radi bolje preglednosti i kako ne bi morao sadržaj da se skroluje levo-desno ili da se zumira kako bi se video.
Takođe se primenjuju i različite veličine fontova(primetili ste da na loše optimizovanim sajtovima na telefonu morate da zumirate sadržaj kako bi ste uspeli da pročitate neki text).
I ne samo to, responzivni dizajn podrazumeva optimizaciju korišćenja količine interneta potrebne za učitavanje i rad web stranica.
Naime, dok je na primer za neku pozadinsku sliku na web sajtu koj posmatrate preko većeg ekrana ili monitora potrebna slika velike rezolucije ista ta slika bi na telefonskom ekranu samo bespotrebno usporavala učitavanje stranice i trošila megabajte interneta koj je preko GSM mreže i skuplji i sporiji nego preko ADSL-a ili kablovskog interneta.
A pri tome, na manjim ekranima nije potrebna velika rezolucija jer svakako ako rezolucija slike nadmašuje rezoluciju ekrana ljudsko oko ne može da registruje tu razliku u kvalitetu slike.
Zato dobro optimizovan responzivni sajt koristi različite rezolucijske verzije istih slika u zavisnosti od rezolucije ekrana na kom se sajt trenuto posećuje.
Takođe mnogi elementi se drugačije uređuju kao na primer navigacija koja obično ide pri vrhu po širini ili sa strane po visini monitora na mobilnim uređajima se radi lakše preglednosti prikazuje kao padajući izbornik(meni).
Takođe u verziji za mobilne uređaje se često isključuju neki animirani efekti jer na manjim uređajima su ipak prioritet preglednost, brzina učitavanja sajta, manja potrošnja interneta, u odnosu na estetiku koja se naravno ni u ovom slučaju ne sme zapostaviti.
Ovakav responzivni/prilagodljivi dizajn i optimizaciju sajta za sve uređaje postižemo najnovijom bootstrap CSS ekstenzijom i mediakverijima kojima označavamo rezolucije u kojima prepisujemo sintaksu iz ostatka CSS3 koda koj pišemo pri stiliziranju HTML strukture ali joj menjamo vrednosti kako bi smo postigli željeni efekat.
I ako nam optimizacija itekako produžava vreme potrebno za izradu sajta ona je uvek uračunata u našu cenu i podrazumeva se za svaki sajt koj pravimo i ako to kod mnogih drugih programera i web dizajn agencija nije slučaj.
