responsiivinen design

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ä, CSS3-tyylimääritteitä ja javaScriptiä. Responsiivisessa designissa käytetään hyödyksi mm. joustavia ruudukoita (flexible grid) ja CSS3:n media queryjä (CSS3:n mediakyselyjä, joilla määritetään käytettävän näyttölaitteen suuruus ja sivun käyttäytyminen).

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.

Termejä, kun puhutaan responsiivisesta designista

ss http://alistapart.com/


Mobiiliversio web-sovelluksestamme

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.

ss

 

 

 

Miten?

ss

 

CSS:n Media-queryjen avulla on mahdollista määrittää erilaisia tyylejä tietyn kokoisille näytöille. Niiden 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ä 480px, 768px ja 1024px.

Toinen vaihtoehto on valita breakpointit käyttöliittymän hajoamisen tai toimimattomuuden mukaan.

Nyrkkisääntönä voidaan pitää ”mitä enemmän breakpointeja, sitä enemmän ylläpidettävää”.

Esimerkki media query CSS-määritteestä:
 
     @media screen and (min-width: 800px) and (max-width: 1200px) {
     	.leftSidebar{
     		width: 40%;
     		float: left;
     		}
     }

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

Kuvat voivat olla 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%.
     img{
     max-width: 100%
     }
Tämä ei kuitenkaan toimi IE-selaimella, mutta ongelman pystyy ratkaisemaan asettamalla IE:lle img elementille width arvon 100%.
     img{
     width: 100%
   }

 


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 mahdu 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.

 
  sidebar{
  	display:none;
  }
  


Mobile first

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.