Ei juuri missään järjestyksessä, eikä varsinkaan vain tärkeitä asioita, mutta kuitenkin; tässä 101 ensiksi mieleen tullutta asiaa, mitkä ovat kunnossa hyvillä verkkosivuilla:
- Rakenne on erotettu ulkoasusta, taulukoita ei ole käytetty asemointiin.
- Toiminnallisuus on erotettu rakenteesta.
- Sivut latautuvat nopeasti.
- Jokaisella sivulla on kuvaava
title
. - HTML on semanttista.
- Kaikilla tekstiä sisältävillä kuvilla ja muilla objekteilla on vaihtoehtoinen teksti.
- Sivut ovat validia merkkausta.
- Oleelliset linkit on jaksettu tehdä.
- Sivut ovat UTF-8-koodattua Unicodea.
- Merkistö on kerrottu myös HTML:ssä.
- Jokaiselle sivulle pääsee tavallista linkkiä seuraamalla.
- Sivustolla ei ole erillistä kynnysmattosivua.
- Kuvia ei ole ylipakattu.
- Tekstin kokoa ei ole lukittu pikselimittaan.
- Selainta ei yritetä tunnistaa sen lähettämän tiedon perusteella.
- Jokaiselle kieliversiolle on oma URL.
- Kielen symbolina ei ole käytetty lippua.
- Sivuston uusiminen ei riko vanhoja osoitteita.
- Jos yksittäisen sivun osoite on muuttunut, vanhasta uudelleenohjataan uuteen.
- URL:t ovat ihmisen luettavissa ja niistä voi päätellä mitä sivu sisältää.
- URL ei sisällä sessiokohtaista tietoa.
- URL ei sisällä tietoa palvelinteknologiasta.
- Sama sisältö näkyy mahdollisuuksien mukaan vain yhdessä osoitteessa.
- Hakulomakkeet käyttävät GET:iä, eivät POST:ia.
- GET:iä käytetään vain, kun pyyntö ei muuta tilaa.
- Haku ei hukkaa syötettyjä hakusanoja tulossivun hakukentästä.
- Käytetty kieli on hyvää ja korrektia.
- Ajatusviivaa ja yhdysmerkkiä ei ole käytetty sujuvasti sekaisin.
- Kaikki tekstit on kirjoitettu verkkoon, eli ovat esimerkiksi tiiviitä.
- Sivuilla ei ole ikuisessa luupissa vilkkuvia elementtejä, kuten bannereita.
- Mainonta ei ole kohtuuttoman ärsyttävää, esim. pop-upit.
- Linkkiteksti on kuvaavaa.
- Linkkiteksti ei kehota tekemään mitään.
- Sivut eivät toivota tervetulleeksi.
- Tärkeät asiat tunnistaa välittömästi, esimerkiksi koosta.
- Heti etusivulla kerrotaan, mikä sivuston tarkoitus on, ellei se ole yleistietoa.
- Tekstin koon kasvattaminen ei vaikeuta sivujen lukemista.
- Oikeaa euromerkkiä ja muita symboleita käytetään.
- Sivuihin ei tarpeettomasti tulostella päivämäärää ja kellonaikaa.
- Sivuston tapahtumia voi seurata XML-syötteen kautta.
- Syöte on linkitetty jokaisella sivulla (
head
-osassa). - Vain yksi syöte on linkitettynä.
- Syöte on Atom 1.0 -muotoinen.
- Jos syötteitä on useampia, ne on kuvattu erillisellä sivulla.
- Jos sivut on tarkoitettu muillekin kuin web-nörteille, myös vanhanaikaisen uutiskirjeen voi tilata.
- Yleisimmät kirjoitusvirheet domainista johtavat sivustolle.
- WWW:tön versio toimii.
- Virheellisistä ja WWW:ttömistä osoitteista uudelleenohjataan viralliseen.
- Kehyksiä ei ole käytetty.
- Sivuilla on vähän riittävän isoja ja selkeitä kuvia, ei paljon pieniä ja epäselviä.
- Kuvatekstiä on käytetty vain, kun kuva on niin kookas, että koko huomio keskittyy siihen.
- Isommista kuvista, ladattavista tiedostoista ja erityisesti PDF-tiedostoista varoitetaan niihin linkittäessä.
- Kuvia ei ole pakotettu HTML:n tasolla eri kokoaan, mitä ne todellisuudessa ovat.
- Sivuille on tehty oma ikoni, favicon.
- Sivuston kaikkeen sisältöön on aina pääsy navigaation kautta, ei vain klikkaamalla jotain bannerin kaltaista laatikkoa.
- Kuvia ei ole käytetty tarpeettomasti, jos saman voi tehdä oikeana tekstinäkin.
- Linkit eivät vain näytä linkeiltä vaan myös ovat sitä.
- Jos elementti ei näytä linkiltä, se ei myöskään ole linkki.
- Koko linkiltä näyttävä alue myös toimii linkkinä.
- Navigaatio, haku ja muut yleiset elementit löytyvät tutuilta tai loogisilta paikoilta.
- Selkeä linkki etusivulle on jokaisella sivulla.
- Navigaatiosta ei availla linkkejä toisille sivustoille, uuteen ikkunaan tai sähköpostiohjelmaan.
- Navigaation linkeistä ei tarvitse arvailla, mitä niiden takaa löytyy.
- Hakukenttä on jokaisella sivulla eikä erillisen klikkauksen takana.
- Back-nappulan toimintaa ei ole rikottu esim. avaamalla uusia ikkunoita tai tekemällä muutoksia tilaan GET-pyynnöillä.
- Virheen sattuessa ei uudelleenohjata.
- Ihmisystävällinen 404-sivu tarjoaa ainakin hakumahdollisuuden ja vihjeitä kohteen etsintään.
- 404-sivu palauttaa oikeasti 404:n, että muutkin kuin ihmiset ymmärtävät sivun puuttuvan.
- Ihmisystävällinen 500-sivu ainakin pahoittelee virhettä ja pyytää yrittämään myöhemmin uudelleen.
- 500-sivu palauttaa oikeasti 500:n, että muutkin kuin ihmiset ymmärtävät virheen tapahtuneen.
- Kaikki palvelinvirheet tallennetaan ylläpidon seurattavaksi ja niihin reagoidaan aktiivisesti.
- Sivuilla on anonyymin palautteen mahdollistava palautelomake.
- Sisääntulevia linkkejä seurataan ja muualla kirjoitettuun palautteeseen reagoidaan.
- Asialliseen palautteeseen vastataan viipymättä.
- Vain perustellusti välttämätön tieto vaaditaan kävijöiltä.
- Vapaaehtoisia tietoja ei kysellä, jos kävijä ei itse niistä hyödy.
- Käyttäjätunnus on yhtä kuin sähköpostiosoite.
- Lomakkeen lähettäminen vahingossa kahdesti on estetty.
- Lomakekontrolli ja sen määrittävä teksti on yhdistetty
label
:illa. - Lomakekontrollit on ryhmitelty
fieldset
:ein. - Lomakkeen kenttien täyttöä ohjeistavat tekstit ovat
legend
:ien taititle
-attribuuttien sisällä. - Lomakkeen vastaanottava ohjelmapätkä edes yrittää hyväksyä inhimillisen monimuotoista dataa.
- Ei jää epäselväksi missä kentässä ja millainen virhe oli.
- Lomakkeelle syötetyt tiedot eivät mene hukkaan virheen sattuessa.
- Selain käsittelee sivut standarditilassa (standards mode) eikä yhteensopivuustilassa (quirks mode).
- CSS:ää tai JavaScriptiä ei ole upotettu HTML-sivuun, vaan ne on linkitetty erillisistä tiedostoista.
- XHTML:ää ei ole yritetty käyttää, jos julkaisujärjestelmä ei voi taata XHTML:n hyvinmuodostuneisuutta.
- Ajankohtainen sisältö löytyy heti etusivulta.
- Sivusto toimii myös ilman JavaScriptiä, kuvia tai CSS:ää, tai millä tahansa näiden yhdistelmällä.
- Käyttöehdoissa ei yritetä kieltää järjettömiä asioita, kuten linkittämistä.
- Käyttöehdot eivät väitä käyttäjän sitoutuvan ehtoihin sivut avaamalla.
- Tulostajia varten on tehty tulostustyylitiedosto.
- Kohdistin viedään automaattisesti lomakkeen kenttään vain, jos sivulla ei ole muuta oleellista funktiota kuin lomakkeen täyttö.
- Uudelleenohjauksia ei tehdä HTML:n tasolla, eikä varsinkaan JavaScriptillä.
- Sivujen pääasiallinen kieli on kerrottu HTML:ssä ja sitä noudatetaan.
- Kaikki teksti sivuilla, mihin käyttäjä voi vaikuttaa, on HTML-enkoodattu.
- Vain merkit <, >, &, " ja ' on enkoodattu, muille merkeille ei ole tarpeen tehdä mitään.
- Muu kuin selkeästi ajankohtaissisältö on tarkastettu säännöllisesti ja viimeisen tarkastuksen päivämäärä on näkyvissä.
- Jos vanhentunutta sisältöä ei ole aikomusta päivittää ajanmukaiseksi, se on merkitty selkeästi vanhentuneeksi tai poistettu kokonaan.
- Pysyväissisältö on selkeästi eroteltu ajankohtaissisällöstä.
- Sivustosta saa käsityksen, kuka tai mikä on sen sisältämän tiedon takana.
Kaipaatko perusteluja? Oletko eri mieltä?
Hyviä pointteja, mutta aika teknistä on. Periaatteessa sivusto voi täyttää nuo kaikki ja olla silti huono. Esimerkiksi jos sivut on tehty vain, jotta “oltaisiin netissä” tms ja sisältö ei oikeasti tarjoa mitään kellekkään. Ulkoasuun ei myöskään taidettu ottaa kantaa.
102: yhteystiedot, aukioloajat yms useimpien hakemat tiedot näkee suoraan etusivulta tai niihin on selkeä linkki päävalikossa
(näitä piilotellaan yllättävän usein monen klikkauksen taakse)
Hyvä kommentti.
Kuten totesin, nämä olivat ihan satunnaisesti mieleen tulleita. Taustani on tekninen, joten ne asiat ovat päällimmäisenä mielessä.
“jos yksittäisen sivun osoite on muuttunut, vanhasta uudelleenohjataan uuteen,” Kannattaa myös miettiä millä ohjaa, 301, 302 vaiko 303.
Osittain samoja asioita sivuaa myös
http://www.w3.org/TR/chips/
Nimenomaan! Uudelleenohjauskoodin väärinkäyttö on yksi lempiaiheitani, mitenhän unohdin sen listalta.
24. hakulomakkeet käyttävät GET:iä, eivät POST:ia,
Mitä tarkoitat tällä?
25. GET:iä käytetään vain, kun pyyntö ei muuta tilaa,
Mitä tarkoittaa?
Eivätkö 57. ja 58. ole sama asia?
Enimmäkseen olen muuten samaa mieltä, vaikka muutamiin kohtiin pitäisi, tai ainakin voisi, lisätä “, ellei se erityisesti sovi sivuston luonteeseen.”
57:n idea selviää, kun lukee linkatun jutun. 58:n idea on, että linkkejä ei ole yllättävissä paikoissa, esim. vaikka leipätekstikappale olisi linkki (hs.fi). Huonosti ilmaistu, myönnetään.
VV:n kysymykseen vastaaminen vaatii vähän pidemmän selityksen, katsotaan josko saisin sellaisen kirjoitettua…
“Kvasihistorialliset” ja “kvasitieteelliset” tekstit web-sivuilla ovat ongelmallisia. Samoja asioita tulee tietysti eteen erilaisilla foorumeilla, joissa baaripöytäkeskustelujen tapaan kerrotaan “Monissa tutkimuksissa on todettu, että…” Siis kohtaan 01. lisäten Kuka, koska ja mihin perustuen on kirjoittanut em. tekstejä.
Jos tuo oli kysymys, niin en ymmärtänyt mitään.
“33. linkkiteksti ei kehota tekemään mitään”
– Ymmärrän tuon esim. “Lue lisää…” -linkkien tapauksessa, mutta en esim. seuraavissa tilanteissa: “Lisää ostoskoriin”, “Pyydä tarjous”, “Lähetä lomake”, “Tilaa uutiskirje”, “Lähetä kommentti”, jne.
Kaipaisin siis tarkennusta ajatteluketjuun tuon kohdan takana. (en epäile etteikö siellä ajatusta olisi, mutta tarkennusta kaipaisi) Itse olen samaa mieltä, että linkkitekstin pitäisi kuvata mahdollisimman tarkasti sitä mitä linkkiä painamalla tapahtuu ja joissain tapauksissa se seuraavan sivun sisällön kuvaaminen ei ole edes kiinnostavaa käyttäjän kannalta, esimerkiksi ei minua haittaa vaikka en tiedäkään mitä tapahtuu sen jälkeen kun painan tuota “Lähetä kommentti” -nappulaa…).
Riippuu ehkä, että onko kyseessä viestinnällinen vai toiminnallinen verkkopalvelu – tai vielä paremmin sanottuna siitä että minkätyyppistä tehtävää käyttäjä on suorittamassa… niin tuo sääntö voi vaihdella. ?
Linkki ja painike ovat kaksi täysin eri asiaa. Linkistä ei pidä tapahtua mitään muuta kuin toiselle sivulle siirtyminen. “Lue lisää” nyt menettelee, kun kuitenkin sellaisen linkin idea on tarjota jatkoa jutulle. Muut mainitsemasi ovat ilmiselviä lomakkeen postaavia painikkeita. Katso esim. Get vai post? tai Osoitteettomat linkit
Okei, kiitos vastauksesta. Ymmärrän nyt mitä tarkoitat. Tavallaan selkeä periaate kyllä. Käytännössä vissiin aika haastava toteuttaa. Esim Gmailin “Luo viesti” -linkki/painike on varmaan ihan riittävän ongelmallinen esimerkki.
Erinomaisia yksityiskohtia; olen itsekin saarnannut kotisivujen järkevän toteutuksen puolesta.
Osin olen eri mieltä taulukoiden käyttämisestä (karkeaan) asemointiin; ne ovat yhäti idioottivarmoja myös ääritilanteissa.
Ja tietenkin: kotisivuissa sisältö on se varsinainen asia, jota tekniikka ja grafiikka palvelevat.
Vielä kolme vuotta sitten olisi menny läpi tuo väite, mutta ei enää tänä päivänä.