Responsiivinen verkkosivu näyttää hyvältä

Net 3/2013,  4.12.2013

Kehittyvä tekniikka ja älykkäiden päätelaitteiden kasvava käyttö nostavat verkkosivustojen suunnittelun rimaa. Responsiivinen verkkosivu näyttää hyvältä laitteessa kuin laitteessa.

Nettiä 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.

NC

 "Kaikkien NetCommunity-sivustojen sisällöt saa ulos vakioidussa, koneella luettavassa muodossa, mikä mahdollistaa esimerkiksi kolmannen osapuolen rakentamat mobiilisovellukset", Mathias Rönnlund (vasemmalla) ja Markus Lehtinen muistuttavat.

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ä 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 leveyden 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ä

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

NetCommunity

NetCommunity on Fujitsun kehittämä tietokantapohjainen julkaisujärjestelmä. Se on täysin selainkäyttöinen ja perustuu Microsoftin tekniikoihin.

NetCommunity on käytössä noin 25 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.

Lisätietoja
info@fi.fujitsu.com

Julkaistu Net-lehden numerossa 3/2013,  4.12.2013

Facebook  Twitter  Google  LinkedIn

Käytämme Net-sivustolla evästeitä, jotta pystymme parantamaan käyttökokemusta ja analysoimaan liikennettä. Pyydämme sinua perehtymään yksityisyydensuojakäytäntöömme, joka on saatavissa täältä.