Dizajn stranica
Preglednici (engl. browser)
Izgled stranica nije jednak u svim preglednicima. Kod izrade, referentni bowser mi je bio Firefox 1.0.2. Nakon postizanja željenog izgleda u referentnom brower-u, stranice su pregledane u IE6, IE5.5, IE5.0, Opera 7.54u2, Netscape 4.08 (NS4) i Lynx 2.8.4pre.5. Zbog NS4, koji je poznat po lošoj podršci za CSS, napravljen je poseban stil (stylesheet) ns4.css koji definira izgled u tom pregledniku.
Za naprednije preglednike postoji više stilova koje korisnik može mijenjati (zbog IE baziranih preglednika, koji ne daju korisniku mijenjati stilove, napravljena je izmjena stilova putem javascripta).
Pregled stranica u Lynx-u (tekstualni preglednik) bitan je postupak kod izrade stranica jer današnji pretraživači (poput Google-a) "vide" stranice u tekstualnom obliku.
Raspored elemenata (layout)
Postavljanjem semantički logičnog (X)HTML i odvajanjem cjelina, moguće je (kod grafičkog prikaza) imati više rasporeda elemenata (vidi poziciju loga i menija u stilovima default i logo). Pokazuje se, kako pozicija elementa kod grafičkog prikaza, ne ovisi o njegovoj poziciji u XHTML kodu stranice.
Postavljanje navigacije (menija) na lijevu ili desnu stranu je uobičajeno. Analiza HTML stranica danas, pokazuje kako je postavljanje loga u gornji lijevi kut standardni izbor dizajnera.
Raspored elemenata za default i logo stilove izveden je bez apsolutnog pozicioniranja (upotrebom float: left; odnostno float: right;). Kad bi htio napraviti raspored elemenata koji značajnije odstupa od rasporeda elemenata u XHTML kodu, koristio bih apsolutno pozicioniranje u CSS-u.
Izgled elemenata
U startu treba prihvatiti, kako su pravila koja navodimo u CSS-u, samo naš prijedlog izgleda, koji će manje ili više biti prihvaćen kod prikaza stranice.
Riječ kaskada u CSS označava kako se primjenjuju pravila (rule). Konačni izgled dobiva se primjenom svih pravila koja su navedena ili se podrazumijevaju (default). Svaki preglednik ima svoju definiciju standardnog (default) izgleda i od toga polazimo. Zatim primjenjujemo sva pravila definirana u vanjskim CSS datotekama po redu kako su navedena. Slijedi primjena pravila iz <head> dijela html stranice, a zatim pravila direktno navedena u XHTML tagu (primjer: <hr style="height: 3px;" />). Na kraju, primjenjuju se pravila koja je definirao korisnik (posjetioc stranice) u svom pregledniku. Izuzetak od ovog porekta su pravila s !important klauzulom.
Sva svoja CSS pravila definirao sam u vanjskim CSS datotekama (ne postoji definicija izgleda u XHTML kodu). Za posjetioce s NS4 preglednikom, definirao sam pravila u vanjskoj datoteci "ns4.css" (NS4 razumije jednostavna pravila, kod složenijih njegovo ponašanje je nepredvidljivo; to ide čak do rušenja preglednika). Kako NS4 ignorira vanjske datoteke navedene s media="projection", u njima sam definirao pravila za naprednije preglednike.
Poseban izgled stranice definiran je za ispis na printer u datoteci "print.css" (preko media="print" atributa). Nepotrebno je raditi posebnu stranicu za ispis: treba samo definirati pravila koja se tada primjenjuju. Normalno je izbaciti pozadinske slike i boje (radi: crno-bijelih printera, lošeg ispisa printera u boji, brzine ispisa, uštede tonera). Iz istih razloga izbacuje se nepotrebna navigacija. S druge strane, ubacuju se adrese linkova iza njihovih tekstualnih reprezentacija (na papiru se, normalno, ne vidi kuda vodi link, nego samo tekst unutar <a> taga). Izgled stranice za ispis vidi se na Print Preview opciji menija.
CSS trikovi i savjeti
Kako bi posjetioci s različitim (grafičkim) preglednicima podjednako vidjeli stranicu, postavljam u startu zajedničku osnovu: za sve elemente stranice definiram nepostojeće margine i padding (postavljam ih na nulu).
Kodiranje navigacije (menija) u XHTML-u putem liste (<ul>), automatski prikazuje prihvatljiv izgled u preglednicima koji ne podržavaju CSS. Navedena pravila u CSS-u samo će "uljepšati" izgled u grafičkim preglednicima.
Pravila koja definiraju izgled linkova navode se prema "LoVe HAte" mnemoniku. Velika slova podsjećaju na imena pseudo-klasa u CSS-u (:link, :visited, :hover, :active) te njihov poredak za ispravan prikaz (sjetimo se kako je poredak pravila u CSS-u bitan !). Ja sam koristio ista CSS pravila za parove (:link i :visited) te (:hover i :active, ili :active:hover).
Prikaz logo slika izveden je primjenom FIR-a, tehnike koja treba prikazati sliku ako je to moguće, a u suprotnom tekst koji će "vidjeti" ne-grafički preglednici.
Optimizacija
SEO je marketinški trik koji donosi prihode, a nekima je i razlog za život (raison d'etre). Konzistentnim pristupom izradi stranica, koji uključuje WAG, postižemo željene rezultate. Pregledom Web Page Speed Report, posebno dijela Analysis and Recommendations, vidimo koje stvari treba popraviti.
Prostor za optimizaciju ovih stranica, svodi se na eliminaciju :hover slika, te optimiranje samih jpg slika (idealno, trebaju se prenesti unutar jednog mrežnog (tcpip) paketa (manje od 1160 byte-a).
Primjena
Dizajn site-a izveden je primjenom CSS tehnologije na XHTML 1.0. Prema A List Appart preporukama za raspored elemenata (layout) napravljeni dizajn dinamički se raspoređuje prema veličini prozora preglednika (browser-a, user agent-a). Takav dizajn često se naziva liquid design.
U CSS style-ovima koriste se svojstva definirana u CSS Level-2.
Kontrola (validacija) CSS-a napravljena je na online CSS validatoru. Možete provjeriti rezultate.