Web Standards Checklist

Izvor: Russ Weakley, Max Design - http://www.maxdesign.com.au/
Prevod: Goran Mitić, GuruGorg.Network - http://www.gurugorg.net/

Web standardi - više od “table-free dizajna”

Termin web standardi ne znači isto za sve ljude. Za neke, to je ‘table-free dizajn’, za druge to je ‘pisanje validnog koda’. Inače, web standardi su mnogo više od toga. Sajt napravljen po web standardima prati standarde (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG itd) i najbolju praksu (validnost koda, pristupačanost koda, semantički korektan kod, user-friendly URL-ove itd).

Drugim rečima, sajt napravljen po web standardima, idealno, treba da je sačinjen od malih fajlova, da je čist, baziran na CSS, dostupan po različitim browser-ima, jednostavni za korišćenje i dostupan za pretraživače.
O listi

Ovo nije krajnja checklist-a. Verovatno ima mnogo stvari koje treba dodati. Takođe, ovo ne treba da bude lista koja koja će se koristiti za svaki sajt koji se radi. Ona je samo vodič koji služi:
da pokaže širinu web standarda
kao koristan alat za developere tokom faza u izgradnji web sajtova
kao pomoć developerima koji su zainteresovani da se u svom radu približe web standardima.
Web Standards Checklist
Kvalitet koda
Da li sajt ima korektan Doctype?
Da li sajt ima karakter set?
Da li sajt ima Validan (X)HTML?
Da li sajt ima Validan CSS?
Da li sajt sadrži CSS hack-ove?
Da li sajt sadrži nepotrebne klase ili id-ove?
Da li je kod dobro struktuiran?
Da li sajt sadrži prekinute linkove (broken links)?
Kakve su performanse sajta u pogledu odnosa brzina/veličina strane?
Da li sajt ima grešaka u JavaScript-u?
Stepen odvojenosti sadržaja od prezentacije
Da li sajt koristi CSS u svim aspektima prezentacije (fontovi, boje, padding, ivice itd)?
Da li su svi dekorativni elementi smešteni u CSS, ili se nalaze u (X)HTML?
Dostupnost korisnicima
Da li su “alt” atributi korišćeni za opis svih slika?
Da li sajt više koristi relativne jedinice od apsolutnih za definisanje veličine teksta?
Da li se ruši neki od delova layout-a ako se poveća veličina fonta?
Da li na sajtu postoje uočljivi meniji za povratak?
Da li sajt ima forme dostupne svim korisnicima?
Da li sajt ima regularno izrađene tabele?
Postoji li usklađenost kontrasta/svetlosti boje?
Da li je istaknuta boja za kritične informacije?
Koliko brzo rade padajući meniji (zbog korinika sa usporenim motoričkim sposobnostima)?
Da li su svi linkovi opisni (zbog slepih korisnika)?
Dostupnost na različitim uređajuma
Da li sajt radi pristojno i na novim i na starim browser-ima?
Da li je sadržaj dostupan u slučaju da je CSS isključen ili nije podržan?
Da li je sadržaj dostupan u slučaju da je pregled slika isključen ili nije podržan?
Da li sajt radi u tekstualnim browser-ima kao što je Lynx?
Kako sajt izgleda kada se odštampa?
Kako sajt izgleda na Hand Held uređajima?
Da li sajt sadrži detaljne meta podatke?
Da li sajt radi korektno u različitim rezolucijama monitora?
Jednostavnost korišćenja
Postoji li jasna vizuelna hijerarhija?
Da li su naslovi izdvojeni i lako prepoznatljivi?
Da li sajt poseduje jasnu navigaciju?
Da li sajt ima usklađenu navigaciju?
Da li su linkovi podvučeni?
Da li sajt sadrži odgovarajući jezik?
Da li sajt ima mapu sajta i kontakt stranu? Da li su lako dostupne?
Kod većih sajtova, da li postoji interni pretraživač?
Da li postoji link ka home stranici na svakoj strani sajta?
Da li su posećeni linkovi (visited links) vidno izdvojeni sa posebnom bojom?
Site management
Da li sajt ima smislene i uslužne 404 error strane koje rade sa bilo koje lokacije sajta?
Da li sajt ima user-friendly URL-ove?
Da li URL-ovi rade bez “www”?
4. Da li sajt ima svoj favicon?
1. Kvalitet koda

