Responsiivisuus on termi, joka on viime vuosien aikana noussut erilaisten web-sivustojen ja -sovellusten toteutuksen avainsanaksi. Erityisesti webin voimakkaasti lisääntynyt käyttö mobiililaitteilla on korostanut sitä aiempaa enemmän. Käyttöliittymäsuunnittelun kannalta yleisenä määritelmänä responsiivisuudelle voidaan pitää sivuston mukautumista käytetylle päätelaitteelle. Käytännössä responsiivisuuteen liittyy kuitenkin useita eri näkökulmia ja lähtökohtia, joista responsiivisuutta voidaan lähestyä.

Responsiivisuuden pohjana on sivun rakenne, jonka tulee mukautua eri kokoisten laitteiden näytöille. Ruudukkomaisen rakenteen lisäksi tärkeitä tekijöitä suunnittelun ja toteuttamisen kannalta ovat:

• Breakpointit eli kohdat, joissa sivulla tapahtuu muutoksia (esimerkiksi elementtien sijoittelussa ja järjestyksessä) selaimen koon mukaan. Nämä määritellään CSS:n media query -ominaisuuden avulla.
• Navigaatiorakenteiden mukautuminen eri kokoisille näytöille, esimerkiksi valikkojen piilottaminen painikkeen taakse.
• Kuvien koon muuttaminen sivun koon mukaan. Tähän voi liittyä myös eri kokoisten kuvien lataamista tai nykyisten kuvien skaalaamista sopivampaan kokoon.
• Sisältöjen piilottaminen tarvittaessa. Tähän ei tulisi kuitenkaan turvautua liian kevyin perustein.
• Sivun viewportin eli näkymän koko ja zoomaamisen mahdollistaminen tai estäminen. Nämä vaikuttavat siihen, minkä kokoiselta sivusto näyttää latautuessaan ja toisaalta siihen, voiko tätä kokoa muuttaa.
• Fonttien ja eri käyttöliittymäelementtien koon sovittaminen. Esimerkiksi painikkeiden tai kenttien kokoa kannattaa mahdollisesti muuttaa eri laitteille, sama pätee esimerkiksi otsikkofonttien kokoon.

Responsiivisuuden hyötyjä on muun muassa se, että muutoksia tehtäessä ne voidaan tehdä yhteen paikkaan usean eri version sijasta. Samalla vältytään erillisen mobiiliversion aiheuttamilta asioilta, kuten päällekkäisiltä osoitteilta. Myös hakukoneoptimointi on suoraviivaisempaa yhden version avulla ja esimerkiksi Google tarjoaa nykyään hakutuloksissaan parempia sijoituksia mobiililaitteilla hyvin toimiville sivustoille. Haasteiden osalta on hyvä muistaa, että olemassa olevaa ulkoasua on yleensä hankala kääntää suoraan responsiiviseksi, joten suunnitteluun tarvitaan lisäpanostusta erityisesti uudistuksen yhteydessä ja toki muutenkin, koska eri laitteiden näkymävaihtoehdot on eroteltava selkeämmin. Toisaalta oma ongelmansa on myös se, että kaikille laitteille mukautuvat sivut saattavat olla ladattavien resurssien kannalta kooltaan varsin suuria, mikä voi muodostua rajoitteeksi joillain mobiililaitteilla.

Entä ne vaihtoehdot? Responsiivisuus ei ole aina paras vaihtoehto, sillä kaikkeen mukautuminen aiheuttaa myös rajoituksia esimerkiksi sivujen latautumisaikoihin ja hakukoneoptimointiin. Responsiivisen ulkoasun sijaan sivustosta voidaan toteuttaa erillinen mobiiliversio, kuten muun muassa monet sanomalehdet ovatkin tehneet. Yleensä tässä tapauksessa käyttäjä ohjataan mobiiliversioon sen jälkeen, kun selaimen user agent -tiedon perusteella on päätelty, että kyseessä on todella mobiililaite. User agent voi näyttää esimerkiksi seuraavankaltaiselta:

Mozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047

Käytettävissä olevat tiedot vaihtelevat selain- ja laitekohtaisesti, joten tässäkin yhteydessä joudutaan tekemään monenlaista päättelyä ja valistuneita arvauksia. Arvaukset saattavat toisinaan mennä pieleen, minkä vuoksi joissain tapauksissa on lisätty tähän väliin (monia mielipiteitä varmasti herättävä) varmistus, joka mahdollistaa siirtymisen sivuston ei-mobiililaitteille suunnattuun versioon. Toki mobiiliversiossa olisi syytä olla suoraviivainen tapa tehdä tämä siirtymä muutenkin.

Selaimella käytettävän mobiiliversion vaihtoehtona on natiivisovelluksen toteuttaminen. Natiivisovelluksen käyttökokemusta on helpompaa hallita ja sen avulla on mahdollista hyödyntää päätelaitteen ominaisuuksia (esimerkiksi kameraa ja antureita), jotka eivät välttämättä ole selaimen kautta käytettävissä. Vastavuoroisesti ylimääräistä työtä aiheuttaa mobiilialustojen moninaisuus, minkä vuoksi sovellukset on joko keskitettävä tietyille kohdekäyttöjärjestelmille tai toteutettava jollakin useita alustoja yhdistävällä ohjelmistokehyksellä.

Responsiivisuuden avulla sivusto tai sovellus voidaan siis tehokkaasti mukauttaa eri laitteiden tarpeisiin sopivaksi. Kaikissa tapauksissa responsiivisuutta ei tule pitää itseisarvona, mutta se on hyödyllinen suunnitteluperiaate, kun halutaan hyödyntää modernien selainten ominaisuuksia tehokkaasti. Vanhempien selainten rajoituksia voi tarkastella esimerkiksi caniuse.com-sivuston avulla ja niihin voi halutessaan etsiä ratkaisuja Modernizrin avulla. Uutta toteutusta tehdessä kannattaa punnita responsiivisen ulkoasun käyttöä ja valita kyseiseen tilanteeseen parhaiten sopiva toimintatapa eri menetelmien joukosta.