Verkkosivujen suunnittelu: mitä toimivat sivut vaativat

Mitä responsiivisuus tarkoittaa?

Responsiivinen verkkosivu mukautuu automaattisesti sen laitteen näytön kokoon, jolla sivua katsotaan — sama sivu ja sama koodipohja näyttäytyvät eri tavalla puhelimella kuin tietokoneella, ilman että ylläpitäjä joutuisi tekemään tai päivittämään useampaa erillistä sivustoa. Käytännössä tämä tarkoittaa, että tekstin koko, kuvien asettelu ja valikon muoto muuttuvat näyttöleveyden mukaan, mutta sisältö ja toiminnot pysyvät samoina.

Responsiivisuus ei ole enää valinnainen lisäominaisuus vaan perusvaatimus. Suomessa suuri ja kasvava osa väestöstä käyttää internetiä matkapuhelimella osana arkea, ja Tilastokeskuksen väestön tieto- ja viestintätekniikan käyttöä koskeva tutkimus on seurannut kehitystä jo vuosikausia. Jos sivusto ei toimi kunnolla puhelimella, se karkottaa ison osan kävijöistä jo ennen kuin nämä ehtivät lukea sisältöä.

Käytännössä responsiivisuus rakennetaan niin sanotuilla murtumakohdilla (breakpoint): sivuston asettelu vaihtuu tiettyjen näyttöleveyksien kohdalla — esimerkiksi valikko muuttuu pudotusvalikoksi tai kuvat pinoutuvat allekkain rinnakkaisen sijaan. Moni nykyinen toteutustapa suunnitellaan “mobiili edellä”: ensin varmistetaan, että sivu toimii pienimmällä näytöllä, ja vasta sen jälkeen lisätään tilaa vaativat elementit suuremmille näytöille. Tämä järjestys ehkäisee tilannetta, jossa tietokoneelle suunniteltu sivu vain kutistetaan puhelimeen sopivaksi jälkikäteen — silloin painikkeet jäävät helposti liian pieniksi tai teksti liian ahtaaksi.

Responsiivisuuden puute näkyy kävijälle konkreettisesti: tekstiä pitää suurentaa nipistämällä, painikkeet ovat liian lähellä toisiaan koskettaa tarkasti, tai sivu vaatii vaakasuuntaista vierittämistä nähdäkseen koko sisällön. Jokainen näistä on syy poistua sivulta ennen kuin varsinainen sisältö on ehditty edes lukea.

Mitä yrityksen verkkosivuilla pitää olla?

Perussisällön lisäksi — etusivu, palvelut tai tuotteet, yhteystiedot — sivustolla kannattaa olla muutama tekninen ja lainsäädännöllinen perusasia kunnossa:

• Suojattu yhteys (HTTPS). Nykyisin oletusvaatimus; selaimet merkitsevät suojaamattomat sivut erikseen epäluotettaviksi, mikä näkyy kävijälle varoituksena osoiterivillä.
• Selkeä navigaatio ja yhteystiedot. Kävijän pitää löytää puhelinnumero, sähköposti tai yhteydenottolomake muutamalla klikkauksella riippumatta siitä, miltä sivulta hän aloittaa.
• Evästeistä kertominen, jos sivusto käyttää seurantaan tai markkinointiin liittyviä evästeitä. Kävijälle pitää antaa aito mahdollisuus kieltäytyä muista kuin sivuston toiminnan kannalta pakollisista evästeistä.
• Tietosuojaseloste, jos sivusto kerää henkilötietoja esimerkiksi lomakkeen kautta — selosteessa kerrotaan, mitä tietoa kerätään, mihin sitä käytetään ja kuinka kauan sitä säilytetään.
• Perussaavutettavuus: riittävä värikontrasti, kuvien vaihtoehtoiset tekstit ja se, että sivulla pääsee eteenpäin myös pelkällä näppäimistöllä ilman hiirtä.
• Toimiva mobiilinäkymä joka sivulla, ei vain etusivulla — myös alasivut, lomakkeet ja mahdollinen verkkokauppa on syytä testata erikseen pienellä näytöllä.

