Testaa kotisivujen toiminta eri selaimilla

26.02.2009

Tässä kirjoituksessa pyritään valottamaan sitä, miten moninainen maailma netti tänä päivänä on, ja mitä sivuston omistajan kannattaa pitää mielessään.

Jaana Lemetti
Head of Software Development



Moni ei ehkä tule ajatelleeksi miten nettisivut ylipäänsä rakentuvat tai miten monilla erilaisilla selainohjelmilla niitä selataan. Kotisivut eivät tänä päivänä ole enää yksittäisiä html-dokumentteja palvelimen nurkalla, vaan niiden tuottamiseen käytetään yhä useammin julkaisujärjestelmiä. Niillä tehdyt muutokset tallentuvat tietokantaan, josta ne haetaan kun sivuja katsellaan. Ulkoasua ohjataan tyylisivuilla, jotka kertovat selaimelle missä kohdassa ja minkä näköisenä sivujen sisältö kuuluu näyttää. Sivu siis rakennetaan “lennossa” monesta eri palasesta, se ei ole konkreettisesti olemassa missään yhtenä tiedostona.

Lähdekoodi

Mikä tahansa järjestelmä sivuston rakentaakaan, lopputuloksen voi nähdä sivujen lähdekoodista. Lähdekoodin perusteella selain näyttää itse sivun. Jos haluat nähdä miltä lähdekoodi näyttää, mene haluamallesi sivustolle ja valitse selaimestasi “Näytä – Sivun lähdekoodi” (Firefox) tai “Sivu – Näytä lähdekoodi” (Internet Explorer 7). Voit kokeilla katsoa vaikka tämän blogin lähdekoodia. Juuri tätä koodia selain tulkitsee näyttäessään sivua. Ongelma on siinä, että vaikka kaikki selaimet saavat tismalleen saman koodinpätkän, lopputulos voi olla hyvin erilainen selaimesta riippuen. Tilannetta voisi verrata henkilöihin, jotka puhuvat eri murteita. Selaimilla on omat tapansa tulkita lähdekoodia.

Validaattorit avuksi?

Oikean muotoinen, tietyt säännöt toteuttava koodi lisää todennäköisyyttä, että sivusto toimii ja näyttää oikealta eri selaimilla ja eri koneilla, mutta se ei kuitenkaan takaa sitä. Koodi voi läpäistä kaikki maailman validaattorit ja silti sivuston ulkoasu voi olla sekaisin tai toiminnot eivät ole käytettävissä. Tätä voidaan verrata ihmisten väliseen kommunikointiin: ei auta vaikka kielioppi olisi kohdallaan, jos sisältö on täynnä asiavirheitä. Siksi onkin tärkeää testata sivuston toiminta mahdollisimman monilla eri selaimilla ja eri koneilla, ja konkreettisesti kokeilla miten sivusto käyttäytyy niissä.

Selaimet

Selaimia on erilaisia. Tässä muutamia yleisimpiä lueteltuna: Internet Explorer, Firefox, Safari, Opera ja Chrome. Ei riitä että selaimia on erilaisia, vaan jokaisesta on myös monta eri versiota. Kaikki tietokoneiden käyttäjät eivät päivitä koneitaan säännöllisesti, joten heillä saattaa olla käytössään vanhoja selainversioita. Valitettavan monella on edelleen ainoana selaimena Internet Explorer 6, joka julkaistiin vuonna 2001. Nettimaailmassa se tarkoittaa ikäloppua. IE6 ei tue uusimpia tekniikoita, sen tietoturva on vähintäänkin kyseenalaista, ja se aiheuttaa harmaita hiuksia kehittäjille, jotka yrittävät saada uudet tekniikat toiminaan oikein myös IE6:lla. Vielä toistaiseksi se on pakko pitää tuettujen selainten listalla, koska potentiaalisia asiakkaita ei haluta käännyttää pois verkkokaupasta vain sen takia, että he sattuvat surffaamaan sinne IE6:lla.

Kuvassa näkyy erään suomalaisen sivuston kävijöiden selaimet viimeisen kuukauden ajalta. Firefox alkaa olla yhtä suosittu kuin Internet Explorer. (Kuvat on otettu Snoobi-raportista.)

Sama tilasto jaoteltuna selainversioittain. IE6 porskuttaa vielä 10%:n voimin.

