Monet www-sivut näkyvät väärin tulostettaessa tai jollakin selaimella, latautuvat hitaasti, ovat hankalia lukea tai näkyvät huonosti jossakin tilassa. Ennen sivuston julkaisemista kannattaa käydä läpi tarkistuslista, joka eliminoi valtaosan sivujen toimivuuteen liittyvistä ongelmista.
Takaisin "Oppaat ja esimerkit" -osion etusivulle
Tarkista lähdekoodin oikeellisuus eli validius. Mitä paremmin koodi noudattaa kielioppia, sitä todennäköisemmin selaimet osaavat tulkata ja näyttää sivun oikein. Myös koodin rakenne on tärkeä: merkitse otsikot, lainaukset ja tekstikappaleet niille tarkoitettujen tagien väliin. Näin sivu säilyttää muotonsa ymmärrettävänä, vaikka CSS-muotoilut poistettaisiinkin käytöstä.
Pyri myös pitämään koodi mahdollisimman yksinkertaisena: mitä yksinkertaisemmalta sivun lähdekoodi näyttää, sitä todennäköisemmin eri selaimet näyttävät sen samoin. Yksinkertainen ja tiivistetty koodi auttaa myös hahmottamaan sivun rakenteen paremmin ja lyhentää sivun latausaikaa.
Toisinaan eri selaimet voivat näyttää saman sivun eri tavoin, vaikka lähdekoodi olisikin pyritty pitämään mahdollisimman siistinä ja oikeellisena. Ongelma voi johtua esimerkiksi jonkin selaimen vajaasta CSS-tuesta. Yleensä sivu on mahdollista saada näkymään oikein miettimällä sivun lähdekoodi uusiksi. Mikäli ongelma näyttäisi aiheutuvan CSS-muotoiluista, vika kannattaa paikallistaa poistamalla sivulta CSS-muotoilut yksitellen ja katsomalla, mikä muotoilu aiheuttaa sivun väärinnäkymisen.
Internet Explorerille voi myös lisätä omia korjauksiaan hyödyntämällä ns. IE-kommenttia.
Tarkista, onko sivu luettava ja ymmärrettävä ilman CSS:ää. Ovatko navigaatiolinkit selkeästi näkyvissä? Erottuuko sivun otsikko muusta tekstistä? Toimiiko kappalejako? Sivun näkymistä ilman CSS:ää auttaa, jos jo sivua luodessa merkitsee eri sisällöt niille tarkoitettujen elementtien avulla, esimerkiksi pääotsikon h1-elementin avulla.
Sivun tulisi olla käytettävissä myös ilman kuvia. Erityisen paljon kannattaa kiinnittää huomiota taustakuviin ja navigaatioon. Näkyykö navigaatio ymmärrettävästi, jos CSS on käytössä, mutta kuvat eivät? Jos sivulta poistaa taustakuvan, onko teksti silti luettavissa? Taustakuvan lisäksi sivulle kannattaa aina määrittää sitä lähellä oleva taustaväri, jotta kuvien poistaminen käytöstä ei aiheuttaisi ongelmia.
Www-sivun värien tulisi olla sellaiset, etteivät ne aiheuta vierailijoille migreeniä ja epilepsiakohtauksia. Tarkista, etteivät sivulla käytetyt väriyhdistelmät ole turhan räikeitä ja että teksti erottuu kunnolla taustastaan. Vierailijan ei ole tarkoitus joutua maalaamaan tekstiä saadakseen sen lukukelpoiseksi.
Ota värivalinnoissa huomioon myös punavihervärisokeat. Punavihervärisokeilla on hankaluuksia punaisen ja vihreän värin erottamisessa toisistaan: haittaako tämä sivun hahmottamista? Tarkista myös käyttämäsi tietokoneen kontrasti ja tummuus. Kokeile säätää näyttöäsi pari pykälää tummemmalle. Erottuuko teksti? Eri näytöissä on käytössä eri kirkkauksia ja kontrasteja, ja vaikka teksti erottuisikin taustastaan juuri sinun näytölläsi, se ei välttämättä ole luettavaa muiden näytöillä.
Mitä pienempi www-sivun ja sen sisällön koko kilotavuissa on, sitä nopeammin sivu ladataan. Tämän vuoksi sivu ja sillä esiintyvät tiedostot kannattaa pusertaa niin pieneen tilaan kuin mahdollista.
Yleisimmissä kuvankäsittelyohjelmissa on toiminto, jolla kuvan kokoa voi pienentää merkittävästi kuvanlaadun kärsimättä liikaa. Myös kuvan tallennusmuotoon kannattaa kiinnittää huomiota, sillä eri tiedostomuodoissa sama kuva saattaa viedä eri verran tilaa. .gif-kuvat vievät yleensä melko vähän tilaa, joskin värejä voi olla korkeintaan 256. .jpg soveltuu puolestaan valokuville ja .png molemmille riippuen tilanteesta. .png voi viedä pahimmassa tapauksessa moninkertaisesti tilaa muihin tiedostomuotoihin nähden, toisaalta taas .gifiä huomattavasti vähemmän, mikäli se on optimoitu oikein. Eri tiedostomuotoja kannattaakin vertailla.
XHTML- ja CSS-koodista kannattaa poistaa turhat rivinvaihdot ja välilyönnit, sillä ne kasvattavat tiedostojen kokoa.
Sivuston navigointilinkkien tulisi olla helposti löydettävässä paikassa. Yleensä navigaatio on www-sivulla joko ylhäällä tai sivulla, mutta pääsääntöisesti se tulisi sijoittaa lähdekoodissa mahdollisimman alkuun, mieluiten ennen sivun pääotsikkoa tai heti sen jälkeen. Näin navigaatio näkyy sivun alussa selkeästi myös silloin, kun sivua tarkastellaan ilman CSS:ää. CSS:n avulla navigaation voi siirtää sivun alusta mihin päin ulkoasua tahansa, joten navigaation sijoittaminen lähdekoodin alkupuolelle ei ole myönnytys taiteelliselle vapaudelle.
Navigaatiolinkit tulisi nimetä selkeästi, jotta vierailija tietäisi, mitä minkäkin linkin takana odottaa. Esimerkiksi kuusi linkkiä, joissa kaikissa lukee "X", eivät anna kovin hyvää kuvaa linkkien sisällöstä. Sen sijaan esimerkiksi sellaiset linkkitekstit kuin "etusivu", "yhteystiedot" ja "portfolio" antavat vierailijalle huomattavasti selkeämmän kuvan siitä, mitä linkkien takana on.
Navigaatiota ei koskaan kannata toteuttaa suoraan linkitetyillä kuvilla. CSS:n avulla tavallisesta tekstinavigaatiosta saa aivan linkitettyjen kuvien näköisiä mm. taustakuvien avulla, eikä sivuston toimivuus kärsi. Navigaatio kannattaa myös rakentaa selkeään muotoon, esimerkiksi listaksi. Näin se näkyy selkeänä myös ilman CSS:ää.
Taulukot on tarkoitettu vain ja ainoastaan taulukkomuotoisen datan esittämiseen www-sivulla. Ulkoasun kasaaminen taulukkoja käyttämällä on riskialtista ja aiheuttaa sen, etteivät sivut toimi saati näy oikein ilman CSS:ää. Taulukkotaitto syntyikin 1990-luvulla, ja on ratkaisuna nykyään hyvin epäsuositeltava ja vanhentunut.
Taulukkotaiton voi korvata yhdeksässä tapauksessa kymmenestä div-taitolla.
Www-sivulla ei kannata käyttää harvinaisia tekstityyppejä eli fontteja muualla kuin kuvissa, sillä nämä fontit eivät näy vierailijoilla. Tietty fonttityyli näkyy vierailijalle vain, mikäli kyseinen fontti on asennettu myös hänen omaan koneeseensa. Tämän vuoksi harvinaiset ja Internetistä ladatut fontit näkyvät vain harvoin vierailijoille oikein.
Yleisiä ja siten melko turvallisia fontteja ovat mm. Arial, Arial Narrow, Book Antiqua, Bookman Old Style, Comic Sans MS, Georgia, Impact, Palatino Linotype, Tahoma, Times New Roman ja Verdana.
Myös fontin kokoon kannattaa kiinnittää huomiota. Liian pientä tekstiä on hankala lukea. Tekstiä ei koskaan kannatakaan asettaa noin 8 pt:tä pienemmäksi. Myös tekstin rivikorkeuteen kannattaa kiinnittää huomiota. Sopiva rivikorkeus on noin 1,5 tai 2,0.
Yleensä www-sivu ei asetu mutkattomasti paperille tulostettaessa. Osa tekstistä voi esimerkiksi leikkautua pois. Määrittämällä tulostimelle omat CSS-muotoilut varmistat, että sivu tulostuu ongelmitta ja siististi.
Vanhentuneet ja epäsuositeltavat elementit on merkitty vanhentuneiksi hyvästä syystä. Ne joko vaikuttavat sivun ulkoasuun tai ovat muuten ongelmallisia. Esimerkiksi kehykset sekoittavat hakukoneita ja niiden kautta tulevia vierailijoita, koska yksittäiselle kehyksessä näkyväksi tarkoitetulle sivulle päätyminen tarkoittaa käytännössä sitä, ettei linkkiä etusivulle tai muualle sivustolle näy missään. Kehysten käyttäminen tarkoittaa lähes varmasti vierailijoiden vähenemistä, kun hakukoneiden kautta tulevien vierailijoiden määrä laskee.
Vanhentuneille elementeille on lähes aina tarjolla toimivampi ja suositellumpi vaihtoehto.
Vaikka koko ruudun peittävä lumisade ja pomppiva ja hyppivä lumiukko saattavatkin kuulostaa hyviltä ideoilta, ne eivät hyvin todennäköisesti ole sitä vierailijoiden mielestä. Turhat kilkkeet, jotka hidastavat sivun latautumista ja liikkuvat ympäri ruutua, saavat monet vierailijat repimään hiuksia päästään. Pyri pitämään sivu siistinä ja mahdollisimman vähän ärsyttävänä. Vaikka animoitu, tanssiva poro voikin olla sinällään oikein tyylikäs, sen psykoottiset liikkeet eivät sovi tavalliselle web-sivulle.
Vältä siis animaatioita ja kaikenlaisia turhia "efektejä", kuten ympäri sivua lenteleviä sydämiä ja vilkkuvia vierityspalkkeja.
Vaikka javascript sinällään on hyödyllinen ohjelmointikieli, sen toimiminen on kokonaan kiinni vierailijan selaimesta. Toisilla javascript-tuki on päällä, toisilla ei. Niinpä sivun tulisi toimia, vaikka vierailijan javascript-tuki ei olisikaan päällä. Käytännössä tämä tarkoittaa sitä, ettei sivun tärkeitä ominaisuuksia, kuten navigaatiota, tulisi toteuttaa javascriptillä, ellei ratkaisun toimivuutta myös ilman javascript-tukea kyetä takaamaan. Varmimmin sivun saa toimimaan kaikilla oikein jättämällä javascriptin tärkeistä osista kokonaan pois.
Eri tietokonenäytöissä on eri kokoisia resoluutioita. Käytännössä tämä tarkoittaa sitä, että jos määrität ulkoasusi korkeuden ja leveyden pikseleissä omalle näytöllesi sopivaksi, se saattaa näkyä todella hankalasti (yleensä aivan liian suurena) muilla vierailijoilla.
Nykyään pienin käytännössä edes muutaman prosentin markkinaosuutta hallitseva resoluutio on 800 x 600 pikseliä (leveys x korkeus). Näin ollen noin 750 pikselin levyiset ulkoasut lienevät turvallisia käyttää, sillä ne näkyvät kokonaan pienelläkin resoluutiolla. 800 x 600 on kuitenkin kuoleva luonnonvara, ja sen osuus resoluutioista pienenee koko ajan. Kannattaakin miettiä, kannattaako ulkoasun leveys jättää kapeaksi vain muutaman vierailijaprosentin tähden.
On kuitenkin olemassa resoluutioystävällisempiäkin tapoja määrittää ulkoasun leveys. Yksi tapa on käyttää prosentteja. Tällöin ulkoasun leveys on aina esimerkiksi 85 % näytön leveydestä, oli näytön koko mikä tahansa. Toisaalta myös suhteelliset, tekstin koon mukana leveyttä vaihtavat ulkoasut ovat melko resoluutioystävällisiä, sillä tekstin koko on yleensä suoraan verrannollinen näytön kokoon.
Vaikka kaksisataa pikseliä leveä tekstiosio saattaakin näyttää tyylikkäältä, se on ennen kaikkea epäkäytännöllinen. Säästä vierailijoidesi hermoja ja jätä sivun leipätekstiosio tarpeeksi leveäksi.