Tulisiko responsiivinen design ”pakottaa” käyttäjälle?

Sain mielenkiintoista palautetta sivuistamme viikonloppuna. Palautteen antaja oli katsonut sivuja puhelimella ja halunnut nähdä miltä sivut näyttävät ”tietokoneversiona”. Kommentissa oli hyvä pointti, sivuja kun ei pääse näkemään mobiilissa työpöytäversiona ollenkaan, sillä responsiivisessa suunnittelussa mobiilissa tietokoneversiota ei ole olemassakaan. Miksi ei? Annas kun kerron.

Responsiivinen suunnittelu, eli kansakielellä ”mukautuva” suunnittelu on sitä, että sivut suunnitellaan näkymään yhtä hyvin mahdollisimman monella laitteella. Sivut siis ”näyttävät samalta”, mutta ovat ahdettuna pienemmille ja isoille näytöille oikeaoppisesti sopivaksi. Esimerkiksi pienemmillä näytöillä tarpeettomia graafisia elementtejä saatetaan piilottaa, mutta sama tieto löytyy (tai oikein suunniteltuna pitäisi löytyä) myös mobiilissa.

Lähtökohtaisesti näyttää samalta, elementit vaihtavat hieman paikkaa, mutta kaikki pysyy nätin näköisenä. Näet miten homma toimii kun pienennät tätä sivua selainikkunaasi vaakatasossa (olettaen, että selaat sivuja juuri nyt tietokoneella).

responsive

Vielä pari vuotta sitten erillinen mobiiliversio ja työpöytäversio oli arkipäivää. Vieläkin näkee sivustoa, jotka kehottavat puhelimella selattaessa siirtymään mobiiliversioon ja sivustoja jotka pakottavat aivan erinäköisen ja paljon kökömmän mobiiliversion puhelimella selattaessa. Joissakin on footerissa linkki työpöytäversioon, joissakin ei.

Mukautuvalla käyttöliittymällä pyritään varmistamaan, että sivusto on selvästi luettavissa ja palvelee automaattisesti käyttäjiään halutulla tavalla päätelaitteesta riippumatta.

Voiko verkkosivustoja enää suunnitella ilman mobiililaitteiden huomiointia? – Digitohtorit – Markkinointi&Mainonta

Miten erillinen mobiiliversio ja mukautuva verkkosivusto sitten muka eroavat toisistaan? Siten, että mitään ”erillistä” versiota sivustosta ei tehdä, vaan sama sivusto toteutetaan skaalautumaan eri näytöille. Mobiilisivustojen ongelmana on ollut tunnetusti se, että sisältö ei pysy samana ja sitä jopa unohdetaan päivittää.

Ongelmana on myöskin ollut mobiilin ja työpöydän välimuodot – pädit, tabletit, muistiinpanolaitteet (Samsung Galaxy Note) ja muut mediavermeet, joissa näytön koko ei ole vakio. Responsiivinen suunnittelu korjaa nämä ongelmat, sillä sama sivusto skaalautuu kaikille näytöille ruudun koosta riippumatta.

sivut

Jonkin verran on käyty keskustelua siitä onko oikein ”pakottaa” käyttäjät selaamaan sivua mobiilissa ”mobiiliversiossa” ja työpöydällä ”työpöytäversiossa” ja pitäisikö käyttäjän saada päättää mitä versiota haluaa selata. Nämä keskustelut ovat niitä menneen talven peruja, jolloin Nokia-ajan Symbian-puhelinkäyttöjärjestelmä kukoisti ja erillinen mobiiliversio oli ainoa keino saada sivuista edes jollain tasolla järkevät puhelimella selatessa. Responsiivisen suunnittelun aikakaudella ei voida enää puhua ”versioista”, eikä näin ollen käyttäjää oikeastaan enää pakoteta mihinkään.

Miksi emme näe enää sivuston alaosissa ”näytä kokoversio” -valintaa? Vastaus on helppo: katselet jo valmiiksi kokonaista ”versiota”, sitä samaa mitä muillakin laitteilla.

  1. Työpöytäoptio on 90% tapauksista todella turhaa ja jopa hieman haastavaa toteuttaa, tarvittaessa se kuitenkin onnistuu
  2. Jos tällainen vaihtoehto olisi, se olisi sama kuin myöntäisit että responsiivinen suunnittelusi kusee, sillä sivujen pitäisi olla suurinpiirtein saman näköiset (joskin eri kokoisessa paketissa) ja toiminnaltaan samanlaiset kuin muillakin alustoilla.

