Pristup internetu već dugo nije ograničen samo na računare i laptop uređaje. Često se nalazimo u situaciji da čitamo vesti ili čak knjige na tabletu. Koliko puta ste na brzinu proverili mejlove ili poruke na mobilnom telefonu? Kao deo našeg svakodnevnog života, ne obraćamo pažnju na način prikazivanja stranica na različitim uređajima; sve dok nam ne zasmeta. Možda vam se desilo da ste pokušali da proverite kada vam je sledeći prevoz ili kada se pušta film koji želite da pogledate u bioskopu i posetili ste web stranicu sa njihovim rasporedom. Sve bi bilo dobro da ste to proverili na računaru, ali preko telefona je stranica bila nepregledna, pretraga je bila nezgodna, morali ste mnogo da „skrolujete“ kako biste našli ono što vas interesuje.
Sledeći put ste poželeli da izbegnete tu stranicu zbog lošeg prethodnog iskustva. Univerzalni web dizajn nije samo trend, već osnova izuzetnog korisničkog iskustva (UX – User Experience). Web stranica mora biti dizajnirana tako da se uspešno prikazuje na različitim uređajima i veličinama ekrana kako bi pružila korisniku najbolje iskustvo. Ovakvu stranicu zovemo responzivnom stranicom (responsive), spremnom da reaguje na promene veličine ekrana.
U ovom članku, istražujemo šta su media queries i kako možemo da se oslonimo na njih u kreiranju pristupačnih i responsive stranica, bez obzira na uređaj.
Značaj univerzalnog web dizajna
Univerzalni web dizajn omogućava našoj stranici da zadrži funkcionalnost i estetiku na bilo kojem uređaju, od mobilnih telefona do velikih ekrana. U vremenu u kojem korisnici očekuju pristup informacijama bilo kada i bilo gde, univerzalni web dizajn postaje ključan za uspeh naše stranice.
Ključne strategije za univerzalni web dizajn
Među različitim tehnikama koje se koriste za postizanje responsive dizajna, media queries su se pokazale kao najznačajnije. Media queries su set CSS pravila koji nudi mogućnost primene različitih stilove u zavisnosti od karakteristika uređaja na kom se sadržaj prikazuje. Neke od karakteristika su minimalna i maksimalna širina ekrana, orijentacija, tip, i mnoge druge. Možemo koristiti media queries da definišemo jedan set stilova za mobilne telefone, drugi za tablete, i treći za desktop računare, osiguravajući da se naš sajt savršeno prikazuje na svim uređajima.
Kako izgleda media query?
@media screen and (max-width: 750px)
{ body { background-color: lightblue; } }
Ovaj jednostavan CSS kod prikazuje upotrebu media queries za promenu pozadinske boje stranice kada se pregleda na uređajima maksimalne širine ekrana do 750 piksela.
Kako da proverimo da li media query radi?
Da li je neophodno da kao front-end developeri imamo pri ruci uređaje raznih veličina ekrana, više različitih mobilnih telefona, tableta i monitora? Kada bismo svaku stranicu morali da proverimo za svaku novu veličinu ekrana koja postoji, univerzalni web dizajn bi postao, u najmanju ruku, dosta nezgodan. Zapravo, pretraživači nam omogućavaju ogromnu olakšicu prilikom proveravanja prikaza naših web stranica. Upotreba bilo kog od modernih, popularnih, pretraživača je sasvim dovoljna za proveru prikaza naše stranice na različitim veličinama ekrana. Pretraživači nude alate kao što su Chrome Developer Tools i Edge DevTools upotrebom kojih možemo da menjamo dimenziju, orijentaciju i tip našeg ekrana jednostavnim povlačenjem kursora. U nastavku je prikazana upotreba Chrome Developer Tools-a u Chrome pretraživaču za testiranje responzivnosti stranice čiji media query smo malopre naveli.
Kao što vidiš, upotreba ovih alata je izuzetno jednostavna i nešto što i ti možeš već sada probati. Prateći snimak (desni klik, zatim odaberi Inspect) ili pritiskom tastera F12 na tastaturi možeš otvoriti ovaj alat u svom Chrome pretraživaču! Isprobaj responzivnost baš stranice na kojoj ovo čitaš!
Šta dalje?
Razumevanje i primena media queries u web dizajnu može transformisati kako korisnici doživljavaju našu web stranicu, nezavisno od uređaja koji koriste. Kroz efikasno korišćenje ovih alata, možemo osigurati da naša stranica bude pristupačna, privlačna i, najbitnije, korisna za raznovrsne korisnike.
Sada smo prošli osnovni primer responzivnog dizajna. A on je samo delić celog front-end developmenta. Zakorači već sada u ovaj zanimljiv svet, isprobaj kakav je responzivni dizajn raznih stranica, počni od ove, a zatim probaj da kreiraš svoju! Pridruži nam se u učenju i kreiranju sajtova koji ne samo što izgledaju dobro, već i besprekorno rade na svim platformama!