SISÄLLÖNHALLINTA JA RESPONSIIVINEN WEB DESIGN

30.08.2012

Jukka-Pekka Kääriäinen

Senior Consultant, Talent Base

Esittely

• Jukka-Pekka Kääriäinen, vanhempi konsultti, Talent Base• Internet- ja webkehityksessä vuodesta 1997• Ohjelmointia, suunnittelua, IT arkkitehtuuri- ja

vaatimusmäärittelytyötä, ratkaisusuunnittelua• Suuria tietojärjestelmä- ja palvelukehityshankkeita, internet,

intranet, extranet, portaalit• Suuntautuminen vahvasti dokumenttien- ja sisällönhallinnan

eri osa-alueilla, web-sisällönhallintaratkaisut, sähköinen asiointi

Sisällönhallinta ja responsiivinen web design

1. Mitä tarkoittaa responsiivinen verkkosisällön esitystapa?

2. Mitä sisällönhallinnassa tulee ottaa huomioon?

3. Käytännön haasteita ja ratkaisuja

4. Miltä tulevaisuus näyttää?

Termistöä

• Content Management System (CMS)– Sisällönhallintajärjestelmä

• Web Content Management (WCM, WCMS)– Web-sisällönhallinta

• Responsive Web Design (RWD) – Tapa suunnitella ja esittää verkkosisältöä päätelaitteen ominaisuuksien

mukaisesti parhaalla mahdollisella tavalla

• Progressive Enhancement (PE)– Suunnitellaan ja toteutetaan ensin vankka perusta perusselaimille –

käyttökokemusta parannetaan ja rikastetaan moderneille laitteille• Vastakohta: Graceful Degradation (GD), ensin rikas toteutus moderneille

selaimille, yksinkertaistetaan tukemaan vanhempia

1. Mitä tarkoittaa responsiivinen verkkosisällön esitystapa?

Esimerkki: Uutta sisältöä internetsivulle

Työpöytäselaimet– Design-ohjeistus, graafinen

ohjeistus, sisältöstrategia– Käyttöliittymän leveys max.

930 px (1024 ruudulle ->)– Kuvan ja tekstin asemointi

määritetty kiinteäksi– Yksi kuvakoko

Design

• Photoshop design

• Kuvat, teksti

Suunnittelu ja toteutus

• Arkkitehtuuri• HTML, JS, CSS• CMS/WCMS

Sisällönhallinta

Sisällön hallinta CMS/WCM-järjestelmässä

Web

Loppukäyttäjät

Perinteinen malli: Sisältöä työpöytäselaimeen

Design, sisältö

Tekstisisältö- Otsikko- Tiivistelmä- Leipäteksti

Käyttöliittymä

OtsikkoTiivistelmä

NaviOtsikkoTiivistelmä

Työpöytäselaimet

1920 x 1080

CMS

3.7”480x800Kosketus

3.5”640x960

Kosketus, puhe

4,65”720x1280Kosketus

4,3”540x960Kosketus

3”320x480

Kosketus, näppäimet

”Tabletit”9.7”

1024x7682048 x 1536

Kosketus

”Työpöytä”24”

1920x1080Hiiri, näppäimistö

Työpöytäselaimet , lisää laitteita...

... lisää laitteita, lisää huomioitavaa

