10. Oppitunti - Testaus
Jos sivut alkavat olla valmiit, pitää ne vielä testata ennen julkaisua.
Testi numero 1.
Toimivatko sivut erikokoisilla näytöillä? Oman näyttöni resoluutio on 1280x800 pikseliä. Esimerkkisivu mahtuu ruudulle mainiosti, mutta voi olla että sivua katsellaan myös pienemmillä näytöillä.
Testaus suoritetaan tarttumalla selainruudun reunaan ja kutistamalla ruutua. Koska palstojen leveydet on määritelty prosentteina, pitäisi sivun skaakautua ruudun koon mukaan. Yleinen virhe on suunnitella sivut vain tietynkokoisille näytöille, jolloin liian pienellä näytöllä joutuu sivua vierittämään vaakatasossa kohtuuttomasti ja liian suurella näytöllä tilaa haaskautuu yli puolen ruudun verran.
Esimerkkisivu tuntuisi skaalautuvan mukavasti. Leveyden ollessa alle 800px navigaatiopalkissa tulee hieman ahdasta, mutta tämän ei pitäisi olla ongelma, nykyään alle 800:n pikselin levyiset näytöt ovat harvassa.
Samalla voi testata miltä sivu näyttää jos tekstin kokoa kasvatetaan (Firefoxissa CTRL + +). Ihmiset jotka eivät viitsi tihrustaa alle 0.8em kokoista tekstiä, voivat kasvattaa fontin kokoa selaimessaan. Tämänkin jälkeen asettelun pitäisi näyttää hyvältä.
Testi numero 2.
Toimivatko sivut eri selaimilla? Vaikka sivut olisi tehty aivan oikein, se ei tarkoita että ne näyttäisivät samalta kaikilla selaimilla. Yleisesti sivuntekijöiden murheenkryyni on Internet Explorer, joka näyttää sivut eri tavalla kuin muut selaimet. Koska kuitenkin yli puolet webbiä selaavista käyttää IE:tä, täytyy sekin ottaa huomioon.
Sivut näyttäisivät skaalautuvan IE:llä hieman heikosti: pääotsikko ja sen taustakuva kapenevat eri tahtiin kuin tekstimassa. Koska tämä ei kuitenkaan vaikuta merkittävästi sivujen toimivuuteen, annamme asian olla.
Testi numero 3.
Ovatko sivut validit? Eli käytännössä, onko html ja css kirjoitettu oikein?
Tämän voi testata seuraavista osoitteista:
http://jigsaw.w3.org/css-validator/
Mikäli sivut ovat jo palvelimella, kirjoita sivujen osoite kohtaan validete by URI. Mikäli sivut ovat vielä koneellasi, klikkaa seuraavasta ruudusta Browse ja valitse tarkastettava tiedosto. Voit myös tarkistaa koodin suoraan kopioimalla sen kolmanteen ruutuun.
Aina sivut eivät ole validit, vaikka päällisin puolin kaikki onkin kunnossa. Tyypillisimpiä pikku virheitä ovat seuraavat:
- Lopetuselememtti puuttuu. Jokaisella tägillä pitää olla aloitus- ja lopetuselementti.
- Tägit menevät "ristiin". Esim. <p> <strong> </p> </strong>. Tägien pitää olla sisäkkäin tai peräkkäin, ei ristikkäin.
- Kuvasta puuttuu alt-määrite. Vaikka alt-määrite (eli teksti joka näytetään kuvan sijasta) saattaakin tuntua turhalta, on siitä monenlaista hyötyä, esim. hakukoneiden kannalta. Jos alt-määrite puuttuu, sivut eivät ole validit.