7

1
Poetak rada sa
HTML-om 5, CSS-om 3
i prilagodljivim dizajnom
Donedavno su web sajtovi kreirani sa fiksnom irinom, kao to je 960 piksela, i oekivalo se
da e svi krajnji korisnici imati prilino isto iskustvo prilikom pregleda. Ova fiksna irina nije
bila dovoljna za ekrane laptopa i korisnici sa monitorima visoke rezolucije imali su velike
margine sa obe strane ekrana.
Meutim, sada postoje pametni telefoni. Appleov iPhone prvi je stvarno ponudio pretraivanja na telefonu i mnogi drugi proizvoai sada idu njegovim stopama. Za razliku od nekadanjeg pretraivanja Weba na malim ekranima, koje je zahtevalo spretnost palca svetskog
ampiona Tiddlywinksa, sada ljudi bez problema koriste svoje telefone za pretraivanje Weba.
Pored toga, osetan je porast korisnika koji za pregled sadraja radije koriste ureaje sa malim
ekranima (na primer, tablete i netbookove) nego velike ekrane. Nesporna je injenica da sve
veom brzinom raste broj ljudi koji koriste male ureaje sa malim ekranom za pregled Interneta, ali je isto tako, sa druge strane, uobiajena i pojava upotrebe monitora od 27 i 30 ina.
Sada je razlika izmeu najmanjih i najveih ekrana za pretraivanje Weba vea nego ikada
ranije.
Sreom, postoji reenje za ovu raznolikost pretraivaa i ureaja kojima se prikazi uvek ire.
Prilagodljiv web dizajn koji je kreiran pomou HTML-a 5 i CSS-a 3 omoguava da web sajt
funkcionie na vie razliitih ureaja i ekrana. A najbolji deo je to su tehnike sve implementirane bez potrebe za reenja servera / backend.

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

U ovom poglavlju ete:

shvatiti vanost podravanja ureaja sa malim ekranima

definisati dizajn mobilnog web sajta

videti odline primere prilagodljivog web dizajna

nauiti razliku izmeu prikaza i veliine ekrana

instalirati i upotrebiti ekstenzije pretraivaa za promenu prikaza

upotrebiti HTML5 za kreiranje prilagodljivijeg koda

upotrebiti CSS3 za reavanje uobiajenih izazova dizajna

Zato su vani pametni telefoni

(a stari IE nije)?
Iako bi trebalo da se statistika koristi samo kao grubi vodi, interesantno je napomenuti da
je, prema statistici prikazanoj na sajtu gs.statcounter.com, za 12 meseci, od jula 2010. do jula
2011. godine, globalna upotreba mobilnih pretraivaa porasla sa 2,86 na 7,02 procenata. Ista
statistika prikazuje da je upotreba Internet Explorera 6 smanjena sa 8,79 na 3,42 procenta. ak
je i upotreba Internet Explorera 7 opala za 5,45 procenata do jula 2011. godine. Ako od vas klijenti esto trae da napravite sajt da funkcionie u Internet Exploreru 6 i 7, odgovorite im da bi
moda trebalo da koncentriu svoj trud na neto drugo. Mnogo vie ljudi pretrauje web sajtove
na mobilnim telefonima nego na desktopu ili laptopu koji koriste Internet Explorer 6 ili 7, to je
razlog za slavlje frontend programera irom sveta.
Dakle, broj ljudi koji koriste ureaje sa malim ekranima za pretraivanje Weba je u stalnom
porastu, a internet pretraivai ovih ureaja su dizajnirani da rukuju postojeim web sajtovima
bez ikakvih problema. To je omogueno suavanjem standardnog web sajta da se prilagodi
podruju prikaza (ili prikazu to je pravilan tehniki termin) ureaja. Korisnik tada uveliava
podruje sadraja za koji je zainteresovan. Odlino, pa zato bi onda trebalo da frontend dizajneri i programeri urade bilo ta dalje?

[10]

[Zato su vani pametni telefoni (a stari IE nije)? ]

Pa, to vie pretraujete web sajtove, kao to je ovaj koji je prikazan na prethodnoj slici, na
iPhone i Android mobilnim ureajima, razlog e vam biti jasniji. Veoma je dosadno i frustrirajue da konstantno uveliavate i smanjujete podruja stranice da biste mogli da proitate sadraj. I pomeranje stranice ulevo i udesno da biste proitali reenice koje su izvan prikaza je isto
toliko dosadno, a kliknuli ste na link koji ne elite da otvorite. Sigurno je da mi moemo bolje!

[11]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Da li postoje situacije kada prilagodljiv