Muita sivustojen toimintaan vaikuttavia asioita

  • Käyttöjärjestelmät. On väliä käytätkö Windows-, Macintosh- tai Linux-konetta. Esimerkiksi Macilla yleinen Safari on siitä erikoinen selain, että se tulkitsee lomakkeita hieman eri tavoin kuin Firefox ja Internet Explorer. Safarilla kannattaa kokeilla onnistuuko esim. palautelomakkeen lähettäminen tai tuotteiden lisääminen ostoskoriin. Safarista on saatavilla versio myös Windows-koneille. Käyttöjärjestelmien välillä saattaa olla eroja, Windowsin Firefox ja Macin Firefox eivät välttämättä ole täysin identtisiä keskenään.
  • Asetukset. Selaimesta pääsee säätämään kaikenlaista fontin koosta sivun väreihin. Hajoaako sivuston ulkoasu, jos fonttikokoa suurennetaan? Mitä jos selaimen tietoturva-asetukset säädetään korkeimmalle tasolle, toimiiko kaikki vielä oikein?
  • Näytöt ja resoluutiot. Näyttökoot ja resoluutiot vaihtelevat paljon. Joillakin on käytössään iso laajakuvamonitori ja toiset surffaavat netissä puhelimellaan. Jos sivuja katsotaan pienellä näytöllä, millä tavalla tärkeät tiedot silloin näkyvät?
  • Lisäosat. Kotisivuilla yleistyvät ääni ja liikkuva kuva. Jotta selain osaa pyörittää esimerkiksi videoita, niitä varten tarvitaan erilaisia lisäosia. Melko yleisiä ovat flash-bannerit, joissa esitellään vaikkapa uusimpia tuotteita. Mitä jos koneelle ei ole asennettuna flashia, näytetäänkö käyttäjälle silloin jotain vaihtoehtoista sisältöä

Kuvassa näkyy erään suomalaisen sivuston kävijöiden selainten Flash-versiot viimeisen kuukauden ajalta. Jopa 23%:lla kävijöistä ei ole asennettuna Flashia tai se on pois päältä.

Testaa oma sivustosi

Jos sinulla ei ole asennettuna eri selaimia, mutta haluaisit kokeilla miltä sivusi näyttävät eri selaimilla, on sitä varten kehitetty käteviä (ja ilmaisia!) palveluita. Ohjelmat generoivat kuvan siitä, miltä sivustosi näyttää valitsemillasi selaimilla ja käyttöjärjestelmillä. Tällaisilla screenshot-ohjelmilla ei valitettavasti pääse kokeilemaan sivujen toimintaa, mutta niillä näkee toimiiko ulkoasu oikein. Tällainen palvelu on esimerkiksi browsershots.org

Kirjoita kenttään sivustosi osoite, valitse haluamasi selaimet ja paina ‘submit’. Tulosten generoimiseen menee hetki aikaa. Kannattaa aluksi valita vain muutama selain niin saat tulokset nopeammin. (Listan alla on pikapainike “Select – None”, jos haluat tyhjentää oletusvalinnat, ja valita sen jälkeen itse.) Tarkista ainakin seuraavilla: MSIE6 (Microsoft Internet Explorer 6), MSIE7 (Microsoft Internet Explorer 7), uusimmat Firefoxit, uusimmat Safarit sekä uusimmat Operat eri käyttöjärjestelmillä.

BrowserShots-palvelu tulostaa sivusta screenshotit, jotka saa avattua suuremmiksi versioiksi. (Kuvassa www.ohjelmistoyrittajat.fi)

Mitä vanhempi sivusto on, sitä todennäköisemmin ongelmia alkaa tulla vastaan uusilla selaimilla. Jos kotisivusi on tehty esimerkiksi kolme vuotta sitten eli alkuvuodesta 2006, niin silloin tämän hetken suosituimpia selaimia eli Internet Explorer 7:aa eikä Firefox 3:sta ollut vielä olemassakaan. IE7 julkaistiin marraskuussa 2006 ja Firefox 3 kesäkuussa 2008. Jos sivustosi on rakennettu vuoden 2006 alkupuolella tai sitä ennen, sitä ei ole luonnollisesti voitu rakentamisvaiheessa tarkastaa näillä uusimmilla selaimilla. Onhan tarkastus tehty tämän jälkeen? Netti kehittyy niin nopeaa tahtia, että tänä päivänä sivustojen lähdekoodi tarvitsee päivitystä ja tarkistamista säännöllisin väliajoin.

Lue lisää aiheesta