Erilaisia päätelaitteita: pöytäkone, kannettava tietokone ja matkapuhelin.

Responsiivinen web-suunnittelu

Jukka Peltoperä
Jukka Peltoperä
Julkaistu:  2.9.2019. Päivitetty:  16.11.2021.

Olen pistänyt merkille, että yhä useampi asiakkaista on tehnyt ennen tarjouksen pyytämistä taustatyötä ainakin sen verran, että tietävät vaatia uusilta verkkosivuiltaan responsiivisuutta. Tämä on liiketoiminnan kannalta erittäin valveutunutta ja hienoa toimintaa! Mitä responsiivinen suunnittelu tarkoittaa, mitä hyötyä siitä on ja miten sitä tehdään?

Yhä useampi käyttää nettiä mobiililaitteilla

Ennen sivut suunniteltiin pöytätietokoneelle ja riitti, että ne toimivat ja näkyivät oikein niiden suurilla näytöillä. Nykyään on välttämätöntä, että sivut toimivat myös kannettavilla tietokoneilla, tablettitietokoneilla ja puhelimilla. Sivujen informaation tulee olla saatavilla iPhoneilla, iPadeilla, kaikilla Android-laitteilla ja muilla alustoilla, sekä kaikilla mahdollisilla näytön resoluutioilla.

Kolmella neljästä suomalaisesta on käytössään kosketusnäytöllä ja internetyhteydellä varustettu puhelin. Kaksi kolmesta on käyttänyt internetiä viimeisen kolmen kuukauden aikana kannettavalla tietokoneella. Yli puolella kotitalouksista on käytössään tablettitietokone.

StatCounterin mukaan mobiililaitteet ohittivat lokakuussa 2017 internetin käytössä pöytätietokoneet ensimmäistä kertaa historiassa. Sen jälkeen markkinaosuudet ovat tasaantuneet, mutta mobiililaitteet ovat edelleen suosituin tapa käyttää nettiä (55,35 %) verrattuna pöytäkoneisiin (44,56 %). StatCounterin tilastojen mukaan Suomessa pöytätietokoneet ovat edelleen suosituin laite (61 % vs. 39 %).

Vuonna 2017 noin 88 prosenttia käytti internetiä ja 68 prosenttia käytti sitä puhelimella. Pääasiallisia käyttötarkoituksia ovat asioiden hoitaminen, viestintä, medioiden seuraaminen ja tiedonhaku.

Pöytätietokoneiden, puhelimien ja tablettien käyttäjien määrä internetissä 2012-2019

Työasematietokoneiden, kannettavien tietokoneiden, tablettitietokoneiden, älypuhelimien lisäksi erityisesti nuoret käyttävät nettiä myös muilla pienlaitteilla, kuten älykelloilla, aktiivisuusrannekkeilla, sähköisillä lukulaitteilla, käsipelikonsoleilla ja mp3-soittimilla.

Web-suunnittelussa ja -kehityksessä olemme tulleet siihen pisteeseen, että emme kykene pysymään mukana loputtomassa määrässä erilaisia laitteita ja resoluutioita. Sivuston suunnittelu erikseen jokaiselle laittelle ja resoluutiolle on epäkäytännöllistä tai suorastaan mahdotonta. Pitääkö meidän tyytyä siihen, että sivut toimivat oikein vain osalla laitteista?

Responsiivinen web-suunnittelu

Ajatellaan perinteistä "kiinteää" verkkosivua, jolla on esimerkiksi kolme vierekkäistä saraketta. Tietokoneella tarkasteltaessa kaikki sarakkeet näkyvät rinnakkain, kuten ne on suunniteltukin näkymään.

Tarkasteltaessa sivua resoluutioltaan pienemmällä tabletilla, sarakkeet eivät mahdu yhtä aikaa näytölle, vaan verkkoselain voi näyttää vaakavierityspalkin tai pienentää sarakkeiden sisältöä siten, että niiden sisältö on huonommin luettavissa ilman zoomaamista. Pienellä älypuhelimen näytöllä sivut voivat olla vielä vaikeammin luettavissa. Omat haasteensa tuovat myös mobiililaitteiden "käännettävyys" – niitä voidaan käyttää sekä vaaka- että pystyasennossa.

Responsiivinen web-suunnittelu

