Mitkä ihmeen responsiiviset websivut? - Make Helsinki

Mitkä ihmeen responsiiviset websivut?

by: Petteri Kolehmainen
  •   Webkehitys •  5.8.2019   •  3 minuutin lukuaika

Responsiivisistä websivuista on puhuttu jo vuosia, mutta edelleen usein keskusteluissa nousee esille se, ettei termin merkitys ole aivan selkeä. Tärkeää se kuitenkin on, että websivut ovat responsiivisia!

Virallisesti termiä kuvataan näin: Responsiivinen websuunnittelun avulla HTML ja CSS automaattisesti muuttavat websivuja muutamalla niiden kokoa, sekä suurentamalla, pienentämällä tai piilottamalla sivun osioita.

Ihanaa teknistä jargonia. Käytännössä siis responsiivinen websivu suunnitellaan siten, että se toimii kaikilla (tai mahdollisimman monilla) erikokoisilla näytöillä – oli kyse sitten puhelimesta, tabletista, tietokoneesta, olohuoneen telkkarista tai modernin jääkaapin näytöstä. Ja koska esimerkiksi puhelimia on monenmoista erilaista näyttökokoa, tulisi sivuston toimia joustavasti millä tahansa mahdollisella koolla. Sen pitäisi toisin sanoen mukautua erilaisiin näyttökokoihin nopeasti ja tarkasti – eli responsiivisesti.

Tämä mukautus tapahtuu monenlaisin menetelmin. Tekstien ja kuvien kokoa voidaan muuttaa. Vierekkäin olevia elementtejä voidaan pinota päällekäin. Valikko voidaan siirtää ylhäältä sivuun. Video tai iso kuva voidaan piilottaa. Sisällön näyttämistä voidaan muokataan siten, että se olisi jokaisella laitteella mahdollisimman selkeää, kaunista ja helposti lähestyttävää.

Käyttökokemus edellä

Jos websivujen käyttökokemussuunnittelu on tehty oikein, näytetään eri laitteilla mahdollisesti hieman erilaista sisältöä. Jos esimerkiksi menet huonekaluliikkeen sivuille tietokoneella, haluat ehkä ensisijaisesti selata tuotteita. Kun taas menet samoille sivuille puhelimella, etsitkin ehkä jo yhteystietoja, jotta voit soittaa tai navigoida myymälään.

Tämä laitteille optimointi saavutetaan siten, että sivusto tunnistaa näytön kokoluokan: puhelin, tabletti vai tietokone. Näin sivusto ei ole ainoastaan responsiivinen, vaan myös optimoitu erilaisille laitteille ja niiden pääkäyttötapauksille. Kokeile vaikka näitä sivuja: Puhelinta kääntämällä mukautuu sivun sisältö ja tekstin koot muuttuneeseen kuvakulmaan. Tai tietokoneella voit ottaa kiinni selaimen oikeasta reunasta ja pienentää ikkunan kokoa; huomaat, kuinka sisältö mukautuu selaimen kokoon reaaliajassa responsiivisesti.

Make Helsinki websivut tietokoneella ja mobiilissaMake Helsingin websivut tietokoneella ja puhelimessa

Ihmiset selaavat websivuja enemmän ja enemmän mobiililaitteilla. Nykyisin useat sivut suunnitellaan niin sanotusti “mobile first”, eli puhelinnäkymä edellä, jotta kokemus puhelimella olisi mahdollisimman hyvä ja käytettävä. Mutta edelleen löytyy sivustoja, jotka on toteutettu vain tietokoneen näyttökoot mielessä. Ja jokainen joka on puhelimella näitä sivuja selaillut, tietää kuinka epämiellyttävä se kokemus voi olla.

Jos siis omat websivusi ei vielä ole responsiivisiä, niin nyt on aika modernisoida sivusi! Et ainoastaan paranna asiakaskokemusta, vaan annat myös luotettavamman kuvan itsestäsi ja brändistäsi.

PS, usein joko tarkoituksella tai vahingossa responsiiviset sivut eivät taitukaan kaikille näyttökoille. Tämä voi johtua testauksen puutteesta, erikoisista näyttökoista tai vain ihan asioiden tärkeydestä tuotekehityksessä. Jos esimerkiksi palvelun käyttäjistä 0.1% käyttää AppleTV:tä sen selailuun, ei optimointi juuri tuolle näyttökoolle ehkä ole se tärkein asia kehityslistalla. ?

Leave a Reply

Your email address will not be published. Required fields are marked *