Maanantaina, 24.6.2013

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”.

Tämä kirjoitus saattaa sisältää vanhentunutta tietoa, sillä se on julkaistu yli 7 vuotta sitten.

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?

Lue myös nämä

Digialan odotukset ja toiveet vuodelle 2014

Niin sitä vaan vuosi vaihtui, että pätkähti. Aika tarkastella tätä vuotta vähän tarkemmin.

Kooste Jyväskylän WordPress-miitistä 16.2.2016 – aiheena esteettömyys

Eilen tiistaina 16.2.2016 järjestettiin Jyväskylän järjestyksessään viides WordPress-tapaaminen, jossa Sami Keijonen puhui vähän puhutusta aiheesta, eli verkkosivujen esteettömyydestä. Erityisesti aiheena oli valikkorakenteet, vaikka sivuttiin muitakin esteettömyyden osa-alueita.

Device Lab responsiivisen suunnittelun apuna

Responsiivinen web design (suomalaisittain ”mukautuva”, lyhenteeltään RWD) on tuonut muutamia lisävaiheita webkehitykseen vuosien varrella. Selainikkunan mukaan skaalautuvista leiskoista on esitetty ideoita jo vuodesta 2001, mutta varsinaisesti tekniikka standardoitiin vasta vuonna 2010.