1.1 Da li sajt ima korektan Doctype?

Doctype (skr. document type declaration) daje informaciju validatoru o korišćenoj verziji (X)HTML-a, i mora se nalaziti na vrhu svake web stranice. Doctype je ključni element dobre web stranice: vaš markup CSS ne mogu proći validaciju bez njega.
http://www.alistapart.com/articles/doctype/

Više o tome:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
http://gutfeldt.ch/matthias/articles/doctypeswitch.html

1.2 Da li sajt ima karakter set?

Ukoliko user agent (npr. browser) nije u mogućnosti da detektuje karakter enkodinga koji je korišćen na web dokumentu, korisnicima će, možda, biti prikazivan nečitak tekst. Ova informacija je posebno važna za ljude koji rade na višejezičnim sajtovima, ali je deklarisanje karakter enkodinga ali i za sve koji pišu XHTML/HTML il CSS.
http://www.w3.org/International/tutorials/tutorial-char-enc/

Više o tome:
http://www.w3.org/International/O-charset.html

1.3 Da li sajt ima Validan (X)HTML?

Validan kod se renderuje brže i bolje od koda sa greškama odnosno koda koji nije prošao test validacije. Browser-i sve više prate standarde pa je i i sve više neophodno pisati HTML koji je validan tj. standardan.
http://www.maxdesign.com.au/presentation/sit2003/06.htm

Više o tome:
http://validator.w3.org/

1.4 Da li sajt ima Validan CSS?

Potrebno je otkloniti sve greške kako u HTML kodu tako i u CSS-u, kako bi se otklonila svaka sumnja da ćemo dobiti loše prikazanu web stranicu.
http://www.meyerweb.com/eric/articles/webrev/199904.html

Više o tome:
http://jigsaw.w3.org/css-validator/

1.5 Da li sajt sadrži CSS hack-ove?

Hack-ovani kod je pitanje izbora onoga koji piše kod i specifičnih zahteva u pogledu dizajna.
http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html

Više o temi:
http://css-discuss.incutio.com/?page=CssHack
http://css-discuss.incutio.com/?page=ToHackOrNotToHack
http://centricle.com/ref/css/filters/

1.6 Da li sajt sadrži nepotrebne klase ili id-ove?

Najčešće, developeri dobro poznaju CSS a slabije XHTML. Tako je HTML kod uglavnom pun nepotrebnih div-ova i id-ova. Ovo, dalje, naravno rezultira prenatrpan CSS kod.
http://www.clagnut.com/blog/228/

1.7 Da li je kod dobro struktuiran?

Semantički korektan markup sadrži html elemente koji su upotrebljeni za svrhe za koje i postoje. Dobro struktuiran HTML dostupan je širokom krugu user agenata (browserima bez podrške za CSS, tekstualim browserima, PDA uređajima, pretraživačima itd.)
http://www.maxdesign.com.au/presentation/benefits/index04.htm

Više informacija:
http://www.w3.org/2003/12/semantic-extractor.html

1.8 Da li sajt sadrži prekinute linkove (broken links)?

Prekinuti linkovi mogu frustrirati korisnike i potencijalna su šansa da oni napuste sajt. Prekinuti linkovi mogu takođe sprečiti pretraživače da propisno indeksiraju vaš sajt.
http://validator.w3.org/checklink/

1.9 Kakve su performanse sajta u pogledu odnosa brzina/veličina strane?