Vielä yhteenvetona: responsiivisen designin tulisi olla jo arkipäivää. Jos haluat nähdä miltä sivut näyttävät tietokoneen näytöltä tarkasteltuna, mene tietokoneelle. Puhelimella ei ole tarkoitus yrittää venyttää ruutua puhelimen näytön ulkopuolelle, eikä missään tietokoneessa ole neljän tuuman kokoista näyttöä.

Ovatko sinun sivusi jo responsiiviset?

Tykkää, jos pidit jutusta:

Jos rakastit, tee hyvä teko:

Kaljarahan antamisen sijaan voit lahjoittaa mielenterveystyöhön.

  1. Juha Karjalainen

    Hyvä rustaus. Itse ollaan kans mietitty responsiivisuutta ja ehkä tympein asia mitä on kohdattu tuossa on se että eri mobiililaitteet kusettavat säännöstään joko näytön koon tai resoluution. Näin esimerkiksi Lumia 920.

    Toki tuo kommenttisi tuosta suunnittelun kusemisesta on totta. Useimmiten kyse on kuitenkin kompromisseista. Varsinkin palveluissa, joissa on paljon toimintoja. Onneksi nykyään rupeaa tuota tietoutta ja käytännön testausta löytymään niin usealta isolta toimijalta, että ei tarvitse kaikkea pähkäillä itse ;) Esimerkiksi FB:n mobiiliversiossahan kaikki toiminnot eivät yksinkertaisesti ole käytettävissä.

    Ja meidän palvelun sivuthan löytyy testattaviksi osoitteesta: http://getgoodvsbad.com/b156447584

    Vastaa tähän kommenttiin
    1. Roni

      Kiitos kommentista Juha! Lumia 920:sta ei ole minulla niin paljon henkilökohtaista kokemusta, mielenkiintoista… kuinka näytön kokoa tai resoluutiota ”huijataan”, onko antaa tarkempaa esimerkkiä? Toisaalta hyvin suunniteltu responsiivinen design toimii myös niillä resoluution välimaastoilla, ei pitäisi olla merkitystä sillä onko esim. leveys random 687px vai normaali kiinteä 720px.

      FB on kyllä hyvä esimerkki, mutta siellä ja Twitterissäkin mobiilipuoli koittaa imitoida mobiilisovellusta. Se ei ole huono asia, jos suurinpiirtein samat toiminnot löytyvät, mutta toisaalta en näe siinä pointtia, jos kerran sovellus löytyy. Toisaalta taas useimmiten kyseisen kaltaiset websivustot noudattavat rajapintoja, jotka kommunikoivat muiden sovellusten kanssa ja siksi ulkoasun täytyy noudattaa tiettyjä sääntöjä. Web-appsit erikseen :)

      Vastaa tähän kommenttiin
      1. Juha Karjalainen

        Joo siis…haaste noissa saattaa olla se että resot on niin järjettömiä, että ovat käytönnössä samoja kuin halvimmissa 15″ läppäreissä :) Mikäli sitten nojataan vain reson kokoon niin pusketaan samaa versiota sekä sille 4.5″ kännyn ruudulle ja 15″ läppärin ruudulle. Tämän takia olisi loistava kun laitevalmistajat oikeasti kertoisivat laitteen ruutukoon, reson ja tyypinkinkin niin kauniin webin tekeminen ois taas vähän helpompaa :)

        Mitä noihin appseihin tulee niin ainakin itse olen meidän tapauksessa kovasti miettinyt että olisi hauska saada appsi ja mobilesaitti toimiin samalain(landingia lukuunottamatta). Sitten desktoppi versio oikeastaan sen pohjalta :) Nykyään tuo menee vähän toisinpäin.

        Vastaa tähän kommenttiin
        1. Roni

          Puhut asiaa. Lumiassa on tosiaan hassu resoluutio ja tuntuu välillä ettei se noudata viewport-säädöksiä ollenkaan…

          Vastaa tähän kommenttiin

Kommentoi

Vaadittu kenttä