Mukautuva web-sovellus

Internetin käyttö on jatkuvasti yhä monipuolisempaa, käyttäjillä on nykyään mahdollisuus selata sivustoja työpöytäselaimen lisäksi monilla eri tyyppisillä päätelaitteilla. Mobiililaitteet kuten kännykät ja tabletit ovat jo arkipäivää, mutta on myös paljon muita olemassa olevia laitteita. Päätelaitteet kuten älytelevisiot ja In-Vehicle Infotainment (IVI) eli auton mediapäätelaitteet, kuten esimerkiksi Mercedes-Benz:n tarjoama toteutus, on hyvä huomioida sivustojen suunnittelussa.

Näiden olemassa olevien laitteiden lisäksi markkinoille tulee aina silloin tällöin täysin uuden tyyppisiä tuotteita, kuten esimerkiksi vuoden loppuun mennessä myyntiin tuleva Google Glass. On tärkeää huomioida myös vaihtelu laitekategorioiden sisällä. Tästä hyvänä esimerkkinä ovat varsinkin kännykät, joista löytyy paljon erikokoisia näyttöjä ja resoluutioita. Näyttöjen kuvasuhteetkin vaihtelevat, erityisesti koska mobiililaitteita voidaan yleensä käyttää sekä vaaka- sekä pystyasennossa.

Pelkästään Android-laitteilla lista eri resoluutioista, kuvasuhteista ja tarkkuuksista on erittäin laaja: http://en.wikipedia.org/wiki/Comparison_of_Android_devices

http://developer.android.com/about/dashboards/index.html

Ruudun koko <> tarkkuus tilastot Android-laitteilla, http://developer.android.com/about/dashboards/index.html

Näiden eri ominaisuuksien huomioon ottaminen jakamalla laitteet muutamaan tuettuun kategoriaan kuten työpöytä-, tabletti- ja mobiililaitteisiin ei välttämättä tuota haluttua lopputulosta. Tämäntyyppinen jako ei ole nykyään enää tarpeeksi hienojakoinen.

Markkinatilanne

Yksi vaihtoehto on tietysti jättää koko tilanne huomioimatta ja keskittyä rakentamaan pelkästään työpöytäselailuun suunniteltu sivusto. Tämän vaihtoehdon mielekkyyttä kannattaa miettiä uudelleen alla olevien tilastojen valossa. Ennusteiden ja jo olemassa olevan datan perusteella mobiilikäyttäjien määrä on jo paikoin ohittanut työpöytäselailun. Tämä muutos on jo tapahtunut muun muassa Intiassa. Globaalisti kysymys on enää vain, milloin näin tapahtuu milläkin alueella.

On hyvä myös huomioida, että osalla maapalloa mobiili on ensisijainen ja ehkä jopa ainut tapa selailla web-sivustoja, näin on muun muassa monilla osin Afrikkaa. Mobiilikäyttäjiä on kuitenkin jo nykyisellään niin huomattava määrä, että heidän huomioon ottaminen on erittäin tärkeää kaikilla alueilla. Mobiilikäyttäjät ovat myös innokkaita muun muassa tekemään ostoksia, selailu ei ole enää pelkkää katselua. Lisää mielenkiintoisia tilastoja liittyen mobiiliselailuun: http://www.slideshare.net/kleinerperkins/2012-kpcb-internet-trends-yearend-update 

http://www.emarketer.com/Article/How-Do-Internet-Users-Divvy-Up-Their-Desktop-Mobile-Web-Time/1009841

Yhdysvaltalaiskuluttajien käyttämien päätelaitteiden kehitys vuosina 2011-2013

mobile-desktop-sales

Kuluttajien ostotapahtumiin käyttämät päätelaitteet

Mobiilioptimoitu sivusto

Usein nähty ratkaisu on rakentaa, nykyisen jo olemassa olevan sivuston rinnalle, uusi mobiilioptimoitu sivusto. Tämä uusi sivusto on yleensä täysin itsenäinen web-sovellus, jonka sisältö, asettelu ja tyyli saattavat poiketa paljonkin pääsivustosta. Usein sivustossa pyritään kuitenkin jäljittelemään alkuperäistä sivustoa, mutta käyttöliittymäkomponentit ja sivuston rakenne on suunniteltu vain paremmin soveltuvaksi mobiiliselailuun. Esimerkin vuoksi alla olevissa kuvissa on näkyvillä Ikean web-sivustojen mobiili- ja työpöytäversiot.

ikea-desktop

Ikea.fi -työpöytäversio: http://www.ikea.com/fi/fi/

ikea-mobile

Ikea.fi -mobiiliversio: http://m.ikea.com/fi/fi

Tähän ratkaisuun on olemassa useita soveltuvia sovelluskehyksiä, kuten esimerkiksi:

Näiden kirjastojen tarjoamat ominaisuudet vaihtelevat kirjastosta toiseen, mutta yleensä kirjastot tarjoavat muun muassa käyttöliittymäkomponentteja ja rungon. Runko toimii rakenteena, jonka päälle saa helposti rakennettua sivuston, joka automaattisesti mukautuu tabletti- tai kännykkäkokoon. Osa kirjastoista tarjoaa myös laajemman kehitysympäristön sisältäen käännös- ja paketointijärjestelmät.