Ne mogu da čekam… To je najčešći odgovor na pitanje zašto najčešće napustaju sajtove, pitanje postavljeno u jednom od web upitnika. Čak i korisnike broadband-a može iznervira i sporo učitavanje strane.
http://www.websiteoptimization.com/speed/

1.10 Da li sajt ima grešaka u JavaScript-u?

Internet Explorer omogućava da uključite debugger koji u popup-u daje informacije o greškama u javascript-u na vašem sajtu. Ova funkcija se uključuje u ‘Internet Options-ima’ na Advanced tabu. Dečekirajte ‘Disable script debugging’.
2. Stepen odvojenosti sadržaja od prezentacije

2.1 Da li sajt koristi CSS u svim aspektima prezentacije (fontovi, boje, padding, ivice itd)?

Koristite CSS za kontrolu layout i prezentacije
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets

2.2 Da li su svi dekorativni elementi smešteni u CSS, ili se nalaze u (X)HTML?

Cilj koji treba da ima svaki web developer je da odstrani kompletnu prezentaciju iz html koda, kako bi ga učinili čistim i semantički korektnim.
http://www.maxdesign.com.au/presentation/benefits/index07.htm
3. Dostupnost korisnicima

3.1 Da li su “alt” atributi korišćeni za opis svih slika?

Treba obezbediti tekstualni ekvivalent za svaki netekstualni element koda
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent

3.2 Da li sajt više koristi relativne jedinice od apsolutnih za definisanje veličine teksta?

Koristite pre relativne nego apsolutne jedinice u markup jeziku i CSS
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units

Dodatne informacije:
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
http://www.clagnut.com/blog/348/

3.3 Da li se ruši neki od delova layout-a ako se poveća veličina fonta?

Napravite jednostavan test. Pogledajte kako se ponaša vaš websajt u browser-ima u kojima je moguće lako povećati tekst. Povećajte veličinu teksta. Još jednom. I opet… Pogledajte vaš sajt. Da li se izgled strane drži još uvek? Developeri se plaše da priznaju činjenicu da ne koriste svi default-nu veličinu teksta.

3.4 Da li na sajtu postoje uočljivi meniji za povratak?

Metod treba da omogući korisnicima da zaobiđu ponavljajuće linkove za navigaciju.
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

Grupišite srodne linkove, identificirajte grupu (za user agente), i, obezbedite bypass za grupu
http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links

…slepi posetioci nisu jedini kojima smeta previše linkova u navigacionom području.
http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020

Više:
http://www.niehs.nih.gov/websmith/508/o.htm

3.5 Da li sajt ima forme dostupne svim korisnicima?

Forme nisu jednostavne za korišćenje za osobe sa invaliditetom. Navigacija po strani sa pisanim sadrajima je jedno a kretanje po poljima za unos je drugo
http://www.htmldog.com/guides/htmladvanced/forms/

Više informacija:
http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp
http://accessify.com/tutorials/better-accessible-forms.asp

3.6 Da li sajt ima regularno izrađene tabele?

U tabele sa podacima, stavite i heder redove i kolone… U tabele podataka koje imaju dve ili više logičkih nivoa hedera kolona i redova, koristite markup za vezu ćelija podataka sa ćelijama hedera.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers

Više:
http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp
http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
http://www.webaim.org/techniques/tables/

3.7 Postoji li usklađenost kontrasta/svetlosti boje?

Trudite se da kombinacija foreground i background boja bude dovoljno kontrastna, čak i za ljude koji imaju problem sa vidom.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast

More:
http://www.juicystudio.com/services/colourcontrast.asp

3.8 Da li je istaknuta boja za kritične informacije?

Sve informacije koje su obeležene jačim bojama treba da budu istaknute i bez upotrebe boja
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey

Postoje tri osnovna nedostatka vezana za boje; Deuteranopija (nedostatak crvene/zelene boje), Protanopija (sličan oblik nedostatka crvene/zelene boje) i Tritanopija (nedostatak plave/žute boje - veoma retko).

