Blog

Responzivni web dizajn

U današnje vrijeme je teško pronaći osobu koja ne posjeduje smartphone, tablet ili neki sličan mobilni uređaj s mogućnošću pristupa Internetu. Sjetite se samo koliko ste puta bili u situaciji da sjedite na kavi s prijateljima i sjetite se nečeg što ste vidjeli online, ili pak trebate provjeriti neku informaciju, ili se jednostavno ne možete sjetiti koja je ono najbolja marketinška agencija u Varaždinu (hint: D Management). :)

Refleksna reakcija je - uzmete mobilni uređaj i potražite potrebnu informaciju. Naravno, pritom očekujete da će vam informacija biti prezentirana na isti način kao što bi bila i na računalu. To je danas sasvim uobičajeno, no kako je i kada došlo do toga?

Postupno je sve više ljudi postajalo svjesno prisutnosti mobilnih uređaja i prednosti pristupa Internetu na bilo kojem mjestu. Preokret se dogodio početkom 2014. godine - više vremena je provedeno na Internetu na mobilnim uređajima, nego na računalima (prema: SearchEngineWatch). Sve je to, naravno, imalo velikog utjecaja i na web dizajn, pa je tako došlo do razvoja responzivnog web dizajna, dizajna web stranice prikladnog za sve veličine i rezolucije ekrana. 

Iako je taj termin prisutan u svijetu web dizajna još od 2011. godine, tek su u posljednjih godinu dana i šire mase ljudi postale svjesne velikih promjena u svijetu Interneta. Nećemo previše zalaziti u početke samog razvoja responzivnog web dizajna, s obzirom da je to sada već, mogli bismo reći - standard za izradu web stranica. Nekada je za web dizajnere i developere bilo dovoljno napraviti mobilnu verziju web stranice koja bi pružila neke osnovne informacije s weba, bilo je bitno da je što jednostavnija i da troši što manje (tada) ograničenog Interneta na mobilnim uređajima. Danas se sve mijenja...

Navest ćemo osnovne stvari na koje je potrebno pripaziti kod izrade responzivnih web stranica.

1. Dizajn za mobilne uređaje na prvom mjestu

Zbog svega već navedenog, jasno je da korisnici mobilnih telefona zaslužuju istu kvalitetu pregledavanja sadržaja web stranice, kao i korisnici računala. Štoviše, oni je i očekuju. Ne žele biti zakinuti za određeni sadržaj, već žele prikaz cijelog sadržaja na prihvatljiv i oku ugodan način. Web dizajneri bi trebali jednako (ako ne i više) razmišljati o izgledu sadržaja na mobilnim uređajima, odnosno manjim ekranima, kao i na velikim. Takva očekivanja zahtijevaju fleksibilnost cijelog sadržaja - slika, tekstova, tablica, videa... U svijetu velikog broja različitih veličina ekrana i rezolucija više nije dovoljno biti svjestan nekoliko najpopularnijih i prilagođavati dizajn samo za njih, već je potrebno priuštiti svim korisnicima najrazličitijih vrsta mobilnih uređaja ugodno korisničko iskustvo stvaranjem prilagodljive mreže sadržaja putem media queries (CSS3 modul koji omogućuje prikaz sadržaja provjeravajući rezoluciju, širinu, visinu i orijentaciju uređaja). Potrebno je odrediti breakpointove, odnosno prijelomne točke, na kojima će određeni sadržaj, koji na velikim ekranima stoji jedan pored drugog, prijeći jedan ispod drugog, imajući na umu da oboje mora izgledati dobro usklađeno, odnosno oba slučaja moraju odavati dojam kao da baš tako treba biti (nema više zadovoljavajućeg izgleda na određenoj veličini ekrana, već dizajn na svim ekranima mora izgledati savršeno).

2. Postoci i relativne veličine

Kako bi se stvorila prilagodljiva mreža sadržaja bez prelijevanja sadržaja izvan okvira, potrebno je sav sadržaj skalirati na željenu veličinu. Najlakši način je da se sve veličine definiraju u postocima, ovisno o najvećoj mogućoj vrijednosti. Na taj se način sadržaj proporcionalno povećava ili smanjuje ovisno o veličini ekrana.

Isto tako, i veličina fonta treba biti prilagodljiva. Font treba biti dovoljno velik da bude lako čitljiv bez zumiranja, a opet treba pripaziti da ne izgleda kao da je prevelik, odnosno kao da nije prilagođen za manje ekrane. Za to se najčešće koriste relativne jedinice, kao što su em i rem, koje omogućuju definiranje relativne veličine fonta, vanjskih i unutarnjih margina. U CSS-u, em jedinice su povezane s veličinom fonta u parent elementu, dok su rem (root-em) jedinice povezane s veličinom fonta u odnosu na root element. Korištenjem postotaka i relativnih jedinica fonta lakše je upravljati apsolutnom veličinom fonta cijelog dizajna uz očuvanje relativne veličine pojedinih elemenata dizajna, umjesto prilagođavanja baš svake veličine definirane u pikselima.

3. Responzivne slike

Do sada je već svima jasno da se, kao i ostali sadržaj, i slike moraju prilagoditi veličini ekrana. No, ono na što želimo skrenuti pozornost nije samo prilagođavanje veličine slike ekranu u postocima ili slično. Vrlo učestala pojava u responzivnom web dizajnu je baš to - korištenje iste slike na svim veličinama ekrana i prilagodba putem definiranja veličine slike. To možda i jest najjednostavniji i veoma efikasan način, ali nepotrebno povećava količinu preuzetih podataka. Bolje rješenje je spremanje nekoliko veličina svake slike na serveru i preuzimanje odgovarajuće veličine slike (najbliže veličini ekrana). Time se smanjuje i brzina učitavanja web stranice, posebno onih web stranica s velikom količinom (također velikih) slika kakav je dizajn trenutno aktualan.

Kako bi to bilo jednostavnije, razvijeni su novi službeni elementi i atributi - srcset, sizes, picture. Oni omogućuju definiranje nekoliko različitih alternativnih izvora slika, ovisno o potrebi (veličini ekrana). Iako još nisu podržani od strane svih preglednika, postoje već neka rješenja kao što je polyfill, a vidljivo je i da se intenzivno radi na daljnjem razvoju responzivnog web dizajna.



S obzirom na prihvaćenost responzivnog web dizajna i vidljivih promjena koje uvodi u cjelokupnu industriju, mi predviđamo daljnji razvoj ovog trenda i veselimo se novim poboljšanjima, koje ćemo redovito pratiti! :)