Oulun ammattikorkeakoulu
ePooki 6/2013

Responsiivinen verkkosivujen suunnittelu mukauttaa sisällön eri päätelaitteille

Metatiedot

Nimeke: Responsiivinen verkkosivujen suunnittelu mukauttaa sisällön eri päätelaitteille

Tekijä: Karukka Minna; Inkilä Tommi

Aihe, asiasanat: elektroniset julkaisut, internet, käyttäjälähtöisyys, matkaviestimet, mobiililaitteet, suunnittelu, sähköiset julkaisut, ulkonäkö, verkkoaineisto, verkkojulkaisut, visuaalisuus, www-sivustot, www-sivut

Tiivistelmä: Oulun seudun ammattikorkeakoulun (Oamk) Kulttuurialan yksikön KUUSIO – Kulttuurin uudet sisällöt ja oppimisympäristöt -hanke on tiedon ja oppimisen kohtaamispaikka luovien alojen yritysten henkilöstölle sekä toisen ja korkea-asteen opettajille. Hanke järjestää uusiin mediateknologioihin liittyviä koulutuksia. Hankkeessa on toteutettu seminaari ja työpajoja toimivien verkkosivujen toteuttamisesta yrityksille. Tässä artikkelissa käsitellään responsiivista eli mukautuvaa verkkosivujen suunnittelua, joka on lisännyt vahvasti suosiotaan verkkosivujen toteutustapana.

Julkaisija: Oulun seudun ammattikorkeakoulu, Oamk

Aikamääre: Julkaistu 2013-03-26

Pysyvä osoite: http://urn.fi/urn:nbn:fi-fe201302221895

Kieli: suomi

Suhde: http://urn.fi/URN:ISSN:1798-2022, ePooki - Oulun seudun ammattikorkeakoulun tutkimus- ja kehitystyön julkaisut

Oikeudet: Julkaisu on tekijänoikeussäännösten alainen. Teosta voi lukea ja tulostaa henkilökohtaista käyttöä varten. Käyttö kaupallisiin tarkoituksiin on kielletty.

Näin viittaat tähän julkaisuun

Karukka, M. & Inkilä, T. 2013. Responsiivinen verkkosivujen suunnittelu mukauttaa sisällön eri päätelaitteille. ePooki. Oulun ammattikorkeakoulun tutkimus- ja kehitystyön julkaisut 6. Hakupäivä 24.2.2018. http://urn.fi/urn:nbn:fi-fe201302221895.

Hyvät verkkosivut lisäävät yrityksen tunnettavuutta, esittelevät selkeästi tuotteita ja palveluja sekä sisältävät tarvittavan toiminnallisuuden. Sivuilta täytyy löytyä oleellinen tieto, jonka täytyy olla helposti saatavissa, ja sivuston tulee olla visuaalisesti houkutteleva. Mobiililaitteiden yleistyessä sivuston sisällön tulee soveltua myös useaan eri näyttökokoon, jolloin tarvitaan responsiivista verkkosivujen suunnittelua.

Verkkosivusto on kokonaisuus. Tämä tarkoittaa sitä, että ulkoasu ja rakenne ovat yhtenäisiä. Sivuston suunnittelu kannattaa aloittaa määrittämällä sen käyttötarkoitus ja kohderyhmä. On hyvä esittää kysymyksiä, kuten mitä kuluttajan tai käyttäjän pitäisi sieltä löytää? Millä laitteella käyttäjä katsoo verkkosivua? Mikäli vastauksena on mobiililaite, sitä mielekkäämpää on suunnitella sivusto responsiiviseksi eli sellaiseksi, joka mukautuu päätelaitteen mukaan.

Riippumatta siitä, suunnitellaanko sivua responsiiviseksi vai ei, perusperiaatteet pysyvät samana. Suurilla sivustoilla sivujen määrä kasvaa nopeasti, jolloin huolellisen suunnittelun merkitys korostuu. Rakenteen suunnittelussa apuna voi käyttää esimerkiksi miellekarttaa (kuva 1), joka kuvaa sivuston sisällön eri päätelaitteilla ja sen, mihin mikäkin linkki johtaa. Tutkimusten mukaan käyttäjät ovat valmiita klikkaamaan useita kertoja löytääkseen haluamansa tiedon Visual attention to Online Search Engine Results. An exploration into differences in eye movements between consumers searching for product information and consumers searching for product transactions using Google, MSN (now Windows Live Search), Ilse, Kobala, and Lycos. 2012. A study by Market Research Agency De Vos & Jansen in cooperation with full service Search Engine Media Agency Checkit. Hakupäivä 8.1.2013. http://www.scribd.com/doc/38518300/Eye-Tracking-Research, mutta tässä tapauksessa polun täytyy olla johdonmukainen. Suoraviivaisuus ja selkeys ovat tärkeitä, oli sivusto pieni tai suuri.