Responsiivinen web-suunnittelu (engl. Responsive web design) tarkoittaa suunnittelutapaa, jolla pyritään siihen, että verkkosivujen tulee vastata käyttäjän käyttäytymiseen ja käyttöympäristön näytön kokoon, alustaan ja orientaatioon. Siinä sisältö, ulkoasu ja suorituskyky kaikilla laitteilla ovat käytettävyyden ja käyttäjätyytyväisyyden lähtökohta.

Responsiivisesti suunnitellut eli mobiiliystävälliset verkkosivut mukautuvat käyttöympäristöön hyödyntämällä joustavia ruudukoita, ulkoasuja ja kuvia sekä älykkäitä CSS3-mediakyselyjä. Siinä sivulla olevia elementtejä kutsutaan suhteellisilla yksilöillä, kuten prosenteilla, absoluuttisten yksikköjen, kuten pikseleiden tai pisteiden, sijaan. Esimerkiksi kuville voidaan asettaa ominaisuus-arvopari max-width: 100%, jolloin ne eivät voi ulottua isäntäelementin ulkopuolelle.

Mediakyselyjen ansiosta sivut voivat käyttää siis eri CSS-tyylisääntöjä sen perusteella, minkälaisella laitteella sivua tarkastellaan, esimerkiksi selainikkunan leveys. Responsiivinen ulkoasu mukautuu mihin tahansa näytön kokoon, olipa kyseessä sitten pöytätietokone, kannettava tietokone, tabletti, puhelin tai mikä tahansa muu päätelaite.

Kiinteät verkkosivustot voidaan muuttaa mobiiliystävällisiksi tekemällä muutoksia niiden HTML- ja CSS-koodiin. Aiemmin kuvattu kolmen sarakkeen esimerkki voitaisiin toteuttaa esimerkiksi siten, että isoilla näytöillä samalla rivillä näkyisi kolme saraketta, keskikokoisilla näytöillä kaksi saraketta ja pienillä näytöillä yksi sarake.

Mobile First

Useimmat web-suunnittelijat suunnittelevat verkkosivustoja pöytäkoneilla ja yrittävät vasta sitten saada niitä toimimaan hyvin mobiililaitteilla.

Vuoden 2010 Mobile World Congress -tapahtumassa Googlen toimitusjohtaja Eric Schmidt esitti, että web-kehittäjien tulisi noudattaa suunnittelussa mobile first -sääntöä. Tai oikeastaan se ei ole sääntö, vaan suunnittelustrategia. Siinäkin käytetään responsiivista suunnittelua, mutta mobiilikäyttäjien tarpeet etusijalla. Mobile first -ajatukseen liittyy kolme termiä: progressive advancement, graceful degration ja unobstructive JavaScript.

Progressive Advancement on suunnittelustrategia, jossa korostetaan verkkosivuston sisältöä. Sivustosta luodaan ensin hyvin yksinkertainen versio, jossa perussisältö on saatavilla kaikilla verkkoselaimilla. Tämän jälkeen sivustolle lisätään vähitellen monivivahteisempia ja teknisesti vaativampia toimintoja ja ominaisuuksia muun muassa CSS:n ja JavaScriptin avulla, huomioiden kuitenkin loppukäyttäjän selainasetukset. Strategian avulla pyritään luomaan saavutettavampia sivustoja, koska näin suunnitelluilla sivuilla perussisältö on aina saatavilla.

Graceful Degration strategiassa suunnittelu aloitetaan edistyneemmästä päästä, kuten pöytätietokoneista. Sivustosta luodaan aluksi ominaisuuksiltaan monipuolinen versio, jota aletaan kehittämään mobiiliystävälliseksi vähentämällä asteittain joitakin toimintoja ja sisältöjä.

Unobstructive JavaScript on yleinen lähestymistapa JavaScriptin käyttöön verkkosivustoilla. Vaikka termille ei ole virallista määritelmää, se ymmärretään yleensä verkkosivuston toiminnallisuuksien erottamista sen rakenteesta, sisällöstä ja esitystavasta. Sen avulla pyritään välttämään JavaScriptin käytöstä tavallisesti aiheutuvia ongelmia, kuten selaimiten yhteensopivuusongelmia.

Responsiivisuus vaikuttaa hakukoneoptimointiin

