TEKSTI JARNO SALOVUORI KUVA KATRI TAMMINEN
KONEHUONE
NETTISIVU MUKAUTUU MONEKSI
Kehittyvä tekniikka ja älykkäiden päätelaitteiden kasvava käyttö nostavat verkkosivustojen suunnittelun rimaa. Responsiivinen verkkosivu näyttää hyvältä laitteessa kuin laitteessa.
N
ettiä selataan yhä enemmän mobiililaitteilla, joissa perinteisen verkkosivuston käytettävyys saattaa muuttua irvikuvakseen ja karkottaa käyttäjät. Pienemmän näytön haasteeseen on reagoitu luomalla erillisiä mobiilisivustoja ja -sovelluksia, mutta usein on parempikin ratkaisu: normaali sivusto mukautuu myös mobiililaitteessa toimivaksi versioksi. ”Tavoitteena on, ettei erillistä mobiilisivustoa tarvita. Käyttöliittymä ja ulkonäkö rakennetaan siten, että sivusto jäsentää ja mukauttaa itseään päätelaitteen mukaan. Esimerkiksi kännykällä sivusto on helppokäyttöinen yksipalstaisena ja navigaatio voidaan piilottaa valikon taakse”, kertoo Fujitsun NetCommunity-julkaisujärjestelmän järjestelmäarkkitehti Mathias Rönnlund. NetCommunity on tukenut responsiivista eli mukautuvaa käyttöliittymää vuoden verran. Kaikissa uusissa toteutuksissa ulkoasu on mukautuva, ja monia sivustoja muutetaan parhaillaan responsiivisiksi. Tämä ei vaikuta sisältöön tai toiminnallisuuteen, joten sivustoja voidaan uudistaa pienin säädöin – kunhan myös kosketukseen eli sormella tökkäämiseen perustuva käyttö otetaan huomioon. ”Responsiivisuus on suoraviivainen ratkaisu, jolla sivustot saadaan riittävälle tasolle myös mobiililaitteissa. Vaihtoehdot – erillinen mobiilisivusto tai asennettava sovellus – joudutaan aina räätälöimään, jolloin hinta nousee ja ylläpito hankaloituu”, Fujitsun järjestelmäarkkitehti Markus Lehtinen sanoo. ”On tarkkaan mietittävä, kenelle ja mitä
26
NET // 3/2013
kannattaa tehdä omalla sovelluksella. Vaatii paljon, että käyttäjät oikeasti asentavat sovelluksen laitteeseensa.” SELAIN RATKAISEE
Responsiivisuus perustuu nettisivut määrittelevän HTML5-koodin ja CSS3-tyylitiedostojen ominaisuuksiin. Sivuston voi suunnitella kutistumaan portaattomasti tai siitä voi olla erilaiset näkymät työpöydälle, tablettiin ja kännykkään. Päätelaitteessa ratkaisun tekee selain, joka tietää näytön kulloisenkin leve-
yden ja esittää sivuston käyttäjälle sellaisena kuin on tarkoitettu. Nykyselaimet osaavat mukauttaa sivut mukisematta. Vanhentuneita ja ongelmallisia selainversioita löytyy lähinnä pöytäkoneista, joissa responsiivisuutta ei juuri tarvita. Toisaalta uudehkoissakin mobiililaitteissa on yllättäviä eroja. ”Älypuhelimista esimerkiksi Lumia 800:n selain ei tue kaikkia ominaisuuksia. Käyttäjä ei eroa kuitenkaan huomaa, sillä voimme kiertää ongelman muilla keinoilla”, Rönnlund sanoo. Responsiiviset sivustot vaativat suunnittelijoilta uudenlaista osaamista. Aikaisemmin graafikko on suunnitellut sivuston rautalankamallin ja kuvan kuvankäsittelyohjelmassa, ja html-taittaja on muuntanut sen koodiksi. Nyt pulmana on, että malleja ja kuvia pitäisi olla lukuisia, jokaisen laitteen ja käyttötilanteen mukaan. NetCommunity-sivuston suunnittelua helpottaa valmis käyttöliittymäkehikko, Twitterin kehitystyön yhteydessä syntynyt Bootstrap. Laajasti käytetty Bootstrap on ilmainen ja jatkuvasti kehittyvä kirjasto, joka osaa huomioida erilaiset käyttötilanteet ja päätelaitteiden vajavaisuudet. Silti on hyväksyttävä se tosiasia, että eri selaimissa kaikki ei näytä pikselilleen samalta. VERKKO-NET ASIAN YTIMESSÄ
NetCommunity NetCommunity on Fujitsun kehittämä tietokantapohjainen julkaisujärjestelmä. Se on täysin selainkäyttöinen ja perustuu Microsoftin tekniikoihin. 1HW&RPPXQLW\ RQ Nl\W|VVl QRLQ İĬ asiakkaalla pääasiassa julkishallinnossa. Sillä toteutettuja sivustoja ovat esimerkiksi espoo.fi, turku.fi ja vero.fi sekä useiden ministeriöiden ja sairaanhoitopiirien verkkopalvelut. NetCommunity on saatavissa valmisversiona tai täysin asiakkaan tarpeisiin räätälöitynä. Molemmissa responsiivisuus on sisäänrakennettu vakio-ominaisuus.
Net-lehden syksyllä uudistunut verkkoversio on yksi esimerkki mukautuvasta sivustosta ja samalla uudenlaisen suunnittelun eduista. Verkkoversion uudistaminen sujui poikkeuksellisen jouhevasti, koska Fujitsun graafikko Tom Nuorivaara suunnitteli ulkoasun suoraan html:n ja Bootstrapin avulla, mikä nopeutti prosessia huomattavasti. ”Pelkät kivannäköiset kuvat eivät riitä, vaan suunnittelijalta kaivataan myös responsiivisuuden ottamista huomioon. Net-lehdessä graafikko sai ulkoasulle reunaehdot, ja kun valmis suunnitelma tuli html-muodossa, pääsimme suoraan asian ytimeen”, Rönnlund tiivistää. •
Tutustu verkko-Netiin osoitteessa www.net.fujitsu.fi