Responsive web design

Šta je responsive web design i koji je njegov značaj

Šta je responsive web design i zašto bi sajt morao da bude prilagodjen pregledu sa svih vrsta uređaja.

Ekspanzija korišćenja smart telefona i tableta dovela je do potrebe da se potpuno promeni pistup u izradi web sajtova, i već nekoliko godina se razvija pristup ili ideja koja se naziva Responsive Web Design. Prevedeno na srpski, Responsive Web Site je sajt koji je prilagođen pregledu sa svih vrsta uređaja, a Responsive Web Design se obično definiše kao pristup dizajnu i programiranju web stranica koji korisniku treba da obezbedi najbolji mogući doživljaj pri pregledu stranice i navigaciji sa svih vrsta uređaja – desktop računara, laptopo računara, tableta i mobilnih telefona.

Nije potrebna nikakva detaljna analiza da bi se uvideo značaj ovakvog pristupa – dovoljno je samo pogledati oko sebe i videti da sve više i više ljudi koristi tzv. pametne telefone, i velika je verovatnoća da skoro svako od njih te telefone koristi i za surfovanje internetom.

Ako hoćete brojke, istraživanje pokazuju da 80% korisnika interneta poseduje pametne telefone, a Google tvrdi da se preko 20% pretraga vrši upravo sa mobilnih uređaja.

Da iskoristim priliku da se pohvalim, tekst koji trenutno čitate je na sajtu koji je “responsive” - promenite veličinu browsera i vidite šta se dešava.

Sama izrada sajta prilagodljivog različitim veličinama displeja zahteva daleko više vremena (i novca), ali s druge strane eliminiše potrebu postojanja “desktop” i “mobilne” verzije sajta. Ako u obzir uzmete da za ažuriranje jedne verzije sajta treba duplo manje vremena nego za ažuriranje svake od desktop i mobilne verzije ponaosob, taj “dodatni napor” na kreiranju responsive sajta je dugoročno isplativ u svakom smislu.

Na čemu se zasniva responsive web design

Sama izrada stranica koje su prilagodljive različitim veličinama uređaja sa kojih se pregledaju zasniva se na sledeća tri koncepta:

  1. Responsive Grid
  2. Responsive Images
  3. Media Queries

Ova tri koncepta ću pokušati da objasnim na najednostavniji mogući način, bez ulaska u tehniku, a u nekom od narednih tekstova ću pokušati da objasnim kako sve to postići na konkretnim primerima.

Termin Grid se na srpski jezik može prevesti kao mreža. Grid je koncept koji se već odavno koristi u planiranju rasporeda elemenata na stranici, i već duže vreme kao standard se koristi Grid koji se sastoji od 12 kolona. To znači da je sav sadržaj koji se nalazi na stranici smešten u 12 kolona, pri čemu u zavisnosti od toga koliko prostora je potrebno neki element može zauzeti 1, 2, 3, ... ili u krajnjem slučaju 12 kolona.

Ukoliko neka stranica treba da sadrži jedan glavni deo koji predstavlja tekst ili sadržaj stranice, verovatno će se uzeti da taj glavni deo zahvata 7 ili 8 kolona, pri čemu ostatak zauzima prostor za navigaciju, ili na primer reklamne banere.
Kolika će biti širina svake od pomenutih kolona zavisi od toga na kolikom ekranu se stranica pregleda, i ono što responsive grid nudi je mogućnost definisanja različite širine u zavisnosti od veličine ekrana.

Responsive images je drugi koncept koji se koristi u ovom pristupu, i svodi se na to da slike budu prilagodljive veličini ekrana. Ukoliko je slika koja se nalazi na stranici dimenzija 800x600px, ona će u tim dimenzijama biti prikazana samo na desktop ili laptop računaru, a na ekranima manjih dimenzija će zauzeti onoliko prostora koliko ima na raspolaganjua.

Media queries je treći, ali sigurno ne i najmanje važan koncept. Ovaj koncept se ralizuje kroz niz logičkih uslova, odnosno upita, koji se postavljaju u trenutku otvaranja stranice, i pomoću njih se određuje da li će se sadržaj na stranici prikazazi u jednom ili drugom rasporedu, a opet u zavisnosti od toga kolika je rezolucija ekrana sa koga se stranici pristupa.

Da rezimiramo, dizajn prilagođen svim vrstama uređaja je manje-više postao neophodan, i ukoliko planirate realizaciju nekog sajta u budućnosti, potrudite se da on bude – responsive.