Mobiiliystävällisyys – responsiivinen suunnittelu vai mobile first?

Mobiiliystävällisyys on nykyaikana jo ihan perusedellytys kaikille sivustoille, sillä jopa yli puolet verkkoliikenteestä tapahtuu nimenomaan mobiililaitteilla. Onhan teidän yrityksenne kotisivut jo mobiiliystävälliset?

Tässä kirjoituksessa käsitellään sivustojen ja verkkokauppojen mobiiliystävällisyyttä sekä käsitellään sitä, mikä ero on responsiivisella ja mobiililähtöisellä suunnittelulla.

Mitä mobiili­ystävällisyys tarkoittaa?

Mobiiliystävällisyys tarkoittaa sitä, että sivustoa tai verkkokauppaa on helppoa käyttää mobiilissa. Sivusto esimerkiksi skaalautuu näytölle sopivaksi, latautuu nopeasti myös mobiiliyhteyksillä ja kaikki valikot sekä erilaiset painikkeet toimivat mobiilissa hyvin.

Onneksi nykyään suurin osa sivuston rakentajista toteuttaa sivuston oletuksena mobiiliystävällisesti. Nettisivujen tilaajan kannattaa kuitenkin aina olla tarkkana, että näin todella tapahtuu. Sen takia mobiiliystävällisyydestä tulisi sopia samalla, kun sovitaan kotisivujen rakentamisesta.

Yleensä vanhoja jo olemassa olevia sivustoja ei voida suoraan muuttaa napin painalluksella mobiiliystävällisiksi, vaan kannattavampaa on rakentaa sivusto kokonaan uusiksi ja alusta asti mobiiliystävälliseksi.

Responsiivinen suunnittelu

Responsiivinen suunnittelu (engl. responsive design) tarkoittaa sitä, että verkkosivusto suunnitellaan vastaamaan käyttäjän näytön kokoa, alustaa ja orientaatiota. Yksinkertaisuudessaan sivusto siis mukautuu eri näyttökokoihin sopivaksi. Sama sivusto skaalautuu esimerkiksi tietokoneelle, tabletille ja älypuhelimeen.

Responsiivisessa suunnittelussa lähdetään yleensä rakentamaan sivustoa ensisijaisesti tietokoneille, mutta sivuston mukautuu myös mobiililaitteille sopivaksi. Responsiivisessa suunnittelussa ei kuitenkaan aina saavuteta parasta mahdollista lopputulosta mobiilikäyttäjien näkökulmasta.

Mobile first -suunnittelu

Mobiililähtöinen suunnittelu (engl. mobile first) tarkoittaa nimensä mukaisesti sitä, että sivusto rakennetaan ensisijaisesti toimimaan hyvin mobiililaitteilla. Tällainen sivusto mukautuu yleensä hyvin myös isommalle näytölle, mutta mobiilikäyttöä on haluttu tietoisesti optimoida.

Mobiililähtöinen suunnittelu ei olekaan sama asia kuin responsiivinen suunnittelu. Merkittävin ero näiden kahden välillä liittyy siihen, miten suunnittelua lähdetään tekemään: responsiivisessa suunnittelussa sivut rakennetaan ensisijaisesti työpöytäversioksi, kun taas mobiililähtöisessä suunnittelussa lähdetään liikkeelle nimen mukaisesti mobiiliversiosta.

Sivuston täytyy olla mobiiliystävällinen

Verkkokauppojen ja kotisivujen tulee nykyaikana olla aina mobiiliystävällisiä, sillä yhä useammat käyttävät niitä mobiililaitteillaan. Maailmanlaajuisesti 50,44 % kaikesta verkkoliikenteestä tapahtui mobiililaitteilla toukokuussa 2020.

Lähde: Statista

Sivuston mobiiliystävällisyys vaikuttaa myös suoraan sivuston konversioon. Jos sivuston käyttö on hanakalaa tai jopa mahdotonta mobiilissa, voi vierailija helposti turhautua sivuston hankalaan käyttöön tai hän ei löydä sieltä etsimäänsä. Pahimmassa tapauksessa käyttäjät poistuvat sivustolta välittömästi, jos sivusto ei ole mobiiliystävällinen.

