Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SISÄLLÖNHALLINTA JA RESPONSIIVINEN WEB
DESIGN
SISÄLLÖN- & DOKUMENTTIEN HALLINTA
Jukka-Pekka Kääriäinen
Senior Consultant, ...
Sisällönhallinta ja responsiivinen web design
1. Mitä tarkoittaa responsiivinen verkkosisällön esitystapa?
2. Mitä sisällö...
Termistöä
• Content Management System (CMS)
– Sisällönhallintajärjestelmä
• Web Content Management (WCM, WCMS)
– Web-sisäl...
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äy...
Design
• Photoshop
design
• Kuvat, teksti
Suunnittelu ja
toteutus
• Arkkitehtuuri
• HTML, JS,
CSS
• CMS/WCMS
Sisällönhalli...
3.7”
480x800
Kosketus
3.5”
640x960
Kosketus, puhe
4,65”
720x1280
Kosketus
4,3”
540x960
Kosketus
3”
320x480
Kosketus,
näppä...
... lisää laitteita, lisää huomioitavaa
• Erilaisia päätelaitteita: näytön koko, resoluutio, orientaatio:
– 245 variaatiot...
Esimerkki 1: Erillinen sisältö ja
erilliset käyttöliittymät
– raskasta ylläpitää ja kehittää
Verkkosisällön esittäminen er...
CMS
Matkapuhelimet...
Tabletit
2048 x 1536
1536 x 2048
480
x
800
800 x 480
Design, sisältö
Tekstisisältö
- Otsikko
- Tiivi...
Esimerkki 2: Responsiivinen
esitystapa
- Suositeltava vaihtoehto
Verkkosisällön esittäminen erilaisille päätelaitteille
CMSSisältö
Responsiivinen
esitystapa
Yksi sisältö
Yksi sisältö + yksi esitystapa 
yhdenmukainen sisällön esitystapa
optim...
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 k...
Responsiivinen esitystapa - tiivistelmä
• Ei ole vain yhtä esitystapaa ja designia!
• Responsiivinen käyttöliittymä tunnis...
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 kommunik...
Vaatimusmäärittely
• Selkeät tavoitteet toiminnallisuuksille ja sisällölle ohjaavat
sisällön ja esitystavan suunnittelua
•...
Käyttöliittymän ja sisällön suunnittelu
• Responsiivisessa käyttöliittymässä sisällön esitystapa voi vaihdella
erilaisissa...
Esitystavan ja CMS-järjestelmän toteutus
• HTML-prototyypin toteutus hyödynnettävissä lopullisessa
toteutuksessa
• Toteuta...
Operatiivinen sisällönhallinta
• Optimoidun CMS-järjestelmän avulla sisällönhallinta- ja
ylläpitotyö ei muutu suuresti
• J...
3. Käytännön haasteita ja ratkaisuja...
Käytännön haasteita ja ratkaisuja...
Haaste Ratkaisu
Siirtyminen työpöytäselaimelle optimoidusta
suunnittelusta ja sisällö...
Käytännön haasteita ja ratkaisuja...
Haaste Ratkaisu
Sisällön suunnittelu • Sisällön suunnittelussa ei suunnitella
käyttöl...
4. Miltä tulevaisuus näyttää?
Miltä tulevaisuus näyttää?
• Responsiivinen esitystapa on yleistynyt nopeasti
• Mobiililaitteiden selaimet kehittyneet ja ...
Esityksen tekijä
• Jukka-Pekka Kääriäinen, senior konsultti, Talent Base
• Internet- ja webkehityksessä vuodesta 1997
• Oh...
Lisätietoja
Jukka-Pekka Kääriäinen, Talent Base Oy
+ 358 40 511 6827
jp@talentbase.fi
www.talentbase.fi
Upcoming SlideShare
Loading in …5
×

Talent Base: Sisällönhallinta ja responsiivinen web design

1,475 views

Published on

Mitä tarkoittaa responsiviinen verkkosisällön esitystapa? Mitä sisällönhallinnassa tulee ottaa huomioon? Käytännön haasteita ja ratkaisuja.

  • Be the first to comment

  • Be the first to like this