dizajn nije dobar izbor?
Ukoliko budet omoguava i situacija zahteva, prava mobilna verzija web sajta verovatno
moe da bude najbolja opcija. Ona bi mogla da prikae razliite sadraje, dizajn i interakciju
na osnovu ureaja, lokacije, brzine konekcije i mnogo drugih varijabli, ukljuujui i tehnike
mogunosti ureaja. Kao praktian primer, zamislite lanac picerija. Mogli bi da postoje jedan
standardni web sajt i mobilna verzija koja dodaje realne funkcije na osnovu aktuelne GPS lokacije koje e vam pomoi da pronaete odreenu piceriju. Ova vrsta reenja zahteva mnogo vie
od onoga to sam prilagodljiv dizajn moe da ponudi.
Meutim, ne zahteva svaki projekat taj nivo sofisticiranosti; u skoro svim drugim primerima i
dalje je bolje obezbediti korisnicima skrojeni prikaz sadraja, koji zavisi od veliine prikaza
na njihovim ureajima. Na primer, na veini sajtova, kada predstavljam isti sadraj, voleo bih da
varira nain na koji je on prikazan. Na malim ekranima elemente koji nisu izuzetno vani postavite ispod glavnog sadraja ili, u najgorem sluaju, sakrijte ih u potpunosti. Moete da pomerite
dugmad za navigaciju tako da vie odgovaraju dodiru prstom i nemojte nuditi dugmad koja
odgovaraju samo korisnicima koji upotrebljavaju mi. Tipografija bi takoe trebalo da bude
skalirana zbog bolje itljivosti, omoguavajui itanje teksta bez potrebe stalnog povlaenja prikaza sa jedne na drugu stranu. Isto tako, dok isporuujemo sadraj za manje prikaze, ne elimo
da kompromitujemo dizajn za one koji koriste standardne laptop ili desktop ekrane. Kada ve
ukljuujemo sve, zato ne bismo dodali nekoliko poboljanja za one koji koriste velike ekrane,
iroke 1.900 piksela i vie? Ukratko, i vama i meni je potreban dizajn koji odgovara celom spektru veliina ekrana koji mogu da budu upotrebljeni za njegov pregled.

Definicija prilagodljivog web dizajna