Linkovi:
http://colourfilter.wickline.org/
http://www.toledo-bend.com/colourblind/Ishihara.html
http://www.vischeck.com/vischeck/vischeckURL.php

3.9 Koliko brzo rade padajući meniji (zbog korinika sa usporenim motoričkim sposobnostima)?

Korisnici sa usporenim motoričkim sposobnostima mogu imati poteškoća ukoliko je odgovor menija suviše brz.

3.10 Da li su svi linkovi opisni (zbog slepih korisnika)?

Linkovi treba da imaju značenje čak i ako se posmatraju van teksta u kome se nalaze. Linkovi takođe moraju biti sažeti.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
4. Dostupnost na različitim uređajuma

4.1 Da li sajt izgleda pristojno i na novim i na starim browser-ima?

Pre početka izgradnje CSS-baziranog layout-a, Treba da odlučite koji će browser-i biti podržani i stepen u kome će biti podržani.
http://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2 Da li je sadržaj dostupan u slučaju da je CSS isključen ili nije podržan?

Neke osobe mogu posetiti vaš sajt i sa browserom koji ne podržava CSS ili ima isključen CSS. Ako je struktura sadržaja dobra, ovo neće biti problem.

4.3 Da li je sadržaj dostupan u slučaju da je pregled slika isključen ili nije podržan?

Neke osobe posećuju sajtove sa browserima kojima su isključene slike - često su to osobe sa sporom Internet konekcijom. Sadržaj treba da bude dostupan i ovim osobama.

4.4 Kako se sajt ponaša u tekstualnim browser-ima kao što je Lynx?

Lynx prikazuje sadržaj bez slika i sa isklučenim CSS-om. U ovom slučaju je ključno dobro struktuiranje sadržaja strana.

Više na:
http://www.delorie.com/web/lynxview

4.5 Kako sajt izgleda kada se odštampa?

Probajte uzeti bilo koji (X)HTML dokument i napraviti style za štampu.
http://www.alistapart.com/articles/goingtoprint/

Više na:
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print

4.6 Kako sajt izgleda na Hand Held uređajima?

Važnost podrške za ove uređaje leži u ciljnoj grupi vašeg sajta.

4.7 Da li sajt sadrži detaljne meta podatke?

Meta podaci su informacije za web koje su namenjeni pretraživačima.
http://www.w3.org/Metadata/

Meta podaci su struktuirane informacije koji se kreiraju kako bi opisali neke resurse sa podacima. Drugim rečima, meta podaci su ‘podaci o podacima’.

4.8 Da li sajt radi korektno u različitim rezolucijama monitora?

Opšte prihvaćena činjenica među developerima je da se prosečna veličina monitora postepeno povećava kod korisnika. Takođe se pretpostavlja da prosečan korisnik ima rezoluciju od 1024px. Ali šta je sa korisnicima sa manjom rezolucijom i sa hand held uređajima? Da li su i oni ciljna grupa vašeg sajta te će biti uskraćeni za kvalitetan prikaz vašeg sajta?
5. Jednostavnost korišćenja

5.1 Postoji li jasna vizuelna hijerarhija?

Organizujte i postavite prioritete sadržaja na stranicama koristeći veličinu i naglašavanje teksta i povezivanje sadržaja
http://www.great-web-design-tips.com/web-site-design/165.html

5.2 Da li su naslovi izdvojeni i lako prepoznatljivi?

Koristite naslove u skladu sa strukturom dokumenta i prema specifikaciji
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings

5.3 Da li sajt poseduje jasnu navigaciju?

Vaš sistem navigacije treba da daje posetiocu vašeg sajta informaciju na kojoj se strani nalazi i na koju može otići.
http://www.1stsitefree.com/design_nav.htm

5.4 Da li sajt ima usklađenu navigaciju?

Kada svaka stranica vašeg sajta ima konzistentan stil prezentacije, posetioci se lako snalaze u navigaciji i brzo dolaze do traženih informacija
http://www.juicystudio.com/tutorial/accessibility/navigation.asp

