Pri vsej tej množici futurističnih naprav pa se morda le malo ljudi vpraša, kaj vse to pomeni za razvoj spletnih strani. Še pred letom ali dvema je spletni programer natančno vedel, da bodo do njegove spletne strani uporabniki večinoma dostopali od doma, prek osebnega računalnika z LCD-monitorjem, ki ima ločljivost nekje med 1000 in 1600 slikovnih pik po širini in 700 do 1000 po višini. Kadar poznamo dimenzije ciljne naprave, na kateri bo stran prikazana, je že začetna izbira dimenzij dizajna enostavna: izberemo najmanjšo velikost zaslona, na katerem želimo, da bo stran še ravno prikazana optimalno (brez 'scrollanja') – še pred nedavnim je bila ta 960 slikovnih pik po širini in večina strani je uporabljala fiksno širino ne glede na dejansko resolucijo. Današnje statistike pa kažejo, da vse manj ljudi dnevno brska po internetu samo z osebnim računalnikom. Namesto tega čez dan dostopajo do svojih priljubljenih spletnih strani s pametnimi telefoni, bralniki dokumentov, tabličnimi računalniki … Ko pa se doma usedejo pred domači računalnik, se izkaže, da ima ta pogosto ločljivost po širini nad 1500 slikovnimi pikami, včasih tudi nad 2000. Vsekakor pri takšnem razponu ločljivosti (od 200 slikovnih pik pri telefonih do 2000 na osebnih računalnikih) izbira širine spletne strani ni več enostavna. Na srečo so se v zadnjih letih tudi na spletu pojavile nove tehnologije, ki spletnim programerjem omogočajo izdelavo odzivnih spletnih dizajnov (ang. responsive web design), ki se, kakor že ime pove, odzivajo na velikost zaslona, na katerem so prikazani, in tako uporabniku spletne strani vedno postrežejo z različico spletne strani, ki je prilagojena za prikaz na njegovi napravi.
Med 17. in 19. septembrom je v nemškem Freiburgu potekala prva Smashing konferenca, ki jo je organizirala spletna revija Smashing Magazine (http://www.smashingmagazine.com/). Velik poudarek pri večini predavanj je bil ravno na odzivnem spletnem dizajnu. Po prihodu nazaj v Slovenijo sem odkril, da se tehnologija izdelave odzivnih strani v tujini že precej uporablja, pri nas pa o tem še ni nič kaj slišati. Morda je čas, da se to spremeni, saj je s sorazmerno malo dela mogoče v veliki meri na ta način izboljšati uporabniško izkušnjo obiskovalcev spletne strani.
CSS3 in pravilo @media
Kakšna je sploh motivacija za izdelavo odzivne spletne strani? Danes praktično nihče ne uporablja telefona le za pogovore, pač pa tudi za brskanje po internetu. Še posebno je to praktično, kadar nismo doma in potrebujemo dostop do e-pošte in podatkov na internetu. Ko z brskalnikom telefona odpremo spletno stran, ki je bila oblikovana za velike zaslone, nam telefon po navadi postreže z na videz pomanjšano različico celotne spletne strani, katero moramo povečati, če želimo brati besedilo. Nalaganje takšne spletne strani je počasno, saj ima moderna spletna stran veliko fotografij za ozadje, gumbe socialnih omrežij, velike JavaScript knjižnice in podobno. Na telefonu pa imamo po navadi počasnejšo internetno povezavo kot na domačem računalniku, zato se stran nalaga zelo počasi. Kakšna je rešitev? Je res treba presedlati nazaj na dizajne izpred desetih let, ko so spletni programerji komajda uporabili kakšno fotografijo za ozadje in je bila spletna stran videti tako pusta in kockasta? Ne, rešitev se namreč skriva v tehnologiji CSS3 (ang. Cascading Style Sheet 3) in @media pravilih.
Spreminjanje videza spletne strani glede na ločljivost naprave
S CSS različico 3 smo spletni programerji dobili cel spekter novih bombončkov, s katerimi je mogoče videz spletnih strani mnogo bolje nadzorovati s kodo, hkrati pa je spletna stran lažja za prenos in uporabniku omogoča lažjo orientacijo po strani, ne glede na napravo, s katero dostopa do spletne strani. Ena glavnih novosti CSS3 je pravilo @media, s katerim je mogoče nadzorovati sloge strani glede na napravo prikaza in dimenzije. Poglejmo si spodnji primer kode CSS:
body .wrapper {
width: 960px;
margin: 0 auto;
}
/* ostala CSS koda za vse naprave */
@media screen and (max-width: 960px) {
/* CSS koda za ekrane, katerih širina je manjša od 960 pikslov */
body .wrapper {
width: 100%;
margin: 0;
}
}
Prvo pravilo body .wrapper se po navadi določa za centralno postavitev vsebine spletne strani. Pomemben del pa pride, ko deklariramo @media screen and (max-width: 960px). Koda, ki smo jo navedli v oglatih oklepajih, bo veljavna samo za naprave, katerih širina vidnega okna je manjša od 960 slikovnih pik, in le na zaslonih (screen, ostale možnosti so projection, print, tv …). Na ta način lahko na manjših zaslonih izklopimo prikazovanje velikih fotografij za ozadje (po potrebi vključimo manjše različice), skrijemo nepomembne elemente spletne strani za mobilne uporabnike, predvsem pa prehajamo iz večstolpičnega dizajna v enostolpični, kar pomeni, da bo uporabnik lahko pregledal celotno vsebino spletne strani samo z navigiranjem gor–dol po strani, nič več pa levo–desno, kar je mnogo lažje in bolj intuitivno (pomislite recimo, kako navigirate po aplikacijah, kot so Twitter, Facebook na pametnih telefonih).
CSS3 ozadja in barvni gradienti
CSS3 prinaša novosti tudi na področju nadzora prelivajočih se barv (gradientov) in ozadij na splošno. Za kar smo prej potrebovali sliko za ozadje (ki je statična, precej velika in zahteva dodaten HTTP-zahtevek na strežniku), je zdaj mogoče doseči samo z nekaj vrsticami kode CSS. Gradient za ozadje se nastavi z linear-gradient ali radial-gradient funkcijami, ki jih podamo kot vrednost za pravilo background-image:
body {
background-image: linear-gradient(center top, #ffffff, #a0a0a0);
}
Pri večini CSS3 pravil se je treba zavedati, da so še v fazi implementacije pri različnih brskalnikih, zato je treba dodati predpono, recimo -moz- za Firefox, -webkit- za Chrome in Safari, -ms- za Internet Explorer, -o- za Opero. Pravila potem nanizamo drugo za drugim, ker če brskalnik ne razume kode CSS, jo enostavno ignorira. Funkcija za linear-gradient je potem za podporo v Firefoxu videti takole: -moz-linear-gradient(). S tem, da deklariramo gradient za ozadje s CSS3 pravili, pomeni s stališča programerja večjo fleksibilnost in lažje spreminjanje videza, s stališča obiskovalca spletne strani pa hitrejše nalaganje in boljši prikaz na mobilnih napravah. Cena, ki jo s tem plačamo, je slaba podpora CSS3 v starih različicah brskalnikov.
Zaobljeni robovi
Zaobljeni robovi v CSS3 so ena od funkcij, ki zelo pohitrijo izdelavo strani in hkrati omogočajo enostavne spremembe na strani. V osnovi so HTML-elementi škatlasti, vendar jih je s pomočjo pravila border-radius mogoče zaobliti, kar dostikrat pripomore k lepšemu videzu spletne strani. Uporaba je zelo enostavna, če želimo zaobliti vse robove v HTML-znački z razredom 'rounded' za pet točk, potem to storimo tako:
.rounded {
border-radius: 5px;
}
Podpora CSS3 v brskalnikih?
Seveda obstaja še precej drugih CSS3 funkcij, ki izboljšajo videz spletne strani samo z uporabo kode. Poglejmo si za konec še, kako različni brskalniki podpirajo nove funkcionalnosti:
• Chrome: tukaj je najmanj težav, Chrome se posodablja samodejno in njegovi uporabniki imajo vedno zadnje različice, ki podpirajo praktično vse CSS3 novosti.
• Safari: uporablja enak sistem prikazovanja kot Chrome (WebKit), vendar ni nujno, da uporabniki vedno uporabljajo zadnjo različico.
• Firefox: zadnje različice se posodabljajo samodejno, različice nad 10 podpirajo večino CSS3 novosti.
• Opera: uporabniki po navadi posodabljajo na zadnje različice, ki dobro podpirajo večino CSS3 novosti.
• Internet Explorer: tukaj se pojavi težava, saj večina uporabnikov Internet Explorerja nikoli ne posodablja. Vendar uporaba IE ves čas pada, poleg tega različici 9 in 10 že zelo dobro podpirata trenutne CSS3 novosti.
• Mobilni brskalniki: danes prevladujeta med pametnimi telefoni operacijska sistema Android in iOS, ki se samodejno posodabljata, hkrati tudi mobilni brskalniki v večini podpirajo vse CSS3 slaščice.
Za bolj podrobno analizo podprtosti posameznih funkcij priporočam obisk spletne strani http://caniuse.com/.
Zaključek, primeri in nadaljnje branje
V zahodnih državah je obiskanost spletnih strani z mobilnih naprav večja kot v Sloveniji, vendar se tudi pri nas iz dneva v dan povečuje. Po mojem mnenju je že presegla prag, ko spletni razvijalci ne bi smeli več ignorirati teh uporabnikov, ampak bi se jim morali še posebno posvetiti, sploh zato, ker je prihodnost interneta mobilna. Dizajniranje za 1000 slikovnih pik široke zaslone je preteklost, čas je za odzivni spletni dizajn. V podjetju ProteusNet imamo trenutno veliko povpraševanja iz tujine, na domačem trgu pa se šele zadnje mesece začenja slutiti potreba po odzivnem dizajnu.
Vsi primeri, ki sem jih uporabil za prikaz v tem članku, so na voljo na spletni strani http://www.proteusnet.com/moj-mikro-css3/, prav tako pa tudi povezave do uporabnih spletnih strani in virov.
Moj mikro, November December 2012 | Primož Cigler, ProteusNet, d. o. o.