Sivustojen rakentaminen mobiiliystävälliseksi on myös huomattavasti parempi vaihtoehto kuin aiemmin käytössä ollut tapa, rakentaa kaksi erillistä versiota: toinen tietokoneille ja toinen mobiililaitteille. Molempia versioita piti yleensä päivittää erikseen, joten toiselle niistä jäi liiankin helposti vanhentunutta sisältöä ja tietysti myös työmäärä oli suurempi.

Vaikutus hakukonenäkyvyyteen

Sivustojen mobiiliystävällisyys vaikuttaa myös suoraan hakukonenäkyvyyteen ja -sijoituksiin. Esimerkiksi hakukonejätti Google on kertonut, että mobiiliystävällisyys on yksi asioista, joihin he kiinnittävät huomiota. Lue tarkemmin hakukoneoptimoinnista.

Google on ilmoittanut ottavansa mobiililähtöisen indeksoinnin käyttöön syyskuussa 2020. Tämä tarkoittaa sitä, että suurin osa sivustojen indeksoinneista tullaan jatkossa tekemään nimenomaan niin kutsutun mobiilibotin toimesta. Jos botti havaitsee, ettei sivusto ole mobiiliystävällinen, voidaan olettaa sen hakutulossijoituksen heikkenevän.

Lähde: Webmasters Google Blog

Mobiiliystävällisen sivuston toteutus

Aluksi on tietenkin selvitettävä, onko nykyinen sivusto mobiiliystävällinen vai täytyykö sivusto lähteä rakentamaan kokonaan alusta. Sivuston toteutuksen kannalta on tärkeää, valita käytetäänkö responsiivista vai mobiililähtöistä suunnittelua.

Testaa nykyinen sivustosi

Oman kotisivun tai verkkokaupan mobiiliystävällisyys on helppoa testata siihen tarkoitetun testin avulla. Ilmaisia työkaluja tähän tarkoitukseen on olemassa useita, yksi hyvä vaihtoehto on esimerkiksi Googlen mobiiliystävällisyystesti.

Testityökalun lisäksi kannattaa tietenkin myös testata vielä itse omaa sivustoa erilaisilla laitteilla. Tähän voi pyytää apua esimerkiksi kollegoilta tai ystäviltä. Pelkän ulkoasun tarkistamisen lisäksi, on tärkeää kokeilla myös erilaisia painikkeita, valikoita ja lomakkeita, että ne toimivat toivotulla tavalla.

Resposiivinen vai mobile first -suunnittelu?

Kumpaa suunnittelutapaa kannattaisi käyttää, kun lähdetään toteuttamaan uutta sivustoa? Vastaus riippuu täysin siitä, millä alustalla vierailijat sivustoa ensisijaisesti käyttävät. Jos esimerkiksi suurin osa vierailijoista käyttää sivuston työpöytäversiota, kannattaa ensisijaisesti valita responsiivinen suunnittelu. J os taas suurin osa liikenteestä tulee mobiililaitteilta, kannattaa ehdottomasti valita mobiililähtöinen suunnittelu.

Tietoa sivuston vierailijoiden suosimasta alustasta kannattaa selvittää sivuston analytiikan avulla. Suurin osa yleisimmistä analytiikkatyökaluista osaa erotella mobiilikäyttäjät työpöytäversiota käyttävistä vierailijoista. Jos sivustolla ei ole minkäänlaista kävijäseurantaa käytössä, voidaan sitä varten tehdä esimerkiksi ilmaista Google Analytics -työkalua.

Rakenna omat responsiiviset kotisivut

Rakenna omat responsiiviset kotisivut Zonerin palveluilla helposti ja nopeasti. Voit valita joko suositun WordPress-julkaisujärjestelmän tai kätevän kotisivukoneen.