• Erilaisia päätelaitteita: näytön koko, resoluutio, orientaatio: – 245 variaatiota matkapuhelinten & tablettien näyttöresoluutioille (otos:

4685 laitetta, http://cartoonized.net/cellphone-screen-resolution.php)

• Käyttöjärjestelmiä: – Windows, Linux, Mac OS X, iOS, Android, Symbian, WP7...

• Internet selaimet ja ominaisuudet: – Chrome, Firefox, Internet Explorer, Safari, Opera, HTML5, CSS3,

Javascript, Flash

• Laitteen käyttöliittymän ohjaustavat:– Kosketus, näppäimet, ääni, liike

• Erilaisia yhdistelmiä valtava määrä

Esimerkki 1: Erillinen sisältö ja erilliset käyttöliittymät– raskasta ylläpitää ja kehittää

Verkkosisällön esittäminen erilaisille päätelaitteille

CMS

Matkapuhelimet...

Tabletit

2048 x 1536

1536 x 2048

480x

800

800 x 480

Design, sisältö

Tekstisisältö- Otsikko- Tiivistelmä- Leipäteksti

Käyttöliittymä 1

OtsikkoTiivistelmäLeipäteksti

NaviOtsikkoLeipäteksti

Työpöytäselaimet

1920 x 1080

CMS

Design, sisältö

Tekstisisältö- Otsikko- Tiivistelmä- Leipäteksti

Käyttöliittymä 2

OtsikkoTiivistelmä

Navi

OtsikkoLeipäteksti

CMS

Design, sisältö

Tekstisisältö- Otsikko- Tiivistelmä- Leipäteksti

Käyttöliittymä 3

OtsikkoLeipäteksti

OtsikkoLeipäteksti

Navi

Esimerkki 2: Responsiivinen esitystapa - Suositeltava vaihtoehto

Verkkosisällön esittäminen erilaisille päätelaitteille

CMSSisältö

Responsiivinen esitystapaYksi sisältö

Yksi sisältö + yksi esitystapa yhdenmukainen sisällön esitystapa optimoituna erilaisille päätelaitteille työpöytäselaimista matkapuhelimiin! Matkapuhelimet...

Tabletit

2048 x 1536

480x

800

800 x 480

Työpöytäselaimet

1920 x 1080

Tekstisisältö- Otsikko- Tiivistelmä- Leipäteksti

Responsiivinen käyttöliittymä

OtsikkoTiivistelmäLeipäteksti

NaviOtsikkoLeipäteksti

1536 x 2048

Responsiivinen esitystapa

Käytännön esimerkkejäResponsiivinen esitystapa

The Boston Globe : www.bostonglobe.com

iPhone 4 640x960

LG U970 240x320

Windows 7 Chrome 1400x900px

Esimerkki

Windows 7 Chrome 1400x900px

900px 768px

480px

• Tekstin ja kuvien asettelu• Kirjasinkoko• Navigaatio• Kuvan koko ja näkyvyys

Responsiivinen esitystapa - tiivistelmä

• Ei ole vain yhtä esitystapaa ja designia!• Responsiivinen käyttöliittymä tunnistaa päätelaitteen ominaisuudet sekä

selaimen kyvykkyydet ja esittää sisällön parhaalla mahdollisella tavalla:– Näytön leveys, orientaatio– Selaimen kyvykkyydet– Ohjaustapa: hiiri, näppäimistö, kosketusnäyttö

• Sisällön esitystapa voi vaihdella päätelaitteissa ja selaimissa:– Kuvien koko, sijoittelu, näkyvyys– Tekstisisällön ja kirjasimen koko, sijoittelu, näkyvyys– Käyttöliittymäkomponenttien sijoittelu, näkyvyys

• Ei tarvitse kehittää ja ylläpitää useita erillisiä sisältöjä ja käyttöliittymiä erilaisia päätelaiteryhmiä varten!

2. Mitä sisällönhallinnassa tulee ottaa huomioon?

Responsiivinen esitystapa sisällön esittämiseen päätelaitteissa

HTML proto-tyyppi

Design

Loppu-käyttäjät

Tekninen suunnittelu

ja kehitystyö

Sisällön-hallinta

Toimintamalli ja kommunikaatio

Sisältö ja design

Loppukäyttäjät

Suunnittelu ja toteutus

Sisällön ylläpitäjät

Vähemmän Photoshopia – enemmän protoilua

aidolla sisällöllä!

Prototyypin käyttöliittymäkoodin hyödyntäminen, käyttöliittymän määrittelyt, UX ohjeistuksena,

sisältömalli

Tiivis yhteistyö: liiketoiminta, design, sisällön suunnittelu,

tekninen suunnittelu, toteutus, sisällönhallinta!

Uusien konseptien testaaminen prototyypin

avulla. Erilaiset päätelaitteet,

loppukäyttäjillä

Sisällön testaaminen ja esikatselu. Laitteiden

erilaisuudet!

Prototyyppi keskeisessä roolissa suunnittelussa ja

kommunikoinnissa

Vaatimusmäärittely

• Selkeät tavoitteet toiminnallisuuksille ja sisällölle ohjaavat sisällön ja esitystavan suunnittelua

• Sisältöstrategia: Mikä on tärkeää, ketä halutaan tavoittaa?– Interaktiivinen sisältö, videot ja kuvamateriaali. Päätelaitteiden

rajoitteet & kyvykkyydet!– Sisällön priorisointi sivulla ja päätelaitteissa, voidaanko jotain jättää

näyttämättä?– Monikielisyys, lokalisointi eri maihin

Käyttöliittymän ja sisällön suunnittelu

• Responsiivisessa käyttöliittymässä sisällön esitystapa voi vaihdella erilaisissa päätelaitteissa

• Responsiivista esitystapaa ei suunnitella ja toteuteta yksittäisille päätelaitteille vaan esitystapa reagoi käytettävän selaimen ominaisuuksien mukaisesti

• Käyttöliittymän suunnittelussa lähtökohtana tulisi olla oikea sisältö!• HTML-prototyyppi on korvaamaton työkalu suunnittelussa• Suunnittele uudelleenkäytettäviä käyttöliittymäkomponentteja ja

rakennuspalikoita sisällön esittämiseen - ei yksittäisiä sivuja!• Suunnittele ensin vanhoille selaimille, rikasta moderneille selaimille (PE)• Huomioi sisältömalli (content model) käyttöliittymän ja sisällön

suunnittelussa

Esitystavan ja CMS-järjestelmän toteutus

• HTML-prototyypin toteutus hyödynnettävissä lopullisessa toteutuksessa

• Toteuta ensin perusta sisällön esittämiseen peruslaitteissa, rikasta ja paranna käyttökokemusta uudemmille laitteille (PE)

• Huomioi media- ja binääritiedostojen hallinta! Optimointi!• Optimoi CMS-järjestelmä sisällönhallinnan helpottamiseksi• Käytä oikeita päätelaitteita ja datayhteyksiä!• Sisällönhallintajärjestelmässä hallitaan sisältöä, ei sisällön esitystapaa!• Responsiivisen esitystavan toteutuksissa hyödynnetään usein

uusimpia standardeja kuten HTML5, CSS3 ja javascriptiä. Huomioi myös vanhemmat mobiililaitteet ja selaimet!

Operatiivinen sisällönhallinta

• Optimoidun CMS-järjestelmän avulla sisällönhallinta- ja ylläpitotyö ei muutu suuresti

• Julkaistava sisältö ei näy ainoastaan yhdellä esitystavalla vaan erilaisia päätelaitteita ja esitystapoja on paljon

• Sisällön testaaminen ja esikatselu• Responsiivinen sivun esitystapa voi ohjata esim. tekstin ja

käyttöliittymäelementtien sijoittelua, fonttikokoja ja näkyvyyttä• Tekstisisällön muotoilut kannattaa pitää minimissä• Kuvamateriaalin standardoiminen mahdollistaa

automatisoinnin (koko, kuvasuhde)

3. Käytännön haasteita ja ratkaisuja...

Käytännön haasteita ja ratkaisuja...Haaste RatkaisuSiirtyminen työpöytäselaimelle optimoidusta suunnittelusta ja sisällöntuotannosta responsiiviseen esitystapaan

• Toimintamallin kehittäminen, protoilu osaksi suunnittelua ja kommunikointia.

• Tiedottaminen ja koulutus!Kommunikaatio eri osapuolten kanssa. Esim. liiketoiminnan edustajat, ratkaisusuunnittelu, sisältö, käyttöliittymä, tekninen suunnittelu, toteutus jne.

• Prototyypin hyödyntäminen, koulutus ja tiedottaminen, odotusten hallinta

• Edes hyvä dokumentaatio ei vastaa ”face to face” -työskentelyä!

Käyttöliittymän design ja toiminnallisuuksien suunnittelu

• Prototyyppi! Esim. on-line -käyttöliittymäkomponenttikirjasto, jossa esimerkkejä oikeasta sisällöstä

• Suunnittelu ja toteutus selainten kyvykkyyksien mukaan, ei erilaisten päätelaitteiden

• Suunnittelijalta tarvitaan todellista kokemusta responsiivisesta lähestymistavasta!

Käytännön haasteita ja ratkaisuja...Haaste RatkaisuSisällön suunnittelu • Sisällön suunnittelussa ei suunnitella

käyttöliittymää vaan sisältöä• Sisällön testaaminen hyvissä ajoin aidosti

internetselaimessa ja prototyypissäTuettavien päätelaitteiden ja selainten valitseminen

• Valitaan testaamiseen monipuolinen otos erilaisia alustoja ja päätelaitteita. Keskitytään selainten ominaisuuksiin eikä yksittäisiin laitteisiin!

• Linjaus tuettavista laitteista: Vanhat laitteet, älypuhelimet, tabletit, työpöytäselaimet...

Kuvien, videoiden ja interaktiivisen median tarjoaminen eri päätelaitteille

• Progressive Enhancement -lähestymistapa helpottaa suunnittelua. Perustoiminnot ensin!

• Kuvakokojen ja videon automaattinen optimointi. Adaptiivinen mediasisällön lataaminen eri näyttöresoluutiolle!

4. Miltä tulevaisuus näyttää?

Miltä tulevaisuus näyttää? - Yhteenveto

• Responsiivinen esitystapa on yleistymässä nopeasti• Mobiililaitteiden selaimet kehittyneet ja esim. älypuhelinten Internet-käyttö on

noin kaksinkertaistunut viime vuosina• Erilaisten mobiililaitteiden, sähköisten lukulaitteiden ja

kodinelektroniikkalaitteiden internetkäyttö yleistyy samalla kun perinteisten työpöytäselainten osuus pienenee

• Nopeammat datayhteydet, jatkuva tavoitettavuus• Verkkosisällönsuunnittelun, sisällöntuotannon ja -hallinnan täytyy kehittyä

mukana vastaamaan tarpeeseen• Sisällönhallinnassa ja –suunnittelussa tulisi panostaa sisällön

käytettävyyteen eri medioissa• Internetselaimet, standardit, HTML5 (draft), CSS3, yhdenmukaistumassa ja

toiminnallisuudet monipuolistumassa

Talent Base Oy

• Konsultointi, ratkaisusuunnittelu, laadunvarmistus– Sisällönhallinta (ECM, CMS, WCM & responsiivinen esitystapa)– Sähköinen asiointi ja kaupankäynti– Avaintiedonhallinta (MDM)– Asiakastiedonhallinta (CRM)

• Lisätietoja: – www.talentbase.fi