Talent Base: Sisällönhallinta ja responsiivinen web design

  1. 1. SISÄLLÖNHALLINTA JA RESPONSIIVINEN WEB DESIGN SISÄLLÖN- & DOKUMENTTIEN HALLINTA Jukka-Pekka Kääriäinen Senior Consultant, Talent Base
  2. 2. 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ää?
  3. 3. 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
  4. 4. 1. Mitä tarkoittaa responsiivinen verkkosisällön esitystapa?
  5. 5. 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
  6. 6. 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ä Otsikko Tiivistelmä Navi Otsikko Tiivistelmä Työpöytäselaimet 1920 x 1080 CMS
  7. 7. 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ö Työpöytäselaimet , lisää laitteita...
  8. 8. ... 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ä
  9. 9. Esimerkki 1: Erillinen sisältö ja erilliset käyttöliittymät – raskasta ylläpitää ja kehittää Verkkosisällön esittäminen erilaisille päätelaitteille
  10. 10. CMS Matkapuhelimet... Tabletit 2048 x 1536 1536 x 2048 480 x 800 800 x 480 Design, sisältö Tekstisisältö - Otsikko - Tiivistelmä - Leipäteksti Käyttöliittymä 1 Otsikko Tiivistelmä Leipäteksti Navi Otsikko Leipäteksti Työpöytäselaimet 1920 x 1080 CMS Design, sisältö Tekstisisältö - Otsikko - Tiivistelmä - Leipäteksti Käyttöliittymä 2 Otsikko Tiivistelmä Navi Otsikko Leipäteksti CMS Design, sisältö Tekstisisältö - Otsikko - Tiivistelmä - Leipäteksti Käyttöliittymä 3 Otsikko Leipäteksti Otsikko Leipäteksti Navi
  11. 11. Esimerkki 2: Responsiivinen esitystapa - Suositeltava vaihtoehto Verkkosisällön esittäminen erilaisille päätelaitteille
  12. 12. CMSSisältö Responsiivinen esitystapa Yksi 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 480 x 800 800 x 480 Työpöytäselaimet 1920 x 1080 Tekstisisältö - Otsikko - Tiivistelmä - Leipäteksti Responsiivinen käyttöliittymä Otsikko Tiivistelmä Leipäteksti Navi Otsikko Leipäteks ti 1536 x 2048 Responsiivinen esitystapa
  13. 13. Käytännön esimerkkejä Responsiivinen esitystapa
  14. 14. The Boston Globe : www.bostonglobe.com iPhone 4 640x960 LG U970 240x320 Windows 7 Chrome 1400x900px
  15. 15. Esimerkki Windows 7 Chrome 1400x900px 900px 768px 480px • Tekstin ja kuvien asettelu • Kirjasinkoko • Navigaatio • Kuvan koko ja näkyvyys
  16. 16. 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!
  17. 17. 2. Mitä sisällönhallinnassa tulee ottaa huomioon? Responsiivinen esitystapa sisällön esittämiseen päätelaitteissa
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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!
  22. 22. 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)
  23. 23. 3. Käytännön haasteita ja ratkaisuja...
  24. 24. Käytännön haasteita ja ratkaisuja... Haaste Ratkaisu Siirtyminen 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!
  25. 25. Käytännön haasteita ja ratkaisuja... Haaste Ratkaisu Sisä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!
  26. 26. 4. Miltä tulevaisuus näyttää?
  27. 27. Miltä tulevaisuus näyttää? • Responsiivinen esitystapa on yleistynyt nopeasti • Mobiililaitteiden selaimet kehittyneet ja esim. älypuhelinten Internet- käyttö on noin moninkertaistunut 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
  28. 28. Esityksen tekijä • Jukka-Pekka Kääriäinen, senior 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
  29. 29. Lisätietoja Jukka-Pekka Kääriäinen, Talent Base Oy + 358 40 511 6827 jp@talentbase.fi www.talentbase.fi

×