Ongelmana mobiilioptimoidussa sivustossa voi olla muun muassa:

  • Sulava kokemus kaikille eri päätelaitteille: tarjoaako kirjasto tuen vain muutamalle yleisimmälle tabletti- ja mobiililaitteelle, vai toimiiko sivusto sulavasti kaikilla eri tyyppisillä päätelaitteilla?
  • Sivuston ulkoasun muokkaus: saako kirjaston tarjoamia käyttöliittymäkomponentteja ja muita tyyliasetuksia muokattua helposti noudattamaan haluttua tyyliä?
  • Omien käyttöliittymäkomponenttien tai muiden kirjastojen käyttäminen: kirjastojen arkkitehtuuriratkaisut voivat rajoittaa sovelluksen laajennettavuutta
  • Sisällön tuottaminen ja hallinta mobiilisivuston ja varsinaisen web-sivuston välillä: miten sivuston sisältö siirretään olemassa olevalta sivustolta mobiilisivustolle. Tarvitseeko uusi sisältö aina siirtää manuaalisesti molemmille sivustoille?
  • Kehitys- ja ylläpitokustannukset: mobiilisivusto on täysin erillinen kehitysprojekti, jossa on käytössä eri sovelluskehykset ja teknologiat kuin varsinaisessa web-sivustossa
  • Hakutulokset ja sisällön suoralinkkaus eri päätelaitteiden välillä: jos käyttäjä klikkaa kännykällä hakutulosta Googlesta tai linkkiä sähköpostista, mihin sisältöön hän lopulta päätyy? Googlekin reagoi äskettäin tähän asiaan, http://googlewebmastercentral.blogspot.fi/2013/06/changes-in-rankings-of-smartphone_11.html
  • Käyttäjäkokemus: käyttäjä näkee erityylisen sivuston ja ehkä jopa täysin eri sisällön, kun hän käyttää sivustoa toisella päätelaitteella

Tämän tyyppisillä mobiilioptimoitujen sivustojen kehittämiseen tarkoitetuilla kirjastoilla tärkein myyntivaltti on yleensä helppous ja tätä kautta nopeus. Kirjastoilla saa nopeasti aikaan yksinkertaisen mobiilioptimoidun sivuston, mutta on tärkeää miettiä halutaanko projektissa tehdä kompromisseja edellä mainittujen rajoitusten suhteen.

Monet edellä mainituista asioista eivät oikein valituilla sovelluskehyksillä ja oikein tehtynä muodostu ongelmaksi, mutta silti tämän tyyppisissä ratkaisussa joudutaan yleensä tekemään jonkinasteisia kompromisseja.

mobile-confirm

Kuinka usein olet nähnyt vastaavan ilmoituksen selatessasi mobiililaitteella?

Mukautuva suunnittelu

Mukautuvan suunnittelun (Responsive Design) ideana on tarjota sivusto, joka mukautuu päätelaitteen tarpeiden mukaisesti. Sivustosta ei tällöin suunnitella erillistä mobiilioptimoitua versiota, vaan sivuston yhteen toteutukseen tuodaan tarvittava määrä logiikkaa ja vaihtoehtoisia resursseja, jotta sivusto pystyy mukautumaan riittävästi kaikkien tuettujen päätelaitteiden mukaan.

Mukautuvuus tarkoittaa muun muassa sivuston rakenteen, käyttöliittymäkomponenttien, fonttien ja audio- ja videosisällön mukautusta tarpeiden mukaan. Kuvien mukauttaminen esimerkiksi Retina-näyttöjen korkeamman tarkkuuden vuoksi on otettava huomioon, mikäli myös kyseisten näyttötyyppien käyttäjille halutaan tarjota paras mahdollinen käyttäjäkokemus. Mukautuva suunnittelukin käyttää usein hyväkseen yleisempiä resoluutioita, mutta sääntöjä voidaan helposti mukauttaa sivuston tarpeiden mukaan.

Jos mukautuvan suunnittelu tuntuu vielä epäselvältä konseptilta, kannattaa tarkastaa esimerkiksi Yle uutiset -sivuston toteutus kaventamalla selainikkunaa. Tällöin voi huomioida, että sivuston rakenne pysyy ehjänä sujuvasti riippumatta selainikkunan koosta. Näyttävämpiä esimerkkejä löytyy muun muassa seuraavasta blogi-kirjoituksesta.

Yhtenä yleisesti käytettynä mukautuvan suunnittelun periaatteena toimii Mobile First -lähetymistapa, missä sivusto suunnitellaan ensin pienintä ruutukokoa käyttäen. Tähän toteutukseen lähdetään tuomaan sitten lisätoiminnallisuutta ja uutta asettelutapaa, jotta sivusto toimii sujuvasti myös työpöytäselailussa. Mobiilipäätelaitteet tukevat nykyisin samoja teknologioita kuin työpöytäselaimet, joten erottava tekijä näiden ympäristöjen välillä onkin lähinnä käyttökonteksti ja näyttökoko.