Saavutettavuudesta on myös oma lakinsa, laki digitaalisten palvelujen tarjoamisesta. Se velvoittaa suoraan viranomaisia ja julkisoikeudellisia laitoksia, ja osa yksityisestä sektorista kuuluu sen piiriin: kuluttajille palveluita tarjoavat pankit, vakuutusyhtiöt ja sijoituspalveluyritykset, erityisoikeuksin toimivat liikenne- ja energiayhtiöt, sekä kuluttajille suunnatut verkkokaupat, e-kirjapalvelut ja tietyt maksuliikenne- ja viestintäpalvelut — soveltamisala on laajentunut asteittain kattamaan yhä useamman kuluttajapalvelun. Alle 10 hengen ja alle 2 miljoonan euron vuosittaisen liikevaihdon mikroyritykset on rajattu velvoitteen ulkopuolelle. Vaikka oma yritys ei kuuluisi lain piiriin, samojen periaatteiden noudattaminen kannattaa silti — saavutettava sivusto toimii paremmin useammalle kävijälle, ei vain niille, joita laki suoraan koskee.

Löydettävyyttä eli sitä, miten sivusto näkyy hakukoneissa, käsitellään omalla sivullaan hakukoneoptimointi — se on oma laaja aiheensa, jota ei kannata tiivistää tähän. Sen sijaan kannattaa muistaa, että löydettävyys ei ole erillinen lisätyö sivustoprojektin päälle, vaan sivuston rakenne, sivujen otsikointi ja latausnopeus vaikuttavat siihen suoraan jo toteutusvaiheessa — jälkikäteen korjaaminen on aina hitaampaa kuin oikean rakenteen suunnittelu heti alusta.

Mitä nopeus tarkoittaa mitattuna?

Google mittaa sivun käyttökokemusta kolmella mittarilla, joita kutsutaan yhdessä nimellä Core Web Vitals. Sivun tärkeimmän sisällön (esimerkiksi otsikon tai pääkuvan) pitäisi näkyä alle 2,5 sekunnissa latauksen alkamisesta. Sivun pitäisi reagoida kosketukseen tai klikkaukseen 200 millisekunnissa tai nopeammin. Ja sivun asettelun ei pitäisi hypähdellä latauksen aikana niin, että käyttäjä ehtii klikata väärää kohtaa. Näitä mitataan erikseen puhelimella ja tietokoneella, koska laitteiden suorituskyky ja verkkoyhteys eroavat toisistaan.

Nopeus on yksi Googlen hakusijoitukseen vaikuttavista tekijöistä, muttei ainoa eikä tärkein — sisällön osuvuus hakuun ratkaisee edelleen enemmän. Silti hidas sivu on konkreettinen syy, miksi kävijä poistuu ennen kuin ehtii nähdä mitään, riippumatta siitä, kuinka hyvin sivu muuten sijoittuu hakutuloksissa.

Suurin yksittäinen nopeuteen vaikuttava tekijä on yleensä kuvien koko: liian suurena ladattu kuva hidastaa sivua moninkertaisesti verrattuna oikein pakattuun ja oikean kokoiseen versioon samasta kuvasta. Tämä koskee erityisesti etusivun pääkuvaa, koska se on juuri se elementti, jonka latautumisnopeutta Core Web Vitals -mittari useimmiten seuraa. Muita tyypillisiä hidastajia ovat liian moni erillinen komentosarja tai lisäosa, hidas palvelin tai webhotelli, ja fontit, jotka ladataan usealta eri palvelimelta yhden sijaan. Jokainen näistä on yleensä korjattavissa jälkikäteenkin, mutta halvemmalla ja nopeammin, jos ne otetaan huomioon jo teknisen toteutuksen aikana. Nopeuden voi tarkistaa itse ilmaiseksi useilla verkossa toimivilla mittaustyökaluilla, jotka näyttävät sekä kokonaispisteet että sen, mikä yksittäinen tekijä hidastaa sivua eniten.

Valmispohja vai räätälöity toteutus?

Vaatimusten — nopeus, responsiivisuus, saavutettavuus, löydettävyys — täyttäminen onnistuu molemmilla toteutustavoilla, mutta lähtökohta on erilainen. Valmiiseen julkaisujärjestelmän teemaan pohjautuva sivusto tuo responsiivisuuden ja perusnopeuden usein valmiina teeman mukana, ja työ keskittyy sisällön sovittamiseen olemassa olevaan rakenteeseen. Räätälöity toteutus rakennetaan alusta asti juuri kyseisen yrityksen tarpeisiin, jolloin myös nopeus ja rakenne voidaan optimoida tarkemmin — mutta se vaatii enemmän suunnittelutyötä ennen kuin mitään näkyy.

