Responsiivinen suunnittelu

Tämä on yksinkertainen opas responsiiviseen suunnitteluun.



Erilaisia laitteita web-sivun katseluun


Responsiivinen suunnittelu (voidaan kutsua myös mukautuvaksi suunnitteluksi) tarkoittaa ensisijaisesti sitä, että sisällön rakenne ja asettelu suunnitellaan niin, että se sopii hyvin kullekin laitteelle ja sen normaalille käyttötavalle. Keskeisintä on tällöin laitteen näytön koko. Perusidea on, että sivu toimisi mahdollisimman monella erilaisella laitteella.

Tämä opas ei ole erityisen laaja, koska sen kirjoittaja on itsekin vielä kokematon responsiivisessa suunnittelussa. Sen voidaan ajatella olevan kirjoittajan oppimisreissu aiheeseen.

Miksi tehdä responsiivista suunnittelua?

media/video.mp4 media/video.webm

Kuten yllä oleva Squizin videokin kertoo, web-sivun halutaan nykyään olevan helppokäyttöinen laitteella kuin laitteella. Sivusta voidaan luoda esimerkiksi erillinen mobiilisivu tai aplikaatio katseltavaksi puhelimella tai tablet-tietokoneella. Tämä kuitenkin tekee sivujen päivittämisen työläämmäksi, koska sivuja on useampi. Responsiivisen suunnittelun ansiosta sivusto mukautuu näytön kokoon, eikä erillisiä sivustoja tarvitse tehdä.

Suunnittelussa voidaan myös huomioida tarpeiden muutos, kun käyttäjän laite vaihtuu. Esimerkiksi puhelimella ravintolan kotisivuja selaavalle keskeistä informaatiota etusivulla todennäköisesti ovat aukioloajat, sijainti ja ruokalista. Tämän takia siellä on tällöin järkevää jättää vähemmälle huomiolle esimerkiksi ravintolan kirjoittama blogi.

Esimerkkejä responsiivista suunnittelua hyödyntävistä sivustoista; muuttamalla selainikkunasi kokoa huomaat muutoksia elementeissä:

Kuinka responsiivinen suunnittelu tapahtuu?

Tämän sivun responsiivisuus on toteutettu lähinnä määrittämällä sivun elementit niin, että ne skaalautuvat selainikkunan koon mukaan. Tekstirunko suorittaa tämän tavoitteen wrapperin eli <div>-elementin avulla, jonka koko on määritelty prosentuaalisesti CSS-säännöissä. Kuvan ja videon koot ovat myös määritelty prosenttien avulla. Pikseleinä koon määrittely tekisi näistä elementeistä jäykkiä.

Mikäli sivulle on asetettu suuri määrä elementtejä, kuten useita navigaattoreita (esimerkkinä edellämainitun Time-lehden sivut), kannattaa hyödyntää responsiivisen suunnittelun kulmakiveä, media-kyselyä (media query). Sen avulla elementti voi vaihtaa sijaintia tai halutessa jopa kadota kokonaan. Se on CSS3-moduuli, joka sallii sisällön mukautumisen ehtojen, kuten näytön resoluution mukaan. Siitä tuli W3C:n suosittelema standardi kesäkuussa 2012.

Ennen mediakyselyiden tekemistä tulee miettiä, halutaanko sivua käyttää vain tietyillä laitteilla. Tällöin mediatyypin voi ilmoittaa HTML-dokumentin <link>-elementissä esimerkiksi tähän tapaan:

<link rel="stylesheet" media="screen,tv" href="main.css" type="text/css">

Esimerkissä mediatyypeiksi on valittu screen eli tietokoneen näyttö ja tv eli television näyttö. Mikäli mediatyyppiä ei ole määritelty lainkaan, ovat kaikki mediatyypit silloin käytössä (sama, kuin kyseinen asetus olisi media="all").

