Zaetnik responzivnog web dizajna je Ethan Marcotte.

On je napisao lanak Responsive

Web Design. U lanku Ethan govori o svim kljunim idejama koje ine responzivni web
dizajn; tehniki, to je ono to responzivni web dizajn je. To nije jedan komad tehnologije, ved
je to skup tehnika i ideja koje zajedno ine cjelinu.
Responzivni web dizajn je pristup prema dizajnu i razvoju koji odgovara korisnikovom
ponaanju i okolini korisnika, koji se temelji na veliini zaslona, platformi i orijentaciji.
U dananje vrijeme sve je vie mobilnih korisnika koji koriste web preglednike na svojim
ureajima. No osim mobitela, na trite dolaze i razni tableti, maleni prijenosnici i ostali
ureaji raznih dimenzija. Zato je bilo potrebno prilagoditi stranice tim ureajima da se
korisniku olaka pregled i itanje web stranica.
Temeljni koncepti
Postoje tri kljune tehnike znaajke responzivnog web dizajna, a to su:
- Fleksibilni mreni raspored koji koristi relativne veliine
- Media queries
- Fleksibilne slike i mediji kroz dinamike veliine ili CSS
Pravi responzivni web dizajn zahtjeva da sve tri znaajke budu implementirane.
Vano je da se prilagodimo korisnikovim potrebama i sposobnostima njegovog ureaja. Uzeti
korisnikove potrebe u obzir nije samo prilagoavanje sadraja veliini ekrana ved i to de
korisnik prvo traiti na stranici i zatim namjetanje sadraja u skladu s tim.
Mobile first
Izraz Mobile first znai prvo zapoeti sa izradom mobilnih stilova, slojeva i dizajna. Jednom
kada zavrimo, taj stil vie nije potrebno mijenjati to je puno jednostavnije.
Ali ovo nije uvijek i najbolji nain za zapoeti sa izradom. Moramo uzeti u obzir populaciju
koja posjeduje ili de posjedivati tu stranicu. Ako de vedina korisnika dolaziti sa raunala, a
svega nekolicina sa mobilnih ureaja tada ovaj pristup i nije najbolje rjeenje.
Pristupi izradi stranice
Izradi web stranici moemo pristupiti na nekoliko naina, a to su:
- Adaptivni koji se sastoji od viestrukih fiksnih irina
- Responzivni koji se sastoji od viestrukih fleksibilnih mrea
- Mijeani pristup koji je kombinacija adaptivnog i responzivnog
Kod mijeanog pristupa se u vedini sluajeva koriste fiksne irine za velike i srednje ekrane, a
fleksibilne irine za male ekrane.

Fleksibilne mree
Fleksibilne mree su temelj responzivnog web dizajna. U ovom sluaju mrea znai koritenje
CSS-a za pozicioniranje i namjetanje margina i razmaka te za implementaciju raznih vrsta
dizajna na novi nain. Nije vano o kakvom se ureaju radi, raspored elemenata de se stisnuti
ili razvudi u odnosu na druge. Kod izrade je vano da izraunamo proporcije za svaki element
na stranici. Da bi si olakali taj dio, moemo izraditi primjer dizajna u nekom od programa za
obradu slike. Zatim moemo izmjeriti elemente i podijeliti sa punom irinom stranice. Na
primjer, ako je irina dizajna 960 piksela, to bi bila veliina container-a. I recimo da je irina
potrebnog elementa 300 piksela. Podijelimo irinu elementa sa container-om i pomnoimo
sa 100. Dobit demo vrijednost u postotcima koju moemo postaviti za veliinu tog
odreenog elementa.
Fleksibilne mree su jako vane za responzivni dizajn, ali kada irina postane manja, odnosno
kada se stranica eli vidjeti na mobilnom telefonu, dizajn se moe slomiti. Taj se problem
moe rijeiti upotrebom media queries.
Media Queries
Media Querie nam doputa da prikupimo podatke o posjetiocu stranice i iskoristimo ih kod
primjene odreenog CSS stila. Moemo koristiti i vedi broj Media Queries ako elimo
kvalitetnije izraditi web stranicu da ona bude dostupna na to vedem broju ureaja. Skup
irina na koje bi trebali ciljati su:
-

320px
480px
600px
768px
900px
1200px

Te veliine nisu obavezne, one su samo preporuka, a i mogu posluiti kao polazina toka.
Uvijek moemo sami odrediti veliine koje de najbolje odgovarati ciljanom ureaju. Neki
stariji web preglednici ne podravaju sve postavke CSS3 Media Queries. Zato postoje
odreene javascript biblioteke koje omoguduju da ti preglednici podravaju te postavke.
Fleksibilne slike i mediji
Ova znaajka nam omoguduje da prilagodimo nae slike i ostale medije razliitim ureajima.
Skaliranje u CSS je jednostavno za implementaciju. Dovoljno je postaviti max-width na 100
posto i web preglednik de uiniti da se slike smanjuju i povedavaju ovisno o okviru, odnosno
container-u.