Web-standardien tarkistuslista

Kirjoittaja: Russ Weakley, Max Design. Alkuperäisen presentaation pohjalta kääntänyt Kalamuki.


Mitä web-standardit ovat?

Käsite ’web-standardit’ voi tarkoittaa eri asioita eri ihmisille. Joillekin se on web-sivustojen tekemistä ilman taulukoita, toisille validin koodin käyttämistä. Web-standardit ovat kuitenkin paljon laajempi asia. Web-standardit voisi määritellä:

sitoutumiseksi standardeihin (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG jne.) ja pyrkimykseksi hyviin toimintatapoihin (validi koodi, esteetön koodi, semanttisesti oikeaoppinen koodi, käyttäjäystävälliset URLit jne.).

Toisin sanoen…

Sivuston, joka on rakennettu web-standardeilla, pitäisi olla sutjakka, siisti, CSS-pohjainen, esteetön, käytettävä ja ystävällinen hakukoneille.

Tarkistuslistasta

Tämä lista ei ole kaikkien tarkistuslistojen äiti. Paljon voitaisiin lisätä. Tämä on yksinkertaisesti lähtökohta ja tätä voi käyttää:

  • osoittamaan web-standardien laajuutta
  • web-kehittäjien kätevänä työkaluna sivuston tuotantovaiheeseen
  • apuna web-kehittäjille, jotka ovat kiinnostuneita siirtymään kohti web-standardien käyttöä

Tarkistuslista on jaettu kuuteen osioon:

  1. Koodin laatu
  2. Kuinka tarkasti sisältö ja esitystapa on erotettu toisistaan?
  3. Esteettömyys käyttäjille
  4. Esteettömyys laitteille
  5. Peruskäytettävyys
  6. Sivuston hallinta

1. Koodin laatu

  1. Käytetäänkö sivustossa oikeaa dokumenttityyppiä?
    http://www.w3.org/QA/2002/04/valid-dtd-list.html
  2. Onko merkistö määritetty sivustolla?
    http://www.w3.org/International/O-charset.html
  3. Käytetäänkö sivustossa validia (X)HTML:ia?
    http://validator.w3.org/
  4. Käytetäänkö sivustossa validia CSS:ia?
    http://jigsaw.w3.org/css-validator/
  5. Käytetäänkö sivustossa CSS-hackeja?
  6. Käytetäänkö sivustossa turhia class- tai id-määritteitä?
  7. Onko koodi rakenteeltaan hyvää?
    http://www.w3.org/2003/12/semantic-extractor.html
  8. Onko sivustolla rikkinäisiä linkkejä?
    http://validator.w3.org/checklink
  9. Kuinka hyvin sivusto toimii nopeuden/sivukoon suhteen?
    http://www.websiteoptimization.com/services/analyze/
  10. Onko sivustolla Javascript-virheitä?

2. Kuinka tarkasti sisältö ja esitystapa on erotettu toisistaan?

  1. Käytetäänkö CSS:ia kontrolloimaan kaikkia esitystavan eri piirteitä (fontit, väri, täyte, rajat jne.)?
  2. Onko kaikki kuvituskuvat määritelty CSS:ssa vai näkyvätkö ne (X)HTML:ssa?

3. Esteettömyys käyttäjille

  1. Käytetäänkö alt-määritteitä kaikissa merkityksellisissä kuvissa?
  2. Käytetäänkö sivustolla suhteellisia vai ehdottomia yksiköitä tekstin koon määrittämiseen?
  3. Hajoaako mikään kohta taitossa, jos fonttikokoa suurennetaan?
  4. Käytetäänkö sivustolla näkyviä pikalinkkejä (skip menus)?
  5. Käytetäänkö sivustolla esteettömiä lomakkeita?
  6. Käytetäänkö sivustolla esteettömiä taulukoita?
  7. Ovatko värit riittävän kirkkaita ja kontrastit selkeitä?
  8. Käytetäänkö kriittisen informaation osoittamiseen yksistään väriä?
  9. Toimivatko pudotusvalikot viiveellä (käyttäjille, joilla on heikot motoriset kyvyt)?
  10. Ovatko kaikki linkkitekstit kuvaavia (sokeille käyttäjille)?

4. Esteettömyys laitteille

  1. Toimiiko sivusto hyväksyttävästi niin uusilla kuin vanhoillakin selaimilla?
  2. Onko sisältö saavutettavissa, mikäli CSS on kytketty pois käytöstä tai selain ei tue sitä?
  3. Onko sisältö saavutettavissa, mikäli kuvat on kytketty pois käytöstä tai selain ei osaa näyttää niitä?
  4. Toimiiko sivusto tekstiselaimilla, kuten Lynxillä?
  5. Toimiiko sivusto hyvin tulostettaessa?
  6. Toimiiko sivusto hyvin kannettavissa laitteissa?
  7. Sisältääkö sivusto yksityiskohtaista metadataa?
  8. Toimiiko sivusto hyvin eri kokoisissa selainikkunoissa?

5. Peruskäytettävyys

  1. Käytetäänkö selkeää visuaalista hierarkiaa?
  2. Erottuvatko otsikkotasot hyvin?
  3. Onko sivustolla helposti ymmärrettävä navigointi?
  4. Onko sivustolla johdonmukainen navigointi?
  5. Onko linkit alleviivattu?
  6. Käyttääkö sivusto johdonmukaista ja asiaankuuluvaa kieltä?
  7. Käytetäänkö sivukartta- ja yhteystietosivua? Onko ne helppo löytää?
  8. Onko (isolla) sivustolla hakutyökalu?
  9. Onko sivuston jokaisella sivulla linkki etusivulle?
  10. Merkitäänkö vieraillut linkit selkeästi omalla värillään?

6. Sivuston hallinta

  1. Onko sivustolla merkityksellinen ja avulias 404-virhesivu, joka toimii millä sivuston tasolla tahansa?
  2. Käytetäänkö ystävällisiä URLeja?
  3. Toimivatko URLit ilman www:ia?
  4. Onko sivustolla favicon?

Tästä listasta

Tämä Russ Weakleyn, Max Design, kirjoittama tarkistuslista hahmoteltiin raakamuodossa Web Standards -postituslistalla toukokuussa 2004. Se esitettiin Sydneyn Web Standards Groupille 5.8.2004.

Lista on saatavilla myös

CSS-lunttilappu