Google on rakennettu palvelemaan käyttäjiä, jotka tekevät hakuja netissä. Sen käyttäjät käyttävät mobiililaitteita ja siksi Google suosii verkkosivustoja, jotka kykenevät vastaamaan sen käyttäjien tarpeisiin.

Google suosii sivustoja, jotka on suunniteltu responsiivisesti, optimoitu mobiililaitteille ja on mobiiliystävällisiä. Responsiivisilla sivuilla on parempi käytettävyys, pienempi poistumisprosentti (engl. bounce rate) ja ne latautuvat nopeammin. Niillä ei ole päällekkäistä sisältöä (vrt. erillinen sivu mobiililaitteille) ja niitä jaetaan enemmän sosiaalisessa mediassa.

Responsiivisuus on ollut vuodesta 2015 lähtien yksi Googlen ranking-perusteista – niistä muuttujista, jota se käyttää järjestäessään sivustoja arvioidessaan niiden relevanssia suhteessa käyttäjien hakuihin. Mobiiliystävälliset sivustot saavat enemmän näkyvyyttä sekä enemmän ja kohdennetumpia kävijöitä.

Suunnittelemme mobiiliystävällisiä sivuja

Web-suunnittelu Pokis noudattaa suunnittelussa responsiivista suunnittelua.

Käytämme aina vain responsiivisia WordPress-ulkoasupohjia ja teemme sivuista mobiiliystävälliset.

Testaamme sivut useilla laitteilla ennen julkaisua ja teemme tarvittavat säädöt.

Lisätietoa ja lähteet

Lisää juttuja aiheesta

6.9.2023
Sisäiset linkit ja linkitys hakukoneoptimoinnissa
Jukka Peltoperä

Ennen kuin verkkosivusto voi sijoittua hakukoneissa hyville sijoituksille, se tarvitsee linkkejä. Google löytää artikkelisi ja sivusi parhaiten, kun niihin johtaa ulkoisia linkkejä eli paluulinkkejä. Toinen tapa parantaa hakukonelöydettävyyttä on parantaa […]

Lue juttu
10.8.2023
WordPress-kotisivut yritykselle: Lyhyt opas aiheeseen
Jukka Peltoperä

WordPress on suosittu ja monipuolinen verkkosivustoalusta, joka tarjoaa tehokkaan työkalun yrityksesi kotisivujen luomiseen ja hallintaan. Kotisivut ovat nykypäivänä tärkeä osa yrityksen online-läsnäoloa. Ne toimivat digitaalisena käyntikorttina, jonka kautta mahdolliset asiakkaat […]

Lue juttu
7.8.2023
Sivuvälimuisti ja palvelimen vastausaika
Jukka Peltoperä

Saitko WordPressin sivuston eheys -sivulla seuraavan ilmoituksen: "Sivuvälimuisti löydettiin, mutta palvelimen vastausaika on silti hidas."? Englanniksi sama ilmoitus kuuluu näin: "Page cache is detected but the server response time is […]

Lue juttu
4.8.2023
Sivustolla on ollut kriittinen virhe – ja sen korjaaminen
Jukka Peltoperä

Onko WordPress-sivustollasi kriittinen virhe tai saitko sähköpostilla ilmoituksen sellaisesta ? Ei hätää. Vaikka "kriittinen virhe" kuullostaa kohtalokkaalta ja perustavanlaatuiselta, sen saa aina korjattua. WordPress saattaa joskus näyttää virheilmoituksen: "Sivustolla on […]

Lue juttu
3.8.2023
WooCommerce-verkkokaupan maksutapojen järjestäminen
Jukka Peltoperä

WooCommerce on yksi suosituimmista verkkokauppa-alustoista, joka tarjoaa laajan valikoiman työkaluja verkkokaupan rakentamiseen ja ylläpitoon. Yksi sen keskeisimmistä ominaisuuksista on laaja valikoima maksutapoja, joita voit tarjota asiakkaillesi. Tunnettuja maksuvälittäjiä ovat mm. […]

Lue juttu
Jukka Peltoperä
Jukka Peltoperä
FM, tietojenkäsittelytieteet, Oulun yliopisto. Yrittäjä. Yli 20 vuoden kokemus web-suunnittelusta, web-teknologioista, WordPressistä, hakukoneoptimoinnista, sisällöntuotannosta ja digitaalisesta markkinoinnista.