Mitä on responsiivinen design?

19 heinä 2012 • Teknologia ja digitaalinen kehitys

Päivitetty elokuussa 2026. Artikkeli on julkaistu heinäkuussa 2012, ja tekniikat, esimerkit sekä selainsuositukset on päivitetty vastaamaan nykytilaa. Responsiivisen designin määritelmä on säilytetty alkuperäisenä.

Responsiivinen design (engl. responsive design) tarkoittaa suunnittelutapaa, jossa sama verkkosivu tai verkkopalvelu mukautuu näytön koon mukaan sen sijaan, että eri laitteille tehtäisiin omat versiot. Suomeksi siitä käytetään myös nimityksiä mukautuva suunnittelu ja mukautuva verkkosuunnittelu.

Vuonna 2012, kun tämä artikkeli kirjoitettiin, responsiivisuus oli valinta. Nyt se on oletus. Verkkopalvelu, joka ei toimi puhelimella, on rikki. Alla käydään läpi, mistä responsiivisessa designissa on kyse ja millä keinoilla se toteutetaan.

Haluamme web-sovelluksestamme mobiiliversion

Verkkoprojektin itsestään selvä vaatimus on, että palvelu toimii puhelimella. Puhelin on useimmille käyttäjille ensisijainen laite, joten mobiilinäkymän tarvetta ei enää perustella. Perusteltavaksi jää se, miten näkymä toteutetaan.
Mobiilisivujen tekemiseen on perinteisesti käytetty kahta eri tapaa:
1) Luodaan erillinen web-mobiilisivusto mobiililaitteita varten. Tällöin ylläpidettävänä on kaksi sivustoa (normaali ja mobiili), jotka eivät siis välttämättä sisällä esimerkiksi yhteistä lähdekoodia, mutta takana oleva teknologia on ollut yleensä osittain samaa (HTML, CSS, Javascript).
2) Luodaan erillinen natiivi-sovellus jokaista mobiilialustaa varten (esim. Android ja iOS). Tällöin joudutaan toteuttamaan ja ylläpitämään useita erillisiä sovelluksia. Tämä on ajan mittaan todella työlästä. Kun kokonaisuus muuttuu, jokaisen alustan sovellukset pitää päivittää erikseen. Pelkästään kaikkien eri mobiilialustojen hallinta vaatii paljon asiantuntemusta. Alustamarkkina myös elää. Symbian ja Windows Phone olivat aikanaan varteenotettavia kohteita, mutta kumpaakaan ei enää ole.
Koska kumpikaan edellämainittu tapa ei ole välttämättä optimaalinen kaikkiin tapauksiin, on kehitetty uusi tapa (responsiivinen design)  toteuttaa verkkosivustoja ja web-sovelluksia. Responsiivisella designilla tarkoitetaan käyttöliittymäsuunnittelua, jonka avulla yhtä web-sovellusta voi käyttää eri laitteilla ilman että käyttökokemus merkittävästi kärsii.
Samaa verkkosovellusta tai verkkosivua voi siis käyttää huolimatta siitä, onko käyttäjällä kännykkä, tabletti tai läppäri. Responsiivinen toteutus tehdään HTML:llä ja CSS:llä. Keskeiset keinot ovat joustava asettelu (flexbox ja grid), media queryt sekä uudempana container queryt, joissa komponentti mukautuu oman säiliönsä leveyteen eikä koko selainikkunan kokoon. Responsiivisen suunnittelun perimmäisenä tarkoituksena voi siis nähdä tavoitteen luoda yhdellä alustalla käytettävyydeltään hyvät näkymät erilaisiin käyttötarkoituksiin.

Miten eri kokoiset näytöt sitten huomioidaan responsiivisessa suunnittelussa?

CSS:n media queryjen avulla määritetään erilaisia tyylejä eri kokoisille näytöille. Kohtaa, jossa tyylit vaihtuvat, kutsutaan breakpointiksi.

Millä perusteella breakpointit pitäisi valita? Vuonna 2012 tavallinen tapa oli poimia senhetkisten suosittujen laitteiden resoluutiot, ja siitä tavasta on syytä luopua. Laitekanta muuttuu, ja laitekohtaisiin lukuihin sidottu suunnittelu hajoaa ensimmäisellä välimallin näytöllä.

Kestävämpi tapa on valita breakpointit sisällön mukaan. Kun käyttöliittymästä on tehty ensimmäinen versio, sitä testataan kaventamalla ja leventämällä selainikkunaa. Kun asettelu hajoaa tai lakkaa toimimasta käyttäjäystävällisesti, siihen kohtaan lisätään breakpoint. Nyrkkisääntönä voidaan pitää, että mitä enemmän breakpointeja, sitä enemmän ylläpidettävää.

Nykyaikaiset CSS-ominaisuudet vähentävät breakpointien tarvetta. Flexbox ja grid rivittävät sisällön itsestään, ja clamp()-funktio skaalaa tekstikoon portaattomasti. Container queryjen myötä komponentti voi mukautua oman säiliönsä leveyteen, jolloin sama komponentti toimii sekä kapeassa sivupalkissa että leveässä pääsisällössä ilman ikkunakohtaisia sääntöjä.

Kuvan koon mukautus responsiivisella suunnittelulla

Kuvat ovat yleisin syy siihen, että responsiivinen asettelu hajoaa. Perusasia on yhä sama kuin vuonna 2012. Kuvalle annetaan CSS:ssä sääntö max-width: 100%, jolloin se ei koskaan leviä säiliötään leveämmäksi.