Tämä on suomenkielinen versio Dave Shean julkaisemasta ja ylläpitämästä CSS Crib Sheetista. Käännös: Yoji Hirabayashi. Lupa julkaisuun on pyydetty ja saatu. Mikäli löydät käännöksestä virheitä tai muita epäloogisuuksia, ota yhteyttä. Kiitokset kommenteista ja korjausehdotuksista Pikselille, Zvonalle ja Stüldt HÃ¥jtille.


Käyttäessäsi CSS:ia sivuston suunnittelemiseen, tulet varmasti törmäämään sen oikkuihin ja lyömään päätäsi seinään yrittäessäsi ratkaista ongelmia. Tämä on yritys helpottaa design-prosessia ja tarjota pikainen ohjenuora auttamaan ongelmanratkonnassa.

Mikäli olet epävarma, validoi.
Kun etsit virheitä, voit välttyä paljolta päänsäryltä yksinkertaisesti tarkistamalla koodisi oikeellisuus. Huonosti muotoiltu XHTML / CSS aiheuttaa yllätyksiä.
Suunnittele ja testaa CSS:si edistyneimmällä saatavilla olevalla selaimella ennen kuin muilla. Älä vasta sen jälkeen.
Jos suunnittelet sivuston testaamalla sitä rikkinäisellä selaimella, koodisi alkaa nojata selaimen väärään esitystapaan. Kun edessä on testausta edistyneemmillä selaimilla, turhaudut huomatessasi niiden esittävän sivun huonosti. Aloita sen sijaan täydellisyydestä ja käytä tunnettuja menetelmiä kiertääksesi selainkohtaiset ongelmat. Tällä hetkellä edistynein tarkoittaa Mozillaa, Safaria tai Operaa.
Varmistu, että haluttu efekti on olemassa.
On olemassa selainkohtaisia laajennuksia, jotka eivät sisälly viralliseen määrittelyyn [en]. Mikäli yrität liittää suodinta tai esimerkiksi sivupalkin värjäystä, käytät sovelluskohtaista koodia, joka toimii vain IE:ssa. Mikäli validaattori kertoo, että käyttäämäsi koodia ei ole määritelty, on todennäköistä että koodi on sovelluskohtainen, eikä näin ollen toimi muissa selaimissa.
Kun käytät kelluvia (float) elementtejä, hyödynnä clear-ominaisuutta.
Kelluvat elementit ovat pulmallisia eivätkä aina toimi odotetulla tavalla. Mikäli törmäät tilanteeseen, jossa kelluva (float) elementti leviää toisen elementin päälle tai yli tai ei muuten vain toimi haluamallasi tavalla, varmistu että käyttämäsi tapa on oikea. Tutustu Eric Meyerin oppaaseen [en].
Marginaalit pettävät; vältä asettamalla paddingia tai reunusta (border).
Voit joutua kamppailemaan ylimääräisen tyhjän tilan kanssa siellä, missä et sitä halua. Mikäli käytät marginaaleja, on niiden pettäminen todennäköisin syy. Andy Budd [en] kertoo aiheesta enemmän.
Pyri välttämään paddingia/reunuksia (border) ja määrämittaa elementissä.
IE5 laskee laatikkomallin väärin, mikä sotkee asioita. Tämä on kierrettävissä [en], mutta parasta on sivuuttaa asia lisäämällä paddingia ylemmän tason elementtiin, määrämittaisen sisäisen elementin sijaan.
Vältä IE:n tapaa vilauttaa tyylittelemätön sisältö sivua ladattaessa.
Mikäli käytät pelkkää @import-menetelmää ulkoisen tyylitiedoston kanssa, törmäät IE:n tapaan vilauttaa muotoilematon HTML ennen dokumentin muotoilua. Tämä on vältettävissä [en].
Älä käytä min-widthia IE:ssa.
Internet Explorer ei tue sitä mutta kohtelee tiettyyn pisteeseen asti width-ominaisuutta kuin se olisi min-width. Pienellä IE-filtteröinnillä saavutat saman lopputuloksen.
Kokeile vähentää leveyttä.
Joskus pyöristysvirheet aiheuttavat 50% + 50% summaantuvan 100.1%, mikä saattaa rikkoa ulkoasun joissain selaimissa. Kokeile laskea 50% -> 49%:n, tai jopa 49.9%:n.
Osa sisällöstä ei näy IE:ssä.
Tämä saattaa johtua ns. Peekaboo-bugista, varsinkin mikäli se näkyy, kun hiiren kursori viedään linkin päälle. Ongelman kuvaus ja korjaus siihen löytyvät Position is Everything-sivustolta [en].
Tarkkuutta linkkien esittämiseen, mikäli käytät ankkureita.
Mikäli käytät perinteistä ankkuria (<a name="anchor">), huomaat, että myös :hover ja :active pätevät siihen. Välttääksesi tämän, sinun pitää käyttää joko id-tagia ankkurissa tai hieman toisenlaista [en] tapaa: :link:hover, :link:active
”LoVe/HAte” muistisääntö linkkeihin.
Määritellessäsi linkkien pseudo-luokkia, tee se aina tässä järjestyksessä: Link, Visited, Hover, Active. Muuten ne eivät toimi yhdenmukaisesti eri selaimilla. Harkitse myös :focusin käyttöönottoa, jolloin muistisääntö muuttuu muotoon LVHFA (tai ”Lord Vader’s Handle Formerly Anakin”, kuten Matt Haughey [en] ehdotti).
”TRouBLEd” muistisääntö (margin, padding).
Lyhenteet asetetaan aina myötäpäivään (top-right-bottom-left), joten margin: 0 1px 3px 5px; luetaan margin-top 0, margin-right 1px ja niin edelleen.
Määritele mittayksikkö muihin kuin nolla-arvoihin.
CSS vaatii määrittelemään mittayksiköt kaikkiin määreisiin, kuten fonttiin, marginaaleihin ja kokoihin. (Poikkeuksena line-height, joka – omituista kyllä – ei vaadi mittayksikköä.) Ei siis kannata luottaa siihen, että selain osaa arvata mittoja oikein. Nolla on nolla, oli se sitten px, em, tai jokin muu. Yksikköä ei tarvitse määritellä. Esimerkki: padding: 0 2px 0 1em;
Testaa eri kirjainkokoja.
Edistyneemmät selaimet, kuten Mozilla ja Opera, antavat käyttäjälleen mahdollisuuden vaihtaa kirjasimen kokoa mittayksiköstä riippumatta. Koska ihmisillä on käytössä eri perusasetuksia, suurempi tai pienempi kuin omassa käytössäsi, yritä saada sivusto toimimaan mahdollisimman monella kirjainkoolla.
Testaa CSS sisäisenä, julkaise ulkoisena.
Kun työskentelet käyttämällä dokumentin sisäistä tyylitiedostoa, <style type="text/css"> head-osiossa, ennaltaehkäiset mahdolliset selainten välimuisteihin liittyvät virhetilanteet. Tämä on huomioitava erityisesti tiettyjen Mac-selainten kanssa. Viimeistele työsi ulkoistamalla CSS:isi, käyttämällä @import– tai <link>-menetelmää ennen julkaisua.
Käytä reunaviivoja (border) ulkoasussa ilmenevien virheiden etsimisessä.
Yleispätevän säännön, kuten div { border: solid 1px #f00; }, käyttö saattaa helpottaa virheen tarkan sijainnin löytymistä. Reunaviivojen lisääminen tiettyihin elementteihin auttaa sinua löytämään päällekkäisyydet ja ylimääräiset white-space-tilanteet, jotka eivät välttämättä ole itsestäänselvyyksiä.
Vältä lainausmerkkejä kuvien osoitepoluissa.
Kun asetat taustakuvan, vältä lainausmerkkien käyttöä osoitepolussa. Ne eivät ole tarpeellisia ja IE5/Mac tukehtuu niihin.
Mac IE5 tukehtuu tyhjään tyylitiedostoon ja sivun latausaika kasvaa. Lisää tiedostoon yksi sääntö (tai vaikka pelkkä kommentti) tämän välttämiseksi.

Lopuksi muutama huomionarvoinen asia, jotka eivät suoranaisesti liity toiminnallisuuteen, mutta tulee silti ottaa huomioon kehitysvaiheessa:

Organisoi CSS-tiedostosi.
Kommentoi CSS-lohkot asianmukaisesti, ryhmitä selektorit, käytä yhdenmukaista nimeämiskäytäntöä, white-space muotoilua (suositus: yksi välilyönti tabulaattorin sijaan varmistaaksesi muotoilun myös muilla alustoilla) sekä järjestä ominaisuuksien mukaan.
Nimeä luokat (class) ja tunnisteselektorit (id) toiminnallisuuden, älä ulkoasun mukaan.
Mikäli luot luokan .smallblue, ja myöhemmin saatkin pyynnön muuttaa teksti isommaksi ja punaiseksi, nimessä ei ole mitään järkeä. Nimeä ne sensijaan kuvaavasti, kuten .copyright ja .pullquote.
Käytä CSS-filttereitä vasta viimeisenä apukeinona.
CSS-hackit ja -filtterit auttavat liittämään (tai piilottamaan) tietyn säännön tietyiltä selaimilta. Yritä kuitenkin ratkaista ongelma ensin ilman näiden käyttöä, standardinmukaisella tavalla. Niiden käyttö voi kuitenkin joskus pelastaa päiväsi. Lista käytössäsi olevista CSS filttereistä [en].
Yhdistele selektoreita.
Pidä CSS:isi mahdollisimman kevyenä latausaikojen minimoimiseksi. Yhdistä [en] selektoreita ryhmiksi, käytä hyväksesi periytyvyyksiä [en] ja lyhennysmerkintää [en].
Muista esteettömyys, mikäli korvaat tekstiä kuvilla.
Klassisella FIR-menetelmällä [en] on tunnettuja haittapuolia ruudunlukijoiden kanssa. Ongelma esiintyy myös, mikäli kuvien lataus on poistettu käytöstä. Vaihtoehtoja on olemassa [en]; käytä niitä.

Saavutettavuus ja suomalaispuolueiden sivut

Kirjoittaja: Yoji Hirabayashi. Tämä on muokattu versio artikkelista, joka on julkaistu aiemmin Tämä on minun! blogissa 9.6.2004.

Ennenkuin jatkat lukemista, tutustu ensin artikkelissa Suomalaispuolueiden sivut syynissä raportoituihin testeihin ja niiden tuloksiin. Tässä artikkelissa käsitellään samoja sivustoja esteettömyyden kannalta.


Sisältö

Sivustot jotka testattiin

Alunperin tarkoituksenani oli testata kaikki sivut WCAG:n (Web Content Accessibility Guidelines) määrittelemien (minimi)suositusten pohjalta, Taso 1, ja tarkistaa sivustojen perussaavutettavuus. Se olisi kuitenkin vaatinut päivien työn, joten tarjoilen yksinkertaistetun version. Artikkelin pyrkimyksenä onkin vain valistaa ja ohjata esimerkein välttämään erilaiset esteet tiellä kohti saavutettavampaa web-julkaisua.

Puolueet kertovat olevansa jokaisen kansalaisen asialla. Tämä käsittääkseni tarkoittaa myös mm. näkövammaisia, joita pelkästään Näkövammarekisterin vuosikirjan 2002 mukaan oli sen julkaisuhetkellä Suomessa vähintään 80 000. Näkövammaisten lisäksi muita esteellisiä käyttäjäryhmiä ovat henkilöt, joilla on liikunnallisia ja motorisia ongelmia, kognitiivisia haittoja tai kuulovamma. Esteetön web-suunnittelu parantaa usein kaikkien käyttäjäryhmien vierailukokemusta, ei vain erilaisista rajoitteista kärsivien.

ALTittomat kuvat ja kuvalinkit

Ensimmäisenä tarkistin käytettyjen kuvien ja grafiikan merkkauksen. Masentavaa. Yksikään testatuista puoluesivustoista ei läpäissyt W3C:n saavutettavuus-minimisuosituksia (taso 1). Yleisin puute oli kuvista puuttuva alt-attribuutti, (informatiivinen) teksti, joka näytetään mikäli kuvia ei syystä tai toisesta ladata. Pahimmillaan informatiivisessa kuvassa vaihtoehtoisena tekstinä käytetään geneeristä ”kuva”-sanaa, se puuttui tai oli tyhjä.

Keskusta.fi ja puutteelliset alt-tekstit Ohessa kuva Keskustapuolueen etusivusta merkkipohjaisella links-selaimella katsottuna, jossa ongelma esittäytyy ikävällä tavalla. Kyseessä on sivun navigoinnissa käytetty kuva, josta puuttuu vaihtoehtoinen teksti. Tätä esiintyi jokaisella testatulla sivulla, puolueesta riippumatta.

Koristeelliset kuvat (vailla informaatio-arvoa) tulisikin esittää CSS:n avulla (mikäli mahdollista), jolloin niistä ei aiheudu ylimääräistä haittaakaan.

Rakenne

Toinen silmiinpistävä puute pinnan alla oli lähes täydellinen rakenteen puute. Tämä vaikeuttaa usein erityisesti sivuston sisällön kartoittamista ja haettavan tiedon saantia. Yksinkertaisin tapa korjata asia on luoda dokumentit rakenteellisiksi. Otsikot myös merkataan otsikoiksi (käytössä kuusi tasoa h1…h6), kappaleet kappaleiksi (p), listat listoina (ul, ol) ja taulukkomuotoinen data luonnollisesti taulukoihin (ja merkkaamalla se hyvin). Roger Johansson on kirjoittanut yksityiskohtaisen artikkelin aiheesta [en]. Eriasteisia tekstin korostuksia varten käytössä on myös em(phasis) ja strong.

Looginen merkkaus ja rakenteellisuus yleensä takaavat sen, että sivustoa on miellyttävä käyttää myös vanhemmilla ja erikoisemmilla selaimilla. CSS:n avulla voidaan toteuttaa myös visuaalisesti näyttäviä web-sivuja.

Eräs yleistymään päin oleva tapa (loogisen rakenteen omaavissa dokumenteissa) on ns. skip navi-linkki dokumentin alussa, jonka avulla voidaan hypätä suoraan siihen tärkeimpään eli sisältöön. Tämä helpottaa myös pienillä päätelaitteilla (mm. PDA ja matkapuhelimet) sivustolla vierailevan selaajan elämää.

Liberaalien sivuilta löytyi yritystä, mutta yritys on jäänyt vain yritykseksi. Kehysvetoisia sivustoja en edes tarkistanut, koska kehykset itsessään ovat niin ongelmallisia.

Kytke CSS pois käytöstä ja suuntaa selain Kristillisdemokraattien sivuille.

Kehykset

Kehysten käyttö on vähenemässä, mutta sitä ei vertailua tehdessä uskoisi. Esimerkiksi Suomen Kansan Sinivalkoiset ja Suomen Kristillisdemokraatit turvautuvat niiden käyttöön sivustollaan. Yksi kuva kertoo enemmän kuin tuhat sanaa, joten annan kuvan puhua puolestani [aukeaa uuteen ikkunaan]:

Suomen Kristillisdemokraattien sivuilla on huonosti nimetyt kehykset

Myös Suomen Kommunistinen Puolue, ja Perussuomalaiset käyttävät kehyksiä ja vastaavia ongelmia esiintyy myös niillä. Missä noframes ja hyvin nimetyt kehykset?

Jukka Korpelan Miksi kehykset sopivat Webiin huonosti.

Paremmat taulukot

Taulukot. Taulukot, taulukot, taulukot. Niitähän riitti. Koska niiden käytöstä web-taitossa kiistellään ainakin seuraavat 5 vuotta, ehdotankin vain yksinkertaisempaa ja paremmin saavutettavaa tapaa:

  • Merkkaa datataulukko hyvin käyttämällä asianmukaisia tageja ja attribuutteja (summary, caption, th, scope jne). Jos taulukkoa käytetään pelkästään asetteluun, älä käytä esteettömyyttä parantavia ominaisuuksia.
  • Tutustu Roger Johanssonin erinomaiseen ja kattavaan oppaaseen taulukoista Bring on the Tables [en].
  • Pidä taulukko kevyenä välttämällä sisäkkäisiä taulukoita (niille ei pitäisi olla tarvetta).
  • Tuota taulukon sisältö lineaarisesti: Creating Accessible Tables: Content Linearization [en].
  • Siirrä esitysasun määritykset CSS-tiedostoon.

Absoluuttiset fonttikoot

Useilla sivuilla oli kirjasimen koko asetettu absoluuttisina mittayksikköinä. Tämä aiheuttaa ongelmia varsinkin heikkonäköisille henkilöille, jotka ovat riippuvaisia Microsoftin Internet Explorer-selaimesta. Kyseisiä mittayksiköitä käytettäessä se ei anna käyttäjän suurentaa kirjainkokoa. 11px:n (jopa 10px:n) arial-fontti on liian pieni leipätekstin lukemiseen.

Pyri välttämään leipätekstissä ja muussa tärkeässä tekstissä absoluuttisia mittayksiköitä. Käytä sen sijaan suhteellisia mittoja (esim em ja prosentit).

Mitä jäi käteen?

Ilkeämpi henkilö saattaisi jopa väittää, että puolueet ovat unohtaneet ryhmän äänestäjiänsä, valikoivat heidät vaikeuttamalla ja jopa estämällä sivuille pääsyn ja tiedonhaun muilta kuin etukäteen valitsemaltaan käyttäjäryhmältä. Koska me emme täällä ole ilkeitä, tyydymme vain valistamaan ja hellästi ohjaamaan kohti vähemmän esteettömiä sivuja.

Lopuksi, vaikka vastuu saavutettavuudesta kuuluu yhtälailla palvelun tilaajalle kuin palvelun toteuttajalle, olen henkilökohtaisesti sitä mieltä, että palvelun toteuttajan tulee pitää huoli siitä, että yksinkertaiset perusasiat ovat kunnossa. Ilman lisähintaa.

Lähteet

Kirjoituksen apuna on käytetty mm. seuraavia lähteitä ja resursseja:

Suomalaispuolueiden sivut syynissä

Kirjoittaja: Mikko Kekki. Tämä on muokattu versio artikkelista, joka on julkaistu aiemmin Kalamukin blogissa 8.6.2004.


Joe Clark ja Greg Saila ovat testanneet kanadalaisten puolueiden verkkosivuja muutamallakin mittarilla ja todenneet, että kanadalaisten puolueitten sivut eivät pärjää web-standardi-testissä (Canadian election Web sites flunk standards test). Analyysin innoittamana käymme nyt suomalaisten puolueiden sivujen kimppuun web-standardeilla.

Kanadalaisten testituloksissa on hyvin perusteltu, miksi tällaista testaamista ylipäätään kannattaa tehdä. Näiden perustelujen pohjalta tämänkin testin perustelut on kirjoitettu. Kiitämme Clarkia ja Sailaa.

Mistä on kyse?

  • WWW-sivut koostuvat koodista, jota tulkitsemalla selaimet osaavat esittää sivun näkyvässä muodossa.
  • HTML on koodia, jolla määritetään sivun rakenne, otsikot, kuvat ja muut elementit. (HTML on lyhenne käsitteestä ’hypertext markup language’.)
  • CSS on koodia, jolla määritetään, miltä HTML näyttää selaimessa. (CSS on lyhenne käsitteestä ’cascading stylesheets’.)
  • HTML:lle ja CSS:lle on määritetty säännöt. Jos noudatat sääntöjä, olet kirjoittanut koodia oikein ja sivusi noudattaa web-standardeja.
  • Oikein kirjoitettu (validi) koodi muistuttaa luonnollisen kielen kieliopin mukaista kirjoittamista. Jos kirjoitat koodia oikein, selaimet tietävät täsmälleen, mitä tarkoitat, eikä niiden tarvitse arvailla, millaisena sivu pitäisi näyttää. (Luonnolliseen kieleen vertaaminen ontuu tietysti siltä osin, että ihmiset puhuvat murteita ja huolimattomasti mutta silti ymmärtävät toisiaan. Tämä johtuu siitä, että ihmisten välisestä kommunikaatiossa suurin osa viestinnästä tapahtuu non-verbaalisesti eli ilman puhuttua kieltä.)
  • WWW-sivujen saavutettavuus ja käytettävyys ovat erillisiä asioita ja niitä ei käsitelty tässä testissä, koska niiden testaaminen on monimutkaisempi prosessi ja koska kirjoittajanne on laiska. Oikein kirjoitettu koodi vaikuttaa kuitenkin myös niihin.

Miksi?

  • Suurelle osalle sivujen vierailijoista ja käyttäjistä asialla ei olekaan suuren suurta merkitystä mutta joillekin se merkitsee paljon.
  • Standardi (oikeaoppinen) koodi tarkoittaa, että mikä tahansa internetlaite osaa tulkita sellaista HTML:ia ja CSS:ia oikein.
  • Useimmat sivujen tekijät tekevät sivuja, jotka toimivat mainiosti vain Windows-käyttöjärjestelmän Internet Explorer-selaimessa.
  • Standardi koodi toimii kuitenkin yleensä täysin oikein kaikissa mahdollisissa selaimissa ja laitteissa. Usein jopa täsmälleen samalla tavalla kaikissa selaimissa ja laitteissa.
  • Standardin koodin avulla periaatteessa kuka tahansa voi käyttää WWW-sivua selaimesta tai laitteesta riippumatta.
  • Käytännössä joitakin yhteensopivuusongelmia on olemassa selainten kesken. Suurin osa ongelmista löytyy Windowsin Internet Explorerista.
  • Jos asiaa haluaa niin ajatella, kyse on tasa-arvosta.

Kuka kärsii väärin tehdyistä sivuista?

  • Standardien vastainen koodi on optimoitu vain selaimelle, jolla sitä on testattu. Tämä tarkoittaa lähes aina Windowsin Internet Exploreria.
  • Kaikki eivät kuitenkaan käytä Windowsia ja Internet Exploreria. Clark & Saila: This may be news to you, but the Web is not the same as Internet Explorer for Windows (Tämä voi tulla yllätyksenä mutta netti ei ole sama asia kuin Windowsin Internet Explorer).
  • Jos sinulla ei satu olemaan selainta, joka on sivun omistajan / tekijän suosima, voi olla, ettet pysty käyttämään sivua ollenkaan.
  • Monien ihmisryhmien, kuten kuulo- tai näkövammaisten, internetin käyttö riippuu pitkälle standardin koodin käytöstä. Joskus he tarvitsevat erillisiä apuohjelmia tai apulaitteita internetin käyttöön. Heille oikeaoppisen koodin käyttö merkitsee todella paljon. Web-standardien ja saavutettavuusohjeiden noudattaminen on tärkeää.
  • Sokea käyttäjä voi käyttää esimerkiksi ruudunlukijaa, joka on ohjelma, joka tulkitsee sivun tekstin, ikonit ja muun informaation ääneen tai pistekirjoituksena.
  • Näkövammainen käyttäjä voi käyttää näkymän suurentajia, jotka näyttävät sivujen informaation tarpeeksi isolla.
  • Nämä apuohjelmat nojaavat oikeaoppiseen koodiin. Tutkimusten mukaan web-standardien ja saavutettavuusohjeiden vastaisesti tehtyjen sivujen käyttö on huomattavasti hankalampaa vammaisille käyttäjille.
  • Joissakin tapauksissa web-standardien ja saavutettavuusohjeiden vastaisesti tehtyjen sivujen käyttö on yksinkertaisesti mahdotonta.
  • Joissakin maissa ja mahdollisesti lähivuosina koko Euroopan Yhteisössä laki vaatii viranomaissivuilta saavutettavuutta.

Mitä testattiin?

Clark ja Saila testasivat useitakin asioita. Me jätimme aikapulan vuoksi saavutettavuuden tällä kertaa testaamatta. Puolueiden sivujen saavutettavuudesta voi lukea Yoji Hirabayashin erinomaisesta artikkelista Saavutettavuus ja suomalaispuolueiden sivut. Me keskityimme koodiin. Käytimme seuraavaa listaa:

  • Doctype (dokumenttityyppi)
  • Merkistökoodaus
  • Oliko sivustolla käytetty kieli ilmoitettu merkinnässä
  • HTML:n merkintävirheet
  • Virheet CSS:ssa
  • CSS- vai taulukkotaitto?

Testaamiseen käytimme W3C:n html-validaattoria, jonka avulla voi tarkistaa onko oma sivu standardien mukaisesti koodattu. CSS:n oikeellisuus tarkistettiin W3C:n CSS-validaattorilla. CSS tarkistettiin kaikista mahdollisista CSS-tiedostoista ja vähintään kahdesta kehyksestä, jos sivu koostui sellaisista. Myös sivun sisään ympätyt tyylit tarkistettiin.

Jos dokumenttityyppiä ei ollut merkitty, testattiin validaattorin tällaisessa tilanteessa automaattisesti tarjoaman HTML 4.01 Transitional -standardin mukaan. Jos merkistökoodausta ei oltu mainittu, käytettiin iso-8859-1-koodausta.

Mukaan otettiin kaikki käynnissä olevissa EU-vaaleissa (keväällä 2004) ehdokkaita asettaneet puolueet. Alla puolueet käsitellään näiden vaalien virallisessa järjestyksessä. Sivuista testattiin ainoastaan aloitussivu eli se sivu, joka aukeaa, kun kirjoitetaan sivuston perusosoite (www.sosialidemokraatit.fi, www.keskusta.fi, www.kokoomus.fi jne.). Ainoastaan Kristillisdemokraateilla oli niin sanottu intro-sivu mutta se testattiin silti varsinaisen etusivun sijasta, koska sääntö päätettiin ennen testauksen aloitusta. Reilu peli se olla pitää.

Kaikille puolueiden sivuille oli yhteistä se, että perusasiat eivät olleet kunnossa. Yksikään ei läpäissyt testiä virheittä ja lähes kaikilta puuttui joko dokumenttityyppi tai merkistökoodaus tai molemmat.

Tarmo Ropposen sanoin: sitten tuloksiin. Taulukkoversiokin löytyy Kalamukin blogista.

Suomalaispuolueiden www-sivut ja web-standardit – testin tulokset

Vasemmistoliitto r.p. / Vänsterförbundet r.p.
  • Doctype: ei.
  • Merkistökoodaus: kyllä (merkitty kaksi kertaa ristiriitaisesti).
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 80 virhettä.
  • CSS:n virheet: 0 virhettä.
  • CSS- vai taulukkotaitto: taulukko.
Suomen Sosialidemokraattinen Puolue – Finlands Socialdemokratiska Parti r.p.
  • Doctype: kyllä (HTML 4.01 Transitional).
  • Merkistökoodaus: kyllä.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 229 virhettä.
  • CSS:n virheet: 27 virhettä (luku on arvio, koska kaikkien virheiden tarkistus olisi vienyt aikaa).
  • CSS- vai taulukkotaitto: taulukko.
Kansallinen Kokoomus r.p. / Samlingspartiet r.p.
  • Doctype: ei.
  • Merkistökoodaus: ei.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 14 virhettä.
  • CSS:n virheet: 1 virhe.
  • CSS- vai taulukkotaitto: taulukko.
Suomen Kommunistinen Puolue – Finlands Kommunistiska Parti r.p.
  • Doctype: ei (kehyksien sisäisillä sivuilla osittain kyllä).
  • Merkistökoodaus: ei (kehyksien sisäisillä sivuilla osittain kyllä).
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 19 virhettä.
  • CSS:n virheet: 1 virhe (tarkistettiin kahden kehyksen tyylit).
  • CSS- vai taulukkotaitto: taulukko (kehyksien sisällä).
Vihreä liitto r.p. / Gröna förbundet r.p.
  • Doctype: kyllä.
  • Merkistökoodaus: kyllä.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 38 virhettä.
  • CSS:n virheet: 0 virhettä.
  • CSS- vai taulukkotaitto: taulukko.
Liberaalit r.p.
  • Doctype: ei.
  • Merkistökoodaus: ei.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 92 virhettä.
  • CSS:n virheet: 5 virhettä.
  • CSS- vai taulukkotaitto: CSS.
Suomen Kansan Sinivalkoiset r.p.
  • Doctype: ei.
  • Merkistökoodaus: ei, väärin merkattu (kehyksien sisäisillä sivuilla kyllä).
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: kyllä.
  • HTML:n merkkausvirheet: 22 virhettä.
  • CSS:n virheet: – (ei CSS:ia).
  • CSS- vai taulukkotaitto: taulukko (kehyksien sisällä).
Köyhien Asialla r.p.
  • Doctype: ei.
  • Merkistökoodaus: kyllä.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 40 virhettä.
  • CSS:n virheet: – (ei CSS:ia).
  • CSS- vai taulukkotaitto: taulukko.
Suomen Kristillisdemokraatit (KD) – Kristdemokraterna i Finland (KD) r.p.
  • Doctype: ei.
  • Merkistökoodaus: ei.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei (intro-sivulta on voi tosin valita suomen- tai ruotsinkieliset osion).
  • HTML:n merkkausvirheet: 11 virhettä.
  • CSS:n virheet: – (ei CSS:ia).
  • CSS- vai taulukkotaitto: taulukko.
Perussuomalaiset – Sannfinländarna r.p.
  • Doctype: ei.
  • Merkistökoodaus: kyllä.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 12 virhettä.
  • CSS:n virheet: 2 virhettä (ja yksi varoitus).
  • CSS- vai taulukkotaitto: taulukko (kehysten sisällä).
Suomen Keskusta r.p. / Centern i Finland r.p.
  • Doctype: kyllä (HTML 4.0 Transitional).
  • Merkistökoodaus: ei.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 196 virhettä.
  • CSS:n virheet: 2 virhettä (ja yksi varoitus).
  • CSS- vai taulukkotaitto: taulukko.
Eläkeläiset Kansan Asialla r.p. (Sivuja ei löytynyt.)
  • Doctype: –
  • Merkistökoodaus: –
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: –
  • HTML:n merkkausvirheet: –
  • CSS:n virheet: –
  • CSS- vai taulukkotaitto: –
Suomi – Isänmaa r.p.
  • Doctype: ei.
  • Merkistökoodaus: kyllä.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 28 virhettä.
  • CSS:n virheet: 0 virhettä.
  • CSS- vai taulukkotaitto: taulukko.
Svenska folkpartiet i Finland r.p. / Ruotsalainen kansanpuolue r.p.
  • Doctype: ei.
  • Merkistökoodaus: kyllä.
  • Oliko sivustolla käytetty kieli ilmoitettu merkkauksessa: ei.
  • HTML:n merkkausvirheet: 54 virhettä.
  • CSS:n virheet: 0 virhettä.
  • CSS- vai taulukkotaitto: taulukko.

Web-standardien edut kävijöille, asiakkaille ja sinulle!

Sisältö

  1. Web-standardit
  2. Mistä web-standardeissa on kysymys?
  3. Muutos ajattelutavassa
  4. Semanttisesti oikea merkintä (markup)
  5. Mitä on pätevä koodi?
  6. Mitä on esteetön koodi?
  7. Miksi käyttää CSS:ia erottamaan sisältö esitystavasta?
  8. Kuinka CSS:lla toteutettu sivusto toimii?
  9. Miten kävijät hyötyvät web-standardeista?
  10. Miten asiakkaat hyötyvät web-standardeista?
  11. Miten SINÄ hyödyt web-standardeista?
  12. Mitkä ovat huonot puolet?
  13. Miten saavutat web-standardit?
  14. Päätelmät
  15. Materiaalia web-standardeista

1. Web-standardit

Web standards are intended to be a common base… a foundation for the world wide web so that browsers and other software understand the same basic vocabulary. (Web-standardit on tarkoitettu peruslähtökohdaksi… WWW:n perustaksi, jotta selaimet ja muut ohjelmistot ymmärtäisivät samaa perussanastoa.)
Eric Meyer

W3C (World Wide Web Consortium) ja muut standardointilaitokset ovat määritelleet teknologioita verkkopohjaisen sisällön luomiseen ja tulkintaan. Varsinaiset standardit ovat:

Rakenteelliset kielet
Extensible Hypertext Markup Language (XHTML) 1.0
XHTML 1.1
Extensible Markup Language (XML) 1.0
Esityskielet
Cascading Style Sheets (CSS) Level 1
CSS Level 2
CSS Level 3
Objektimallit (Object Models)
Document Object Model (DOM) Level 1 (Core)
DOM Level 2
Skriptikielet
ECMAScript 262 (Javascriptin standardi versio)
Muita esityskieliä (Markup)
Mathematical Markup Language (MathML) 1.01
MathML 2.0
Scalable Vector Graphics (SVG) 1.0

2. Mistä web-standardeissa on kysymys?

Web-standardit on suunniteltu:

  • tuomaan suurinta mahdollista hyötyä mahdollisimman suurelle joukolle www:n käyttäjiä
  • varmistamaan minkä tahansa www-dokumentin pitkäikäisyys
  • yksinkertaistamaan koodia ja pienentämään valmistuskustannuksia
  • saamaan aikaan sivustoja, jotka ovat suuremman ihmisjoukon ja laitevalikoiman tavoitettavissa
  • toimimaan oikein huolimatta selainten kehityksestä ja uusien laitteiden saapumisesta markkinoille

Web-suunnittelijoille ja kehittäjille web-standardeissa on kyse standardien (rakenteellisten, esityksellisten, objekti- ja skriptauskielten) käytöstä sekä niiden hyödyntämisestä parhaalla mahdollisella tavalla (pätevä, semanttisesti oikea ja esteetön koodi) hyödyttämään käyttäjiä, asiakkaita ja sinua.

3. Muutos ajattelutavassa

Perinteinen web-sivusto

Perinteinen web-sivuston kehittäminen on jatkoa painetulle medialle – sen tarkoitus on saada sivustot näyttämään viimeistä pikseliä myöten täydellisiltä 5-6 yleisimmässä selaimessa. Yleisiä ominaisuuksia ovat:

  • Taulukko -pohjaiset taitot
  • Ulkoasumäärittelyt sisällön sisällä (font-tagit)
  • Koodi, joka ei ole validia
  • Esteellinen koodi
  • Semanttisesti väärä koodi

Web-standardien mukainen sivusto

Web-standardeissa on kysymys siitä, että ajatellaan verkkoa laajana kommunikointivälineenä, jonka voi tavoittaa monimuotoinen joukko käyttäjiä ja valikoima laitteita. Tyypillisiä ominaisuuksia ovat:

4. Semanttisesti oikea merkintätapa (markup)

Semanttisesti oikea merkintätapa (markup) käyttää html -elementtejä niin kuin ne on tarkoitettu. Hyvin muotoillulla HTML:llä on rakenteellista merkitystä laajalle joukolle käyttäjiä (selaimet ilman tyylitiedostoja, tekstiselaimet, PDA:t, hakukoneet jne.)

Käytä standardinmukaisia HTML-elementtejä ja vältä HTML-elementtien muotoilemista näyttämään toisilta HTML-elementeiltä. Yksinkertaistaen:

  • käytä otsikoita varten otsikko -elementtejä alkaen elementistä H1
  • käytä tekstikappaleita varten kappale -elementtiä
  • käytä listoja varten lista -elementtejä

5. Mitä on pätevä koodi?

Validointi on prosessi, missä tarkistetaan, että dokumentti vastaa virallista standardia, kuten W3C:n julkaisemat. Dokumentti, joka on tarkistettu ja joka on läpäissyt tarkistuksen, käsitetään päteväksi.

Miksi käyttää pätevää koodia?

  • Pätevä koodi toimii nopeammin kuin virheellinen koodi
  • Pätevä koodi toimii paremmin kuin virheellinen koodi
  • Selaimet kehittyvät enemmän standardeja tukeviksi, jolloin on yhä tärkeämpää kirjoittaa pätevää ja standardien mukaista HTML:ia.

Miten tarkistat onko koodisi pätevää?

Miten teet koodisi päteväksi?

  • Aloita oikealla dokumenttityypillä (doctype)
  • Huomioi dokumenttityypin moodit (modes) (standardien mukaisuus, quirks mode jne.)
  • Käytä character set -määritettä
  • Sulje HTML-elementit
  • Käytä alt-attribuuttia kuvissa
  • Vältä HTML-hakkeja (hacks)
  • Käytä HTML-validointia säännöllisesti
  • Korjaa kaikki virheet ennen sivuston julkaisua
  • Tee validoinnista osa normaalia työprosessiasi

6. Miksi käyttää esteetöntä koodia?

  • Mahdollistaa sivustosi saavutettavuuden laajemmalle yleisölle (näkövammaiset, motorisista ongelmista kärsivät, kognitiivisista ongelmista kärsivät)
  • Mahdollistaa sivustosi saavutettavuuden useammalle laitteelle (käsitietokoneet, näytönlukijat [screen readers], tekstiselaimet, hakukoneet)
  • On vaatimuksena viranomaissivustoille joissakin maissa

Miten teet koodisi esteettömäksi?

  • Tarjoa tekstivaihtoehdot ei-tekstuaalisille elementeille
  • Käytä esteettömiä taulukoita (nimeä rivi- ja sarakeotsakkeet)
  • Käytä esteettömiä lomakkeita (label for, id, fieldset, selitykset)
  • Käytä mieluummin merkintää kuin kuvia tiedon välittämiseen.
  • Tarjoa näkyviä tapoja ohittaa valikot
  • Tarjoa valintanäppäin -toiminto (antaa mahdollisuuden siirtyä linkistä toiselle sivulle näppäinyhdistelmän avulla)
  • Käytä tyylitiedostoissa vain suhteellisia mittayksiköitä määrittämään taittoa ja ulkoasua
  • Huolehdi, että dokumentit ovat luettavissa myös ilman tyylitiedostoja
  • Sisällytä metadata semanttisen informaation lisäämiseksi

7. Miksi käyttää CSS:ia erottamaan sisältö esitystavasta?

Web-kehittäjien tavoite on poistaa kaikki ulkoasumääritteet html-koodista, joka näin jäisi siistiksi ja rakenteellisesti oikeaksi.

  • Useamman laitteen saavutettavissa
  • Helpompaa tehdä koko sivuston laajuisia muutoksia – yksi tyylitiedosto mieluummin kuin kaikilla sivuilla erikseen
  • Pienemmät tiedostot / nopeampi lataus – vähemmän koodia sivulla
  • Vähemmän koodia sivulla – helpompaa koodata
  • Sallii käyttäjien muokata sivua omiin tarpeisiinsa – tyylin vaihtajat
  • Koodi paremmin hallinnassa – mahdollista tarjota koodia halutussa järjestyksessä näytönlukijoille

Esitystapa määritellään kaikissa HTML-sivuissa

Esitystapa määritellään kaikissa HTML-sivuissa

Esitystapa määritellään erillisessä tyylitiedostossa

Esitystapa määritellään erillisessä tyylitiedostossa

Erilliset tyylitiedostot uusille selaimille, tulostimille ja vanhoille selaimille

Erilliset tyylitiedostot uusille selaimille, tulostimille ja vanhoille selaimille

8. Kuinka CSS:lla toteutettu sivusto toimii?

Yksi CSS:n vahvoista puolista on se, että sisältö voidaan kohdentaa uudelleen vastaamaan tarpeita paremmin – ilman, että riviäkään html-koodia muutetaan.

9. Miten kävijät hyötyvät web-standardeista?

  • Tiedostot latautuvat nopeammin (vähemmän koodia, ei taulukoita, pätevä koodi)
  • Sisältö on laajemman käyttäjäkunnan saavutettavissa (peruskäyttäjät, sokeat käyttäjät, näkövammaiset käyttäjät, lukihäiriöiset käyttäjät, motorisista häiriöistä kärsivät käyttäjät jne.)
  • Sisältö on useampien laitteiden saavutettavissa (näytönlukijat, selaimet, tekstiselaimet, käsitietokoneet, hakurobotit, tulostimet, jääkaapit jne.)
  • Sallii käyttäjien muokata sivuston ulkoasua (tyylinvaihtajat)
  • Tarjoaa tulostukseen soveltuvia versioita kaikista sivuista

10. Miten asiakkaat hyötyvät Web-standardeista?

  • Helpompi ylläpito (vähemmän koodia, modulaarinen koodi)
  • Halvemmat palvelinmaksut (vähemmän koodia)
  • Parempi sijoitus hakukoneissa
  • Sisältö voidaan muotoilla uudestaan helposti muuttamatta koodia
  • Tarjoaa käyttäjille muokattavuutta
  • Tarjoaa tulostettavia versioita ilman sisällön toistamista
  • Parantaa esteettömyyttä (välttämätöntä viranomaisasiakkaille)

11. Miten sinä hyödyt web-standardeista?

  • Helpompaa koodata (modulaarinen koodi)
  • Helpompaa ylläpitää (vähemmän koodia, modulaarinen koodi)
  • Vähemmän laitekohtaista koodaamista (vakaa laajemmalla laitevalikoimalla)
  • Tarjoaa kilpailuedun kun maailmalla siirrytään enemmän käyttämään web-standardeja.

12. Mitkä ovat huonot puolet?

  • Jyrkkä oppimiskäyrä
  • Selainten yhteensopivuus
  • Jotkut taitot on helpommin toteutettavissa taulukoilla kuin tyylitiedostoilla

13. Miten saavutat web-standardit?

Web-standardit eivät ole mustavalkoinen asia. Kaikkien kehittäjien pitäisi vähitellen siirtyä kohti web-standardin mukaisia sivustoja.

Muutos perinteisestä web-standardien mukaiseen kehitykseen vaatii aikaa ja harjoitusta. Sen sijaan että hätiköisit ja joutuisit heti turhautumaan, aseta saavutettavissa olevia tavoitteita ja siirry vähitellen kohti web-standardeja. Esimerkiksi:

Perusmuutokset

  • Lisää oikea dokumenttityyppi (doctype) kaikille sivuille
  • Lisää alt-teksti kaikkiin kuviin
  • Lisää tarkoituksenmukaiset otsikot sivuihin

Keskitason muutokset

  • pätevä koodi
  • semanttisesti oikeaoppinen koodi
  • fontti-tagien ja värimääritysten siirto tyylitiedostoon
  • esteettömät lomakkeet, datataulukot ja oikopolut

Edistyneet muutokset

  • perusasettelu tyylitiedostolla (padding, marginaalit jne.) kun käytetään taulukoita taiton toteuttamiseen
  • täydellinen asettelu tyylitiedostolla – ei taulukoita taiton toteuttamiseen

Harjoittele tyylitiedostoilla taittoa

  • lue CSS-oppaita ja -kirjoja, että ymmärtäisit tyylitiedostojen käytännöllisiä sovelluksia
  • järjestä aikaa opetellaksesi tyylitiedostoilla asettelua ilman ulkopuolisia paineita
  • harjoittele useilla tyylitiedostotaitoilla kunnes olet varma itsestäsi

14. Päätelmät

Web-standardeilla saadaan aikaiseksi:

  • nopeampi tiedostonlataus
  • esteetöntä koodia laajemmalle kayttäjäkunnalle ja laitevalikoimalle
  • käyttäjäkohtainen muokkaus
  • tulostamiseen sopivien versioiden helppo toteutus
  • pienemmät palvelinkustannukset
  • parempi sijoitus hakukoneissa
  • nopeampi ja tehokkaampi sivuston ylläpito
  • kilpailuetu

Web-standardit hyödyttävät käyttäjiäsi, asiakkaitasi ja sinua.

15. Materiaalia Web-standardeista

Web-standardit

Semanttinen koodi

Validointi

Käytettävyys

CSS