10 savjeta za Web dizajnere
Web dizajn - 16/1/2006 at 11:49 CET
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.
Hvala Bojane na odličnom članku. Mislim da si pokrio sve važnije probleme o kojima početnici moraju voditi brigu, a često ne vode.
Author: Igor Jelen, January 22nd, 2006 at 14:30
Dobar tekst komš¡ija. ;) Bavio sam se i ja istim jevanđelisanjem na svom blogu.
Svako dobro.
Author: Dragan Babić, January 23rd, 2006 at 21:51
Hvala obojici.
@Dragan: tvoj sajt mi je u bookmarksima :)
Author: Bojan, January 23rd, 2006 at 22:11
To je lepo znati. :)
Ne znam kakva je situacija kod vas povodom web standarda, koliko mi je poznato–debelo ste poodmakli i imate jaku scenu, bar koliko mogu da primetim koliko se muvam po “domaćem” netu.? Kakva je situacija po tvojoj proceni?
Author: Dragan Babić, January 23rd, 2006 at 22:37
Pa, mogu reći da nije ni toliko loša, kad malo bolje razmislim. Sve je više tableless sajtova, iako dolaze sporo.
Dosta naših sajtova je dospjelo u ugledne CSS galerije, primjerice Matija i njegov Trinet, Pixelpusher, te Maratz i Web.burza, koji uvijek visoko dižu “letvicu”.
Naravno da se velika većina web dizajnera još uvijek služi tablicama za layout, ali i to će se sa vremenom popraviti, nadam se.
Author: Bojan, January 23rd, 2006 at 23:12
Stvari se krecu, polako, ali u dobrom smjeru. Nekako mi se jedino cini da su neke firme, za koje sam mislio da ce se do danas probiti na svjetskoj sceni, potonule - nema ih vise niti na domacoj (ne smijem spominjati imena, naravno). Vjerojatno je razlog tome velika fluktuacija ljudi medju firmama.
Koliko vidim, velik broj jako dobrih dizajnera/developera rade kao freelanceri (Bojan, naprimjer) i promicu vaznost izrade web-stranica prema standardima na svojim blogovima i po forumima, sto ubrzava cijeli proces “peobrazbe” developera. Najtezi je ipak taj dio - utjecati na mentalni sklop i natjerati ljude da odbace dosadasnji nacin rada i krenu uciti.
Author: Matija Turčin, January 24th, 2006 at 13:16
Ha! Mi (u burzi) smo imali prilike raditi na velikom rasponu projekata gdje su se isfiltrirale best practice metode, tako da je sad cijelokupni proces osmiš¡ljavanja client-side strukture više-manje rutina.
Što kaže Matija – jednom kad počneš razmišljati na taj način, jednostavno ti to dolazi kao najnormalnije.
Također, za bolju penetraciju standarda dosta pomažu i kvalitetni, a besplatni standards compliant CMS-ovi. Masa zatabličarenih siteova je nastalo na cijenom relativno prihvatljivim (čitaj: besplatnim), ali ipak zastarjelim sustavima (odnosno njihovim modifikacijama, prodavanim pod ‘naš CMS’). Sadržaj mnogih baza je tako zagađen markupom za layout i transformacija je jako otežana.
Zadnje, ali ne i manje važno – bez obzira radi li se o web brošuri od pet stranica ili o portalu sa 4000 članaka, treba (s oproštenjem) zagrist govno i izgurat stvar do kraja.
Author: maratz, January 28th, 2006 at 13:46
As I even can’t ‘translate’ the content here (but I can imagine what’s it about :-]) I’m very thankful that you’ve thrown my focus back on the seybold-link. Now it’s finally bookmarked.
Author: mkorsakov, February 1st, 2006 at 10:02
sve pohvale…
posle procitanih komentara i linkova koje ste postovali ovde , sasvim sigurno bezim iz tabelarne zone… :), , citao o css-u i ranije ali nisam imao vremena da se ozbiljnije pozabavim istim, neke stvari mi i dalje nisu jasne, ali se nadam da cu vremenom skontati i to…
poz.
Author: bane, February 4th, 2006 at 1:33
Samo da pohvalim post.
Što se tiče domaće web scene definitivno se slažem da je krenulo na bolje sve je više CSS sajtova, i sve ih više vidim po CSS galerijama no još uvjek tu ima prilično toga što ne samo da je zastarjelo već je i ružno za vidjeti. Ide na bolje ali prilično sporo kao što uglavnom sve stvari kod nas idu. :) pozz.
Author: monkey, November 22nd, 2006 at 23:56
Pohvalno! Kvalitetan članak!
Author: crystal, May 5th, 2007 at 10:59