Responsiivisen esitystavan suunnittelu ja vaikutukset sisällönhallintaan.

1. WEB-SISÄLLÖNHALLINTA JA MUKAUTUVA
ESITYSTAPA (RESPONSIVE WEB DESIGN)
Talent Base
24.1.2013
Timo Karsisto
Senior Consultant, Talent Base

2. Esittely
• Timo Karsisto, vanhempi konsultti, Talent Base
• Ratkaisusuunnittelu, IT-arkkitehtuuri ja
vaatimusmäärittely
• Web-pohjaiset B2B- ja B2C–palvelut,
sisällönhallintaratkaisut, sähköinen
kaupankäynti, sähköinen asiointi, portaalit,
sovellukset, integraatiot

3. Sisällönhallinta ja responsiivinen esitystapa
1. Johdanto web-päätelaitteiden monimuotoisuuteen
2. Perinteinen esitystapa – Työpöytäratkaisu (Fixed
Web)
3. Perinteinen esitystapa ja mobiilikanavat
4. Responsiivinen esitystapa
5. Responsiivisen esitystavan työnkulku
6. Parhaat käytännöt

4. Termistö
• Responsive Web Design (RWD) – Mukautuva esitystapa
– Tapa toteuttaa verkkosivustoja, jotka on optimoitu mobiili-, tablet- ja työpöytälaitteille. Sisältö mukautuu
laitteen ominaisuuksien mukaan.Toteutuksessa on vain yksi CMS ja yksi käyttöliittymäkoodi (HTML/CSS/JS).
• CMS/WCMS
– Sisällönhallintajärjestelmä/Web-sisällönhallintajärjestelmä (Content Management System/Web Content
Management System)
• Progressive Enhancement
– Toteutustapa verkkosivulle, jossa tehdään yksinkertainen ja toimiva ratkaisu ja käyttökokemusta parannetaan
laitteen tarjoamien ominaisuuksien mukaan (esim. sivustot toimivat täysin ilman javascriptiä, mutta jos
käyttäjällä on javascript-tuki, niin käyttäjän navigaatiokokemusta voidaan parantaa)
• Media Query
– HTML5/CSS3:n tarjoama tapa havaita esim. käyttäjän selaimen leveys ja tämän perusteella voidaan muuttaa
CSS-tyylejä (esim sivun layouttia ja fonttien kokoja). Media queryt määrittävät nk. breakpointit.
• Fluid Grid
– Käyttöliittymä on toteutettu joustavasti eli käyttöliittymäelementit skaalautuvat käyttäjän selaimen koon
mukaan (elementtien koko ei ole määritelty pikseleitä vaan suhteellisina yksikköinä, esim artikkelin leveys on
aina 60% käyttäjän selaimen leveydestä)
• Fluid Images
– Kuvien koot ovat myös suhteellisia eli skaalautuvat selaimen leveyden perusteella (kuvan koko esim aina
50% käyttäjän selaimen leveydestä)
• Viewport
– HTML-metatagi, jonka avulla mobiililaitteille kerrotaan, että sivusto on mobiilioptimoitu (muuten mobiililaite
yrittää esim skaalata sivun kuin se olisi suunniteltu työpöytäkäyttöön, oletusarvoisesti monet mobiililaitteet
yrittävät näyttää ruudulla 980px leveydeltä sisältöä)

5. Termistö II
• Mobile First / Content First
– Sivuston suunnittelun lähtökohtana on suunnitella sisältö edellä, miettiä aina mikä on tärkeintä ja mitä
halutaan näyttää pienimmissä mobiililaitteissa (tämä auttaa myös saamaan työpöytäsivustosta käyttäjälle
optimoidumman)
• HTML5 & CSS3
– Uudet standardit HTML:ään ja CSS:ään (HTML:n tyylimääritykset). Uudet standardit mahdollistavat mm.
mukautuvien sivustojen tekemisen. Vaikka näitä standardeja ei olisi tuettu laitteessa, niin on olemassa
teknologioita, jotka simuloivat HTML5/CSS3-tuen myös vanhemmille selaimille/laitteille)
• Breakpoint
– Määritelty ”murroskohta” pikseleinä (selaimen leveys), missä sivuston CSS-tyylejä halutaan muuttaa. Usein
breakpoint-pisteessä muutetaan esimerkiksi sivustoelementtien asettelua ja fonttien kirjasinkokoja/-lajeja.
Breakpoint-toiminnallisuus toteutetaan pitkälti CSS3:n media-query -kyselyiden avulla.
• Sisältöinventaatio
– Inventaario sivuston sisällöstä, minne on kerätty priorisoitu ”oikea” sisältö (tekstit ja mediatiedostot, kuten
kuvat ja videot), rautalankamallit sisällön asettelusta sivustolla jne...
• HTML-prototyyppi
– Erittäin tärkeä väline mukautuvan verkkosivustosuunnittelun työmallissa. HTML-prototyyppi on selaimessa
toimiva staattinen sivusto, jonka on hyvä olla helposti saatavilla (sisäverkossa tai julkisessa verkossa esim.
salasanasuojattuna). Kaikki sidosryhmät voivat testata ja ”pelata” prototyypillä. Kun prototyyppi on valmis,
viimeistellään html-koodi ja lisätään ratkaisuun taustajärjestelmälogiikka (dynaaminen toteutus
sisällönhallintajärjestelmän päällä).