Mediakyselyn useimmiten käytetty ominaisuus on leveys (width). Sen avulla voimme mukauttaa resoluution laitteen näytön mukaiseksi.

Alapuolella on esimerkki media-kyselystä, jonka toteutumisella on seuraavat ehdot:

Jokainen selain, joka täyttää nämä molemmat vaatimukset, toteuttaa seuraavan css-tyylimääreen fontin suhteen:

@media screen and (min-width: 1024px) {
  body {
    font-size: 100%;
  }
}

Tarkentaminen tiettyihin laitteisiin

Joskus voi tietää tarkasti laitteen, jolla sivua tullaan käyttämään. Silloin laitteelle, kuten iPadin tapaiselle tablet-tietokoneelle, kannattaa luoda omat asetuksensa. Ne tulevat voimaan vain, kun sivu avataan kyseisellä laitteella.

Kun tiedämme laitteesta tarpeelliset tiedot (resoluutio ja selain), voimme tehdä alla olevien esimerkkien tapaisia CSS-sääntöjä. Esimerkissä asetukset ovat kohdistuu iPadiin. Koska iPadilla voi sivua katsoa pysty- ja vaakatasossa (portrait ja landscape), näille eri näkymille on luotu omat säännöt:

/* iPad (vaakataso) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
 
/* iPad (pystytaso) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}

Elementin piilottaminen

Näytön koon pienentyessä usein halutaan tiivistää sivun informaation sisältöä eli karsia hieman epäoleellisempia asioita pois, kuten koristeelliset kuvat. Tämä onnistuu <display>-attribuutin avulla elementin CSS-säännöissä. Näytön resoluution ollessa määritellyn mukainen <display>-attribuutti saa arvon none ja elementtiä ei esitetä sivulla. Seuraavassa esimerkissä Näytön resoluution leveyden ollessa pienempi, kuin 300 pikseliä, elementti katoaa:

@media all and (max-width: 300px) {
    .floated_div { display: none; }
}

Selaimen huomioon ottaminen

Responsiivisen suunnittelun haasteet liittyvät selaimiin, sillä CSS3:n media queryt eivät toimi kaikissa selaimissa. Erityisesti vanhat versiot selaimista tuottavat ongelmia. JavaScript-kirjastot kuitenkin tarjoavat ongelmaan ratkaisuja.

Internet Explorerin versiot ennen versiota 9 eivät tue mediakyselyitä, mutta ongelman voi ratkaista lisäämällä tarvittuja ominaisuuksia tuovan kirjaston HTML-dokumenttiin tällä tavalla:

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

Lista mediakyselyjä tukevista selaimista löytyy täältä.

Kritiikki responsiivista suunnittelua kohtaan

Responsiivinen suunnittelulla on myös epäilijänsä. Six Revisions-sivun artikkelista käy ilmi, että sivut, joista on jäänyt elementtejä pois, ovat tavukooltaan lähes yhtä suuria kuin aiemmin ja siten lähes yhtä hitaita ladata. Mobiililaajakaistojen myötä tosin internet-yhteys on nopea pienemmissäkin laitteissa.

Mukautuvuus voi myös tuottaa sivulla käytettävyysongelmia. Elementit saattavat siirtyä paikkoihin, joissa käyttäjä ei oleta niiden lainkaan sijaitsevan. Esimerkiksi navigaation siirtyminen esimerkiksi pitkän sivun loppuun voi turhauttaa käyttäjää.

Responsiivinen suunnittelu on makuasia. Jotkut ovat tyytyväisiä ei-responsiivisen sivun luettavuuteen ja tarkasteltavuuteen puhelimellansa, kun taas toiset saattavat kaivata sitä mobiilikäyttäessään esimerkiksi suurempaa fonttikokoa ja pienempiä kuvia. Responsiivisen suunnittelun tarpeen voidaan sanoa olevan sivustokohtaista: se riippuu sivun sisällön tyylistä ja määrästä.

Lähteet





© 2013 Markus Koskela.