kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, viestintävirasto 28.8.2013
DESCRIPTION
Esitykseni Kelan verkkopalvelun responsiivisesta suunnittelusta ja toteutuksesta (PowerPointista tallennettu PDF-versio) Viestintäviraston järjestämässä koulutus- ja keskustelutilaisuudessa 28.8.2013. Tilaisuuden osallistujat olivat Liikenne- ja viestintäministeriön hallinnonalan verkkoviestijöitä.TRANSCRIPT
![Page 1: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/1.jpg)
Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus
Arto Paavola
Erikoisasiantuntija, Kela
28.8.2013
![Page 2: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/2.jpg)
Kuka olen?
• Arto Paavola
• Suunnitellut ja toteuttanut verkkopalveluita vuosituhannen
alusta lähtien
• Kelan IT-osastolla 2009 –
• Front end –kehittäjä (HTML, CSS, JavaScript)
• Responsiivinen suunnittelu ja toteutus
• Saavutettavuus
2
![Page 3: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/3.jpg)
Sisältö
• Uudistuksen sisältö ja rajaukset
• Miksi mobiiliin?
• Responsiivinen suunnittelu
• Kiinnitä huomiota
3
![Page 4: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/4.jpg)
Sisältö
• Uudistuksen sisältö ja rajaukset
• Miksi mobiiliin?
• Responsiivinen suunnittelu
• Kiinnitä huomiota
4
![Page 5: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/5.jpg)
Uudistuksen sisältö ja rajaukset
• Viestinnällisen sivuston uudistus
• Vuonna 2012 palvelussa 19 miljoonaa käyntiä
• Palvelee henkilöasiakkaita, työnantajia,
yhteistyökumppaneita, sidosryhmiä
• Lähes 7000 sivua, 1000 liitetiedostoa
• Suomi, ruotsi, englanti, suomenkielinen viittomakieli
5
![Page 6: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/6.jpg)
Uudistuksen sisältö ja rajaukset
• Responsiivinen
käyttöliittymä
• Teknisen alustan
nopea vaihto
• Helpottaa asiointia
Kelan sivustolla
6
![Page 7: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/7.jpg)
Uudistuksen sisältö ja rajaukset
• Uudistusprojektiin ei sisältynyt
• Tunnistautumista vaativat asiointipalvelut
• Erillissovelluksia (PDF-lomakepankki, palvelupisteen haku)
7
![Page 8: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/8.jpg)
Miksi mobiiliin?
• Uudistuksen sisältö ja rajaukset
• Miksi mobiiliin?
• Responsiivinen suunnittelu
• Kiinnitä huomiota
8
![Page 9: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/9.jpg)
Miksi mobiiliin?
• Käyntimäärät* mobiililaitteilla
• toukokuu 2011
− 1,1 % kaikista käynneistä
− 15 209 käyntiä
• toukokuu 2012
− 4,1 % kaikista käynneistä
− 62 299 käyntiä
• toukokuu 2013 (toukokuussa 2012 ennustin):
− 13 % kaikista käynneistä ??
− 200 000 käyntiä ??
* Google Analytics: Käynnit tarkoittavat kaikkien kävijöiden yksittäisten istuntojen määrää sivustossasi.
![Page 10: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/10.jpg)
Miksi mobiiliin?
• Käyntimäärät* mobiililaitteilla
• toukokuu 2013 (toukokuussa 2012 ennustin):
− 13 % kaikista käynneistä ??
− 200 000 käyntiä ??
• toukokuu 2013 (toteutunut):
− 9,9 % kaikista käynneistä
− 173 335 käyntiä
• heinäkuu 2013 (toteutunut):
− 13,8 % kaikista käynneistä
− 249228 käyntiä
* Google Analytics: Käynnit tarkoittavat kaikkien kävijöiden yksittäisten istuntojen määrää sivustossasi.
![Page 11: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/11.jpg)
Miksi mobiiliin?
11
![Page 12: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/12.jpg)
Miksi mobiiliin?
• Perinteiset resoluutiot
• 1280 x 1024
• 1366 x 768
• 1440 x 900
• 1600 x 900
• 1920 x 1200
12
![Page 13: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/13.jpg)
Miksi mobiiliin?
• ”Uudet” resoluutiot
• 320 x 480
• 768 x 1024
• 480 x 800
• 360 x 640
• 1280 x 800
• 800 x 1130
• 240 x 320
• 800 x 480
• 800 x 1003
• 800 x 1125
• 480 x 762
• 943 x 1332
• 800 x 358
• 540 x 960
• 943 x 1326
• 320 x 508
• 320 x 396
• 800 x 1200
• 1280 x 752
• 320 x 416
• 640 x 480
• 800 x 1333
• 943 x 1352
• 960 x 540
• 282 x 349
• 816 x 1023
• 943 x 1006
• 282 x 355
• 228 x 240
• 533 x 295
• 320 x 455
• 816 x 1156
• 240 x 301
• 816 x 1025
• 943 x 437
• 240 x 400
• 470 x 161
• 320 x 452
• 943 x 699
• …
13
![Page 14: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/14.jpg)
Miksi mobiiliin?
• Vanhalla sivustolla keväällä 2012 yhden kuukauden
käynneissä yli 500 eri resoluutiota
• pelkästään mobiililaitteilla
14
![Page 15: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/15.jpg)
Responsiivinen suunnittelu
• Uudistuksen sisältö ja rajaukset
• Miksi mobiiliin?
• Responsiivinen suunnittelu
• Kiinnitä huomiota
15
![Page 16: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/16.jpg)
Responsiivinen suunnittelu
• Tarjoamme asiakkaillemme pääsyn samaan
sisältöön, joka on aseteltu käyttäjälle
mahdollisimman helposti luettavaksi ja
navigoitavaksi riippumatta siitä, millä
päätelaitteella tämä sivustolle saapuu
• => responsiivinen sivusto
16
![Page 17: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/17.jpg)
Responsiivinen suunnittelu
• Visuaalinen ilme ja responsiivinen käyttöliittymä
• Projekti keväällä 2012
• Kumppanina Deasign
− Recommended Finlandin alihankkijana
• Ketterä menetelmä => nopea iterointi
• Mahdollisimman nopeasti protoilua selaimella
17
![Page 18: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/18.jpg)
Responsiivinen suunnittelu
• Konsepti
• Visuaalisuus
• Prototyyppi
18
![Page 19: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/19.jpg)
Responsiivinen suunnittelu
Konsepti • Suunniteltavaksi valittiin kolme eri näyttökokoa
analytiikkaan perustuen
− Desktop
− Tabletti
− Puhelin
19
![Page 20: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/20.jpg)
Konsepti: Ohjaa käyttäjä nopeasti sisältöön
20
![Page 21: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/21.jpg)
Konsepti:
Rautalankojen iterointi
21
![Page 22: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/22.jpg)
Konsepti: Päänavigaatioksi valikoitui megamenu
22
![Page 23: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/23.jpg)
Responsiivinen suunnittelu Toteutus
• Alun perin mobiilinavi omina elementteinään
23
![Page 24: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/24.jpg)
Responsiivinen suunnittelu
Visuaalisuus • Typografia
• Hyvä luettavuus ja latausnopeus
• Moodboard
• Layoutit
24
![Page 25: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/25.jpg)
Responsiivinen suunnittelu Visuaalisuus
25
![Page 26: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/26.jpg)
Responsiivinen suunnittelu Visuaalisuus
26
![Page 27: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/27.jpg)
Responsiivinen suunnittelu Visuaalisuus
27
![Page 28: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/28.jpg)
Responsiivinen suunnittelu Visuaalisuus
28
![Page 29: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/29.jpg)
Responsiivinen suunnittelu Visuaalisuus
29
![Page 30: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/30.jpg)
Responsiivinen suunnittelu Visuaalisuus
• Photoshop hyvin kankea ja hidas työkalu
responsiiviseen suunnitteluun
• Mahdollisimman nopeasti selaimeen
30
![Page 31: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/31.jpg)
Responsiivinen suunnittelu
Prototyyppi • Selaimessa näkee, miten asiat oikeasti toimivat
• Html, css & JavaScript
31
![Page 32: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/32.jpg)
Responsiivinen suunnittelu Prototyyppi
Käytettävyystestaus
32
![Page 33: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/33.jpg)
Responsiivinen suunnittelu
Toteutus • Goforen ja Kelan muodostama kehitystiimi
• Visuaalisen ilmeen suunnittelija mukana
toteutusvaiheessa n. 1 htp / 2 vko
• Beta-versio helmikuussa
• Tuotantoon huhtikuussa
• Ekstranetit kesäkuussa
33
![Page 34: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/34.jpg)
Responsiivinen suunnittelu
Toteutus • Ole valmis kehittämään ”valmiita” asioita
• Ole valmis luopumaan tehdyistä ratkaisuista
• Testaa
34
![Page 35: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/35.jpg)
Responsiivinen suunnittelu Toteutus
35
![Page 36: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/36.jpg)
Responsiivinen suunnittelu Toteutus
36
![Page 37: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/37.jpg)
Responsiivinen suunnittelu Toteutus
37
![Page 38: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/38.jpg)
Kiinnitä huomiota
• Uudistuksen sisältö ja rajaukset
• Miksi mobiiliin?
• Responsiivinen suunnittelu
• Kiinnitä huomiota
38
![Page 39: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/39.jpg)
Kiinnitä huomiota
1. Kosketusnäyttö
• Puhelimen pieni näyttö vaatii riittävän suuren
kosketusalueen linkeille ja painikkeille
• Kaikki näyttökoot tarvitsevat riittävän suuren
kosketusalueen linkeille ja painikkeille
• => suunnittele kaikki siten, että palvelua käytetään
kosketusnäytöllä
39
![Page 40: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/40.jpg)
Kiinnitä huomiota 1. Kosketusnäyttö
40
![Page 41: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/41.jpg)
Kiinnitä huomiota 1. Kosketusnäyttö
41
![Page 42: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/42.jpg)
Kiinnitä huomiota 1. Kosketusnäyttö
42
![Page 43: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/43.jpg)
Kiinnitä huomiota 1. Kosketusnäyttö
43
![Page 44: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/44.jpg)
Kiinnitä huomiota
1. Kosketusnäyttö
2. Breakpointit
• Käyttöliittymäprojektin aikana valitut näyttökoot eivät
toimineet oikealla sisällöllä
• => Breakpointit muuttuivat toteutusprojektin aikana
• Valitse breakpointit sisällön perusteella
44
![Page 45: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/45.jpg)
Kiinnitä huomiota 2. Breakpointit
45
![Page 46: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/46.jpg)
Kiinnitä huomiota 2. Breakpointit
46
![Page 47: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/47.jpg)
Kiinnitä huomiota
1. Kosketusnäyttö
2. Breakpointit
3. Informaatioarkkitehtuuri
• Ei ole olemassa nopeaa alustanvaihtoa
• Panosta sisältösuunnitteluun
47
![Page 48: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/48.jpg)
Kiinnitä huomiota 3. Informaatioarkkitehtuuri
Navigaatiossa 7. tasoa
Tämä siis tuotannosta
Ja on muuten vieläkin
48
![Page 49: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/49.jpg)
Kiinnitä huomiota
1. Kosketusnäyttö
2. Breakpointit
3. Informaatioarkkitehtuuri
4. Testaa oikealla sisällöllä
• Mahdollisimman aikaisessa vaiheessa
• Huomioi kieliversiot
49
![Page 50: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/50.jpg)
Kiinnitä huomiota 4. Testaa oikealla sisällöllä
50
![Page 51: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/51.jpg)
Kiinnitä huomiota 4. Testaa oikealla sisällöllä
51
![Page 52: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/52.jpg)
Kiinnitä huomiota 4. Testaa oikealla sisällöllä
52
![Page 53: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/53.jpg)
Kiinnitä huomiota 4. Testaa oikealla sisällöllä
53
![Page 54: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/54.jpg)
Kiinnitä huomiota 4. Testaa oikealla sisällöllä
54
![Page 55: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/55.jpg)
Kiinnitä huomiota 4. Testaa oikealla sisällöllä
55
![Page 56: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/56.jpg)
Kiinnitä huomiota 4. Testaa oikealla sisällöllä
56
![Page 57: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/57.jpg)
Kiinnitä huomiota 4. Testaa oikealla sisällöllä
57
![Page 58: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/58.jpg)
Kiinnitä huomiota
1. Kosketusnäyttö
2. Breakpointit
3. Informaatioarkkitehtuuri
4. Testaa oikealla sisällöllä
5. Testaa oikeilla laitteilla
• Case: Nokia E7
58
![Page 59: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/59.jpg)
Yhteenveto
• Analysoi kävijätilastot
• Sisältösuunnittelu on tärkeää
• Suunnittele (ja päätä) selaimessa
• ”Design & Decide”
• Testaa oikealla sisällöllä
• Breakpointit sisällön mukaan
• Testaa oikeilla laitteilla
59
![Page 60: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/60.jpg)
Kela.fi-sivuston tyyliopas
• Sisällöntuottajien, suunnittelijoiden ja kehittäjien
avuksi: Kelan verkkosivujen tyyliopas (http://www.kela.fi/web/tyyliopas)
60
![Page 61: Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013](https://reader031.vdocuments.mx/reader031/viewer/2022012405/5599814a1a28ab09778b463e/html5/thumbnails/61.jpg)
Kiitos!
Kiitos mielenkiinnosta!
Twitter: @artopaavola
fi.linkedin.com/in/artopaavola/
61