Pređi na sadržaj

Prilagodljiv (responzivni) web dizajn

Prilagodljiv web dizajn (eng. Responsive Web Design, RWD), je tehnika koja se koristi pri izradi web sajtova kako bi se oni prilagodili bilo kom uređaju i pretraživaču u smislu funkcionalnosti, dostupnosti informacija i vizuelnog dizajna.

Tri principa koje se koriste pri razvoju su:

  1. Mobilni uređaji pre svega (eng. Mobile first approach)
  2. Progresivno unapređenje (eng. Progressive enchancement)
  3. Nenametljiv JavaScript (Unobtrusive JavaScript)

Da bi se vaša web stranica prilagodila pretraživaču potrebno je korisiti sledeće tehnike:

Fleksibilne/prilagodljive mreže za layout (eng. flexible/responsive grid)

Prilagodljive mreže dele web stranicu na kolone (najčešće na 12) a ukupna širina svih kolona na stranici je uvek 100%. Širina pojedinačnih kolona je relativna, tako da pri promeni veličine prozora (ili učitavanja stranice na uređaje sa raznom rezolucijom) one će se širiti ili skupljati, već u zavisnosti od dostupne rezolucije.

Da bi se razumela teorija deljenja stranice na kolone, treba imati u vidu da sam layout ne mora da sadrži maksimum kolona, već zbir njihove širine treba da bude jednak zbiru širine maksimum broja kolona koji je 100%.

Layout mreža
Primer prilgaodljive layout mreže

CSS media queries (prev. medija upiti)

@media pravilo pripada CSS3 specifikaciji i omogućava definisanje različitih stilova nad istim HTML elementom u zavisnosti od uređaja i pretraživača. Pomoću medija upita se mogu proveriti razne osobine pretraživača:

  • širina i visina prozora
  • širina i visina uređaja
  • orijentacija (landscape ili portrait mod)
  • rezolucija, itd.

Što se tiče podrške od strane pretraživača, @media pravilo je podržano od strane svih modernih brauzera (Firefox, Chrome, Safari, Edge, IE9+).

 

Fleksibilne slike

Na prvi pogled veoma jednostavno rešenje: img {max-width: 100%; height: auto;} i vaše slike se prilagođavaju bilo kojoj širini prozora. Međutim, problem sa kojim se susrećemo u ovom slučaju je odabir dimenzija same slike. Kao što znamo, sva tri formata (jpg, giff, png) koje HTML tag <img />  prepoznaje su bitmape, i samim tim širina slike je određena konačnim brojem piksela. Dakle, kada napokon odlučite o veličini slike koja će zadovoljiti potrebe visokih i retina rezolucija, shvatićete da je veličina fajla prevelika i nepotrebna na uređajima malih rezolucija, pa samim tim dodatno opterećuje perfromanse vaše stranice.

Da bi se gore navedeni problem prevazišao još uvek ne postoji idealno rešenje. CSS3 nudi novu osobinu background-size, a HTML5 nudi novi tag <picture> i dva nova atributa srcset i size, koji još uvek nisu potpuno podržani u svim pretrživačima, tako di biste se morali poslužiti JavaScript polifilovima (eng. pollyfills). Moram dodati da iz perspektive semantike takođe nisu ni idealni, pošto se njihovom upotrebom spajaju struktura sa prezentacijom u HTML kodu.

Među ostalim rešenjima su i tzv. adaptivne slike, gde u zavisnosti od klijenta i njegovih osobina, serverski kod menja veličinu slike prema potrebnim parametrima, i kao takvu je šalje pretraživaču.

 

Postavi svoj prvi komentar

Ostavite odgovor

Vaša adresa e-pošte neće biti objavljena. Neophodna polja su označena *