Esimerkki miellekartasta

KUVA 1. Esimerkki miellekartasta

Sivuston visuaalisen ensivaikutelman merkitystä ei tule vähätellä. Tyypillisesti käyttäjä silmäilee sivuston läpi hyvin nopeasti Visual attention to Online Search Engine Results. An exploration into differences in eye movements between consumers searching for product information and consumers searching for product transactions using Google, MSN (now Windows Live Search), Ilse, Kobala, and Lycos. 2012. A study by Market Research Agency De Vos & Jansen in cooperation with full service Search Engine Media Agency Checkit. Hakupäivä 8.1.2013. http://www.scribd.com/doc/38518300/Eye-Tracking-Research. Ulkoasu vaikuttaa paljon siihen, jatkaako käyttäjä tutustumista sivustoon. Navigoinnin helppous ja intuitiivinen käyttöliittymä saavat käyttäjän viihtymään sivustolla pidempään. Jos sivusto on laaja, toimiva sivuston sisäinen hakukone on tärkeä. Hakutoimintojen täytyy olla tehokkaita ja selkeitä, jotta käyttäjä löytää helposti hakemansa.

Verkkosivuston toteuttamiseen on tarjolla erilaisia julkaisujärjestelmiä. Näistä yleisimmät ovat ilmaiset WordPress, Joomla ja Drupal sekä kaupallinen Microsoftin SharePoint. Näiden käyttöönotto vaatii jonkin verran osaamista. Näillä ilmaisilla julkaisujärjestelmillä voi luoda näyttävänkin näköisen, yksinkertaisen sivuston ilman suurempia ohjelmointitaitoja. Yritykseen liittyvien verkkosivujen tekeminen esimerkiksi WordPressillä on suhteellisen yksinkertaista. Monimutkaisempien toiminnallisuuksien tekeminen vaatii käyttäjältä enemmän kokemusta.

Jokaisella alustalla on puolensa, ja useimmiten valinta riippuu toteuttajan mieltymyksistä. Monet verkkosivustoja tekevät yritykset käyttävät pohjana jotakin mainituista julkaisujärjestelmistä tai vaihtoehtoisesti he voivat käyttää omaa järjestelmäänsä.

Verkkosivujen suunnittelu eri alustoille

Mobiililaitteiden kautta tapahtuvan Internetin käytön arvioidaan lisääntyvän huomattavasti Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update, 2011–2016. 2012. http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.pdf. Yritysten tulee huomioida tämä viestintää ja omia sivustoja suunnitellessaan. Useassa tapauksessa on hyödyllistä, että sivustoja voi katsella sujuvasti myös mobiilipäätelaitteilla.

Aiemmin asia on ratkaistu tekemällä joko erillinen mobiilisivusto tai kehittämällä erillinen natiivisovellus eri mobiilialustoille, joita ovat muun muassa Symbian, iOS, Windows Phone ja Android. Molemmissa ratkaisuissa on jouduttu ylläpitämään useampaa sivustoa tai sovellusta. Tämä vie luonnollisesti aikaa ja vaatii eri alustojen asiantuntijuutta. Mobiililaitekannan nopea kehittyminen asettaa omat haasteensa verkkosivujen ylläpitämiselle.  Kannettavissa laitteissa internetiä selaillaan eri tavoilla kuin tietokoneita käytettäessä. Käyttöliittymä ja näkymä, joka toimii sujuvasti isolla näytöllä ja hiirellä, ei välttämättä ole miellyttävä käyttää pienellä kosketusnäytöllä.

