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”. 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 […]

Tämä kirjoitus saattaa sisältää vanhentunutta tietoa, sillä se on julkaistu yli 9 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.

Maailman suurin WordPress-tapahtuma WordCamp Europe 2022 – Duden kuulumiset Portugalista

WordCamp Europe 2022 tarjosi jälleen mielenkiintoisia luentoja WordPressistä, Gutenberg-lohkoeditorista ja kaikesta siltä väliltä. Duden nelihenkinen kehitystiimi vieraili paikan päällä Portugalissa.

Näin toteutetaan nopea ja käyttäjiä palveleva haku WordPress-sivustolle

WordPressin oletushaku ei toimi kovin hyvin, mutta haku on kuitenkin yksi tärkeimmistä ominaisuuksista laajoilla sivustoilla. Miten ongelma ratkaistaan ja WordPress-sivustolle rakennetaan toimiva haku jonka avulla käyttäjä löytää etsimänsä?