Pyri siihen, että kaikki tekemäsi nettisivut:

  • noudattavat HTML5-standardin vaatimuksia ja css:ää on käytetty järkevästi
  • ovat hyvä katsoa ja käyttää myös kännykällä/tabletilla
  • ovat typografisesti hyvän näköisiä

Tarkistuslista

  • Kielentarkistus   esim. Wordissa
  • HTML-koodin tarkistus validaattorilla, löytyy netistä       w3.org
  • Linkkien tarkistus     checklink   w3.org
  • CSS-koodin tarkistus    ss-validator        w3.org
  • Latautumisnopeuden testaukseen googlaa esim. ”website speedchecker”
  • Mobiilikäytettävyyteen googlaa esim. ”mobile checker”
  • Hakukoneoptimointiin on WP:ssä ladattavissa lisäosa WordPress SEO
  • Hyviä ohjeita optimointiin löytyy googlaamalla.
  • Hakukoneoptimoinnin aloitusopas: https://support.google.com/webmasters/answer/7451184?hl=fi
  • WP-sivuston hakukoneäkyvyyden parantaminen: https://wpopas.fi/nain-parannat-wordpress-sivustosi-hakukonenakyvyytta/
  • Testaus eri selaimissa; Firefox, Safari, Edge, Crome, Opera…
  • Testaus eri kokoisissa näytöissä; pöytäkoneet, tabletit, kännykät, tv…
  • Onko tarvittaessa pitkä viiva ym. erikoismerkit määritelty oikein
  • Onko rivinkorkeus määritelty hyvin esim. otsikoihin, jos jakaantuvat useammalle riville kapeammassa näytössä, korjaa rivitysongelmat tavutusvihjeillä ym
  • Onko tarvittaessa pitkä viiva ym. erikoismerkit määritelty oikein
  • Typografian tarkistus; yhteneväisyys, sopivat palstan leveydet, onko ongelmia kapeissa palstoissa, samanlaiset merkintätavat esimerkiksi puhelinnumeroissa, hinnoissa, päivämäärissä jne
  • Tulostettavuus ok? -Oma css-määrittely tulostukseen?

Hyvän nettisivuston laatuvaatimukset

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öä
  • Tekstikappaleet merkitään p-tägeillä.

CSS:n järkevä käyttö:

  • Tyylit ovat ulkoisessa tyylitiedostossa. (Yksisivuisten sivujen kohdalla on hyväksyttävää tehdä tyylit myös sivun alussa olevaan style-elementtiin, mutta silloin Dreamweaverin kanssa voi olla ongelmia.)
  • Kun kokonaisuuteen kuuluu monta sivua, niiden on syytä käyttää yhteistä css-tiedostoa. Muuten sivuston yhtenäisen ulkoasun hallinta on erittäin työlästä
  • 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. Sivut ovat kännykän näytöllä toki kovin kapeita, mutta sen voi ottaa huomioon sivua tehdessä kun kaventaa sivun välillä kännykän levyiseksi ja katsoo mitä tapahtuu.
  • Huolehtii siitä että sivu ja kaikki sivulla olevat elementit (kuten kuvat) mahtuvat myös kännykän näytölle. Ongelmia syntyy, kun sivulla on elementtejä joiden leveys on määrätty tietyksi määräksi pikseleitä. Se lakkaa olemasta ongelma, kun käyttää 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;}
  • Vierekkäin olevien linkkien välissä on (kännykällä katsottaessa) tarpeeksi tyhjää tilaa tai linkit ovat niin isoja, ettei sormi osu vahingossa viereiseen linkkiin.

Sivut ovat hyvän näköisiä, kun

  • Teksti ei leviä isoilla monitoreilla laidasta laitaan. Kun rivinpituus on sopiva (karkeasti sanoen alle 15 suomen kielen sanaa rivillä), teksti sekä näyttää hyvältä että sitä on mukava lukea. Kyse on myös käytettävyydestä ja esteettömyydestä.
  • Fontti on helppolukuista ja näyttää hyvältä. Monissa ympäristöissä oletusarvoinen Times New Roman näyttää huonolta negatekstinä (kun teksti on vaaleaa ja tausta tumma) ohuiden pääteviivojen kadotessa osittain näkyvistä. Bodyn fontin määrääminen Arialiksi on jo iso askel parempaan. Jos käytät Googlen fontteja (mikä on monesta syystä suositeltavaa), huolehdi siitä että fontti sisältää tarpeelliset muodot eli myös lihavoidun ja kursivoidun version jos sivulla on jotain lihavoitua tai kursivoitua. Otsikot ja taulukoiden otsikkosolut (th) ovat oletusarvoisesti lihavoituja!

Linkit ja käytettävyys

  • Linkkien on näytettävä linkeiltä joko poikkeavan värityksensä tai alleviivauksen puolesta.
  • Kun sivu on osa laajempaa kokonaisuutta ja sillä on linkkejä muille kokonaisuuteen kuuluville sivuille (eli sivulla on ns. navigointilinkit), parhaillaan auki olevan sivun on a) erotuttava jotenkin muiden linkkien joukosta, jotta siitä näkee missä ollaan ja b) kyseinen ”linkki” ei saa johtaa minnekään. Siitä kun ei ole mitään hyötyä kenellekään, että sivulta voi klikata linkkiä joka johtaa juuri sivulle jolla parhaillaan ollaan.
  • 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, ja kuvatiedoston nimelläkin voi vaikuttaa siihen, miten hyvin sivu löytyy hakukoneilla.

Lisäksi on hyvä ottaa tavaksi lisätä kaikkien tekemiensä sivujen alkuun koodirivi, jolla myös Internet Explorer saadaan näyttämään sivu oikein. Sen voi tehdä vaikka samalla kun laittaa rutiininomaisesti viewport-koodit paikoilleen.