Responsiivinen design on maailmalla ajankohtainen puheenaihe. Mobiililaitteiden selailumäärät kasvavat kovaa vauhtia, ja käyttäjät odottavat verkkosivuilta ja verkkopalveluilta yhä parempia käyttäjäkokemuksia. Mobiilikäytön yleistyminen käy koko ajan entistä kalliimmaksi yrityksille, jotka eivät ota tätä osa aluetta huomioon! Artikkelissa pureudumme reponsiiviseen designiin, ja kerromme, kuinka yritykset voivat hyödyntää responsiivista designia parantamaan asiakkaiden käyttökokemusta.

 
Mitä on responsiivinen design?

Lähtökohdaksi on varmastikin hyvä asettaa, mitä responsiivinen design on. Suomalaiset käännökset asiasta ovat kutakuinkin mukautuva suunnittelu tai mukautuva verkkosuunnittelu. Yksinkertaisimmillaan responsiivinen suunnittelu(ja responsiivinen verkkokauppa) vastaa alati kasvavaan mobiililaitteiden määrään ja niiden erilaiseen käyttöympäristöön: työpöytäkäyttöön suunniteltua sivustoa ei ole todennäköisesti halppo käyttää pienemmällä ruudulla ja erilaisilla syöttölaitteilla(sormi hiiren ja näppäimistön sijaan).
Mobiililaitteiden määrän kasvu ei ole enää pitkään aikaan ollut vaikeasti ennustettavissa, mutta kasvu tapahtuu koko ajan nopeammin, kuin on ajateltu. Katso mm. Uuden Suomen artikkeli aiheesta tai YLEn tutkimus.Nämä siis kotimaisista käyttäjistä. Ulkomaista tilastodataa on saatavilla mm. Ciscolta ja erinäisistä muista artikkeleista . Kun tilastot näyttävät tältä, alkaa resposiivisen designin tärkeys näyttäytyä uudessa valossa.

Tämä uudenlainen käyttökulttuuri asettaa uusia vaatimuksia yritysten verkkopalveluille. Jos esimerkiksi verkkokauppa ei ole responsiivinen(ja kilpailija on), niin monesti asiakas hylkää sivuston ja etsii helpommin käytettävän version muualta.

 

Mobiilisivustot ennen

Perinteisesti mobiilisivujen luontiin on käytetty kahta tapaa:
1. Web-mobiilisivusto. Olet varmasti nähnyt monilla suuremmilla sivuistoilla ilmoituksen "Haluatko siirtyä mobiilisivustolle?" ja tämän jälkeen selain on ahjannnut sinut osoitteeseen m.verkkosivu.fi. Kohtuullisen kätevää, mutta mobiilisivu täytyy rakentaa täysin nollasta, on ylläpidettävä kahta eri sivustoa(websivusto ja mobiilisivusto) sekä vaivattava käytäjiä kysymyksillä.

2. Natiivi sovellus. Sovellus on luotu erikseen eri käyttöjärjestelmille, mikä on kallista, ja tottakai niitä joudutaan myös ylläpitämään erikseen. Alustoja on monia, kuten Android, iOS ja Windows Phone. Ja jos sivustosta ei ole luotu sovellusta kaikille alustoille(vielä kerran, tämä on kallista puuhaa), niin tällöin kyseisen käyttöjärjestelmän omistajat eivät saa kunnollista mobiilikokemusta. Sovellusten käyttöjärjestelmät voivat myös vaihtua, ja niihin tulee päivityksiä, jolloin sovellusta on myös päivitettävä koko ajan.

Kumpikaan näistä tapauksista ei ole kustannustehokas ja yleispätevä. Tässä kuvaan astuu responsiivinen design. Se tarkoittaa käyttöliittymän suunnittelua edelleenkin kaikille alustoille(eri näyttöjen suuruuksille), mutta responsiivinen design käyttää usean eri suvoston sijaan pohjana samaa sivustoa, jonka ulkoasun esitystapaa vaihdetaan tilanteen mukaan. Esimerkiksi responsiivinen verkkokauppa tunnistaa, millä näyttötarkkuudella sitä selataan, ja optimoi esitystavan tämä mukaisesti. Samaa verkkosivustoa voidaan siis käyttää sekä puhelimella, padilla ja työpöytäkoneellakin. Responsiivinen design tarkoittaa myös erikokoisten tietokoneen näyttöjen ottamisen huomioon, joten se tarjoaa paremman käyttökokemuksen sekä kannettavalla että suurilla pöytänäytöillä.

 

Responsiivisuuden toteutus

kuva2

Teknisesti responsiivisen sovelluksen tekeminen on mahdollista käyttäen HTML5-kuvauskieltä ja CSS3-tyylejä. Responsiivisessa designissa käytetään hyödyksi joustavaa asettelua (flexible grid) ja CSS3:n mediakyselyjä (media query, näillä määritetään käytettävän näyttölaitteen suuruus ja sivun käyttäytyminen). Media queryjä hyödyntämällä määritetään näyttökokjen välejä, joilla sivusto käyttäytyy tietyllä tavalla. Perusideana on, että sivuston pitää toimia mahdollisimman hyvin mahdollisimman monella päätelaitteella.
Myös kuvat ja videot voidaan tällä tavoin sovittaa respovsiivisen designin periaatteita hyödyntäen.

Sivustolta voidaan myös piilottaa osa elementeistä, koska vaikkapa matkapuhelimella näytöle ei yksinkertaisesti mahdu niin paljon tavaraa. Piilottamisen kanssa on kuitenkin syytä olla tarkkana, jotta piiloon ei jää mitään oleellista.
Responsiivisuus aiheuttaa haasteita myös sen faktan kannalta, että käytössä on laaja skaala selaimia, jotka eivät kaikki tue viimeisimpiä teknisiä ominaisuuksia. Esimerkiksi responsiivisessa designissa isossa roolissa olevat  CSS3:n media queryt ovat varsin uusi ominaisuus selaimissa. Lista CSS3 media queryjä tukevista selaimista löytyy täältä.

Responsiivisella suunnittelulla halutaan siis luoda yhdellä sivustolla ja alustalla yhtä hyvät ja optimoidut käyttäjäkokemukset joka laitteelle eri käyttötarkoituksiin.

 

Kannattaako responsiivinen design?

Kannattaako responsiivinen design ottaa sitten käyttöön seuraavassa sivusto-uudistuksessa? Vastaus on ehdottomasti kyllä. Mobiilikäyttäjien määrät puhuvat "karua" kieltään, eikä yhdelläkään yrityksellä ole varmasti varaa käännyttää kohta yli puolikasta potentiaalisista asiakkaista pois jo ovelta. Responsiivinen design on helppo oikotie mobiilistrategiaan ja sivuston hallinnointiin ilman ylimääräistä vaivaa mobiiliapplikaatioiden tai mobiilisivustojen ylläpidosta, sekä se vastaa erilaisten näyttökokjen tuomaan uuteen tilanteeseen.
Responsiivinen design tuo kuitenkin paljon haasteita sisällön esittämiseen sekä suunnitteluvaiheeseen ja itse toteutukseen, joten tässä kohtaa tarvitset yrityksellesi osaavan kumppanin, jolla on kokemusta toimivista ja monipuolisista responsiivisista verkkosivuprojekteista.

PS. Kotisivumme sekä tämä blogi ovat responsiivisesti suunniteltuja ja toteutettuja. Voit katsoa mitä tapahtuu, kun pienennät ja suurennat selainikkunaa.

 

Lisää tietoa: http://lamia.fi/