Sivujen responsiivinen suunnittelu (responsive webdesign)

Mobiilikäyttäjien osuus nettisivuilla on ylittänyt maailmanlaajuisesti jo 50% kaikesta nettiliikenteestä, joten on erittäin tärkeää että sivut näyttävät hyviltä myös kapeissa näytöissä.

Myös hakukoneet arvostavat mobiiliystävällisyyttä. Responsiiviset sivut löytyvät helpommin Googlen hakutuloksissa. Sivut, jotka eivät näy käyttäjilleen oikein, putoavat hakutuloksissa alaspäin, sillä hakukone huomaa, että kävijät eivät viihdy sivustolla. Jos kävijät poistuvat nettisivuilta nopeasti, hakukone pitää sivuja huonoina, vaikka sisältö olisi ok.

Responsiivisilla kotisivuilla tarkoitetaan sitä, että nettisivu mukautuu erilaisten päätelaitteiden näytön leveyteen ilman, että sivusta tulee hankala tai lukukelvoton.

Responsiivisissä verkkosivuissa tärkeää onkin se, että

  • Sivupohja muuttuu käyttäjäystävälliseksi kuhunkin näyttöön
    • Teksti on lukukelpoista joka laitteessa
    • Sisältöä ei tarvitse suurennella/pienennellä
    • Skrollaus eli sivujen vierittäminen vaakasuunnassa minimoidaan
    • Navigointi (linkit) tehdään selkeäksi ja helpoksi (erilaiset kapeaan näyttöön)

Ylläpidon kannalta on helpompaa, kun sivuista tehdään vain yksi versio, jonka sisältö mukautuu vierailijan näytön kokoiseksi. Joskus joutui nimittäin tekemään monta versiota. Erilaisia näyttökokoja on nykyään niin paljon, ettei jokaiselle ole järkevää tehdä omaa versiota.

Älypuhelin pystysuunnassa, erityisen pienet näytöt
  • Näyttö kapeampi kuin 576 pikseliä
  • Useimmat kännykät pystysuunnassa
Älypuhelin vaakasuunnassa, pienet näytöt
  • Käännettäessä kännykkä vaakasuuntaan
  • Näyttö leveämpi kuin 576 pikseliä.
Tabletti-näytöt, keskikokoiset näytöt
  • Vähintään 768 pikseliä
  • Riippuen tabletista se voi toteutua vaakasuunnassa tai pystysuunnassa
  • Nettisivuilla ylävalikko voi olla tabletti-näytön resoluutiolla usein vielä ”hampurilais”-menuna (kolme vaakaviivaa, josta klikkaamalla avautuu valikko)
Desktop-näytöt, suuret näytöt
  • Tietokoneen näytöistä puhutaan silloin, kun näyttö vähintään 992 pikseliä
  • Nettisivuilla ylävalikko voi olla tässä näytön leveydessä nettisivupohjasta riippuen joko vielä ”hampurilais”-menuna tai avattuna auki.
Suuret desktop-näytöt, erityisen suuret laitteet
  • Suuremmista tietokoneen näytöistä puhutaan silloin, kun näytön leveys on vähintään 1200 pikseliä
  • Useimmiten tällöin ylämenu kokonaisena ja yrityksen logo isoa

Googlen mobiililaitesoveltuvuustesti:

https://www.google.com/webmasters/tools/mobile-friendly/

Miia Ylisen blogi, jossa paljon hyvää tietoa:

https://miiaylinen.fi/testaa-sivustosi-mobiiliresponsiivisuus/