6. Web-sisällönhallinta ja mukautuva esitystapa
Web-päätelaitteiden
monimuotoisuus

7. Pelikenttä – Verkon laitekirjo on valtava
• Työpöytäselaimet (yleisimmät):
– Internet Explorer, Chrome, Firefox, Safari, Opera
• Mobiililaitteet:
– Alustoja: Windows Phone 7.5 & 8, Meego, Android (useita versioita),
Symbian (useita versioita), S40, Blackberry OS, IOS ...
• Joissa eri selaimia 20+
– Facebook on ilmoittanut että 7000 erityyppistä mobiililaitetta käyttää FB:tä
päivittäin
– 249 eri resoluutiota matkapuhelimissa
• Ominaisuuksia:
– Javascript, Flash, HTML 4.01, HTML5, CSS3, CSS jne
• Käyttöliittymä ja ohjaustavat:
– Hiiri, näppäimistö, kosketus, näppäimet, ääni, kynä, eleet ...
Lähteet:
http://techcrunch.com/2012/08/03/vp-mike-schroepfer-7000-different-mobile-devices-access-facebook-every-day/
http://cartoonized.net/cellphone-screen-resolution-by-size.php

8. Tilastoja mobiilikäyttäjistä
o 71% mobiilikäyttäjistä olettaa, että sivut latautuvat yhtä nopeasti tai nopeammin
kuin työpöytäkoneella
o 74% lähtee pois sivustolta, jos sivun latautuminen kestää yli 5 sekuntia
o Noin puolet mobiilikäyttäjistä eivät palaa sivustolle, mikäli se ei toiminut kunnolla
aikaisemmin
o eBayssa tehdään mobiiliostos joka toinen sekunti
o 28% Iso-Britannian asukkaista on ostanut jotain mobiililaitteen avulla
o 29% älypuhelinkäyttäjistä käyttää puhelinta ostamisen tukena, esim.
hintavertailuun
Lähteet:
http://www.compuware.com/D/RELEASE/592528/NEW-WEB-STUDY-REVEALS-THE-MOBILE-WEB-DISSAPPOINTS-GLOBAL-CONSUMERS
http://www.gpmd.co.uk/blog/2012-mobile-internet-statistics/
http://cyberetto.com/2012/06/07/mobile-internet-usage-statistics/

9. Verkon mobiilikäyttö kasvaa eksponentiaalisesti
• Maailmassa on yli 4 miljardia matkapuhelinta, joista yli miljardi on älypuhelimia
• Älypuhelimia myydään jo nyt enemmän kuin kannettavia ja työpöytäkoneita yhteensä
• Optimistinen arvio: mobiilikäyttö ohittaa työpöytäkäytön vuonna 2014
• Mobiilikäyttäjien osuus kasvaa räjähdysmäisesti. Tällä hetkellä koko maailman web-käyttötilastoissa
mobiilikäyttäjiä on koko liikenteestä noin 15% (vuonna 2010 alle 2%).
Mobiilikäyttäjät ovat erittäin tärkeä käyttäjäryhmä
Lähde:http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201212

10. Web-sisällönhallinta ja mukautuva esitystapa
Web-sivustot
työpöytäselaimille

11. Perinteinen tapa toteuttaa verkkosivuja
• Taustalla liiketoiminta,
sisältöstrategia, brand,
design
• Kannettavat ja
työpöytätietokoneet (ja
niiden internetselaimet)
• ”Fixed”-design,
käyttöliittymän
elementtien asemointi
voidaan suunnitella
kiinteäksi

12. Perinteinen tapa: Suunnittelusta loppukäyttäjille
Design
• Staattinen
rautalankamalli
• Staattinen
design
(Photoshop)
• Kuva, teksti
Suunnittelu ja
toteutus
• Arkkitehtuuri
• HTML, JS, CSS
• CMS-/WCMS-toteutus
Operatiivinen
sisällönhallinta
Sisällön ylläpito
CMS-/WCMS-järjestelmässä
Web
Loppukäyttäjät
CMS
”Pixel Perfect”