5.5 Da li sajt sadrži odgovarajući jezik?

Korišćenje čistog i jasnog jezika promoviše efektivnu komunikaciju. Ovo je vrlo važno u slučajevima kada posetiocima nije maternji jezik jezik vašeg sajta.
http://www.juicystudio.com/tutorial/accessibility/clear.asp

5.6 Da li sajt ima mapu sajta i kontakt stranu? Da li su lako dostupne?

Mnoge mape sajtova ne uspevaju da predstave sve nivoe informacione strukture sajta. Usability testovi ukazuju da korisnici ne mogu naći mapu sajta. Kompleksnost je sledeći problem: mapa treba da bude mapa a ne strana na kojoj će se praviti navigacioni eksperimenti.
http://www.useit.com/alertbox/20020106.html

5.7 Kod većih sajtova, da li postoji interni pretraživač?

Iako interni pretraživač nije potreban u slučaju malih sajtova a mnogi korisnici ovaj alat nikada i ne koriste, ipak ga obavezno treba uvrstiti na većim sajtovima kao alat za pomoć u navigaciji.

5.8 Da li postoji link ka home stranici na svakoj strani sajta?

Neki korisnici vole da se vrate na home stranicu pre odlaska na drugi deo sajta.

5.9 Da li su linkovi podvučeni?

Kako bi povećali klikabilnost, obojte i podvucite linkove u tekstu. Korisnici ne bi trebalo da pogađaju gde se link nalazi.
http://www.useit.com/alertbox/20040510.html

5.10 Da li su posećeni linkovi (visited links) vidno izdvojeni sa posebnom bojom?

Veoma je važno znati da posetiopci treba da ynaju koje su stranice već obišli kako im se ne bi ponovo vraćali.
http://www.useit.com/alertbox/20040503.html
6. Site management

6.1 Da li sajt ima smislene i uslužne 404 error strane koje rade sa bilo koje lokacije sajta?

Ukucali ste URL u address baru ili kliknuli na nepostojeći link i izgubili se. User-friendly website će posetiocima pomoći u ovakvim situacijam da jući im informacije o problemu.
http://www.alistapart.com/articles/perfect404/

6.2 Da li sajt ima user-friendly URL-ove?

Mnogi pretraživači (uz nekoliko izuzetaka - kao Google) neće indeksirati url koji ima znak pitanja ili neki drugi karakter (kao uzvičnik ili znak jednakosti) u URL-u… nije dobro za sajt kad ljudi ne mogu da ga nađu.
http://www.sitepoint.com/article/search-engine-friendly-urls

Jedan od najkritičnijih elemenata weba sa tačke gledišta korisničkog interfejsa je URL. Tako, ako je on kratak, logičan, i samo-korektibilan (npr, .net automatski redirektuje na .com), URL je i user-friendly.
http://www.merges.net/theory/20010305.html
http://www.sitepoint.com/article/search-engine-friendly-urls
http://www.websitegoodies.com/article/32
http://www.merges.net/theory/20010305.html

6.3 Da li URL-ovi rade bez “www”?

U slučaju da posetilac ukuca adresu vašeg sajta bez “www”, treba obezbediti da mu se otvori lokacija sajta.

6.4 Da li sajt ima svoj favicon?

Favicon je sličica koja je vidljiva u više rezolucija (ikonica) koju poseduje gotovo svaki profesionalno urađen sajt. Favicon pomaže webmasteru u promociji sajta, jer je posebno istaknut u okviru korisničkog browser-a.
http://www.favicon.com/

Favicon-i nisu krajnje neophodni. Ipak, ako nisu uključeni, uzrokuju 404 grešku u vašem logu (statistici sajta). Browser-i kao IE ih potražuju od servera ako je sajt stavljen u favorite. Ako favicon nije dostupan, 404 greška može biti generisana. Isto važi i za “robots.txt” fajl.

Source: [Globalno Selo]