Optimoitujen sivujen toteuttaminen eri laitteisiin on haasteellista. Responsiivisella eli mukautuvalla suunnittelulla voidaan vastata eri laitekantojen tarpeisiin (kuva 2). Ethan Marcotte on yksi henkilöistä responsiivisen suunnittelun taustalla. Hänen mukaansa Marcotte, E. 2010. Responsive Web Design. Hakupäivä 8.1.2013. http://www.alistapart.com/articles/responsive-web-design/ printistä tuttuja käsitteitä ja rajoitteita on keinotekoisesti siirretty verkkosivujen suunnitteluun. 

Responsiivinen käyttöliittymä

KUVA 2. Responsiivinen käyttöliittymä muokkaa sisällön sopivaksi eri päätelaitteisiin

Mukautuva käyttöliittymä – mitä responsiivisuus on?

Mukautuva suunnittelu mahdollistaa sen, että verkkosivu skaalautuu eli mukautuu sopivaan kokoon eri päätelaitteilla katsottaessa. Tällöin katsojalle näytetään eri päätelaitteelle optimoitua sisältöä muodossa, joka toimii eri näytön leveyksillä. Käytännössä tämä tarkoittaa sitä, että isolla näytöllä esimerkiksi uutisia voi olla kolme palstaa vierekkäin, tabletilla kaksi ja matkapuhelimella yksi. Sisällöntuottajan kannalta on tehokasta ja helpointa tarjota tarkalleen sama sisältö eri päätelaitteille. Responsiivinen suunnittelu takaa sen, että sisältö näytetään sopivassa järjestyksessä ja muodossa eri laitteilla.

Suunnitteluvaiheessa on tärkeää priorisoida eri sisällöt ja miettiä, mitkä ovat tärkeimmät asiat sivun käyttäjäkokemuksessa. Oleellista ei ole pelkästään sisällön skaalautuvuus eri kokoisiin näyttöihin, vaan pääajatuksena on olennaisen sisällön esittäminen eri päätelaitteilla. Tämän vuoksi on tärkeää ymmärtää käyttäjien eri tarpeet eri käyttötilanteissa.

Suunnittelussa hyödynnetään kolmea perustekniikkaa, joita sovelletaan joustavan sommittelun lisäksi. Nämä ovat Marcotten Marcotte, E. 2010. Responsive Web Design. Hakupäivä 8.1.2013. http://www.alistapart.com/articles/responsive-web-design/ mukaan ”fluid grids, flexible images, and media queries”. Fluid grid tarkoittaa joustavan asemoinnin suunnittelua ja siinä tarvittavia elementtejä. Tällöin layoutin mitat eivät ole pikselimittoja vaan suhteellisia mittoja suhteessa käytettävissä olevaan alaan. Kuvat (flexible images) puolestaan asetetaan skaalautuviksi ja elementtien leveydet määritellään prosentteina. Media queries -tekniikka on tapa jakaa laitteet ryhmiin, joille tehdään eri asetteluja. Tällöin suunnitellaan, mitä näytetään ja miten erikokoisilla näytöillä, jotta olennaiset asiat ovat sivustolla tarjolla käyttäjille.

Sisällön optimoinnin eri näkymiin tulee perustua laitteen käyttökontekstiin ja käyttäjän tarpeisiin. Haluttaessa tietyt toiminnot tai sivun osat voidaan jättää pois pienimmistä näytöistä ja tarjota suurempiin laajempaa sisältöä. Näistä poisjätettävistä elementeistä esimerkkejä ovat muun muassa linkkilistat, bannerit ja isokokoiset kuvat. Mielenkiintoisena yksityiskohtana mainittakoon, että tutkimusten mukaan ihmiset yleensä ohittavat katseellaan verkkosivuilla olevat bannerit. Niiden käyttöä kannattaa siis harkita. Silmäilyssä painottuu sivujen vasen reuna ja sieltä muodostuva F-kirjain Nielsen, J. 2006. F-Shaped Pattern for Reading Web Content. Hakupäivä 8.1.2013. http://www.useit.com/alertbox/reading_pattern.html.

Kiinnostuksen kohde on usein mobiililaitetta käytettäessä eri verrattuna tietokoneeseen. Asiat, joita käyttäjä katsoo puhelimellaan, voivat liittyä esimerkiksi tiedonhakuun ja asioiden tarkistamiseen, kuten missä liike sijaitsee tai moneltako haluttu näytös alkaa. Joskus voi olla viisainta aloittaa suunnittelu pienimmästä näytöstä ja miettiä siinä nähtävät päätoiminnot sekä sisältö. Sisältöä ja toimintoja on helpompi ottaa mukaan isompaan näyttöön siirryttäessä. Aiheesta löytyy lisätietoa How to Design a Mobile Responsive Website artikkelista McVicar, E. 2011.  How To Design A Mobile Responsive Website. Hakupäivä 8.1.2013. http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/.