13. Työpöytäselaimet - mobiililaitteet
3.7”
480x800
Kosketus
3.5”
640x960
Kosketus, puhe
4,65”
720x1280
Kosketus
4,3”
540x960
Kosketus
3”
320x480
Kosketus,
näppäimet
”Tabletit”
9.7”
1024x768
2048 x 1536
Kosketus
”Työpöytä”
24”
1920x1080
Hiiri, näppäimistö
! ! ! ! !

14. Web-sisällönhallinta ja mukautuva esitystapa
Erilliset kanavat erilaisille
päätelaitteille

15. Erilliset kanavat
CMS
Desktop
1920 x 1080
2048 x 1536
1536 x 2048
www.sivusto.fi
480
x
800
800 x 480
m.sivusto.mobi
Toteutus 1
Toteutus 2
Toteutus 3-n
www.sivusto.fi
Design & sisältö
Design & sisältö CMS
Design & sisältö CMS
Tablet
Mobile

16. Erilliset kanavat
• Sisällön näkyvyys erilaisissa päätelaitteissa voidaan saavuttaa myös erillisillä
käyttöliittymillä ja sisällöllä
• Sisältö suunnitellaan ja toteutetaan eri tyyppisille laitteille erikseen. Teksti,
kuva, multimedia (esim. Flash, video)
• Käyttöliittymät räätälöidään ja optimoidaan erilaisia päätelaitteita varten.
Haasteet:
- Mobiililaitteiden kirjo kasvaa jatkuvasti ja samalla erillisen sisällön sekä
käyttöliittymien suunnittelu, kehittäminen ja ylläpitäminen monimutkaistuu
- Yhtenäisen käyttäjäkokemuksen säilyttäminen erilaisissa päätelaiteissa on
haastavaa
- Sisällön näkyvyys hakukoneissa heikkenee
- Sosiaalinen media ja sisällön jakaminen eri kanavissa ei toimi
- Toteutettu usein perinteisemmällä tavalla, ei välttämättä mukaudu laitteen
näytön koon mukaan (esim. Fonttien,kuvien koot, layout).

17. Web-sisällönhallinta ja mukautuva esitystapa
Responsiivinen esitystapa
(Responsive Web Design)

18. Väite:
Mobiilikäyttäjät haluavat tehdä täysin
samoja asioita kuin työpöytäkäyttäjät.

19. ON VAIN YKSI VERKKO
Responsive Web Design
Progressive Enhancement
Mobile First
CSS3 Media Query
Breakpoint
HTML5
Fluid Grid Fluid Images

20. Responsiivinen esitystapa
Responsiivinen käyttöliittymä
HTML5
CMS Responsiivinen toteutus
Yksi sisältö + yksi esitystapa
Responsiivinen käyttöliittymä skaalaa ja
esittää sisällön (tai sovelluksen) erilaisilla
näyttöresoluutioilla ja internetselaimilla
Design, sisältö
Tekstisisältö
- Otsikko
- Tiivistelmä
- Leipäteksti
Responsive Web Design
CSS3
Media Query
Breakpoint
viewport
Fluid grid

21. Responsiivinen esitystapa - esimerkki
240x320 (mobile) 320x480 (mobile) 600x800 (small tablet) 768x1024 (tablet portrait) 1024x768 (tablet landscape/ small desktop)
http://veikonkala.org/responsive/
Selainikkunan koko

22. www.nokia.com/global/
www.bostonglobe.com

23. http://yle.fi/uutiset/
http://www.microsoft.com

24. Responsiivinen esitystapa - tiivistelmä
• Yksi sisältö/toiminnallisuus, yksi käyttöliittymä – verkkosisältö skaalautuu eri
laitteisiin!
• Sisällön esitystapa optimoidaan päätelaitteen ominaisuuksien ja selaimen
kyvykkyyksien mukaan:
– Näyttölaitteen koko, laitteen orientaatio
– Selaimen tukemat ominaisuudet (javascript-tuki, css, flash…)
– Ohjaustapa: hiiri, näppäimistö, kosketus
• Sisällön esitystapa ja asemointi vaihtelee erilaisissa näyttöresoluutioissa ja
internetselaimissa - yhtenäinen käyttäjäkokemus säilytetään:
– Käyttöliittymäkomponenttien koko, sijoittelu, näkyvyys
– Kuvien koko, sijoittelu, näkyvyys
– Kirjasimen koko, skaalaus, sijoittelu, näkyvyys
– Skaalautuvuus, kiinteät mittayksiköt kuten px  %, em
– Breakpointit
• Näkyvyys hakukoneissa hyvä, sama sisältö + sama URL eri päätelaitteista
• Sosiaalinen media, sisällön jakaminen helppoa

