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. 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
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. 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
14. The Boston Globe : www.bostonglobe.com
iPhone 4 640x960
LG U970 240x320
Windows 7 Chrome 1400x900px
15. Esimerkki
Windows 7 Chrome 1400x900px
900px 768px
480px
• Tekstin ja kuvien asettelu
• Kirjasinkoko
• Navigaatio
• Kuvan koko ja näkyvyys
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. 2. Mitä sisällönhallinnassa tulee ottaa
huomioon?
Responsiivinen esitystapa sisällön esittämiseen
päätelaitteissa
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. 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. 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. 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. 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)
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. 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!
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. 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
CMS:
Filenet, IBM DB2 Content Manager, Documentum, Coremedia...
WCM:
Sharepoint, Wordpress, Joomla, Drupal, Coremedia, IBM WCM, Open Text, SDL Tridion, Adobe, Opensource
Selaimet: Firefox, Internet Explorer, Chrome, Opera, Netscape
Käyttöjärjestelmät: Windows, Linux, Mac OS-X
Mobiilialustat: Windows Phone, iOS, Android, Symbian, Meego, Blackberry, jne. jne.
Perinteinen malli internet-sivun ja sisällön toteuttamiseen.
Suunnittelu ja toteutus usein yhdelle kiinteällä näyttökoolle. Erilaisten työpöytäselainten tukeminen voi olla haastavaa.
Photoshop design, yksi layout, sisältö suunniteltu sopimaan ruudulle
http://veikonkala.org/responsive/index.html
Visuaalinen suunnittelu, UI design
Sisällön suunnittelu ruudulle
Photoshop
Toteutus voidaan saadaan vastaamaan staattista Photoshop-suunnitelmaa.
Sisällönhallinta ylläpitää sisällön järjestelmässä
Lisää tuettavia laitteita tuo myös lisää huomioitavaa suunnitteluun, toteutukseen ja sisältöön
Erilaisia variaatioita / yhdistelmiä sisältöä esittävistä laitteista voi olla valtavasti
Kaikkien variaatioiden tukeminen on mahdotonta ja erilaisia toteutustapoja tulee pohtia tarkoin.
Mitä ja ketä halutaan saavuttaa ja missä halutaan säästää – suunnittelussa, sisällöntuotannossa, toteutuksessa?
Vaihtoehto jonka valitsemista kannattaa harkita huolella.
Vain hyvin rajatulle määrälle erilaisia päätelaitteita
Raskasta ja kallis suunnitella, ylläpitää ja toteuttaa. Mitä enemmän laitteita sitä enemmän käyttöliittymätoteutuksia
Päädytään helposti kaaokseen kun sisällön esittäminen erilaisissa päätelaitteissa toimii eri tavalla
Vrt. erilliset mobillisovellukset eri alustoille!
Suositeltava vaihtoehto.
Yksi sisältö suunnitellaan skaalautuvaksi erilaisille näytöille
Hyödyntämällä Progressive Enhancement –lähestymistapaa suunnittelussa ja toteutuksessa saadaan heti alusta tuki vanhoille laitteille.
Samaa käyttöliittymää rikastetaan moderneille internetselaimille niin että käyttökokemus on rikkaampi ja näyttävämpi selaimen kyvykkyyksien ja ominaisuuksien mukaisesti.
Säästetään design-, suunnittelu- ja toteutusvaiheissa
Esitystapa voi toimia eri tavalla erilaisissa päätelaitteissa, mutta sisältö on aina esitettävissä
Ensimmäisiä toteutuksia, tunnettu esimerkki
Pitkälle viety toteutus skaalautuu laajasti erilaille päätelaitteille
http://veikonkala.org/responsive/index.html
http://bostonglobe.com
http://yle.fi/uutiset/
Oma esimerkki.
Staattinen html sivu kolmella breakpointilla, CSS3, HTML5
480px (esim. matkapuhelimet) + 768px (esim. tabletit) + 900px (työpöytäselaimet)
http://veikonkala.org/responsive/index.html
Sisällön esitystapa vaihtelee päätelaitteittain (resoluutio, sisällön sijoittelu, fontit, navigointi, kuvamateriaali)
Käyttöliittymän suunnittelu on huomattavasti joustavampaa verrattuna perinteiseen Photoshop malliin. Tarvitaan internetselaimia ja HTML koodia!
Työkaluja ja metodeja löytyy suunnittelun avuksi mutta kokemuksen perusteella Photoshop-tasolta on hyvä siirtyä mahdollisimman HTML-prototyyppiin oikealla sisällöllä.
Yksi design kattaa kaikki näytöt -> Tarvitaan osaava suunnittelija ja prototyypin kehittäjä.
Sama sisältö esitetään kaikille näytöille -> Hyvä CMS suunnittelu ja toteutus takaa ettei sisällöntuotannon työkuorma kasva suuresti.
Suunnitellaan ja kehitetään yhtä käyttöliittymää -> Progressive Enhancement auttaa rakentamaan ensin perustoiminnot ja moderneja selaimia varten on helppo kehittää rikkaampi käyttökokemus
Mikäli responsiivinen esitystapa valitaan etenemisvaihtoehdoksi, niin mitä asioita sisällönhallinnan tulisi huomioida?
Ennen kuin lähdetään toteuttamaan ja luomaan sisältöä responsiiviseen käyttöliittymään kannattaa huomioida seuraavia asioita:
Toimintamallin kehittäminen joustavaksi ja ketteräksi on oleellisen tärkeää koska esim. käyttöliittymän tai sisällön suunnittelua on lähes mahdotonta tehdä ns. Staattisesti!
Responsiivisen käyttöliittymän ja sisällön suunnitteleminen on mahdotonta ainoastaan Photoshopissa ja paperilla. Vähemmän Photoshopia – enemmän protoilua oikealla sisällöllä! Useita näkymiä erilaisille näytöille ja laitteille, interaktiot, breakpointit
Yhteistyö ja kommunikointi liiketoiminnan, visuaalisen- ja sisällönsuunnittelun sekä teknisen toteutustiimin kanssa onnistuu parhaiten juuri prototyypin avulla. Lisäksi eri osapuolet voivat hyödyntää prototyyppiä monella tapaa:
Uusien visuaalisten elementtien suunnittelu, uusien konseptien kokeileminen, uuden sisällön kokeileminen ja suunnittelu, kommunikointi ja ohjeistus käyttöliittymän toiminnasta, käyttöliittymäkoodi varsinaiseen tekniseen toteutukseen, toiminnallisuuksien ja sisällön testaaminen erilaisilla päätelaitteilla, sisällönhallinnan ohjeistaminen
Mitä sisällönhallinnassa tulisi huomioida?
Ennen varsinaisen toteutuksen ja sisällön suunnittelua tarvitaan linjauksia ja vaatimuksia.
Millainen yleisö halutaan tavoittaa?
Millaista tarjottava sisältö pääasiallisesti on?
Staattista sisältöä: kuvia & tekstiä vai rikasta sisältöä: video, Flash, toiminnallisia komponentteja
Miten erilaisia päätelaiteryhmiä ja selainten ominaisuuksia priorisoidaan. Esim. Onko tärkeintä että sisältö toimii hyvin vanhoissa laitteissa ja pienillä näytöillä vai halutaanko aloittaa enemmän uusiin laitteisiin ja ominaisuuksiin? PE!
Esim. Erilaiset laitteet tukevat erilaisia mediaformaatteja. iOS -> ei tue Flash
Lokalisointi, RTL, LTR
Mitä sisällönhallinnassa tulisi huomioida?
Käyttöliittymä tulee suunnitella oikealle sisällölle. Ensin sisältö, sitten design ja prototyyppi!
Mikäli olemassa olevaa CMS-järjestelmää aletaan jatkokehittämään responsiivisen esitystavan käyttöön, hyödynnä olemassa olevaa sisältömallia prototyypin suunnittelun perustana.
Huomioi olemassaolevan sisällön uudelleenkäyttö uudessa käyttöliittymässä!
Suunnittele optimoitu sisältö erilaisille näyttölaitteille!
Nopeuttaa sivun lataamista ja optimoi ladattavan sivun kokoa
Vaatii esimerkiksi eri resoluutiolle optimoidut kuvatiedostot -> aikaa vaativaa suunnittelua
Itsenäisten esityskomponenttien toiminnallisuudet ja käyttäytyminen sisällön esittämisessä voidaan suunnitella, toteuttaa ja testata pienemmissä osissa. -> helpompaa
Mitä sisällönhallinnassa tulee huomioida – CMS järjestelmän toteutus
Media ja binääritiedostot!
Kuva- ja videosisällön skaalaaminen ja optimointiratkaisut
Työnkulut, sisällön esikatselu
Oikeat laitteet ja esikatselu!
Sisällön muotoilujen rajoittaminen editorissa auttaa responsiivisen esitystavan toteutuksessa.
Esim. sisällön sijoittelu (kuva vasemmalla, oikealla, päällä, alla) menettää merkityksensä responsiivisessa esitystavassa. Erilaisissa näytöissä sisällön sijoittelu elää!
Käyttöliittymä määrittelee tekstin ja sisällön sijoittelun!
Vanhemmille selaimille voidaan toteuttaa esim. erillinen käyttöliittymä ja käyttäjä voidaan ohjata käyttöliittymään esim. päätelaitetunnistuksen avulla!
Mitä sisällönhallinnassa tulee huomioida – operatiivinen työ!
Optimoitu CMS-järjestelmä tukee sisällönhallintaa responsiivisessa esitystavassakin eikä merkittäviä muutoksia tarvita verrattuna esim. vain työpöytä selaimille tarkoitettuun julkaisuun.
Sisältömalli vaatii laajennuksia esim. kuva tiedostojen osalta. Tarvitaan useampia kuvakokoja erilaisille näytöille (optimointi)
Testaamisessa ja esikatselussa kannattaa ehdottomasti käyttää myös oikeita päätelaitteita ja datayhteyksiä
Ennalta määritellyt kuvakoot ja kuvasuhteet erilaisiin käyttötarpeisiin mahdollistaa kuvien automaattisen käsittelyn ja optimoinnin!
Tekstimuotoilut kannattaa rajata minimiin (vasen, oikea, jne.) koska esim. sijoittelut menettävät merkityksensä responsiivisessa esitystavassa
Muutos toimintatavoissa:
Kiinteä layout, yksi näkymä, sisällölle varattu tila tiedossa, selaimen fold -> Joustavampi toimintamalli, skaalautuva esitystapa, sisällölle varattu tila ja sisällön sijoittelu vaihtelee
Sisällönhallinta on aikaisemmin voinut vaikuttaa paljon esim. sisällön sijoitteluun ja muotoiluun -> käyttöliittymälogiikka vastaa sijoittelusta responsiivisessa esitystavassa!
Kommunikaatio:
Kaikkien osapuolten tulisi ymmärtää toimintatapojen muutos ja responsiivinen esitystapa.
Avainsanoja: joustavuus, ketteryys ja HTML prototyyppi, tiimit läsnä paikan päällä!
Käyttöliittymän ja toiminnallisuuksien suunnittelu:
Prototyyppi, ei pelkkää Photoshop-suunnittelua
Online komponenttikirjasto sisällön esittämiseen (sisällön suunnittelu, uusien näkymien suunnittelu)
Kokemus yhdessä: design + ratkaisusuunnittelu!
Sisällön suunnitelu:
Käyttöliittymä ja sisältö erotetaan selkeästi.
Sisällön suunnittelussa hyödynnetään prototyyppiä. Testataan uusia konsepteja
Kuvakoot, media standardoidaan, jotta sisällön optimointi saadaan automatisoitua
Tuettavien päätelaitteiden ja selainten valitseminen:
Ei keskitytä yksittäisiin päätelaitteisiin vaan ominaisuuksiin ja valitaan sen mukaan kattava valikoima laitteita testaamiseen
Voidaan päätyä helposti laitekohtaiseen optimointiin!
Kuvat, videot, interaktiivinen media:
PE. Suunnitellaan sisältö niin että sisältö tarjoaa informaation ilman rikasta mediaa (animaatiot, video), tarjotaan rikkaampaa sisältöä niitä tukeville selaimille
Standardoidaan ja automatisoidaan kuvien ja mediatiedostojen hallinta.