10 virhettä responsiivisessa web-suunnittelussa

Julkaistu 1.12.2015
Heikki Kujala
  1. Kävijöiden analysoinnin epäonnistuminen
  2. Työpöytäversiosta aloittaminen
  3. Testauksen puute
  4. Liian pienet toimintapainikkeet
  5. Hitaasti latautuvat mobiilisivut
  6. Vähemmän sisältöä mobiiliversiossa
  7. Ainoastaan yhden kuvakoon tukeminen
  8. Sähköposti ei ole responsiivinen
  9. Zoomin poistaminen
  10. Raja-arvojen määrittäminen laitteen leveyden perusteella

1. Kävijöiden analysoinnin epäonnistuminen

  • Jälleenmyyjä rakentaa web-sivuston huomioimatta asiakkaiden muuttuvaa käyttäytymistä.
  • Käyttäytymisen analysointi on kriittistä, koska se paljastaa mitkä ovat eniten käytetyt mobiililaitteet ja toiminnot, myyntiä lisäävät asiat jne.
  • Nämä asiat pitää huomioida käyttäjäkokemuksen toteuttamisessa.

2. Työpöytäversiosta aloittaminen

  • Suuri osa verkkokaupoista aloittavat rakentamisen työpöytäversiosta ja sovittaa sitten pienemmälle näytölle.
  • On olemassa useita teknisiä haasteita saada sivusto toimimaan tällä lähestymistavalla, joten kannattaa ensin rakentaa mobiiliversio.

3. Testauksen puute

  • Sivuston testaus ennen julkaisua on äärimmäisen tärkeä asia.
  • Silti nykyään monia responsiivisista web-sivustoista ei olla testattu lainkaan.
  • Monilla jälleenmyyjillä on niukat resurssit, jonka vuoksi kehittäjät julkaisevat sivuston mahdollisimman nopeasti testaamatta sitä.
  • Vähintään yleisimmällä web-selaimilla ja käyttöjärjestelmillä pitää testata.

4. Liian pienet toimintapainikkeet

  • Jotkut yritykset yrittävät sovittaa kaikki käyttöliittymäelementit pienelle älypuhelimen näytöllä, jolloin toimintapainikkeet ovat liian pieniä, jotta niitä huomaisi.
  • Jos käyttäjä pakotetaan zoomaamaan toimintapainikkeet isoiksi, jotain on pahasti pielessä.
  • Nykyään läppäreissäkin on kosketusnäyttöjä, joten on tärkeää varmistaa toimintapainikkeiden olevan riittävän suuria.

5. Hitaasti latautuvat mobiilisivut

  • Mobiilikäyttäjät klikkaa innokkaasti painikkeita, eivät ole kärsivällisiä odottamaan sivun toimintaa.
  • Kaikkien käyttöliittymäelementtien latausajat kannataa mitata.
  • Googlekin nykyään arvostaa nopeaa latausaikaa hakutuloksissa.

6. Vähemmän sisältöä mobiiliversiossa

  • Joskus mobiilikäyttäjille ei näytetä täyttä sisältöä, jotta sivun koko olisi pienempi.
  • Joskus sisältö on piilotettu mobiikäyttäjiltä, jolloin sivua ei renderöidä ajoissa.
  • Muut sivustot muodostavat sisällön dynaamisesti, joka parantaa latausaikaa.
  • Vähemmän sisällön näyttäminen mobiilikäyttäjille ei ole hyvä idea, koska monet ostajat usean tyyppisiä laitteita ostamiseen verkkokaupoissa.

7. Ainoastaan yhden kuvakoon tukeminen

  • Hyvin suunniteltu responsiivinen web-sivusto on joustava tukemaan eri kokoisia kuvia.
  • Yksi toimintatapa on määritellä kuvien koko suhteellisiksi css-tyylitiedoston sen sijaan että käytettäisiin kiinteän kokoisia pikseleitä.
  • HTML5:n picture-elementti on toimiva ratkaisu esittämään eri kokoisia kuvia.

8. Sähköposti ei ole responsiivinen

  • Joskus sivut toimii uskomattoman responsiiivisesti, mutta sähköpostiviestit eivät ole responsiivisia, jolloin mobiilikäyttäjillä on vaikeuksia päivittää tilauksia tai katsoa yksityiskohtia.

9. Zoomin poistaminen

  • Zoomin poistaminen vie vallan käyttäjiltä, joka ärsyttää monia.

10. Raja-arvojen määrittäminen laitteen leveyden perusteella

  • Laitteen leveyden käyttämiseen raja-arvojen määrittämiseen on vanhan aikaista ja pilaa käyttäjäkokemuksen.
  • Pitää luoda raja-arvoja, jotka muuttavat sivun asettelua.