25. Sisältö- ja UI
design
Web-sisällönhallinta ja mukautuva esitystapa
Java Gurut
Responsiivisen esitystavan
toteuttamisen työnkulku
Liiketoiminta
Sisällön
ylläpitäjät
HTML Velho
Arkkitehti
Ratkaisu-suunnittelija

26. Responsiivinen työnkulku – Sisältö ensin
Liiketoiminta-tavoitteet
&
sisältöstrategia
End-to-end vastuu ratkaisusta:
• Operationaalinen/ylläpidollinen näkökulma
• Sisältömallin suunnittelu (CMS)
• Liiketoimintasäännöt
Sisältöinventaario
Teksti/ Perus
HTML-proto
HTML-prototyyppi
&
HTML-tyyliohjeistus
HTML:n viimeistely
& CMS- toteutus
Ratkaisusuunnittelu
• Liiketoiminta-konsepti
• Sisällön
priorisointi/rautalan-kamallit
• Informaatio-arkkitehtuuri
• Tekstisisältö
• Mediasisältö
1.
2. 3.
1.Hero
Responsiivinen
Esitystapa
Responsiivisessa
esitytavassa..
2. Article
3. Infoboxes
• Sidosryhmäkommunikaatio/-koordinointi
• Vaatimusten jatkojalostaminen ja tarkentaminen
• Laadunvalvonta
• Dynaaminen ja
tuotantovalmis
CMS
• Muokkaamaton
teksti
• Dokumentaatio
(ppt)
• Yksinkertainen
HTML
• Staattinen HTML-prototyyppi
• Keskustelua, testausta, lisää
keskustelua ja iteraatioita
kunnes kaikki ovat tyytyväisiä:
• Liiketoiminta
• Graafinen
suunnittelija
• HTML-kehittäjä
• Taustajärjestelmä-kehittäjä
• Ratkaisusuunnittelija
• Arkkitehti

27. Parhaita käytäntöjä
• Toimintamallin muutos – HTML-prototyyppi suunnittelu- ja kommunikointivälineenä
– Prototyypissä oikea sisältö
– Vähemmän Photoshoppia ja enemmän HTML:ää
– Sisältö- ja komponenttikirjasto (content inventory & styleguide/component library)
– Hyväksy, että sivusto voi näyttää hieman erilaiselta eri laitteilla
– Kaikki sidosryhmät mukana: liiketoiminta, design, sisällönsuunnittelu, toteutus, ratkaisusuunnittelu, arkkitehtuuri, sisällönhallinta...
• Sisältö ensin (content first -mobile first)
– Sisällön priorisointi ja fokus peruslaitteiden käyttökokemuksessa  toiminnallisuutta ja sisältöä voidaan lisätä mikäli päätelaite
tukee sitä (progressive enhancement)
• Valitse tuettavat laitteet –työpöytäselaimista mobiililaitteisiin
– Valitse tärkeimmät laitteet kohdeyleisön mukaan
– Testaa oikeilla laittella ja tietoliikenneyhteyksillä
– Responsiivinen suunnittelutapa ei ole laitekohtainen vaan perustuu selaimien tukemiin ominaisuuksiin
• Mediatiedostojen hallinta ja prosessoinnin automatisointi
– Videot: vaaditaan useita formaatteja, jotta toimisi mahdollisimman monella laitteella. Myös eri resoluutioita tarvittaneen
– Kuvat: tarvitaan useita kokoja, ettei turhaan ladata liian isoja kuvia pienemmän resoluution laitteille
• Rakenna komponentteja – ei sivuja (sivut muodostuvat komponenteista)
– Komponentteja aina taustajärjestelmään asti (ei ainoastaan uudelleen käytettäviä UI-komponentteja)
– Komponenttien, videoiden ja kuvien kuvasuhteiden standardointi !!!

28. Parhaita käytäntöjä II
• Sisällönhallintajärjestelmässä hallitaan sisältöä, ei sisällön esitystapaa
• Kouluta, tiedota ja osallistuta ajoissa kaikkia osapuolia (liiketoiminta,
ylläpito jne)
• Hyvin suunnitellun ja toteutetun CMS-järjestelmän ja sisältömallin avulla
responsiivisen verkkopalvelun sisällönhallinta ei juurikaan poikkea
perinteisestä web-sisällönhallinnasta
– Huomio sisällön testaaminen ja esikatselu. Sisältö ei näy ainoastaan yhdellä
tavalla!
• Huom!
– Responsiivisen käyttöliittymän toteutuksessa hyödynnetään usein uusia
standardeja kuten HTML5, CSS3. Vanhempia selaimia ja laitteita (esim. Nokia
6110) varten voidaan tarvita erillinen ratkaisu!

29. Lisätietoja:
Timo Karsisto, Talent Base Oy
050 5880355
timo.karsisto@talentbase.fi