Kumpi tapa sopii, riippuu siitä, kuinka tavanomainen sivuston tarve on. Esittely- ja yhteystietosivusto muutamalla alasivulla toimii yleensä hyvin valmiilla pohjalla. Räätälöinti kannattaa, kun sivusto on keskeinen osa liiketoimintaa tai kun tarvittava rakenne ei taivu valmiiseen teemaan. Kumpaankin tapaan liittyvä hintaero ja se, mistä osista hinta muodostuu, on eritelty kotisivujen hinnoittelussa.

Missä järjestyksessä sivustoprojekti etenee?

1. Rakenteen ja sisällön suunnittelu. Ensin päätetään, mitä sivuja sivustolla on ja missä järjestyksessä kävijä liikkuu niiden välillä — tämä sivukartta ohjaa kaikkea myöhempää työtä. Samassa vaiheessa kannattaa päättää, mikä on sivuston tärkein tavoite: myydäänkö sitä kautta suoraan, kerätäänkö yhteydenottoja vai onko sivusto lähinnä yrityksen käyntikortti hakukoneissa.
2. Sisällöntuotanto. Tekstit ja kuvat kannattaa aloittaa heti suunnitteluvaiheen jälkeen ja jatkaa rinnan teknisen toteutuksen kanssa, jotta sisältö on valmiina julkaisuun mennessä eikä jarruta muuta työtä. Sisällön viivästyminen on yksi yleisimmistä syistä, miksi sivustoprojekti venyy alkuperäisestä aikataulusta.
3. Ulkoasun suunnittelu. Sivuston visuaalinen ilme rakennetaan olemassa olevan visuaalisen ilmeen päälle, jos yrityksellä sellainen jo on — muuten ilme kannattaa suunnitella ensin, jotta sivusto ei jää irralliseksi muusta materiaalista. Tässä vaiheessa päätetään myös sivuston värit, typografia ja yleisilme sivupohjina, ennen kuin mitään koodataan.
4. Tekninen toteutus. Sivusto rakennetaan valitulle alustalle, ja sisältö syötetään järjestelmään sitä mukaa kuin se valmistuu. Tässä vaiheessa rakennetaan myös lomakkeet, mahdolliset integraatiot muihin järjestelmiin ja tekninen pohja hakukoneoptimoinnille.
5. Testaus. Sivusto testataan eri laitteilla ja selaimilla ennen julkaisua — mukaan lukien nopeus, responsiivisuus, lomakkeiden toimivuus ja linkkien toimivuus joka sivulla.
6. Julkaisu. Sivusto viedään tuotantoon, ja verkko-osoite ohjataan uuteen sivustoon. Julkaisu kannattaa ajoittaa hetkeen, jolloin muutosta voi vielä seurata ja korjata nopeasti, ei esimerkiksi juuri ennen pidempää poissaoloa.
7. Seuranta. Julkaisun jälkeen seurataan sekä teknistä toimivuutta että näkyvyyttä hakukoneissa — tähän tarvitaan analytiikka, josta kertoo lisää Google Analytics. Ensimmäisten viikkojen aikana kannattaa tarkkailla erityisesti sitä, löytävätkö kävijät perille asti vai jääkö joku vaihe — esimerkiksi lomakkeen lähetys — yllättäen kesken.

Näiden seitsemän vaiheen kesto vaihtelee paljon sen mukaan, tehdäänkö sivusto valmiille pohjalle vai räätälöidään tyhjästä — ja se, kumpi tapa sopii omaan tarpeeseen, vaikuttaa myös suoraan hintaan. Hintahaarukka ja se, mistä osista hinta muodostuu, käydään kokonaan läpi kotisivujen hinnoittelussa.

Sivusto ei myöskään ole koskaan lopullisesti valmis julkaisun jälkeen. Sisältöä päivitetään, tietoturvapäivityksiä asennetaan ja mittareita seurataan koko sivuston elinkaaren ajan — tämä jatkuva ylläpito kannattaa ottaa huomioon jo projektin alkuvaiheessa, jotta vastuu siitä on sovittu ennen julkaisua, ei vasta silloin, kun ensimmäinen päivitys pitäisi tehdä kiireessä.

Lähteet

• web.dev (Google) – Core Web Vitals
• Tilastokeskus – Väestön tieto- ja viestintätekniikan käyttö
• Saavutettavuusvaatimukset.fi (Traficom) – Soveltamisala: kuulummeko lain piiriin?