Suunnitteluprosessi

Mukautuva suunnittelu voidaan jakaa karkeasti eri osiin (kuva 3). Suunnitteluprosessin päävaiheita ovat:

Kaikissa laitteissa on näytettävä oleellinen sisältö huomioiden näkymän koko, käyttötilanne ja interaktiomenetelmä.

Sivujen suunnittelun muistilista

KUVA 3. Sivujen suunnittelun muistilista 

Uusimmista verkkosivustojen luomiseen tarkoitetuista työkaluista löytyy sisäänrakennettuja ominaisuuksia, jotka helpottavat responsiivisten sivustojen suunnittelua. Sivuston ennakkosuunnittelua ei tule unohtaa ja tärkeää on myös pohtia, onko responsiivinen suunnittelu verkkosivuston kannalta oleellista. Päätöstä tehtäessä tulee ensisijaisesti huomioida sivuston käyttötarkoitus ja konteksti, jossa sivustoa käytetään. Sen jälkeen tulee miettiä verkkosivun toiminnallisuudet. Luonnollisesti on myös harkittava, voiko aiempaa sivustoa käyttää pohjana uusille sekä mikä on uusimiseen käytössä oleva budjetti ja mitkä ovat käytettävissä olevat resurssit. 

Koulutusta verkkosivustojen suunnitteluun KUUSIO-hankkeessa

Oulun seudun ammattikorkeakoulun (Oamk) Kulttuurialan yksikön KUUSIO – Kulttuurin uudet sisällöt ja oppimisympäristöt -hanke on tiedon ja oppimisen kohtaamispaikka luovien alojen yritysten henkilöstölle sekä toisen ja korkea-asteen opettajille. Hanke järjestää uusiin mediateknologioihin liittyviä koulutuksia. Hankkeessa on toteutettu seminaari ja työpajoja toimivien verkkosivujen toteuttamisesta yrityksille.

Verkkosivustojen suunnittelua on käsitelty Oulun seudun ammattikorkeakoulun KUUSIO-hankkeen seminaarien ja työpajojen aikana. Aihe liittyy hankkeen koulutusteemaan numero 2, sisällön tuottamisen uudet ympäristöt. Verkkosivustoja käsitteleviä koulutuksia järjestettiin neljä ja niihin kuului sekä lähi-, että etäopetusta. Näihin koulutuksiin on osallistunut yhteensä 98 henkilöä.

Hankkeen tavoitteena on opettajien tietojen päivittäminen ja uudenlaisten mediateknologioiden esitteleminen Pohjois-Pohjanmaalla toimiville yrityksille. Koulutusten avulla pyritään lisäämään osaamista ja hyödyntämään uusinta tietoa sekä opettajien että yritysten toiminnassa. Tavoitteena on lisätä kohderyhmien ammatillista osaamista eri osa-alueilla, joita ovat:

  1. sosiaalinen media
  2. sisällöntuottamisen uudet ympäristöt
  3. sisällöntuotanto ja jakelu
  4. uusien mediateknologioiden mahdollistama liiketoiminta.

KUUSIO-hankkeen koulutuksiin on osallistunut yhteensä 320 henkilöä. Hanke järjestää yhteensä 30 koulutusta yllä mainituista neljästä teemasta. Koulutuksien ohella hanke tuottaa julkaisuja ja kaksi opinnäytetyötä, sekä integroi koulutustoimintansa tulokset luovien alojen korkeakouluopetukseen.


KUUSIO-hankkeen kotisivut

KUUSIO Facebookissa


Oulun seudun ammattikorkeakoulun koordinoima Kuusio - Kulttuurin uudet sisällöt ja oppimisympäristöt- hanke toteutetaan vuosina 2011–2013 yhdessä Oulun yliopiston Oppimisen ja koulutusteknologian tutkimusyksikön (LET) kanssa. Kuusio on Euroopan sosiaalirahaston rahoittama hanke, tuen myöntäjä on Pohjois-Pohjanmaan ELY-keskus. 


Rahoittajien logot

    Kommentit

    blog comments powered by Disqus