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

20.6.2022
Mikä on paluulinkki?
Jukka Peltoperä

Paluulinkki on kaikessa yksinkertaisuudessaan linkki yhdeltä verkkosivustolta toiselle verkkosivustolle. Yleensä käsitteellä viitataan tietyn sivuston paluulinkkeihin eli kyseiselle verkkosivulle muilta verkkosivustoilta osoittavia linkkejä. Google ja muut hakukoneet käyttävät paluulinkkien määrää, laatua […]

Lue juttu
10.5.2022
Mikä on halvin webhotelli?
Jukka Peltoperä

Web-suunnittelijana sanon aina, että hyvä hosting ei ole paikka säästää silloin, kun yritys aikoo tosissaan löytyä netistä ja tehdä siellä verkkoliiketoimintaa. Vaikka pysyn sanojeni takana, myönnän, että joillakin on joskus […]

Lue juttu
8.4.2022
Näin piilotat PHP-varoitukset ja -ilmoitukset WordPressissä
Jukka Peltoperä

PHP-varoitukset ja -ilmoitukset tarjoavat hyödyllistä tietoa kehittäjille, mutta tavallisten kävijöiden ei ole hyvä nähdä niitä. PHP-varoituksia ja -ilmoituksia voi ilmaantua näkyviin sivuillasi esimerkiksi silloin, kun muutat käytössä olevan PHP-version tai […]

Lue juttu
25.2.2022
Negatiivinen hakukoneoptimointi ja siltä puolustautuminen
Jukka Peltoperä

Tämän blogijutun aiheena on negatiivinen hakukoneoptimointi. Jutussa kerromme mitä negatiivinen hakukoneoptimointi on, miten haitallista se voi olla verkkosivustoille, miten Google suhtautuu siihen, sekä mitä voit tehdä tunnistaaksesi negatiivisen hakukoneoptimoinnin ja […]

Lue juttu
21.2.2022
WordPress ja puuttuva "Ota automaattiset päivitykset käyttöön" -linkki
Jukka Peltoperä

WordPress-sivustoja ylläpitäneet tietävät, että julkaisujärjestelmä osaa päivittää itse itsensä, kun siihen ilmestyy uusi tietoturvapäivitys. WordPress osaa myös tarkistaa säännöllisesti, onko asennettuihin ulkoasuteemoihin ja lisäosiin tullut uusia päivityksiä ja ilmoittaa niistä […]

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.