Prilagodljiv veb dizajn

Prilagodljiv dizajn veb strane (engl. responsive web design, RWD) predstavlja web dizajn koji omogućava optimizovano prikazivanje, jednostavno korišćenje, čitanje, i kretanje kroz veb sajt koji će biti pregledan na različitim uređajima. Zapravo to je tehnika koja nam omogućava da jednu veb stranicu možemo pregledati na raznim uređajima različitih rezolucija. Pregledanje veb stranice koja nema prilagodljive karakteristike na uređajima sa manjom rezolucijom može biti neugodna. Da bi korisnik došao do traženih informacija deo svog vremena izgubiće kretajući se kroz samu stranu (skrolovanje, zumiranje, pomeranje). Pri kreiranju prilagodljivih veb strana sadržaj se prilagođava različitim širinama uređaja korišćenjem fluidnih mreža, fleksibilnih slika kao i CSS3 media queries (tehnologija koja nam omogućava da na različitim širinama uređaja koristimo različita CSS svojstva) i na taj način pruža korisnicima jednostavnije korišćenje.

Koncept prilagodljivih veb strana

Mobilni uređaji pre svega, nenametljiv JavaScript, progresivno poboljšanje

Mobilni uređaji pre svega, nenametljiv JavaScript, progresivne poboljšanje predstavlja jednu od strategija prilikom kreiranja prilagodljive veb strane. Pregledači pojedinih mobilnih telefona ne razumeju JavaSkript kodove, a u nekim slučajevima ni upite koji omogućavaju prikazivanje različitih stilova na različitim rezolucijama (CSS media queries). Preporučuje se da se prilikom kreiranja web strane kreira jednostavna strana i postepeno prilagođava (poboljšava) potrebama mobilnih uređaja i PC računara.

Progresivna poboljšanja bazirana na pretraživaču, uređaju ili funkcijama detekcije

Kada web sajt mora da se prikazuje na mobilnim uređajima koji ne podržavaju JavaScript, detekcija pretraživača kao i detekcija mobilnog uređaja su neki od načina zaključivanja da li se HTML i CSS svojstva podržana od strane nekog uređaja. Međutim ove metode nisu u potpunosti pouzdane sve dok se ne koriste u kombinaciji sa mogućnostima baza podataka

Veliki broj mobilnih uređaja kao i PC računara je sposoban da korišćenjem raznih JavaScript frejmvorka (Modernizr, jQuery, i jQuery Mobile) direktno testira sposobnosti pretraživača, tačnije njihovu podršku za HTML/CSS. Korišćenjem polifila može se postići podrška za uređaje koji se ne pridržavaju standarda u potpunost (npr. Internet Explorer). Funkcije detekcije takođe nisu u potpunosti pouzdane. Neke od njih mogu prijaviti da su neka svojstva dozvoljena kada ona zapravo nisu u funkciji ili su loše implementirana.

Tehnike pri kreiranju prilagodljivih veb strana

Fluidne mreže

Koncept fluidnih mreža zapravo nam govori da bi trebalo koristiti relativne jedinice (npr. procenti) prilikom kreiranja promenljive veb strane. Takođe, CSS3 je uveo viewport jedinice i calc() funkcionalnost, koje omogućavaju pregledačima da dinamički određuju dimenzije elemenata na stranici.

Fleksibilne slike

Fleksibilne slike takođe koriste relativne jedinice, dakle da bi se izbeglo prikazivanje slike van sadržaja strane (u žargonu rečeno "raspadanje veb stranice") visina i širina slike zadaju se u procentima.

CSS media queries

CSS media queries dozvoljavaju strani da koristi različite CSS stilove na različitim dimenzijama uređaja na kome se sadržaj prikazuje. Na taj način kreator sajta može prilagoditi veličinu slova, margine... raznim uređajima kako bi strana bila optimizovanija za korišćenje

Izazovi i neki od pristupa

Luke Wroblewski je napravio sažetu listu nekih od prilagodljivih dizajna veb strane kao i dizajnerskih izazova za mobilne telefone i napravio katalog arhitekture različitih uređaja. On sugeriše da u poređenju sa prilagodljivim dizajnom veb strane RESS (responsive web design with server-side components) pruža bolju optimizaciju za mobilne uređaje.

RESS je mnogo skuplji za razvoj, zahteva mnovo više od jednostavne logike na klijentskoj strani, samim tim implementiraju ga organizacije sa većim budžetima.

Iako je izazov prilagodljivih web strana u poslednje vreme postao mali problem, na nekim mestima i dalje postoje problemi u prilagodljivosti. Neki od banera oglašivača kao i video snimci nisu u potpunosti prilagodljivi i time kvare koncepciju same strane. Iako kompanije koje se bave oglašavanjem čine sve što je u njihovoj moći kako bi ciljali publiku i uređaje koje njihovi korisnici koriste (prikazuju se razne velicine reklama na raznim uređajima) ovaj problem postoji.

Jedna od alternativa prilagodljivom dizajnu web strana je metod prilagodljive isporuke web stranica koji je usvojen od strane potrošača širom sveta. Iako je veoma sličan prilagodljivom dizajnu veb strana (RWD), metod prilagodljive isporuke se razlikuje po tome što ovaj metod funkcioniše na taj način što server na kome se nalazi sajt detektuje uređaj, postavlja zahtev i koristi informacije o uređajima kako bi mi isporučio različite setove HTML i CSS kodova, baziranih na karakteristikama uređaja.

Danas postoji mnogo načina za validaciju prilagodljivih web strana. Od raznih validatora mobilnih sajtova i mobilnih emulatora do simultanih alata za testiranje kao što su Adobe Edge Inspect. Konzole pretraživača Firefox i Google Chrome nude odgovarajući dizajn prozora koji omogućava promenu njegove veličine. Takođe postoje razni dodaci za pretraživače koji omogućavaju testiranje prilagodljivosti.

Istorija

Ethan Marcotte

Ethan Marcotte skovao je termin "prilagodljiv veb dizajn" (eng responsive web design (RWD) ) maja 2010. godine u članku A List Apart. Opisao je kako teoretsku osnovu tako i praktičnu primenu ove tehnike u kreiranju veb strana 2011. godine u svojoj kratkoj knjizi koja se zove Responsive Web Design.

Mashable je nazvao 2013. godinu godinu prilagodljivog veb dizajna. Takođe mnogi izvori preporučuju prilagodljiv dizajn veb stranа kao isplativu alternativu za kreiranje mobilnih aplikacija.

S obzirom na sve veću upotrebu mobilnih uređaja i tablet računara širom sveta, tehnika kreiranja prilagodljivih veb strana je neizbežna ukoliko želite da sadržaj vaše strane bude dostupan svima.