Termin prilagodljivi web dizajn je smislio Ethan Marcotte. U svom izvornom lanku u List
Apartu (http://www.alistapart.com/articles/responsive-web-design/) Marcotte
je ujedinio tri postojee tehnike (fleksibilan grid razmetaj, fleksibilne slike i medije i medija
upite) u jedan jedinstveni pristup i nazvao ga je prilagodljivi web dizajn. Ovaj termin se esto
koristi za opisivanje drugih termina istog znaenja, kao to su teni dizajn, elastini razmetaj,
gumeni razmetaj, teni dizajn, prilagodljiv razmetaj, dizajn koji odgovara svim ureajima i
fleksibilni dizajn.
Naveli smo samo neke opise. Meutim, kao to su se Marcotte i drugi raspravljali, stvarna
prilagodljiva metodologija je, u stvari, vie od samog pomeranja razmetaja sajta na osnovu
veliina prikaza. Potrebno je da izokrenemo ceo na aktuelni pristup web dizajnu. Umesto da
zapoinjemo sa dizajnom desktop sajta fiksne irine i smanjujemo ga tako da sadraj odgovara
i manjim prikazima, trebalo bi prvo da dizajniramo sajt za manje prikaze, a zatim da postepeno
poboljavamo dizajn i sadraj za vee prikaze.

[12]

[Zato stati na prilagodljivom dizajnu?]

Prilagodljiv web dizajn ukratko
Ukratko reeno, prilagodljiv web dizajn je prikaz sadraja na najprihvatljiviji
nain za bilo koju veliinu ekrana preko kojeg se pristupa sadraju. Nasuprot tome, pravi mobilni web sajt je potreban kada iskustvo zahteva specifian sadraj i funkcionalnost na osnovu ureaja sa kojeg mu pristupate.
U ovim sluajevima mobilni web sajt predstavlja potpuno drugaije korisniko iskustvo od njegovog desktop ekvivalenta.

Zato stati na prilagodljivom dizajnu?

Prilagodljiv web dizajn e rukovati tokom sadraja naih stranica pri promeni prikaza, ali i
mnogo vie od toga. HTML5 prua vie nego to je HTML4 ikada mogao i mnogo je vie znaajnih semantikih elemenata koji e formirati osnove naeg koda. CSS3 medija upiti su vaan
deo prilagodljivog dizajna, ali dodatni CSS3 moduli omoguavaju fleksibilnost jo nevienog
nivoa. Mi emo odustati od pozadinske grafike i komplikovanog JavaScripta i zameniemo ih
prilagodljivim CSS3 gradijentima, senkama, tipografijom, animacijama i transformacijama.
Pre nego to nastavimo kreiranje prilagodljivog web dizajna pomou HTML-a 5 i CSS-a 3,
pogledajmo neke primere emu bi trebalo da teimo. Ko ve radi pomou svih ovih prilagodljivih HTML5 i CSS3 jezika i ta moemo da nauimo iz njihovog rada?

Primeri prilagodljivog web dizajna

Da biste testirali svoj ili tui prilagodljiv web dizajn, treba da imate posebne sisteme koji su
podeeni za posebne ureaje i veliine ekrana. Iako nita nee poboljati ovo testiranje, veina
testova moe da se obavi jednostavno menjajem veliine prozora pretraivaa. Za pomo u
testiranju postoje razliiti pluginovi i ekstenzije pretraivaa, koji prikazuju aktuelan prozor
pretraivaa ili veliinu prikaza u pikselima ili, u nekim sluajevima, automatski prekopavaju
aktuelni prozor ili prikaz na standardnu veliinu ekrana (na primer, 1.024x768 piksela), to
omoguava da se lake testira ono to se deava prilikom promene prikaza.
Vezani ste za piksele? Prebolite to!
Nemojte se vezivati za piksele kao jedinicu mere, zato to ih u mnogim
primerima neete koristiti, ve ete koristiti relativne jedinice mere (obino
em ili ems i procente) kada budete dobro savladali prilagodljiv dizajn. Za
pregled drugih vrsta prilagodljivog dizajna i za prikaz njihove primene bie
obezbeene korisne reference.

[13]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Ovde uzmite alatke za testiranje!

Korisnici Internet Explorera bi trebalo da imaju instaliranu liniju sa alatkama Microsoft Internet
Explorer Developer Toolbar. Moete da je preuzmete sa adrese
http://www.microsoft.com/download/en/details.aspx?id=18359.

Ako koristite Safari pretraiva, moja omiljena alatka je Resize (http://resizeSafari.com/), mada
je ResizeMe (http://web.me.com/aaronholla/Safari_Extensions/ResizeMe.html)
slina alatka koja je i besplatna.
Ako koristite Firefox, Firesizer (https://addons.mozilla.org/en-US/firefox/addon/
firesizer/) je odlian alat, a korisnici Chromea bi trebalo da isprobaju alatku odgovarajueg naziva Windows Resizer (https://chrome.google.com/webstore/detail/
kkelicaakdanhinjdeammmilcgefonfh).
Niste ljubitelj ekstenzija? Evo jo nekih alternativa: ja sam napisao jednostavnu HTML stranicu
za prikazivanje visine i irine aktuelnog prikaza u prozoru pretraivaa. Koristei JavaScript
biblioteku jQuery (http://jquery.com), ova stranica primenjuje visinu i irinu aktuelnog prikaza
i prikazuje te vrednosti. Ovu stranicu moete drati otvorenu na drugoj kartici pretraivaa,
promeniti veliinu prozora, a zatim se vratiti na web sajt na kojem radite da biste videli kako
se on prilagoava. Izuzetno jednostavnu stranicu What size is my viewport page? moete da
pronaete na adresi
http://benfrain.com/easily-display-the-viewport-size-of-your-pageforresponsive-designs/.

Prikaz ili veliina ekrana

Vano je da razumete da prikaz i veliina ekrana nisu jedno isto. Prikaz se
odnosi na podruje sadraja unutar prozora pretraivaa, iskljuujui linije
sa alatkama, kartice i tako dalje, a veliina ekrana na fiziko podruje prikaza na ureaju. Budite paljivi, jer neke alatke za promenu veliine pretraivaa prikazuju veliinu, ukljuujui i elemente pretraivaa, kao to
su linija adrese, kartice i polja za pretraivanje, a druge alatke ih ne ukljuuju. Na sledeoj slici predstavljena je aktuelna veliina prikaza u gornjem
desnom uglu (1.156x921 px), dok Firesizer plugin prikazuje veliinu prozora
u donjem desnom uglu (1.171x1023).

[14]

[Primeri prilagodljivog web dizajna]

Sada imamo sve to nam je potrebno da zaponemo da cenimo najbolje od onoga to prilagodljivi web moe da nam ponudi. Otvorite pretraiva po svom izboru, ukljuite alatku za veliinu
ekrana i pogledajte stranicu http://thinkvitamin.com/.

[15]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Ako pregledate stranicu sa prikazom irim od 1.060 piksela, videete slian razmetaj kao na
sledeoj slici.

[16]

[Primeri prilagodljivog web dizajna]

Meutim, ako pregledate stranicu sa prikazom veim od 930, ali manjim od 1.060 piksela, videete razmetaj kao na sledeoj slici.

[17]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Vidite li kako se promenila glavna navigacija pored logotipa? Ikonice desno od glavnog sadraja su preureene - nalaze se jedna ispod druge. Sve je savreno upotrebljivo i, to je najvanije, ne nestaje sa ekrana. Pogledajte sada prikaz manji od 880 piksela na sledeoj slici.

Zaglavlje ostaje isto, ali je linija menija sa desne strane jo tanja; ikonice su sada poreane dve
po dve, dok su blokovi teksta podeeni i tekst tee usklaeno unutar bloka teksta.

[18]

[Primeri prilagodljivog web dizajna]

Meutim, smanjite prikaz na irinu manju od 600 piksela i videete velike promene, kao na
sledeoj slici.

ta kaete na to? Cela linija menija se prilagodila naem novom prikazu, omoguavajui da
sadraj, najvaniji deo sajta, zauzme celu irinu prozora pretraivaa. Vidite li da su linkovi u
zaglavlju sada horizontalni, a nalazili su se pored logotipa, ija veliina je sada promenjena?
Sve ove promene pomau vam da ponudite bolji prikaz za korisnika, u zavisnosti od dimenzije
prikaza.

[19]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Pogledajte i primer http://2011.dconstruct.org/. U irokom prikazu (recimo, vie od
1.350 piksela) sajt izgleda kao na sledeoj slici.

Posebno obratite panju na grid od devet slika. Dok smanjujete irinu prikaza (na manje od oko
960 piksela), vidite li ta se deava? Grid od tri reda po tri slike postae grid od tri reda sa po dve
slike i jednog reda sa tri slike na dnu, kao na sledeoj slici.

[20]

[Primeri prilagodljivog web dizajna]

[21]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Ako jo vie smanjimo irinu prikaza, na manje od 720 piksela, naii emo na jo jednu taku
u dizajnu; linkovi u zaglavlju e se promeniti i ukljuivae slike koje obezbeuju bolje ciljno
podruje za navigaciju na ureajima sa ekranima osetljivim na dodir.

Ako smanjimo prikaz na irinu manju od 480 piksela, grid sa slikama e se ponovo promeniti,
prikazujui sada red od po dve slike, zatim tri i etiri slike. Ove slike e nastaviti da se smanjuju
dok smanjujemo prikaz na oko 300 piksela. Na sledeoj slici prikazano je kako stranica izgleda
na iPhoneu.

[22]

[Primeri prilagodljivog web dizajna]

online izvori za inspiraciju

Jedna destinacija na Webu koja je veoma korisna za inspiraciju je http:://mediaqueri.es.
Meutim, ovde prikazani web sajtovi ne prihvataju svi u potpunosti upotrebu metodologije prilagodljivosti prikaza sadraja na malim prikazima i postepeno ga poboljavaju za vee prikaze.
U ovoj ranoj fazi uenja, dok razmatramo mogunosti onoga to moemo da uradimo pomou
prilagodljivog web dizajna, na ovoj stranici moete da pronaete odline primere koje e vas
inspirisati. Iako pregledanje ovih web sajtova i promena veliine prikaza ilustruju ta moete da
uradite pomou prilagodljivog web dizajna, nije demonstrirano ta je dobro u HTML-u 5, ije se
prednosti ispoljavaju iza scene.

[23]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Zato je HTML5 toliko dobar?

HTML5 stavlja akcenat na pojednostavljivanje aktuelnog koda koji je potreban za kreiranje
stranice koja odgovara W3C standardima i povezuje sve potrebne CSS, JavaScript i grafike
fajlove. Za korisnike pametnih telefona, koji verovatno pregledaju nae stranice sa ogranienim
propusnim opsegom, na cilj za prilagodljivi dizajn je da web sajt ne samo odgovara njihovom
ogranienom prikazu, ve i da se uitava to je mogue bre. Iako uklanjanje suvinih elemenata
koda predstavlja samo malu utedu podataka, sve je od pomoi.
HTML5 nudi vie prednosti i dodatnih opcija u odnosu na prethodni HTML (HTML 4.01).
Frontend web programeri su verovatno najvie zainteresovani za nove semantike elemente
HTML-a 5, koji pruaju znaajniji kod za maine za pretragu. HTML5 takoe prua povratne
informacije za korisnika na osnovu interaktivnosti sajta, kao to je popunjavanje formulara,
esto bez potrebe za veom obradom JavaScript formulara koji zahtevaju velike izvore. To su
dobre vesti u vezi sa naim prilagodljivim dizajnom koji omoguava da kreiramo prilagodljiviji
osnovni kod koji se brzo uitava.

Uteda vremena i koda pomou HTML-a 5

Prva linija bilo kojeg HTML dokumenta poinje sa Doctype (deklaracija vrste dokumenta). To
je deo koji automatski dodaje na editor koda koji koristimo ili moemo da ga pejstujemo iz
postojeeg predloenog koda (u stvari, niko ne unosi ceo HTML 4.01 Doctype out, zar ne?) Pre
HTML-a 5, deklaracija Doctype za standardnu stranicu HTML 4.01 je izgledala ovako:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>

Sada, pomou HTML-a 5, izgleda ovako:

<!DOCTYPE html>

Ja ne kucam fiziki Doctype svaki put kada piem stranicu, a mislim da to ni veina vas ne radi.
Neki od vas se, verovatno, bune, a zato? ta je sa dodavanjem linkova u JavaScript ili CSS
na vaoj stranici? Ako imate postojei HTML 4.01 kod, pravilan nain povezivanja sa fajlom
skripta bi bio sledei:
<script src=js/jquery-1.6.2.js type=text/javascript></script>

HTML5 olakava ovaj posao:

<script src=js/jquery-1.6.2.js></script>

[24]

[Zato je HTML5 toliko dobar?]

Kao to moete da vidite, nije vie potrebno specificirati vrstu atributa. Slino je i povezivanje
sa CSS fajlovima. HTML5 prihvata i mnogo jednostavniju sintaksu koju smatra validnom. Na
primer, sintaksa <sCRipt SrC=js/jquery-1.6.2.js></script> je isto toliko validna kao i
sintaksa u prethodnom primeru. Izostavili smo upitnik u izvoru skripta i pisanje karaktera malih
i velikih slova u tagu i nazivu atributa. Meutim, za HTML5 to nije vano i dalje prihvata
W3C HTML5 validator (http://validator.w3.org/).
Ovo je odlina okolnost ako ste neuredni prilikom pisanja koda, i, to je jo korisnije, ako elite
da izostavite sve mogue nepotrebne karaktere iz koda. Kada je re o pisanju koda, postoje i
drugi detalji koji e vam olakati ivot, ali pretpostavljam da niste ubeeni da je sve to mnogo
interesantno. Dakle, pogledajte na brzinu nove semantike elemente HTML-a 5.

Novi, semantiki znaajni elementi HTML5 taga

Kada kreirate HTML stranicu, uobiajeno je da oznaite zaglavlje i odeljak za navigaciju na
sledei (ili slian) nain:
<div class=header>
<div class=navigation>
<ul class=nav-list>
<li><a href=# title=Home>Home</a></li>
<li><a href=# title=About>About</a></li>
</ul>
</div> <!end of navigation -->
</div> <!end of header -->

Meutim, pogledajte kako se to radi pomou HTML-a 5:

<header>
<nav>
<ul id=nav-list>
<li><a href=# title=Home>Home</a></li>
<li><a href=# title=About>About</a></li>
</ul>
</nav>
</header>

[25]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

ta kaete na to? Umesto bezlinih <div> tagova za svaki strukturalni element (ali sa nazivom
klase za namenu stilizovanja), HTML5 nam prua semantiki daleko znaajnije elemente koje
moemo da upotrebimo. Uobiajeni strukturalni odeljci unutar stranice, kao to su zaglavlje i
navigacija (i mnogi drugi, to ete uskoro i videti), dobijaju sopstvene tagove elementa. Na
kod je upravo postao vie semantiki pomou taga <nav>, koji govori pretraivaima: Hej,
ovaj odeljak upravo ovde je za navigaciju. Maine za pretragu e sada moi da razumeju nae
stranice bolje nego ikada pre i da, u skladu sa tim, rangiraju na sadraj.
Kada piem HTML stranice, znam da e one biti prosleene pozadinskoj posadi (znate one
super klince koji rade u PHP-u, Rubyju, .NET-u, ColdFusionu i tako dalje) pre nego to stranice konano stignu do WWW-a. Da bih ostao u dobrim odnosima sa ljudima iz pozadine, ja
esto napiem komentar za zavrni tag </div> unutar koda da bih omoguio drugima da lake
odrede gde se zavravaju elementi <div>. HTML5 esto izostavlja taj zadatak. Kada pogledate
HTML5 kod, tag zavrnog elementa, na primer </header>, odmah vam govori koji se element
zatvara, bez potrebe da dodajete komentar.
Ovde smo vas samo malo zainteresovali za prednosti semantikih elemenata koje nudi HTML5.
Pre nego to se podrobnije udubimo u tu tematiku, potrebno je da upoznamo jo jednog prijatelja. Ako postoji neto bez ega cela ova nova era web dizajna ne bi mogla da postoji, to je
CSS3.

CSS3 omoguava prilagodljiv dizajn

i vie od toga
Ako ste se sredinom 1990-tih godina bavili web dizajnom, seate se da je tada svaki dizajn bio
zasnovan na tabelama i da je svaki bio preplavljeni sadrajem. Cascading Style Sheets (CSS)
predstavljeni su kao nain razdvajanja dizajna od sadraja. Bilo je potrebno dosta vremena za
web dizajnere da prihvate novi svet dizajna zasnovanog na CSS-u, ali pojedini sajtovi, kao to
je http://www.csszengarden.com, utrli su put, prikazujui ta se sve moe postii na vizuelnom planu pomou takvog dizajna. Od tada CSS je postao uobiajeni nain definisanja prezentacionog razmetaja web stranice, sa aktuelnom verzijom CSS 2.1 potvrene CSS specifikacije.
CSS3 e tek biti u potpunosti prihvaen, ali to ne znai da se veliki deo njega ve ne koristi i
danas. Radna grupa W3C, na adresi http://www.w3.org/TR/CSS/#css3, izjavila je sledee:
CSS Level 3 nadograen je na CSS Level 2, modul po modul, koristei specifikacije CSS-a 2.1
kao osnovu. Svaki modul dodaje novu funkciju i/ili zamenjuje deo CSS2.1 specifikacije. CSS
Working Group tei da novi CSS moduli ne protivuree CSS2.1 specifikaciji: samo e dodati
nove funkcije i poboljati definicije.
Vei deo nacrta W3C specifikacija navodi (po potrebi) poseban jezik. Jednostavno reeno, nama
je vano da je CSS3 kreiran kao set bolt-on modula, a ne kao jedan modul koji je konsolidovan
u celinu. Poto je CSS2.1 osnova, ni jedna tehnika koju koristite u CSS-u 2.1 nije zastarela.
Umesto toga, odreeni stari moduli CSS-a 3 (poto nisu svi moduli u istoj zavrnoj fazi) mogu
da budu upotrebljeni odmah, bez potrebe da ekate da cela specifikacija bude potvrena.

[26]

[CSS3 omoguava prilagodljiv dizajn i vie od toga ]

Zakljuak CSS3 nee slomiti nita

Moda je najvanije napomenuti da u starijim pretraivaima za ukljuivanje parametara nema
nedostataka koje oni ne razumeju. Stariji pretraivai (ukljuujui Internet Explorer 6, 7 i 8) e
jednostavno preskoiti CSS3 parametre koje ne mogu da obrade. To nam prua mogunost da
postepeno poboljavamo podruja dizajna za bolje opremljene pretraivae, dok istovremeno
obezbeujemo pristojan prikaz za starije pretraivae.

Kako CSS3 moe da rei svakodnevne probleme u dizajnu?

Razmotrimo uobiajenu prepreku u dizajnu sa kojom se svi mi susreemo u veini naih projekata na primer, kreiranje zaobljenih uglova na elementu ekrana, moda za tabovani interfejs
ili za uglove elementa okvira, kao to je zaglavlje. Koristei CSS 2.1, moete da kreirate zaobljene uglove upotrebom tehnike kliznih vrata (http://www.alistapart.com/articles/
slidingdoors/), pri emu se jedna pozadinska slika nalazi iza druge. HTML bi mogao da
bude jednostavan na primer:
<a href=#><span>Box Title</span></a>

Mi dodajemo zaobljenu pozadinu u element <a> kreiranjem dve slike. Prva slika, pod nazivom
headerLeft.png, bila bi irine 15 piksela i visine 40 piksela, a druga, pod nazivom headerRight.
png, u ovom primeru, bila bi ira nego to bismo mi ikada pretpostavili za zaglavlje (ovde 280
piksela). Svaka od ovih slika bi predstavljala jednu polovinu kliznih vrata. Dok jedan element
raste (tekst unutar naih <span> tagova), pozadina ispunjava prostor, kreirajui neku vrstu reenja zaobljenog ugla. Evo kako u ovom primeru izgleda CSS:
a {
display: block;
height: 40px;
float: left;
font-size: 1.2em;
padding-right: 0.8em;
background: url(images/headerRight.png) no-repeat scroll top right;
}
a span {
background: url(images/headerLeft.png) no-repeat;
display: block;
line-height: 40px;
padding-left: 0.8em;
}

[27]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Na sledeoj slici prikazano je kako e ovaj dizajn izgledati u Googleovom Chromeu (v16).

Problem dizajna je reen, ali zahteva dodatni kod (semantiki element <span> nema vrednost)
i dva dodatna HTTP zahteva (za slike) serveru za kreiranje efekta na ekranu. Sada bismo mogli
da kombinujemo dve slike u jednu i kreiramo sprajt, a zatim da upotrebimo poziciju pozadine:
CSS parametar za pomeranje, ali je ovo reenje, ak i sa utedom propusnog opsega koje nudi,
ipak nefleksibilno. ta se deava ako klijent eli da uglovi imaju ui radijus? Ili eli drugu boju?
Trebalo bi ponovo da kreiramo slike. Naalost, pre CSS-a 3 ovo je bila realna situacija u kojoj
su se nalazili frontend dizajneri i programeri. Dame i gospodo, ja sam predvideo da e biti stvoren CSS3! Hajde da promenimo HTML, tako da stoji samo sledee:
<a href=#>Box Title</a>

Za poetak, CSS moe postati sledee:

a {
float: left;
height: 40px;
line-height: 40px;
padding-left: 0.8em;
padding-right: 0.8em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-image: url(images/headerTiny.png);
background-repeat: repeat-x;
}

[28]

[CSS3 omoguava prilagodljiv dizajn i vie od toga ]

Na sledeoj slici prikazano je kako izgleda CSS3 verzija dugmeta u istom pretraivau (Chrome
v16).

U ovom primeru dve prethodne slike su zamenjene jednom slikom, irine jednog piksela, koja
se ponavljala du x ose. Iako je slika irine svega jednog piksela, ona je visine 40 piksela, verovatno via od bilo kog sadraja koji e biti unet. Kada koristite sliku kao pozadinu, vano je da
uvek prebacite visinu, imajui u vidu prelivanje sadraja, to, naalost, zahteva vee slike i
vee zahteve za propusni opseg. Meutim, ovde, za razliku od reenja sa celom slikom, CSS3
vodi rauna o uglovima pomou parametara border-radius. Klijent eli da uglovi budu malo
zaobljeniji, recimo 12 piksela? Nema problema, samo promenite parametar border-radius
na 12 px i va posao je zavren. Parametar CSS-a 3 za zaobljene uglove je veoma brz, fleksibilan i podran u pretraivaima Safari (v3+), Firefox (v1+), Opera (v10.5+), Chrome (v3+) i
Internet Explorer 9. Microsoft je, nakon objavljene podrke prilagodljivog dizajna za IE 9 u
budunosti (nadam se da oseate blagi sarkazam koji izvire iz ovih rei), ak dizajnirao interaktivnu stranicu, predstavljajui razliite efekte koji mogu da se postignu pomou parametra
border-radius.
Pogledajte demonstraciju na adresi
http://ie.microsoft.com/testdrive/html5/borderradius/default.html.

CSS3 moe da vam pomogne jo vie eliminisanjem potrebe za pozadinskom gradijentnom

slikom, tako to sam kreira efekat u pretraivau. Ovaj parametar nije podran od svih pretraivaa, ali unosom naziva boje du linija linear-gradient (yellow, blue) pozadina bilo kog
elementa moe da dobije CSS3 generisani gradijent.

[29]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Gradijent moe da bude specificiran bojom, tradicionalnim HEX vrednostima (na primer,
#BFBFBF) ili upotrebom jednog od reima boja CSS-a 3 (vie rei o ovoj temi bie u Poglavlju 5, CSS3: Selektori, tipografija i reimi boja). Ako biste radije eleli da korisnici starijih
pretraivaa vide jednobojnu pozadinu, umesto gradijenta (nasuprot niemu), CSS kod slian
ovome bi obezbedio jednu boju u sluaju da pretraiva ne moe da prikae gradijent:
background-color:
background-image:
background-image:
background-image:
background-image:
background-image:
background-image:

#42c264;
-webkit-linear-gradient(#4fec50, #42c264);
-moz-linear-gradient(#4fec50, #42c264);
-o-linear-gradient(#4fec50, #42c264);
-ms-linear-gradient(#4fec50, #42c264);
-chrome-linear-gradient(#4fec50, #42c264);
linear-gradient(#4fec50, #42c264);

Parametar linear-gradient daje uputstva pretraivau da startuje sa prvom vrednou boje

(u ovom primeru #4fec50), a da zatim nastavi prikaz vrednosti druge boje (#42c264).
Videete u CSS kodu da se parametar background-image linear-gradient ponavlja sa velikim brojem prefiksa; na primer -webkit-. To omoguava razliitim proizvoaima pretraivaa
da eksperimentiu sa sopstvenim implementacijama novih CSS3 parametara pre predstavljanja
konanog lanka, kada ve prefiksi nisu potrebni (na primer, -moz- za Mozilla Firefox, -ms- za
Microsoft Internet Explorer i tako dalje). Poto se stilovi, po svojoj prirodi, menjaju, verziju bez
prefiksa postavljamo kao poslednju stavku, to znai da e ona zameniti raniju deklaraciju, ako
je to mogue.

viDi nema slika!

Na sledeoj slici prikazano je kako izgleda zavreno CSS3 dugme u istom pretraivau.

Mislim da ete se sloiti razlike izmeu verzije slike i cele CSS verzije su beznaajne. Kreiranje vizuelnih elemenata pomou CSS-a 3 omoguava da na prilagodljivi dizajn bude fleksibilniji od dizajna kreiranog pomou slika. tavie, i gradijenti su podrani u modernim mobilnim
pretraivaima; jedino nedostaje podrka za gradijente za pretraivae, kao to su IE9 i starije
verzije.

[30]

[Vidi nema slika!]

ta jo css3 ima da ponudi?

Do sada smo pregledali uoptene primere u kojima CSS3 moe da nam pomogne u svakodnevnim programerskim zadacima. Pogledajte sada koje su prave poslastice koje CSS3 prua.
Otvorite Safari ili Chrome i pogledajte web sajt na adresi http://www.panic.com/blog/.
Iako, naalost, ovaj dizajn nije prilagodljiv, nas interesuju beleke prikaene na vrhu stranice.
Prevucite miem preko njih i videete kako se beleke pomeraju. Lepo, zar ne? Nekada je ova
vrsta poboljanja bila kreirana pomou Flasha ili JavaScripta. Na ovoj stranici to je u potpunosti
postignuto pomou CSS3 transformacija. Upotrebom CSS-a 3, umesto JavaScripta ili Flasha,
uiniete animaciju jednostavnijom, lakom za odravanje i, stoga, savrenom za prilagodljivi
dizajn. Pretraivai koji podravaju ovu funkciju e prikazati animaciju, a ostali samo statinu
sliku.

[31]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Jo jedan odlian primer CSS3 transformacija je na adresi http://demo.marcofolio.net/3d_animation_css3/. Ovo nije prilagodljivi web dizajn; samo pregledamo CSS trikove koji su upotrebljeni. Prvo pogledajte stranicu u Internet Exploreru 9 ili Firefoxu (u verziji 9.0 Firefox i
dalje ne podrava potrebne CSS3 module). Sada pogledajte stranicu u pretraivau Safari 5+ ili
Chrome 16+. Na sledeoj slici naa stranica nije prikazana ba najbolje, pa, ako neete sami da
pogledate u pretraivau, treba da mi verujete na re ovo je dobro.

Meutim, efekti dobrog izgleda nisu samo u domenu Webkit-zasnovanih pretraivaa, Safarija
i Chromea. Stranica na sledeoj adresi odlino funkcionie i u Firefoxu i drugim isto CSSzasnovanim reenjima:
http://designlovr.com/examples/dynamic_stack_of_index_cards/

[32]

[Mogu li HTML5 i CSS3 raditi za nas danas?]

Oigledno, ovi efekti nisu znaajni za svaki web sajt. Oni su savrena ilustracija progresivnog poboljanja. U pretraivaima koji ne podravaju efekte prikazane su samo statine slike.
Meutim, korisnici sa modernijim pretraivaima mogu da uivaju u vizuelnim poboljanjima.
Iako je ogranien broj pretraivaa koji podravaju CSS3 3D transformacije, podrka za CSS3
pravila, kao to su senke za tekst, gradijenti, zaobljeni uglovi, RGBA boje i viestruke pozadinske slike, je dobra i ova pravila pruaju fleksibilne naine pronalaenja reenja za uobiajene
probleme dizajna koji prate sve nas i koji nam zadaju glavobolju.

mogu li Html5 i css3 raDiti Za nas Danas?

Svaka alatka ili tehnika bi trebalo da se upotrebljava samo ako to aplikacija zahteva. Nama,
kao frontend programerima/dizajnerima, projekti obino dolaze sa ogranienim vremenskim
rokovima i izvorima koji su nam dostupni, da bismo ih napravili finansijski prihvatljivim za
odravanje.

[33]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Poto Internet Explorer 7 i 8 ne podravaju nove semantike elemente HTML-a 5 ili parametre
CSS-a 3 kao standardne, ako veina posetilaca web sajta koristi Internet Explorer 7 ili 8, nema
mnogo smisla koncentrisati se na izvore za kreiranje prilagodljivog HTML5 i CSS5 zasnovanog dizajna za konkretni sajt. To ne znai da je re o zadatku koji je nemogue izvriti. Kao
to emo videti u Poglavlju 9, Reavanje izazova prilagoavanja za razliite pretraivae,
postoji veliki broj alatki (koje se nazivaju polyfills, poto pokrivaju pukotine u starijim pretraivaima) za krpljenje pretraivaa (uglavnom starih verzija IE) koji ne podravaju funkcije
najnovijih pretraivaa, ali razuman pristup u vezi implementacije prilagodljivog web dizajna
od samog poetka je uvek najbolja politika.
Ja na poetku obino pitam sledee:

Da li klijent eli da podri najvee trite korisnika Interneta? Ako je odgovor

potvrdan, prilagodljiva metodologija je odgovarajua.

Da li klijent eli najistiju, najbru i najodriviju osnovu koda? Ako je odgovor

potvrdan, prilagodljiva metodologija je odgovarajua.

Da li klijent razume da iskustvo pretrage moe i treba da bude malo drugaije u

razliitim pretraivaima? Ako je odgovor potvrdan, prilagodljiva metodologija je
odgovarajua.

Da li klijent zahteva da dizajn izgleda identino u svim pretraivaima, ukljuujui i

Internet Explorer 8 i starije verzije? Ako je odgovor potvrdan, prilagodljiva
metodologija nije odgovarajua.

Da li e 70 ili vie procenata aktuelnih ili oekivanih posetilaca sajta najverovatnije

koristiti Internet Explorer 8 ili stariju verziju? Ako je odgovor potvrdan, prilagodljiva
metodologija nije odgovarajua.

Takoe je vano da ponovim da e, ako budet omoguava, moda biti prilike kada je mobilna
verzija web sajta skrojenog po meri mnogo bolja opcija od prilagodljivog dizajna. Da bih to
preciznije objasnio, reenja fokusirana na mobilne ureaje koja pruaju razliite sadraje korisnicima takvih ureaja nazivam mobilni web sajtovi. Ne verujem da bi se iko ko zagovara tehnike prilagodljivog web dizajna ljutio ako bih rekao da je prilagodljiv web dizajn odgovarajua
zamena za mobilni web sajt u svakoj situaciji.

[34]

[Prilagodljiv web dizajn nije magini metak]

Prilagodljiv web dizajn nije

magini metak
Uz rizik da poduavam ve iskusne, vano je da istaknem da prilagodljivi HTML5 i CSS3 web
dizajn nije magini metak i lek za sve izazove dizajna i prikazivanja sadraja. Kao to je uvek
bilo i u web dizajnu, specifinosti projekta (budet, demografski cilj i namena) bi trebalo da
diktiraju implementaciju. Meutim, prilagodljiv web dizajn, ako je budet ogranien i/ili programiranje celog ugovorenog mobilnog web sajta nije odgovarajua opcija, skoro uvek prua
bolje i sveobuhvatnije korisniko iskustvo nego standardni dizajn fiksne irine.

Web sajtovi ne treba da izgledaju isto

u svim pretraivaima
Od mene se esto trai da konvertujem postojei grafiki dizajn u standardne web stranice
zasnovane na HTML-u/CSS-u i jQueryju. Nikada se nije desilo da grafiki dizajneri imaju bilo
ta drugo na umu osim desktop verzije sajta fiksne irine kada kreiraju dizajn. Moj zadatak je
tada da kreiram savrenu interpretaciju piksela konkretnog dizajna u svakom poznatom pretraivau. Moj neuspeh ili uspeh u izvrenju ovog zadatka definie uspeh u oima mog klijenta,
grafikog dizajnera. Ovaj nain razmiljanja je posebno karakeristian za klijente koji su radili
medijski dizajn u tampanom izdanju. Njihovo rezonovanje je jednostavno razumeti; kompoziciju dizajna potpiu klijenti, oni ga prosleuju frontend dizajneru/programeru (vama ili meni),
a mi se tada trudimo da zavreni kod izgleda najbolje mogue za taj dizajn u svim glavnim
pretraivaima.
Meutim, ako ste ikada pokuali da dobijete moderni web sajt koji izgleda isto u Internet Exploreru 6 i 7 kao i u modernim, standardnim i kompatibilnim pretraivaima, kao to su Safari,
Firefox ili Chrome, razumeete tekoe pri obavljanju tog zadatka. esto mi je potrebno 30 procenata vremena/budeta namenjenog za projekat da bih ispravio sve mane i nedostatke u ovim
starijim pretraivaima. To vreme bi moglo da se utroi za kreiranje poboljanja i utedu koda
za veliki broj korisnika koji sajtove pregledaju u modernim pretraivaima, a ne za krpljenje
i hakovanje osnove koda da bi se za mali broj korisnika Internet Explorera obezbedili zaobljeni
uglovi, transparentne slike, korektno poravnanje elemenata formulara i tako dalje.
Naalost, jedini lek za ovaj scenario je obrazovanje. Klijentu je potrebno objanjenje zbog ega
je vredan prilagodljiv web dizajn i zbog ega zavreni dizajn ne treba da izgleda isto u svim prikazima i pretraivaima. Neki klijenti e to razumeti, neki nee - pojedinci ele da svi zaobljeni
uglovi i senke izgledaju identino i u Internet Exploreru 6!
Kada pristupam novom projektu, bez obzira da li je prilagodljiv dizajn primenjiv ili ne, pokuavam da mom klijentu objasnim sledee take:

Omoguavajui starijim pretraivaima da prikazuju stranice malo drugaije,

pokazujem da je kod lako odriv i jeftiniji za auriranje u budunosti.

[35]

[POGLAVLJE 1 Poetak rada sa HTML-om 5, CSS-om 3 i prilagodljivim dizajnom ]

Ako svi elementi izgledaju isto, ak i u starijim pretraivaima (na primer, u Internet
Exploreru 8 i starijim verzijama) dodaje se znaajan broj slika u web sajt. Zbog toga
e sajt biti sporiji, skuplji za kreiranje i tei za odravanje.

Prilagodljiv kod koji moderni pretraivai razumeju znai da je bri i web sajt. A bri
web sajt se rangira mnogo bolje u mainama za pretragu nego sporiji.

Broj korisnika koji koriste starije pretraivae se smanjuje, a broj korisnika koji
koriste moderne pretraivae raste podrimo ih!

Najvanije je da, podravajui moderne pretraivae, moete da uivate u

prilagodljivom web dizajnu koji odgovara razliitim prikazima pretraivaa na
razliitim ureajima.

Rezime
Objasnili smo ta se podrazumeva pod terminom prilagodljiv dizajn i pregledali smo odline
primere takvog dizajna koji koriste alatke i tehnike koje emo opisati u ovoj knjizi. Takoe smo
potvrdili da treba da promenimo razmiljanje sa desktop-centrinog dizajna na agnostiki stav
ureaja, prvo planirajui sadraj za najmanja podruja prikaza i postepeno poboljavajui nain
pregledanja od te take. Pregledom novih specifikacija HTML-a 5 ustanovili smo da postoje
odlini delovi ovog jezika koje danas moemo iskoristiti za na napredak u poslu. Konkretno,
novi semantiki jezik omoguava da napredujemo u poslu tako to kreiramo stranice sa manje
koda i vie znaenja, nego to je to do sada bilo mogue.
Pre nego to upotrebimo CSS3 za dodavanje vizuelnih efekata u na dizajn, kao to su gradijenti, zaobljeni uglovi, senke za tekst, animacije i transformacije, prvo emo ga upotrebiti za
mnogo vaniju ulogu. Upotrebom medija upita CSS-a 3 moi emo da usmerimo specifina
CSS pravila u specifinim prikazima. U sledeem poglavlju emo zapoeti najozbiljniju pretragu prilagodljivog web dizajna.

[36]