talent base - sisällönhallinta ja responsiivinen esitystapa
DESCRIPTION
Mitä tarkoittaa responsiviinen verkkosisällön esitystapa? Mitä sisällönhallinnassa tulee ottaa huomioon? Käytännön haasteita ja ratkaisuja Miltä tulevaisuus näyttää?TRANSCRIPT
SISÄLLÖNHALLINTA JA RESPONSIIVINEN ESITYSTAPA Talent Base aamiaisseminaari 05.12.2012
05.12.2012 Jukka-Pekka Kääriäinen Senior Consultant, Talent Base
Esittely
• Jukka-Pekka Kääriäinen, vanhempi konsultti, Talent Base • Ohjelmointi, suunnittelu, IT arkkitehtuuri- ja
vaatimusmäärittelytyö, ratkaisusuunnittelu vuodesta 1997 • Tietojärjestelmä- ja palvelukehityshankkeita, internet, intranet,
extranet, portaalit • Dokumenttien- ja sisällönhallinnan eri osa-alueet, web-
sisällönhallintaratkaisut, sähköinen asiointi
Sisällönhallinta ja responsiivinen esitystapa
1. Mitä responsiivinen verkkosisällön esitystapa tarkoittaa? 2. Mitä sisällönhallinnassa tulee ottaa huomioon? 3. Käytännön haasteita ja ratkaisuja 4. Miltä tulevaisuus näyttää?
1. Mitä tarkoittaa responsiivinen verkkosisällön esitystapa?
Responsive Web Design
Progressive Enhancement Mobile First
CSS3 HTML5
Media Query
Breakpoint Fluid Grid
Fluid Images
Perinteinen tapa • Taustalla liiketoiminta,
sisältöstrategia, brand, design
• Kannettavat- ja työpöytätietokoneet / internetselaimet
• ”Fixed” design, käyttöliittymän elementtien asemointi voidaan suunnitella kiinteäksi
Design
• Photoshop design
• Kuva, teksK
SuunniLelu ja toteutus
• Arkkitehtuuri • HTML, JS, CSS • CMS/WCMS toteutus
OperaKivinen sisällönhallinta
Sisällön ylläpito CMS/WCM-‐järjestelmässä
Web
LoppukäyLäjät
Perinteinen tapa: Suunnittelusta loppukäyttäjille
CMS
3.7” 480x800 Kosketus
3.5” 640x960
Kosketus, puhe
4,65” 720x1280 Kosketus
4,3” 540x960 Kosketus
3” 320x480 Kosketus, näppäimet
”Table+t” 9.7”
1024x768 2048 x 1536 Kosketus
”Työpöytä” 24”
1920x1080 Hiiri, näppäimistö
Työpöytäselaimet - mobiililaitteet
... lisää laitteita, lisää huomioitavaa!
• Suurille monitoreille optimoitu esitystapa ei aina toimi mobiililaitteissa!
• Mobiililaitteen fyysinen koko ja näytön tarkkuus • Käyttöjärjestelmiä ja versioita:
– iOS, Android, Symbian, Windows Phone, Meego, Blackberry... • Internetselaimia ja versioita, ominaisuuksia:
– Chrome, Firefox, Internet Explorer, Safari, Opera Mobile, S40, Nokia Browser
– HTML 4.01, XHTML MP, HTML5, CSS, CSS3, Javascript, Flash • Käyttöliittymän ohjaustapoja:
– Hiiri, näppäimistö, näppäimet, kynä, kosketus, ääni, liike, eleet…
= erilaisia yhdistelmiä valtavasti
Esimerkki 1: Erilliset toteutukset Sisältö ja käyttöliittymät erillisinä – raskasta ylläpitää ja kehittää
Verkkosisällön esittäminen erilaisille päätelaitteille
CMS
m.sivusto.mobi
www.sivusto.fi
2048 x 1536
1536 x 2048
480 x
800
800 x 480
Toteutus 1
Toteutus 2
Toteutus 3
www.sivusto.fi
1920 x 1080
Design & sisältö
CMS Design & sisältö
CMS Design & sisältö
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.
• 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 voi olla haastavaa
• Sisällön näkyvyys hakukoneissa heikkenee! • Sosiaalinen media ja sisällön jakaminen eri kanavissa ei toimi
Esimerkki 2: Responsiivinen esitystapa Yksi sisältö, yksi esitystapa - suositeltava vaihtoehto
Verkkosisällön esittäminen erilaisille päätelaitteille
Responsiivinen toteutus CMS
Responsiivinen käyLöliiLymä
Yksi sisältö + yksi esitystapa Responsiivinen käyLöliiLymä skaalaa ja esiLää sisällön erilaisilla näyLöresoluuKoilla ja internetselaimilla
Responsive Web Design
Teks+sisältö -‐ Otsikko -‐ Tiivistelmä -‐ Leipäteks0
Responsiivinen esitystapa Desig, sisältö
CSS3
HTML5
Media Query
Breakpoint viewport
Fluid grid
Responsiivinen esitystapa - esimerkki
hLp://veikonkala.org/responsive/
Selainikkunan koko
240
320
768
www.bostonglobe.com
www.nokia.com/global/
hLp://www.microsoe.com
hLp://yle.fi/uuKset/
Responsiivinen esitystapa - tiivistelmä
• Yksi sisältö, yksi käyttöliittymä – yhtenäinen esitystapa eri laitteissa! • Responsiivisessa web-käyttöliittymässä sisällön esitystapa optimoidaan
päätelaitteen ominaisuuksien ja selaimen kyvykkyyksien mukaan: – Näyttölaitteen koko, laitteen orientaatio – Selaimen kyvykkyydet (javascript-tuki, css, flash…) – Ohjaustapa: hiiri, näppäimistö, kosketus
• Sisällön esitystapa ja asemointi vaihtelee erilaisissa näyttöresoluutioissa ja internetselaimissa –sama käyttäjäkokemus: – Käyttöliittymäkomponenttien koko, sijoittelu, näkyvyys – Kuvien koko, sijoittelu, näkyvyys – Kirjasimen koko, skaalaus, sijoittelu, näkyvyys – Breakpointit
• Näkyvyys hakukoneissa paranee, sama sisältö kaikissa päätelaitteista • Sosiaalinen media, sisällön jakaminen helppoa
2. Mitä sisällönhallinnassa tulee ottaa huomioon?
Responsiivinen esitystapa
HTML proto-‐tyyppi
Design
Loppu-‐käyLäjät
Tekninen suunniLelu ja toteutus
Sisällön-‐hallinta
Huomiotavaa - toimintamalli ja ketteryys!
Sisältö-‐ ja UI design
LoppukäyLäjät
SuunniLelu ja toteutus
Sisällön ylläpitäjät
Sisällön suunniLelun pohjana! Vähemmän Photoshopia – enemmän protoilua aidolla sisällöllä!
Prototyypin käyLöliiLymäkoodin hyödyntäminen, käyLöliiLymän määriLelyt, UX, interakKot, sisältömalli
KeLerä kehitysmalli, jossa mukana liiketoiminta, design, sisällön suunniLelu, tekninen suunniLelu, toteutus, sisällönhallinta...
Uusien konsepKen testaaminen prototyypin avulla. Erilaiset päätelaiLeet, loppukäyLäjät
Uuden sisällön suunniLelu, testaaminen ja esikatselu. LaiLeiden erilaisuudet!
HTML prototyyppi tärkessä roolissa suunniLelussa ja kommunikaaKossa!
Huomiotavaa - vaatimusmäärittely
• Selkeät tavoitteet toiminnallisuuksille ja sisällölle ohjaavat sisällön ja esitystavan suunnittelua
• Sisältöstrategia, mikä on oleellista, ketkä halutaan tavoittaa? – Määrittele oleellinen ja tärkein sisällössä (mobile first, pienet näytöt,
mobiililaitteet), esitystapaa voidaan rikastaa suuremmille näytöille ja kyvykkäämmille internetselaimille!
• Voidaanko jotain jättää esittämättä? – Rich-mediasisällön käyttäminen. Päätelaitteet tukevat erilaisia
standardeja! – Monikielisyys, lokalisointi – Sisältökirjasto, komponenttikirjasto
Huomiotavaa - CMS-järjestelmä
• Olemassaoleva sisältömalli ohjaa käyttöliittymän suunnittelua käyttöliittymän suunnittelu auttaa sisältömallin määrittelyssä.
• Breakpointit käyttöliittymälle ja sisällölle prototyypin avulla! • Huomioi sisältömallissa ja rakenteessa sisällön näkyvyys
erilaisissa päätelaitteissa! • Media- ja kuvatiedostojen hallinta ja optimointi.
– Automaattinen prosessointi • Sisällönhallintajärjestelmässä hallitaan sisältöä, ei sisällön
esitystapaa! • Testaa sisältöä oikeilla päätelaitteilla ja datayhteyksillä!
Huomiotavaa - käyttöliittymä
• Suunnittelun lähtökohtana oikea sisältö • Responsiivisessa käyttöliittymässä sisällön esitystapa vaihtelee erilaisissa
päätelaitteissa • Breakpointit käyttöliittymälle ja sisällölle prototyypin avulla • Mobiililaitteet ja pienet näytöt ensin, rikastaminen työpöytäselaimille
(Progressive Enhancement, Mobile First) • HTML-prototyyppi suunnitteluun ja kommunikaatioon. Responsiivisen
käyttöliittymän suunnittelussa tarvitaan ymmärrystä web teknologioissa • Uudelleenkäytettävät käyttöliittymäkomponentit sisällön esittämiseen - ei
yksittäisiä sivuja! • Sisällön optimointi päätelaitteille! Esim. adaptiivinen kuvien lataaminen! • Huom!
– Responsiivisen käyttöliittymän toteutuksessa hyödynnetään usein uusia standardeja kuten HTML5, CSS3. Ns. legacy -selaimia varten voidaan tarvita erillinen ratkaisu!
Operatiivinen sisällönhallinta
• Kouluttaminen ja tiedon jakaminen hyvissä ajoin • Hyvin toteutetun CMS-järjestelmän ja sisältömallin avulla
responsiivisen verkkopalvelun sisällönhallinta ei juurikaan poikkea perinteisestä websisällönhallinnasta
• Huomio sisällön testaaminen ja esikatselu. Sisältö ei näy ainoastaan yhdellä tavalla!
• Responsiivinen käyttöliittymä ohjaa mm. tekstin ja käyttöliittymäkomponenttien sijoittelua, fonttikokoja ja näkyvyyttä päätelaitteen ominaisuuksien mukaisesti. Käytä mahdollisimman vähän muotoiluja tai käyttöliittymään vaikuttavia määrittelyitä sisällössä
• Kuvamateriaalin ja rich-median standardoiminen ja käytön ohjeistaminen (koko, kuvasuhde, formaatti) mahdollistaa automatisoidun prosessoinnin esim. sisällön optimointia varten
3. Käytännön haasteita ja ratkaisuja...
Käytännön haasteita ja ratkaisuja... Haaste Ratkaisu
Siirtyminen työpöytäselaimelle opKmoidusta suunniLelusta ja sisällöntuotannosta responsiiviseen esitystapaan
• Uuden toimintamallin kehiLäminen, protoilu osaksi suunniLelua ja kommunikoinKa.
• TiedoLaminen ja koulutus!
KommunikaaKo eri osapuolten kanssa. Esim. liiketoiminnan edustajat, ratkaisusuunniLelu, sisältö, käyLöliiLymä, tekninen suunniLelu, toteutus jne.
• Prototyypin hyödyntäminen, koulutus ja KedoLaminen, odotusten hallinta
• Edes hyvä dokumentaaKo ei vastaa ”face to face” -‐työskentelyä!
KäyLöliiLymän design ja toiminnallisuuksien suunniLelu
• SuunniLeluun tarvitaan käytännön kokemusta responsiivisesta lähestymistavasta!
• SuunniLele käyLöliiLymä oikeaa sisältöä ja loppukäyLäjää varten
• Sovi yhteiset periaaLeet • Siirry Photoshop designista HTML-‐maailmaan
mahdollisimman pian. • SuunniLele uudelleenkäyteLäviä
käyLöliiLymäkomponenLeja – ei sivuja!
Käytännön haasteita ja ratkaisuja... Haaste Ratkaisu
Sisällön suunniLelu • Mobile first! • Sisällön suunniLelu esim. yksinkertaisen
teksKprototyypin avulla • Ei suunnitella käyLöliiLymää vaan sisältöä
TueLavien päätelaiLeiden ja selainten valitseminen
• Monipuolinen otos erilaisia päätelaiLeita • Keskitytään selainten ominaisuuksiin eikä
yksiLäisiin laiLeisiin • Kaikkien mahdollisten laiLeiden ja
yhdistelmien tukeminen vaaKi iteraaKoita!
Kuvien, videoiden ja interakKivisen median tarjoaminen eri päätelaiLeille
• Mobile first, Progressive Enhancement -‐lähestymistapa. Perustoiminnot ensin!
• Kuvakokojen ja videon automaalnen opKmoinK.
• Flash & Silverlight vanhenemassa -‐> HTML5 • AdapKivinen mediasisällön lataaminen eri
näyLöresoluuKolle!
4. Miltä tulevaisuus näyttää?
Miltä tulevaisuus näyttää? - Yhteenveto
• Responsiivinen esitystapa käyttöliittymien toteutuksissa yleistyy jatkuvasti! • Internetin käyttötottumukset muuttumassa niin, että sisältöä ja verkkopalveluita
hyödynnetään paljon myös mobiililaitteilta • Internetin mobiilikäyttö on kaksinkertaistunut vuosittain (vuodesta 2009) ja
samalla perinteisten työpöytäselainten käytön osuus pienenee * • Nopeammat datayhteydet, jatkuva tavoitettavuus • Mobiililaitteiden internetselaimet lähes työpöytäselainten tasolla! • Uudet teknologiat ja standardit vahvistumassa ja helpottamassa
käyttöliittymien ja sovellusten toteuttamista: HTML5 (draft), CSS3, Javascript frameworkit...
• Verkkosisällön, sähköisten palveluiden ja sisällönhallinnan täytyy kehittyä mukana vastaamaan tarpeeseen
• Sisällönhallinnassa ja –suunnittelussa tulisi huomioida sisällön käytettävyys eri medioissa
* hLp://gs.statcounter.com/#mobile_vs_desktop-‐ww-‐monthly-‐200812-‐201211
Kysymyksiä?