Tämä artikkeli totesi alun perin, ettei kuvien responsiiviseen käsittelyyn ole vakiintunutta standardia. Nyt sellainen on. HTML:n srcset- ja sizes-määritteillä selaimelle kerrotaan, mitä kokoja kuvasta on saatavilla ja kuinka leveänä kuva näytetään, ja selain valitsee sopivan version itse. Kuvan rajausta tai tiedostomuotoa voidaan lisäksi vaihtaa näytön mukaan picture-elementillä. Erillisiä palvelinpuolen skriptejä ei enää tarvita.

Kaksi asiaa kannattaa hoitaa samalla. Kuvat kannattaa tarjoilla nykyaikaisessa tiedostomuodossa, kuten WebP tai AVIF, koska ne ovat samalla laadulla selvästi JPEG-kuvaa kevyempiä. Sivun alaosan kuville annetaan loading=”lazy”, jolloin selain lataa ne vasta tarvittaessa. Molemmat vaikuttavat suoraan mobiilikäyttäjän latausaikaan.

WordPress ja muut yleiset julkaisujärjestelmät tuottavat srcset-määritteet automaattisesti, kun kuva viedään mediakirjastoon riittävän suurena. Käytännön työ on siis enimmäkseen sen varmistamista, ettei sivulle päädy alkuperäiskokoisia kuvia.

Sisällön piilottaminen pienillä näytöillä

Pienelle näytölle ei mahdu yhtä paljon elementtejä kuin isolle. Ensisijainen ratkaisu on sijoittaa elementit uudelleen. Työpöydällä vierekkäin olevat osat asetellaan mobiilissa allekkain, jolloin sivu pitenee pystysuunnassa. Se ei haittaa, koska pystyselaus on puhelimella luontevampaa kuin sivuttaisselaus.

Toinen keino on piilottaa vähemmän tärkeitä elementtejä. Tässä kohdassa vuoden 2012 ohje on vanhentunut kahdesta syystä. Ensinnäkin Google indeksoi sivuston mobiiliversion, joten mobiilissa piilotettu sisältö voi jäädä pois indeksistä. Toiseksi display: none poistaa elementin myös ruudunlukijalta, mikä on saavutettavuusongelma silloin, kun sisältö on käyttäjälle merkityksellistä.

Käytännön sääntö on yksinkertainen. Sisältö säilyy kaikilla näytöillä, ja näytön koko vaikuttaa siihen, miten sisältö esitetään, ei siihen, paljonko sitä on. Jos jokin osa on niin toissijainen, että sen voi jättää mobiilista pois, kannattaa kysyä, tarvitaanko sitä työpöydälläkään.

Puhtaasti koristeellisia elementtejä saa toki piilottaa. Silloin display: none on oikea työkalu, koska visibility: hidden jättää elementin viemään sille varatun tilan asettelussa.

Entä mitä tarkoittaa mobile first?

Mobile first tarkoittaa, että käyttöliittymä suunnitellaan ensin pienimmälle näytölle ja sitä laajennetaan isommille. Vaihtoehto on aloittaa työpöytänäkymästä ja karsia siitä mobiiliversio.

Nykyään valintaa ei juuri tehdä. Mobile first on alan oletustapa, ja Google indeksoi sivustot mobiiliversion perusteella. Työpöytä edellä -suunnittelu johtaa yleensä siihen, että mobiilinäkymästä tulee karsittu jäännös eikä oma harkittu näkymä.

Suurin hyöty on ajattelun pakko. Kun ydintoiminnallisuuden pitää mahtua pienimpään näkymään, on pakko päättää, mikä sivulla on tärkeintä. Se päätös parantaa myös työpöytänäkymää.

Toimiiko responsiivinen design kaikilla selaimilla?

Kyllä. Media queryt, flexbox ja grid toimivat kaikissa käytössä olevissa selaimissa, ja Internet Explorerin tuki päättyi vuonna 2022. Vuoden 2012 polyfill-kirjastoja ei siis enää tarvita.

Selainkirjo aiheuttaa silti työtä, mutta eri syystä kuin ennen. Uudet CSS-ominaisuudet ilmestyvät selaimiin eri tahtiin, joten niiden käyttöönotossa kannattaa tarkistaa tuen tila. Ennen odotettiin vanhojen selainten poistumista, nyt odotetaan uusien ominaisuuksien saapumista.

Testaus ei ole muuttunut valinnaiseksi. Se, että ominaisuus on tuettu, ei tarkoita, että asettelu toimii. Vähintään yksi oikea puhelin ja yksi oikea tabletti kuuluvat jokaiseen julkaisua edeltävään tarkistukseen.

Kannattaako responsiivista designia sitten käyttää?

Tätä kysymystä ei enää kysytä, ja se on hyvä asia. Responsiivisuus ei ole erillinen ominaisuus, joka verkkopalveluun valitaan tai jätetään valitsematta, vaan osa sitä, mitä verkkopalvelun tekeminen tarkoittaa. Sama koskee hintaa. Responsiivisuudelle ei ole omaa hintalappua, koska ei ole olemassa ei-responsiivista vaihtoehtoa, johon sitä verrattaisiin.

Tilalle on tullut kysymys laadusta. Verkkopalvelu voi olla teknisesti responsiivinen ja silti hankala käyttää puhelimella: kosketuskohteet ovat liian pieniä, lomake vaatii vaakanäkymän tai mobiiliin latautuu isot kuvat. Nämä eivät korjaudu media queryillä vaan sillä, että mobiilinäkymä suunnitellaan ja testataan omana näkymänään.

p.s. Alkuperäinen artikkeli päätyi vuonna 2012 siihen, että responsiivinen suunnittelu näyttää tulleen jäädäkseen. Arvaus osui oikeaan.