Termi ”responsiivisuus” verkkosivujen yhteydessä tulee englanninkielisestä termistä responsive design ja tarkoittaa sitä, että nettisivu toimii mukautuvasti, eli näyttää hyvältä kaikilla päätelaitteilla, joilla sitä selataan. Esimerkiksi tietokoneen näytöllä, tabletin näytöllä, Smart TV:n näytöllä tai älypuhelimella. Responsiivisuus on yksi tämän hetken kuumimpia puheenaiheita web-sivujen maailmassa, ja uusimmat web-teknologiat ovat tehneet mahdolliseksi päästä helpommin responsiivisuuden tavoitteeseen.
Mobiililaitteet tulevat
Käytännössä sivujen responsiivisuudella viitataan usein mobiiliversioihin. Toisin sanoen, web-sivun tulisi toimia, näyttää hyvältä eli ”mahtua ruudulle” sekä tietokoneen näytöllä että älypuhelimessa. Tämä edellyttää sivun ulkoasun oikeanlaista, responsiivista suunnittelua. Puhelinten käyttö webin selaamiseen on toki ollut mahdollista jo kauan.
Tämä ominaisuus oli jo varhaisissa Nokian malleissa, jolloin teknologian nimenä tunnettiin WAP. Se oli todella näkyvästi markkinoitu uusi mobiiliteknologia 1990-luvun lopussa ja 2000-luvun alkuvuosina, mutta se jäi kuitenkin eräänlaiseksi välivaiheeksi. Hieman myöhemmin markkinoille tulleet älypuhelimet mahdollistivat jo suoran http:n käytön puhelinten omilla, nykypäivän mittapuun mukaan hyvin alkeellisilla web-selaimilla. Itse asiassa ensimmäinen älypuhelin esiteltiin jo vuonna 1996, Sillä Nokia Communicatoria voidaan perustellusti pitää sellaisena. Tuolloin ei kuitenkaan sivujen responsiivisuudesta ollut mitään tietoa, sillä mobiilisivut koodattiin HTML-kielen sijasta WML-kielellä.
Nykyään internetin käyttö mobiililaitteilla alkaa kuitenkin olla jopa yleisempää, kuin perinteisten tietokoneiden. Tämä on pitkälti tablet-tietokoneiden ansiota, sillä niiden suuremmat näytöt ja kosketusteknologia soveltuvat mainiosti netin selaamisen ja vaikkapa pelaamiseen. Sivuja ei enää tarvitse myöskään koodata eri kielellä, ja kaikki laitteet osaavat periaatteessa näyttää HTML-sivuja.
Kuinka responsiivisuus toteutetaan?
Kuinka sitten saadaan sivustot toimimaan hyvin mobiililaitteissa myös käytännössä? Siihen on periaatteessa ollut kaksi tapaa. Joko luodaan mobiililaitteita varten oma, erillinen sivusto, jonne älypuhelinten käyttäjät ohjataan automaattisesti (web-palvelin pystyy tunnistamaan minkälaisella laitteella sivuja selataan), tai luodaan erillinen natiivisovellus eli app puhelimia varten. Molemmat tavat ovat kuitenkin varsin työläitä, sillä ne edellyttävät käytännössä web-sivustojen koodaamista kahteen kertaan. Siinä mielessä ne eivät siis oikeastaan poikkea WAP / WML –sivujen ajoista.
Responsiivinen web-suunnittelu on kehitetty vastaukseksi tähän tuplakoodaamisen ongelmaan. Kun sivuja luodaan responsiivisesti, niin yhtä ja samaa sivustoa voidaan käyttää lähes millä tahansa päätelaitteella. Teknisesti tämä on mahdollista käyttäen CSS3-tyylimäärittelyjä ja uudempaa HTML5 –kieltä. Responsiivisuus edellyttää siis hieman uudempien tekniikoiden käyttöä.
Hyviä esimerkkejä responsiivisista sivuista
Responsiiviset sivustot tunnistaa usein jo heti ensisilmäyksellä, sillä niissä käytetään muutenkin edistyksellisiä ominaisuuksia, joita HTML5 ja CSS tarjoavat. Yksi näistä on aikaisempaa elävämmät sivujen taustat ja skrollattavat taustakuvat. Awwards.com on valinnut joukon parhaimpia responsiivisia sivuja, ja yksi niistä on Bonobo Jeans. Kyseessä on upeasti eri sinisen sävyihin rakennettu farkku- ja vaateaiheinen verkkosivusto, joka näyttää yhtä hyvältä niin tietokoneen näytöllä, tabletissa kuin älypuhelimessakin.
Erilaiset pelit ovat yksi suosituimpia web-sivuston tyyppejä, ja koska peliharrastajat käyttävät paljon myös älypuhelimia ja tabletteja, on responsiivisuus ensiarvoisen tärkeää. Eräs esimerkki pelipalvelusta, joka on panostanut paljon responsiivisuuteen, on PokerStars. Pokerstarsin sivuilla voi pelata erilaisia pokeripelejä monella eri päätelaitteella, ja tarjolla on myös runsaasti muita pelipalveluja. Responsiivisuus on tärkeää online-kasinoissa ja pelisivuistoilla, sillä monet peleistä ovat itse asiassa parhaimmillaan kosketusnäytöllä pelattaessa.
Kun taas puhutaan graafisesti näyttävistä sivuista, voidaan silloin esimerkkinä mainita vaikkapa Haus, jonka sivusto on niin hienosti toteutettu, että se saa kokeneenkin web-surffaajan hieraisemaan silmiään. Responsiivisuus ja elävät tausta ovat toteutettu hienosti tällä sivustolla. Voi tosin olla, että sivuston varsinainen aihe ja tarkoitus saattavat jäädä kävijälle hieman epäselväksi, mutta hienoa katseltavaa se kuitenkin on. Vierailija voi itse todeta, että sivusto toimii hienosti myös tabletilla ja puhelimella.
Sivujen graafisuus ja responsiivisuus on tätä päivää
Kun vielä 10 – 20 vuotta sitten ajateltiin, että on riittävää, kun sivulla on ”piristyksenä” muutama kuva, ja pääasiallinen informaatio oli pitkälti tekstivoittoista, ovat nyt asiat niin sanotusti ylösalaisin web-sivujen ulkoasun suhteen. Nykyään animaatiot, videot, multimedia, elävät sivutaustat ja myös responsiivisuus ovat avainasioita web-sivujen suunnittelussa, ja pelkät tekstipohjaiset sivustot näyttävät nykyaikaisen netin käyttäjän silmään tylsiltä, ehkä jopa vanhanaikaisilta. Responsiivisuus on lisäksi myös varsin perusteltu ominaisuus, eikä pelkkää ”kosmetiikkaa”, sillä se säästää huomattavasti sivun suunnittelijoiden ja koodaajien työtä sekä toteutus- että erityisesti ylläpitovaiheessa. Jokainen tietotekniikan parissa työskennellyt tietää, kuinka hankalaa on, jos asioita joutuu päivittämään moneen paikkaan. Responsiivisuuden avulla saadaan toiminta järkevämmäksi ja vältytään asioiden tekemiseltä kahteen kertaan.