10 savjeta za Web dizajnere

Bilo da ste početnik u svijetu web dizajna, ili imate iskustva ali vam je pojam web standarada nov, ovaj članak je za vas. Sljedećih deset savjeta će doprinijeti kvaliteti vaših web stranica i približiti vas par koraka bliže modernom web dizajnu.

Napomena: gotovo svi linkovi vode na stranice na Engleskom jeziku.

Jednostavnost

Kada god je moguće, težite jednostavnim rješenjima. Bespotrebno kompliciranje vas može lako dovesti do problema. Valja krenuti od najjednostavnijih stvari, prema težima. Prije nego što nešto implementirate, pobrinite se da dovoljno dobro razumijete ono što radite.

Originalnost i prilagodba sadržaju

Osim što hrvatskim web prostorom dominira prilično zastarjeli dizajn, našim stranicama u pravilu nedostaje originalnosti. Redovito se srećemo sa već mnogo, mnogo puta prožvakanim shemama. Ovo, naravno, nije nužno loša stvar, ali potrebno je umijeće stručnjaka da bi stranica dobila na potrebnoj zanimljivosti.

Čest je slučaj i da se kod izrade stranica kreće sa izgledom (samim dizajnom), bez obraćanja pažnje na sadržaj. Svakoj stranici sadržaj diktira dizajn, pa od njega treba i krenuti.

Trebate li inspiraciju, potražite je na uglednim stranim galerijama, poput CSS Beauty.

Poštivanje pravila i Web standardi

Koristite pravilan kôd i redovito ga testirajte na HTML Validatoru i CSS Validatoru. Ako preskočite ovaj korak, vaša stranica možda neće funkcionirati kako treba. Pravilno izrađena web stranica se brže učitava, razumljivija je browserima i pretraživačima i — bolja je.

Cascading Style Sheets

Iako smo već zakoračili u 2006. godinu, domaća web dizajn scena nikako da uhvati korak sa ostatkom svijeta. Ako niste upoznati sa pojmom CSS-a, ne možete se nazivati web dizajnerom.

Više o CSS-u? W3 Schools, W3C CSS Tutorial: Starting With HTML + CSS.

Ukoliko se služite CSS tehnologijom, imajte na umu da izbjegavate CSS hackove. Umjesto pisanja hackova, pišite jednostavniji kôd!

Korištenje tablica

Služite li se još uvijek tablicama za pozicioniranje, koristite zastarjelu i pogrešnu metodu. Tablice, logično, služe jedino za tablične podatke. Primjerice, ako imate vozni red, sa nazivima vozila, polascima, odlascima, cijenama, itd., tablica je ispravno rješenje. Izrada kompletne stranice pomoću tablica je neispravna metoda. Pozicioniranje elemenata se radi CSS pozicioniranjem, pa ako se koristite tablicama, zamijenite ih DIV-ovima.

Preporučam čitanje sljedećih članaka: Throwing Tables Out the Window, Why tables for layout is stupid: problems defined, solutions offered i From Table Hacks to CSS Layout: A Web Designer’s Journey.

Semantika

Činjenica da vaš web site prolazi spomenute validatore, ne znači nužno da je sasvim ispravna. HTML elementi imaju svoje semantičko značenje i u skladu s njima se moraju koristiti. Primjerice, H1 element je naslov, prvi po važnosti. Dakle, unutar H1 elementa valja umetnuti najvažniji naslov na stranici. Paragraf teksta valja staviti unutar P elementa, važan dio teksta u STRONG element (ne B!), i tako dalje. Iako validator (još) ne prepoznaje ovakve propuste, radi se o značajnim greškama, kada govorimo o modernom web dizajnu.

Za odvajanje elemenata koristite padding i margin. Višestruki BR tagovi su neispravno rješenje.

Više o web semantici: Integrated Web Design: The Meaning of Semantics (Take I).

Posjećeni i neposjećeni linkovi

Da bi se korisnik lakše snašao na stranici, stilizirajte posjećene linkove. Oni bi trebali biti manje uočljivi od neposjećenih, odnosno stilizirani na način koji sugerira da je već kliknuo na njih. Ne pobrinete li se za to, zbuniti ćete posjetitelja i otežati mu navigaciju.

Više o stiliziranju linkova pročitajte ovdje.

Otvaranje linkova u novom prozoru

Držite li do kvalitete svojih stranica, tada zasigurno obraćate pažnju na njihov usability. Izbjegavajte otvaranje u novom prozoru, odnosno target="_blank" metodu. Ta metoda zbunjuje korisnika i onemogućava jednu od njegovih omiljenih funkcija — vraćanje unatrag (back button).

Izmislite nove načine da zadržite posjetioce na svojim stranicama, jer od ovog nećete imati koristi. Ako korisnik želi iz nekog razloga otvoriti stranicu u novom prozoru, on će to i učiniti i nema potrebe da to dizajner forsira.

Definiranje veličine teksta

Ne koristite pixele kod definiranja veličine teksta na stranici! Internet Explorer nije u stanju povećati takav tekst, pa će korisnici ostati zakinuti za ovu važnu funkciju browsera. Preporučam metodu koju je vrlo lako implementirati — za body definirajte font-size: 62.5%, a za naslove, paragrafe, liste i ostale elemente, proizvoljne veličine po sistemu 1em = 10px, 1.1em = 11px, 1.2em = 12px i tako dalje.

Više o ovoj metodi pročitajte ovdje.

Podrška za browsere

Iako je Internet Explorer još uvijek najzastupljeniji browser, već odavno ne zaslužuje titulu najboljeg. Ukoliko ne dizajnirate i za moderne preglednike, poput Firefoxa i Opere, vaš rad se neće ozbiljno shvaćati.

Resursi za Web dizajnere

Ukoliko vam je ovaj članak bio koristan, svakako proučite temu CSS resursi sa domaćeg Mi3dot.org.

Next Post:
Previous Post: