Mitä on responsiivinen design?

19 heinä 2012 • Teknologia ja digitaalinen kehitys

Responsiivinen design (engl. responsive design) on tällä hetkellä yksi kuumimpia web-suunnitteluun liittyviä puheenaiheita. Suomeksi asiaan saatetaan viitata ainakin termillä mukautuva verkkosuunnittelu tai mukautuva suunnittelu. Termistä viis, monelle on kuitenkin epäselvää se, mitä termi oikeasti tarkoittaa.Lue lisää, niin kerron mitä responsiivinen design on.

Haluamme web-sovelluksestamme mobiiliversion!

Yhä useammmin verkkoprojektin yksi vaatimus on, että sen tulisi toimia mobiililaitteilla. Tämä ei ole mikään yllätys kun ottaa huomioon mobiililaitteiden viime vuotiset kehitysaskeleet. Tämän lisäksi mobiililaitteiden nettikäytön ennustetaan edelleen kasvavan hurjasti.
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, Nokia Symbian, Apple, Windows Phone). Tällöin joudutaan toteuttamaan ja ylläpitämään useita erillisiä sovelluksia. Tämä on pitkässä juoksussa todella työlästä. Kun kokonaisuus muuttuu, jokaisen alustan sovellukset pitää päivittää erikseen. Pelkästään kaikkien eri mobiilialustojen hallinta vaatii paljon asiantuntemusta. Mobiilialusta markkina myös elää, esimerkkinä vaikka Symbian, joka muutama vuosi sitten oli valtavirtaa, mutta on nyt kovaa vauhtia putoamasta pois kelkasta.
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. Responsiivisen sovelluksen tekeminen on mahdollista käyttäen HTML5-kuvauskieltä ja CSS3-tyylimääritteitä. Responsiivisessa designissa käytetään hyödyksi mm. joustavia ruudukoita (flexible grid) ja CSS3:n media queryjä.
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 on mahdollista määrittää erilaisia tyylejä tietyn kokoisille näytöille. Media queryjen avulla määritetään niin sanottuja breakpointeja, joissa tietyt tyylit tulevat voimaan.

Millä perusteella breakpointit sitten pitäisi valita?

Ensimmäinen tapa on ottaa huomioon suosituimpien laitteiden resoluutiot. Monesti käytetyt breakpointit näiden perusteella ovat tällä hetkellä 320px, 480px, 600px, 768px ja 1024px. Tämä toimii kyllä laitteille, jotka sopivat em. muottiin, mutta ei ole välttämättä järkevää tehdä suunnittelua tiettyihin laitteisiin perustuen. Tällöin saattaa käydä niin, että jollakin ”välimallin” laitteella käyttöliittymä ”hajoaa”. Responsiivisen designin perusidea on kuitenkin, että sovellus toimisi mahdollisimman monella erilaisella laitteella. Tämän lisäksi laitteiden suosio ja niiden näyttöjen koot myös muuttuvat nopeaan tahtiin.
Toinen vaihtoehto on valita breakpointit käyttöliittymän hajoamisen tai toimimattomuuden mukaan. Kun käyttöliittymästä on tehty ensimmäinen versio, tämän jälkeen sitä voidaan testata pienentämällä tai suurentamalla selainta. Kun käyttöliittymä hajoaa tai ei toimi käyttäystävällisesti, on ehkä aika lisätä breakpoint ja media query sääntö, joka korjaa ongelman. Käyttöliittymä kannattaa kuitenkin pyrkiä suunnittelemaan niin, ettei breakpointteja tule liikaa.
Nyrkkisääntönä voidaan pitää ”mitä enemmän breakpointeja, sitä enemmän ylläpidettävää”.
Kyseinen tyylimäärite on käytössä silloin, kun näytön koko on vähintään 800 pikseliä ja korkeintaan 1200 pikseliä.

Kuvan koon mukautus responsiivisella suunnittelulla

Netti on pullollaan kuvia. Usein jo yksittäisellä sivulla on useita kuvia. Kuvat ovat myös monesti syypää siihen, että käyttöliittymä hajoaa jollakin tavalla. Jotta sovellus toimisi responsiivisesti, kuvien tulisi toimia myös näyttökoon pienentyessä. Miten tämä kuvien mukautus onnistuu käytännössä?
Yksi tapa on määritellä img elementille max-width arvo 100%.
Tämä ei kuitenkaan toimi IE-selaimella, mutta ongelman pystyy ratkaisemaan asettamalla IE:lle img elementille width arvon 100%.
Hyvä esimerkki responsiivista kuvista löytyy täältä. Kun selainikkunaa pienentää Ethan Marcotten tekemällä sivulla, näkyy kuinka oikealla olevat kuvat pienenevät automaattisesti. Vasemmassa yläkulmassa on toisenlainen vaihtoehto sille, miten kuva voi käyttäytyä responsiivisessa designissa. Sen sijaan että kuva skaalautuisi kokonaan, sen reunoja kavennetaan molemmilta puolilta, kun pienentää selainikkuna.
Jälkimmäisen tavan miinuspuolena on se, että kun kuva pienenee, siitä käytetään edelleen alkuperäistä versiota. Tämä saattaa vaikuttaa negatiivisesti sivujen latausaikoihin hitaammilla yhteyksillä (esim. mobiiliyhteys), mikäli alkuperäinen kuva on suurikokoinen.
Ongelma voidaan ratkaista esimerkiksi Matt Wilcoxin Adaptive Images ratkaisulla. Adaptive Images havaitsee käyttäjän laitteen näytön koon ja sen perusteella luo alkuperäisestä kuvasta pienemmän kuvan, joka näytetään käyttäjälle. Ratkaisu vaatii PHP-skriptin asentamisen palvelimelle. Tämä on yksi hyvä tapa käsitellä kuvia responsiivisesti, kun halutaan optimoida mobiililaitteita käyttävien latausaikoja.
Kannattaa kuitenkin huomioida, että ratkaisu ei automaattisesti lataa uutta kuvaa vain selainikkunan kokoa vaihtamalla, vaan se vaatii sivulatauksen. Ratkaisussa on myös muutamia muitakin puutteita. Se ei esimerkiksi toimi, jos sovelluksen sisällön jakamiseen käytetään CDN:ää (Content Delivery Network).
Kuvien käsittelyyn liittyy siis vielä haasteita responsiivisen designin näkökulmasta. Myös Wilcox on itse todennut, ettei Adaptive Images ole lopullinen ratkaisu asiaan. Kuvien käsittely kaipaa selvästi standardin omaista ratkaisua, mutta sellaista ei toistaiseksi ole vielä ehtinyt vakiintua.

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

Kun käyttäjä navigoi sivulle läppärin sijasta matkapuhelimella, niin on selvää, että ruudulle ei kerta kaikkiaan mahdu (käytettävästi) yhtä paljon elementtejä pienentämisestä huolimatta. Yksi tapa ratkaista ongelma on uudelleensijoittaa elementit: esimerkiksi läppärillä vaakatasossa olevat elementit voidaan sijoittaa mobiilinäkymässä päällekkäin. Tämä saattaa pidentää sivun korkeutta pystysuunnassa, mutta se on kuitenkin luonnollisesti selailutapa kuin sivusuunta.
Responsiivinen suunnittelun tarjoaa myös toisen ratkaisun tähän haasteeseen: vähemmän tärkeiden elementtien piilottaminen. Esimerkiksi lippuvaraussivuston selaileminen läppärillä voi tuoda aikataulu ja varausnäkymän lisäksi paljon muutakin informaatiota, mutta mobiiliversiossa vain oleellinen (lippuvaraus) on näkyvillä.
Sisällön piilottaminen CSS:n avulla on helppoa. Se onnistuu antamalla piilotettavalle elementille display: none määrite. Sisällön voi myös piilottaa visibility: hidden määritteellä. Näiden ero on se, että visibility:hidden piilottaa sisällön, mutta ei poista sitä, kun taas display:none myös poistaa sisällön. Jos piilotettavaa elementtiä ei poisteta se vie edelleen sille varatun tilan käyttöliittymästä. Kannattaa siis käyttää display:none vaihtoehtoa.
Erityisesti tekstisisällön piilottaminen on kuuma, jopa lievän eettisiä vivahteita saanut, puheenaihe. Onko oikein näyttää käyttäjälle erilaista sisältöä perustuen näytön kokoon? Esimerkki responsiivisesta tekstistä löytyy täältä. Selainikkunaa pienentämällä tekstin määrä ruudulla muuttuu.
Tämänkaltainen toiminnallisuus toki aiheuttaa monenlaisia lisähaasteita, joista vähäisin ei ole sisällöntuotanto. Millä logiikalla tekstiä muutetaan erilaisissa näyttöresoluutioissa? Tehdäänkö tekstistä useita eri versioita ja jos, niin montako? Kysymyksiin ei ole yksiselitteistä oikeaa vastausta (kuten ei juuri muihinkaan responsiivisiin tekniikoihin), vaan harkinta on syytä tehdä tapauskohtaisesti.

Entä mitä tarkoittaa mobile first?

Kuten edellä on käynyt ilmi, responsiivinen suunnittelu on vielä nuori ja standardoimaton joukko tapoja toteuttaa monessa eri ympäristössä käytettävästi toimiva verkkopalvelu. Eräs termi, joka tulee joskus esille responsiivisen designin yhteydessä on mobile first, joka viittaa tapaan suunnitella verkkopalvelu pienimmän yhteisen nimittäjän mukaan.
Tämä lähestymistapa lähtee ajatuksesta, että joskus ei ole järkevää suunnitella ensin työpöytänäkymää, jota karsimalla päädytään mobiilinäkymään, vaan tuottaa ensin ydintoiminnallisuudet sisältävä mobiilinäkymä ja laajentaa sitä lisätoiminnallisuuksilla esimerkiksi työpöytänäkymissä. Tällöin ruudulla näkyvillä olevien elementtien ja sisällön suunnittelu lähtee ihan toisenlaisista lähtökohdista kuin perinteinen työpöytäsuunnittelu.
Ennen sivuston toteuttamiseen ryhtymistä, kannattaakin puntaroida tehdäänkö se pienimmän vai suurimman yhteisen nimittäjän perusteella.

Toimiiko responsiivinen design kaikilla selaimilla?

Kuten arvata saattaa, niin selainkirjo aiheuttaa haasteita myös responsiivisessa suunnittelussa. Esimerkiksi responsiivisessa designissa isossa roolissa olevat  CSS3:n media queryt ovat varsin uusi ominaisuus selaimissa. Vanhemmissa selaimissa on siis odotettavissa haasteita tämän(kin) asian osaltaa.  Lista CSS3 media queryjä tukevista selaimista löytyy täältä.
Kuten verkkosuunnittelussa yleensäkin, tähänkin ongelmaan löytyy erilaisia ratkaisuja, joista yksi on käyttää hyödyksi Wouter van der Graafin tekemää javascript kirjastoa. Kirjaston avulla media query määritteet saa toimimaaan myös IE5-8, Firefox 1-3 ja Safari 2-3 selaimilla.

Kannattaako responsiivista designia sitten käyttää?

Saatat jo kysyä mielessäsi, että kannattaisiko responsiivista suunnittelua käyttää kun laitat organisaatiosi verkkosivustot uusiksi seuraavan kerran? Yksiselitteistä vastausta ei ole, mutta ainakin käytön hyödyllisyys kannattaa etukäteen arvioida. Responsiivinen suunnittelu näyttää tulleen jäädäkseen, koska se tarjoaa haasteistaan huolimatta oivallisen tavan ratkaista ongelmia liittyen käyttöympäristöjen moninaisuuteen ja eritoten räjähtäneeseen mobiili- ja täppärikäyttöön.
Tietyllä tavalla responsiivinen design selkeyttää projektia mahdollistaen yhden teknisen verkkopalvelualustan käytön ja uusien käyttöympäristöjen tukemisen tulevaisuudessa, kun taas toisaalta se tuo monia suunnitteluun ja sisällöntuotantoon sekä käyttöliittymäelementtien sijoitteluun liittyviä haasteita.
Näyttää kuitenkin varmalta, että tulemme näkemään seuraavien vuosien aikana paljon uusia verkkosivustoja, jotka on suunniteltu responsiiviseksi. Samalla se tuo lisäpaineita verkkopalveluita tuottaville taloille opetella tuottamaan sivustoja, jotka toimivat responsiivisesti hyvin.
PS. Sofokuksen nettisivutkin ovat myös responsiiviset. Jos luet tätä artikkelia läppärillä tai normaalikokoisella näytöllä, voit kokeilla miten sivu toimii, kun pienennät selainikkunan kokoa.

Jaa artikkeli