Mitä tarkoittaa responsiivinen suunnittelu

Nykyään yli puolet verkkoliikenteestä tulee puhelimilla ja tabletteilla. Jos sivusto ei toimi kunnolla pienellä näytöllä, asiakas lähtee muualle. Responsiivinen suunnittelu tarkoittaa sitä, että verkkosivut mukautuvat automaattisesti käyttäjän näytön kokoon — oli kyseessä sitten pöytätietokone, tabletti tai älypuhelin.

Mitä responsiivisuus tarkoittaa käytännössä

Responsiivisuus tarkoittaa että sama sivusto näyttää erilaiselta eri laitteilla, mutta toimii kaikilla yhtä hyvin. Isolla näytöllä voi olla useita sarakkeita vierekkäin, kuvia rivissä ja leveä navigointipalkki. Pienellä puhelimen näytöllä sama sisältö asettuu allekkain yhdeksi sarakkeeksi, kuvat skaalautuvat ja valikko piiloutuu hampurilaispainikkeen taakse.

Käyttäjän ei tarvitse zoomata, vierittää sivuttain tai arvailla missä painikkeet ovat. Kaikki on suunniteltu toimimaan luonnollisesti kullakin näyttökoolla.

Miksi responsiivinen suunnittelu on tärkeää

Ajattele omaa käyttäytymistäsi. Kun etsit puhelimella palvelua ja sivusto on hankala käyttää, suljet sen sekunneissa. Asiakkaasi tekevät samoin. Responsiivinen suunnittelu vaikuttaa suoraan siihen, saatko asiakkaan pysymään sivuillasi vai meneekö hän kilpailijalle.

Erityisesti palveluja hakevat ihmiset käyttävät usein puhelinta. He etsivät yhteystietoja, vertailevat hintoja ja tekevät yhteydenottoja liikkeellä ollessaan. Jos yhteydenottolomake ei toimi puhelimella tai puhelinnumeroa ei voi painaa soittaakseen, menetät asiakkaan.

Esimerkkejä hyvästä ja huonosta responsiivisuudesta

Hyvin toteutettu responsiivinen sivusto tunnistaa automaattisesti käyttäjän laitteen. Tekstin koko pysyy luettavana, painikkeet ovat riittävän isoja sormella painettaviksi ja sivun latausaika on nopea. Kuvat mukautuvat näytön leveyteen eivätkä venytä sivua.

Huonosti toteutetulla sivustolla teksti on liian pientä puhelimella, painikkeet ovat liian lähellä toisiaan eikä niitä saa painettua oikein. Sivua pitää vierittää sivusuunnassa ja taulukot menevät näytön ulkopuolelle. Tällaiset ongelmat kertovat asiakkaalle että sivusto on vanhentunut.

Miten Google suhtautuu responsiivisuuteen

Google käyttää mobiiliversiota sivustosta ensisijaisena versiona hakutulosten järjestämisessä. Tätä kutsutaan mobile-first-indeksoinniksi. Jos sivustosi ei toimi puhelimella, se voi pudota hakutuloksissa huomattavasti alemmaksi.

Responsiivinen suunnittelu on Googlen suosittelema tapa toteuttaa mobiiliystävälliset sivut. Vaihtoehtoina olisivat erilliset mobiilisivut tai dynaaminen tarjoilu, mutta responsiivinen ratkaisu on ylivoimaisesti yleisin ja helpoin ylläpitää. Yksi sivusto palvelee kaikkia laitteita.

Miten testaat onko sivustosi responsiivinen

Helpoin tapa on avata sivustosi puhelimellasi. Katso näyttääkö teksti luettavalta, toimivatko painikkeet ja pääsetkö kaikkiin sivuihin ilman sivuttaisvieritystä.

Voit myös käyttää Googlen ilmaista Mobile-Friendly Test -työkalua. Syötä sivustosi osoite ja työkalu kertoo onko sivustosi mobiiliystävällinen. Tietokoneen selaimessa voit myös kaventaa selainikkunan leveyttä ja katsoa miten sivusto mukautuu.

Yleisimmät ongelmat responsiivisuudessa

Moni vanhempi sivusto on rakennettu aikana jolloin mobiililaitteet eivät olleet yleisiä. Tyypillisiä ongelmia ovat kiinteälevyiset taulukot jotka eivät mahdu pienelle näytölle, liian pienet fontit ja klikkauskohteet sekä kuvat jotka eivät skaalaudu.

Toinen yleinen ongelma on Flash-sisältö tai vanhat upotukset jotka eivät toimi mobiililaitteilla lainkaan. Myös liian monimutkaiset valikkorakenteet voivat olla hankalia pienellä näytöllä.

Sinun ei tarvitse ymmärtää tekniikkaa

Responsiivinen suunnittelu on tekninen toteutustapa, mutta sinun ei tarvitse ymmärtää sen toimintaperiaatteita. Kun tilaat verkkosivut, varmista että ne tehdään responsiivisiksi. Kaikki ammattimaisesti toteutetut sivustot ovat nykyään responsiivisia.

Jos sinulla on jo sivusto joka ei toimi puhelimella, se kannattaa uudistaa. Vanhentunut sivusto ei palvele asiakkaitasi eikä Googlea. Responsiivinen suunnittelu on perusvaatimus nykyaikaisille verkkosivuille.