Nykyään on olemassa lukuisia sovelluskehyksiä ja kirjastoja, jotka on tarkoitettu mukautuvan suunnittelun toteuttamiseen ja avuksi. Kirjastot voidaan jakaa karkeasti kahteen ryhmään: kirjastot jotka keskittyvät tarjoamaan apua sivuston rakenteen suunnitteluun, siten että kun sivustoa katsellaan eri päätelaitteilla, sisältö mukautuu päätelaitteen tarkkuuden mukaan. Sekä toisena kategoriana kirjastot, jotka tarjoavat tämän lisäksi laajemman paketin. Näihin lisäominaisuuksiin voi kuulua muun muassa käyttöliittymäkomponentteja ja ikoneita.

Ensimmäiseen kategoriaan kuuluvia kirjastoja ovat muun muassa:

Laajempia kokonaisuuksia ovat sen sijaan:

Web-sovellusten tekeminen muuttuu uusien päätelaitteiden myötä aina vaan haastavammaksi, mutta onneksi mukautuva suunnittelu yhdessä alati kehittyvien kirjastojen kanssa tarjoaa toimivan pohjan uusille web-sovelluksille. Aiheesta on kirjoitettu myös paljon hyviä oppaita, ja aiheeseen liittyvät teknologiat ovat olleet käytössä jo jonkin aikaa, joten useimmilla kehittäjillä on jo paljon omakohtaista kokemusta aiheeseen liittyen.

Web-teknologiat kehittyvät jatkuvasti ja tulevaisuudessa myös sivuston rakenteen suunnitteluun on luvassa uusia helpottavia teknologioita. Muun muassa uudet CSS3 Flexible Box ja Grid Layout -standardit tulevat yksinkertaistamaan sivuston elementtien ja rakenteen asettelua. Uusien teknologioiden yleistyminen kestää kuitenkin aina suhteellisen kauan, joten kestää vielä pitkään ennen kuin näitä uudistuksia voidaan hyödyntää tehokkaasti. Erityisesti videoihin ja kuviin liittyvät mukautuvat teknologiat ovat valitettavasti vielä kehitteillä. Onneksi jo nyt lähes kaikki halutut ominaisuudet voidaan toteuttaa, mutta toteutukset eivät vain ole niin yksinkertaisia, kuin ne voisivat asiaan suunniteltujen standardien myötä olla.

css3-small

Nykyään yleisimmin käytetyt selaimet ja päätelaitteet tukevat mukautuvan suunnittelun vaatimia teknologioita hyvin, kuten ylläolevalle sivustolle kootusta taulukusta voidaan havaita. Jopa jo pääosin käytöstä poistettu Internet Explorer 6 saadaan tukemaan CSS3 media query -teknologian tärkeimpiä ominaisuuksia Respond-laajennoksella.

Mukautuvasta suunnittelusta puhuttaessa on myös hyvä huomioida, että on olemassa tilanteita, joissa eri käyttäjille on kuitenkin ehkä tärkeää näyttää erityyppistä sisältöä. Kontekstisidonnaisuus on oleellinen seikka joissakin käyttötilanteissa. Esimerkiksi voi olla hyödyllistä näyttää käyttäjälle sisältöä eri korostuksella silloin, kuin käyttäjä tulee kaupan sivustolle olleessaan fyysisesti sisällä tai lähellä kyseistä kauppaa.

Paikkatiedon käyttöä kannattaa muutenkin miettiä ja käyttää hyväkseen jos vain mahdollista. On hyvä kuitenkin muistaa että myös tällaisissa tilanteissa käyttäjällä saattaa olla käytössä kannettava tietokone, tabletti, kännykkä tai ehkä Google Glass -lasit. Päätelaitteen ei tulisi koskaan olla korostettu tekijä, mutta paikkatieto tai käyttötilanne voi vaatia tiettyä mukautusta sivuston sisältöön.

Yhteenveto

Toisinaan myös erilliset mobiilioptimoidut sivustot voivat olla toimiva ratkaisu. Tällaisia tilanteita voivat olla muun muassa pienellä budjetilla toteutetut tapahtumasivustot tai väliaikaiset ratkaisut nykyisen sivuston rinnalle, ennen kuin koko sivusto voidaan uusia alusta pitäen. Myös natiivin mobiilisovelluksen tarvetta on hyvä arvioida osana projektin kokonaiskuvaa.

Jos sivusto halutaan tarjota mahdollisimman laajalle yleisölle pitäen samalla sivuston ulkoasu ja sisältö mahdollisimman yhtenäisenä, on yleensä paras ratkaisu toteuttaa sivusto käyttäen mukautuvaa suunnittelua. Tämä vaatii kuitenkin useimmissa tapauksissa sen, että vanha sivusto joudutaan uudistamaan kokonaan. Tällöin voidaan toteuttaa yksi uusi sovelluskehitysprojekti, jossa toteutetaan uusi sivusto, joka toimii yhtenäisesti kaikilla päätelaitteilla.

Avatar

Timo Lyytinen

Liity keskusteluun