Sivujen tarkistus ja testaus

Hyvä nettisivusto

  1. Noudattaa HTML5-standardin vaatimuksia ja css:ää on käytetty järkevästi
  2. Ovat hyvännäköisiä, selkeitä ja loogisia
  3. Ovat käyttäjäystävällisiä (myös kapeammilla näytöillä kuten kännyköillä)
  • Typografia kunnossa
    • yhteneväisyys ja sommittelu ok?
    • Teksti ei leviä isoilla monitoreilla laidasta laitaan. (rivinpituus alle 15 suomen kielen sanaa rivillä)
    • sopivat palstan leveydet, onko ongelmia kapeissa palstoissa?
    • kirjain/merkkivälistys, sanavälistys, rivivälistys ok?
    • fontit, niiden värit ja koot, sopivuus aiheeseen ja kohderyhmälle ok?
      • Fontti on helppolukuista ja näyttää hyvältä. Monissa ympäristöissä esimerkiksi oletusarvoinen Times New Roman näyttää huonolta negatekstinä (kun teksti vaalea ja tausta tumma) ohuiden pääteviivojen kadotessa osittain näkyvistä.
      • Googlen fontteja käyttäessä klikkaa mukaan myös lihavoitu ja kursivoitu versio, jos sivulla on jotain lihavoitua tai kursivoitua tekstissä, mutta älä suotta valitse kaikkia niitä mitä et tarvitse-hidastavat vaan sivun latausnopeutta
      • Otsikot ja taulukoiden otsikkosolut (th) ovat oletusarvoisesti lihavoituja
    • rivin korkeus määritelty hyvin esim. otsikoihin, jos jakaantuvat useammalle riville
    • Rivitysongelmat minimoitu
    • elementtien värit ok, kaikkien värien tasapaino toisiinsa nähden, sopivuus aiheeseen ja sopivuus kohderyhmälle?
    • erikoismerkkien merkintä oikein, esim. pitkä viiva ja numerot+mittayksiköt
    • samanlaiset merkintätavat esimerkiksi puhelinnumeroissa, hinnoissa, päivämäärissä jne
  • Linkit ok
    • Linkkien on näytettävä linkeiltä (eri värillä kuin muu teksti tai alleviivaus)
    • parhaillaan auki olevan sivun on erotuttava jotenkin muiden linkkien joukosta, jotta siitä näkee missä ollaan eikä kyseinen ”linkki” saa johtaa mihinkään
    • Jos jokin tärkeä tai olennainen tieto esitetään kuvana, kuva on laitettava sivulle kuvaelementtinä (img), ei jonkin elementin taustakuvana. Silloin kuvaan voidaan liittää kuvan sisällöstä kertova alt-teksti (Löytyy hakukoneille)
    • Vierekkäin olevien linkkien välissä on tarpeeksi tyhjää tilaa (kännykällä katsottaessa) tai linkit ovat niin isoja, ettei sormi osu vahingossa viereiseen linkkiin.
  • Sivujen sisällön rakenne ja sivujen linkitys toisiinsa selkeitä ja loogisia?
  • Tulostettavuus ok?
  • Myös kapeissa näytöissä kaikki ok
  • Kuvat, kuvakkeet ym. optimoitu nettisivulle

HTML5-standardin mukaan

  • Sivulla on oltava alussa yksi h1-otsikko, jonka sisältö kuvastaa kyseisen sivun sisältöä.
  • Sivulla on oltava title, jonka sisältö kuvastaa kyseisen sivun sisältöä, ja jos kyseessä on monisivuinen kokonaisuus, siinä lukee myös sen kokonaisuuden otsikko.
  • Tekstikappaleet merkitään p-tägeillä.

CSS:n järkevä käyttö

  • Kun kokonaisuuteen kuuluu monta sivua, niiden on syytä käyttää yhteistä ulkoista css-tiedostoa.
  • Leipätekstin muotoilu tehdään koko bodylle yksittäisten elementtien (kuten p) sijaan.

Sivuja on hyvä katsoa ja käyttää myös kännykällä kun

  • Sekä html- että css-koodissa on viewport-koodit, joiden vaikutuksesta mobiiliselaimet asettavat selainikkunan koon kännykän näytön kokoiseksi. Teksti on silloin heti sopivan kokoista.
  • Huolehtii siitä että sivu ja kaikki sivulla olevat elementit (kuten kuvat) mahtuvat myös kännykän näytölle.
    • Ongelmia syntyy, jos sivulla on elementtejä joiden leveys on määrätty tietyksi määräksi pikseleitä.
    • Käytä width-arvon sijasta max-width-arvoa.
    • Isotkin kuvat saa mahtumaan kännykän näytölle css-säännöllä img {max-width: 100%; height: auto;}