Web stranice korisnici danas pregledavaju služeći se različitim vrstama uređaja: od standardnih stolnih i prijenosnih osobnih računala pa do tableta i pametnih mobilnih telefona. Ukoliko ste ozbiljan autor sadržaja za web, sigurno ćete htjeti da vaše stranice izgledaju dobro i funkcionalno na svim tim vrstama uređaja.
U ovoj kratkoj lekciji ćemo obraditi neke od najznačajnih tehnika koje nam pomažu da ostvarimo takvu univerzalnu funkcionalnost
Malo teorije za uvod
Uređaji na kojima je moguć pregled web stranica uvelike se razlikuju, najznačajnije su razlike u:
- Razlučivosti: mobilni telefoni niže klase imaju razlučivost usporedivu s uobičajenim monitorima, negdje oko 100 ppi. Noviji kvalitetni monitori već premašuju 200ppi, a vrhunski mobilni uređaji na svojim ekranima dosežu i preko 500 ppi.
- Veličini ekrana: od oko 3 inča za mobitele do preko 30 inča za profesionalne monitore.
- Ukupnom broju točaka: ovo je uvjetovano gore spomenutim parametrima. Razmatrat ćemo širinu ekrana u pikselima. Od se kreće od oko 300 piksela na mobilnim uređajima niže klase pa do preko 4000 piksela na kvalitetnijim monitorima.
- Način interakcije s korisnikom: na osobnim računalima se služimo fizičkom tipkovnicom i mišem, a na mobilnim uređajima i tek ponekim osobnim računalima umjesto miša imamo ekran osjetljiv na dodir.
Kako onda prilagoditi sadržaj tim različitim uređajima i preglednicima? Moramo li praviti posebne verzije stranica za mobilne uređaje?
Zasebne stranice za mobilne uređaje su jedna od mogućnosti koja je već donekle uobičajena, no danas više nije nužna jer na raspolaganju imamo mediaqueries.
Mediaqueries
Mediaqueries je mogućnost da zasebno napišemo stilove za različite vrste uređaja, a da pri tome serviramo isti sadržaj, znači svi uređaji čitaju isti html kod, samo se na njima primjenjuju različiti CSS stilovi.
Sintaksa
Stilove pišemo na uobičajeni način koristeći uobičajena svojstva i selektore. Ono što je dodatno je da stilove grupiramo u @media pravila. Jedan stvarni primjer izgledao bi ovako:
@media screen and (min-width: 500px) and (max-width: 800px) {
/* ... tu idu stilovi koje pišemo na uobičajeni način ... */
}
Stilovi u gornjem primjeru bit će primjenjeni samo u slučaju prikaza na ekranu (screen) i ako korisnikov preglednik ima širinu od 500 do 800 piksela. U ostalim slučajevima stilovi napisani unutar gornjeg pravila neće se primjenjivati. Kombiniranjem nekoliko @media grupa možemo pokriti sve moguće razlučivosti, odnosno sve uređaje.
Koje su su moguće vrijednosti koje možemo koristiti u takvim pravilima?
- screen znači da se stilovi primjenjuju samo na prikaz na ekranu. Mogužemo još koristiti i vrijednost print - prikaz na pisaču.
- min-width znači da se stilovi primjenjuju samo prostor za prikaz (prozor) širine 500 piksela ili veće. Možemo još koristiti i vrijednosti max-width - maksimalna širina prozora, orientation - orjentacija sa vrijednostima portrait ili landscape, device-width širina ekrana u pikselima itd itd.
Potpunu listu mogućih vrijednosti pogledajte na w3schools - and - možemo koristiti logičke operatore not i and za povezivanje izraza u složenija pravila.
Najkorisnija svojstava za @media pravila su min-width i max-width. Pomoću njih možemo kreirati pravila za tipične uređaje. Pri tome možemo imati dva do tri pravila, a možemo imati i finiju podjelu sa više stupnjeva.
Prilagodljive slike
Jedna od stvari koje sigurno želimo prilagoditi pregledu na različitim uređajima su slike (fotografije) na stranici. Gotovo svaka stranica uz tekst ima i fotografije pa nas zanima kako postupati s njima u prilagodbi različitim uređajima.
Jedno od najjednostavnijih rješenja je uz pomoće max-width svojstva, kao u primjeru:
img.imgtx {
max-width: 100%;
height: auto;
}
Ovo gore zanači da će slika zauzeti svu raspoloživu širinu, a visinom će se prilagoditi tako da zadrži izvorne proporcije. Koristimo svojstvo max-width umjesto width jer na taj način se slika ne može proširiti preko svoje izvorne veličine što bi smanjivalo kvalitetu prikaza, samo se može proporcionalno smanjiti.
Postoje i druga, bolja rješenja koja vode računa o tome da se korisnicima isporučuje slika u onoj kvaliteti koja je prikladna za određeni uređaj i prikaz, no ona su znatno složenija. Ako radite neki zahtjevniji projekt i želite biti maksimalno fer prema korisnicima mobilnih uređaja - svakako ih proučite.
Praktični savjeti
Mnoge stvari koje ima smisla prikazati na velikom monitoru, nema smisla prikazati na malom. U takvim situacijama za element kojeg ne želite prikazati na malom ekranu koristi svojstvo display s vrijednošću none , npr:
div#sadrzaj img.reklama { display: none; }
Dizajniranje prilagodljivih stranica bi trebalo promišljati od malih rezolucija prema velikima, a ne obrnuto. Osim toga, sve ono što je zajedničko u svim prikazima treba izdvojiti u zasebnu skupinu stilova kako se ne bi morale ponavljati definicije za različite rezolucije. Taj način razmišljanja nam može značajno pojednostaviti koncept, a na kraju i sam HTML i CSS kod.
Treba li vam inspiracije u kreiranju prilagodljivih stranica, ili samo želite pogledati i analizirati kako to rade drugi web majstori, pogledajte njihove uratke na stranici mediaqueri.es.
Nedostaci Mediaquery-ja
U realnom svijetu uvijek uz prednosti imamo i neke nedostatke.
Jedan od nedostataka opisane tehnike je povećana količina koda i veličina datoteka odnosno mrežnog prometa što može biti bitno, pogotovo korisnicima mobilnih uređaja.
Zbog čega dolazi do toga?
Kao prvo, uz istu količinu HTML koda prisiljeni smo pisati više CSS koda, a osim toga, uređajima se šalje sav CSS kod, ne samo onaj koji se odnosi na uređaj koji se trenutno koristi. Korisnikov uređaj interpretira CSS i primjenjuje onaj dio koji se odnosi na njega.
Naravno, bilo bi bolje da se korisniku isporučuje samo onaj dio CSS koda koji mu stvarno i treba, no koliki je to zapravo problem u stvarnosti? Vjerojatno mali ili nikakav jer se CSS ionako učitava samo jednom, a svaki slijedeći put iz privremene memorije.
Drugi (i vjerojatno značajniji) dio tog povećanja količine podataka nastaje zbog korištenja istih grafičkih datoteka za sve vrste uređaja. Zapravo nemamo dovoljno jednostavnu mogućnost unaprijed pripremiti nekoliko veličina svake slikovne datoteke za razne uređaje pa onda obično koristimo onu prilagođenu za uređaje najveće razlučivosti te smanjujemo njen prikaz CSSom.
Primjer
Za ilustraciju teorije u ovom članku imate primjer sa jednostavnom stranicom koja je oblikovana uz pomoć media pravila i prilagođena za različite uređaje.
Svakako proučite kod u HTML i CSS datoteci. U kod je dodano podosta komentara koji će vam olakšati snalaženje i iz kojih možete naučiti i još ponešto.
Zaključak
Prilagodba sadržaja web stranice svim vrstama uređaja danas nije više poželjna egzotika, već stvarna potreba. Tehnologija za to je dovoljno zrela i ako vodimo računa o nekim njenim nedostacima, možemo napraviti stranice koje su ugodne za korištenje na svim vrstama uređaja.
