Web-sisällönhallinta ja mukautuva esitystapa

1,239 views

Published on

Responsiivisen esitystavan suunnittelu ja vaikutukset sisällönhallintaan.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,239
On SlideShare
0
From Embeds
0
Number of Embeds
334
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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ä
  • Työpöytäselaimet: näyttö, hiiri, näppäimistö
    Tabletit: näyttö, kosketus
    Mobiili: näyttö, kosketus, näppäimet, muisti, hitaampia, Flash, javascript, HTML5, datayhteyden laatu jne.
  • 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!
  • 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.
  • 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
  • Web-sisällönhallinta ja mukautuva esitystapa

    1. 1. WEB-SISÄLLÖNHALLINTA JA MUKAUTUVA ESITYSTAPA (RESPONSIVE WEB DESIGN) Talent Base 24.1.2013 Timo Karsisto Senior Consultant, Talent Base
    2. 2. Esittely • Timo Karsisto, vanhempi konsultti, Talent Base • Ratkaisusuunnittelu, IT-arkkitehtuuri ja vaatimusmäärittely • Web-pohjaiset B2B- ja B2C–palvelut, sisällönhallintaratkaisut, sähköinen kaupankäynti, sähköinen asiointi, portaalit, sovellukset, integraatiot
    3. 3. Sisällönhallinta ja responsiivinen esitystapa 1. Johdanto web-päätelaitteiden monimuotoisuuteen 2. Perinteinen esitystapa – Työpöytäratkaisu (Fixed Web) 3. Perinteinen esitystapa ja mobiilikanavat 4. Responsiivinen esitystapa 5. Responsiivisen esitystavan työnkulku 6. Parhaat käytännöt
    4. 4. Termistö • Responsive Web Design (RWD) – Mukautuva esitystapa – Tapa toteuttaa verkkosivustoja, jotka on optimoitu mobiili-, tablet- ja työpöytälaitteille. Sisältö mukautuu laitteen ominaisuuksien mukaan.Toteutuksessa on vain yksi CMS ja yksi käyttöliittymäkoodi (HTML/CSS/JS). • CMS/WCMS – Sisällönhallintajärjestelmä/Web-sisällönhallintajärjestelmä (Content Management System/Web Content Management System) • Progressive Enhancement – Toteutustapa verkkosivulle, jossa tehdään yksinkertainen ja toimiva ratkaisu ja käyttökokemusta parannetaan laitteen tarjoamien ominaisuuksien mukaan (esim. sivustot toimivat täysin ilman javascriptiä, mutta jos käyttäjällä on javascript-tuki, niin käyttäjän navigaatiokokemusta voidaan parantaa) • Media Query – HTML5/CSS3:n tarjoama tapa havaita esim. käyttäjän selaimen leveys ja tämän perusteella voidaan muuttaa CSS-tyylejä (esim sivun layouttia ja fonttien kokoja). Media queryt määrittävät nk. breakpointit. • Fluid Grid – Käyttöliittymä on toteutettu joustavasti eli käyttöliittymäelementit skaalautuvat käyttäjän selaimen koon mukaan (elementtien koko ei ole määritelty pikseleitä vaan suhteellisina yksikköinä, esim artikkelin leveys on aina 60% käyttäjän selaimen leveydestä) • Fluid Images – Kuvien koot ovat myös suhteellisia eli skaalautuvat selaimen leveyden perusteella (kuvan koko esim aina 50% käyttäjän selaimen leveydestä) • Viewport – HTML-metatagi, jonka avulla mobiililaitteille kerrotaan, että sivusto on mobiilioptimoitu (muuten mobiililaite yrittää esim skaalata sivun kuin se olisi suunniteltu työpöytäkäyttöön, oletusarvoisesti monet mobiililaitteet yrittävät näyttää ruudulla 980px leveydeltä sisältöä)
    5. 5. Termistö II • Mobile First / Content First – Sivuston suunnittelun lähtökohtana on suunnitella sisältö edellä, miettiä aina mikä on tärkeintä ja mitä halutaan näyttää pienimmissä mobiililaitteissa (tämä auttaa myös saamaan työpöytäsivustosta käyttäjälle optimoidumman) • HTML5 & CSS3 – Uudet standardit HTML:ään ja CSS:ään (HTML:n tyylimääritykset). Uudet standardit mahdollistavat mm. mukautuvien sivustojen tekemisen. Vaikka näitä standardeja ei olisi tuettu laitteessa, niin on olemassa teknologioita, jotka simuloivat HTML5/CSS3-tuen myös vanhemmille selaimille/laitteille) • Breakpoint – Määritelty ”murroskohta” pikseleinä (selaimen leveys), missä sivuston CSS-tyylejä halutaan muuttaa. Usein breakpoint-pisteessä muutetaan esimerkiksi sivustoelementtien asettelua ja fonttien kirjasinkokoja/-lajeja. Breakpoint-toiminnallisuus toteutetaan pitkälti CSS3:n media-query -kyselyiden avulla. • Sisältöinventaatio – Inventaario sivuston sisällöstä, minne on kerätty priorisoitu ”oikea” sisältö (tekstit ja mediatiedostot, kuten kuvat ja videot), rautalankamallit sisällön asettelusta sivustolla jne... • HTML-prototyyppi – Erittäin tärkeä väline mukautuvan verkkosivustosuunnittelun työmallissa. HTML-prototyyppi on selaimessa toimiva staattinen sivusto, jonka on hyvä olla helposti saatavilla (sisäverkossa tai julkisessa verkossa esim. salasanasuojattuna). Kaikki sidosryhmät voivat testata ja ”pelata” prototyypillä. Kun prototyyppi on valmis, viimeistellään html-koodi ja lisätään ratkaisuun taustajärjestelmälogiikka (dynaaminen toteutus sisällönhallintajärjestelmän päällä).
    6. 6. Web-sisällönhallinta ja mukautuva esitystapa Web-päätelaitteiden monimuotoisuus
    7. 7. Pelikenttä – Verkon laitekirjo on valtava • Työpöytäselaimet (yleisimmät): – Internet Explorer, Chrome, Firefox, Safari, Opera • Mobiililaitteet: – Alustoja: Windows Phone 7.5 & 8, Meego, Android (useita versioita), Symbian (useita versioita), S40, Blackberry OS, IOS ... • Joissa eri selaimia 20+ – Facebook on ilmoittanut että 7000 erityyppistä mobiililaitetta käyttää FB:tä päivittäin – 249 eri resoluutiota matkapuhelimissa • Ominaisuuksia: – Javascript, Flash, HTML 4.01, HTML5, CSS3, CSS jne • Käyttöliittymä ja ohjaustavat: – Hiiri, näppäimistö, kosketus, näppäimet, ääni, kynä, eleet ... Lähteet: http://techcrunch.com/2012/08/03/vp-mike-schroepfer-7000-different-mobile-devices-access-facebook-every-day/ http://cartoonized.net/cellphone-screen-resolution-by-size.php
    8. 8. Tilastoja mobiilikäyttäjistä o 71% mobiilikäyttäjistä olettaa, että sivut latautuvat yhtä nopeasti tai nopeammin kuin työpöytäkoneella o 74% lähtee pois sivustolta, jos sivun latautuminen kestää yli 5 sekuntia o Noin puolet mobiilikäyttäjistä eivät palaa sivustolle, mikäli se ei toiminut kunnolla aikaisemmin o eBayssa tehdään mobiiliostos joka toinen sekunti o 28% Iso-Britannian asukkaista on ostanut jotain mobiililaitteen avulla o 29% älypuhelinkäyttäjistä käyttää puhelinta ostamisen tukena, esim. hintavertailuun Lähteet: http://www.compuware.com/D/RELEASE/592528/NEW-WEB-STUDY-REVEALS-THE-MOBILE-WEB-DISSAPPOINTS-GLOBAL-CONSUMERS http://www.gpmd.co.uk/blog/2012-mobile-internet-statistics/ http://cyberetto.com/2012/06/07/mobile-internet-usage-statistics/
    9. 9. Verkon mobiilikäyttö kasvaa eksponentiaalisesti • Maailmassa on yli 4 miljardia matkapuhelinta, joista yli miljardi on älypuhelimia • Älypuhelimia myydään jo nyt enemmän kuin kannettavia ja työpöytäkoneita yhteensä • Optimistinen arvio: mobiilikäyttö ohittaa työpöytäkäytön vuonna 2014 • Mobiilikäyttäjien osuus kasvaa räjähdysmäisesti. Tällä hetkellä koko maailman web-käyttötilastoissa mobiilikäyttäjiä on koko liikenteestä noin 15% (vuonna 2010 alle 2%). Mobiilikäyttäjät ovat erittäin tärkeä käyttäjäryhmä Lähde:http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201212
    10. 10. Web-sisällönhallinta ja mukautuva esitystapa Web-sivustot työpöytäselaimille
    11. 11. Perinteinen tapa toteuttaa verkkosivuja • Taustalla liiketoiminta, sisältöstrategia, brand, design • Kannettavat ja työpöytätietokoneet (ja niiden internetselaimet) • ”Fixed”-design, käyttöliittymän elementtien asemointi voidaan suunnitella kiinteäksi
    12. 12. Perinteinen tapa: Suunnittelusta loppukäyttäjille Design • Staattinen rautalankamalli • Staattinen design (Photoshop) • Kuva, teksti Suunnittelu ja toteutus • Arkkitehtuuri • HTML, JS, CSS • CMS-/WCMS-toteutus Operatiivinen sisällönhallinta Sisällön ylläpito CMS-/WCMS-järjestelmässä Web Loppukäyttäjät CMS ”Pixel Perfect”
    13. 13. Työpöytäselaimet - mobiililaitteet 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ö ! ! ! ! !
    14. 14. Web-sisällönhallinta ja mukautuva esitystapa Erilliset kanavat erilaisille päätelaitteille
    15. 15. Erilliset kanavat CMS Desktop 1920 x 1080 2048 x 1536 1536 x 2048 www.sivusto.fi 480 x 800 800 x 480 m.sivusto.mobi Toteutus 1 Toteutus 2 Toteutus 3-n www.sivusto.fi Design & sisältö Design & sisältö CMS Design & sisältö CMS Tablet Mobile
    16. 16. 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. Haasteet: - 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 on haastavaa - Sisällön näkyvyys hakukoneissa heikkenee - Sosiaalinen media ja sisällön jakaminen eri kanavissa ei toimi - Toteutettu usein perinteisemmällä tavalla, ei välttämättä mukaudu laitteen näytön koon mukaan (esim. Fonttien,kuvien koot, layout).
    17. 17. Web-sisällönhallinta ja mukautuva esitystapa Responsiivinen esitystapa (Responsive Web Design)
    18. 18. Väite: Mobiilikäyttäjät haluavat tehdä täysin samoja asioita kuin työpöytäkäyttäjät.
    19. 19. ON VAIN YKSI VERKKO Responsive Web Design Progressive Enhancement Mobile First CSS3 Media Query Breakpoint HTML5 Fluid Grid Fluid Images
    20. 20. Responsiivinen esitystapa Responsiivinen käyttöliittymä HTML5 CMS Responsiivinen toteutus Yksi sisältö + yksi esitystapa Responsiivinen käyttöliittymä skaalaa ja esittää sisällön (tai sovelluksen) erilaisilla näyttöresoluutioilla ja internetselaimilla Design, sisältö Tekstisisältö - Otsikko - Tiivistelmä - Leipäteksti Responsive Web Design CSS3 Media Query Breakpoint viewport Fluid grid
    21. 21. Responsiivinen esitystapa - esimerkki 240x320 (mobile) 320x480 (mobile) 600x800 (small tablet) 768x1024 (tablet portrait) 1024x768 (tablet landscape/ small desktop) http://veikonkala.org/responsive/ Selainikkunan koko
    22. 22. www.nokia.com/global/ www.bostonglobe.com
    23. 23. http://yle.fi/uutiset/ http://www.microsoft.com
    24. 24. Responsiivinen esitystapa - tiivistelmä • Yksi sisältö/toiminnallisuus, yksi käyttöliittymä – verkkosisältö skaalautuu eri laitteisiin! • Sisällön esitystapa optimoidaan päätelaitteen ominaisuuksien ja selaimen kyvykkyyksien mukaan: – Näyttölaitteen koko, laitteen orientaatio – Selaimen tukemat ominaisuudet (javascript-tuki, css, flash…) – Ohjaustapa: hiiri, näppäimistö, kosketus • Sisällön esitystapa ja asemointi vaihtelee erilaisissa näyttöresoluutioissa ja internetselaimissa - yhtenäinen käyttäjäkokemus säilytetään: – Käyttöliittymäkomponenttien koko, sijoittelu, näkyvyys – Kuvien koko, sijoittelu, näkyvyys – Kirjasimen koko, skaalaus, sijoittelu, näkyvyys – Skaalautuvuus, kiinteät mittayksiköt kuten px  %, em – Breakpointit • Näkyvyys hakukoneissa hyvä, sama sisältö + sama URL eri päätelaitteista • Sosiaalinen media, sisällön jakaminen helppoa
    25. 25. Sisältö- ja UI design Web-sisällönhallinta ja mukautuva esitystapa Java Gurut Responsiivisen esitystavan toteuttamisen työnkulku Liiketoiminta Sisällön ylläpitäjät HTML Velho Arkkitehti Ratkaisu-suunnittelija
    26. 26. Responsiivinen työnkulku – Sisältö ensin Liiketoiminta-tavoitteet & sisältöstrategia End-to-end vastuu ratkaisusta: • Operationaalinen/ylläpidollinen näkökulma • Sisältömallin suunnittelu (CMS) • Liiketoimintasäännöt Sisältöinventaario Teksti/ Perus HTML-proto HTML-prototyyppi & HTML-tyyliohjeistus HTML:n viimeistely & CMS- toteutus Ratkaisusuunnittelu • Liiketoiminta-konsepti • Sisällön priorisointi/rautalan-kamallit • Informaatio-arkkitehtuuri • Tekstisisältö • Mediasisältö 1. 2. 3. 1.Hero Responsiivinen Esitystapa Responsiivisessa esitytavassa.. 2. Article 3. Infoboxes • Sidosryhmäkommunikaatio/-koordinointi • Vaatimusten jatkojalostaminen ja tarkentaminen • Laadunvalvonta • Dynaaminen ja tuotantovalmis CMS • Muokkaamaton teksti • Dokumentaatio (ppt) • Yksinkertainen HTML • Staattinen HTML-prototyyppi • Keskustelua, testausta, lisää keskustelua ja iteraatioita kunnes kaikki ovat tyytyväisiä: • Liiketoiminta • Graafinen suunnittelija • HTML-kehittäjä • Taustajärjestelmä-kehittäjä • Ratkaisusuunnittelija • Arkkitehti
    27. 27. Parhaita käytäntöjä • Toimintamallin muutos – HTML-prototyyppi suunnittelu- ja kommunikointivälineenä – Prototyypissä oikea sisältö – Vähemmän Photoshoppia ja enemmän HTML:ää – Sisältö- ja komponenttikirjasto (content inventory & styleguide/component library) – Hyväksy, että sivusto voi näyttää hieman erilaiselta eri laitteilla – Kaikki sidosryhmät mukana: liiketoiminta, design, sisällönsuunnittelu, toteutus, ratkaisusuunnittelu, arkkitehtuuri, sisällönhallinta... • Sisältö ensin (content first -mobile first) – Sisällön priorisointi ja fokus peruslaitteiden käyttökokemuksessa  toiminnallisuutta ja sisältöä voidaan lisätä mikäli päätelaite tukee sitä (progressive enhancement) • Valitse tuettavat laitteet –työpöytäselaimista mobiililaitteisiin – Valitse tärkeimmät laitteet kohdeyleisön mukaan – Testaa oikeilla laittella ja tietoliikenneyhteyksillä – Responsiivinen suunnittelutapa ei ole laitekohtainen vaan perustuu selaimien tukemiin ominaisuuksiin • Mediatiedostojen hallinta ja prosessoinnin automatisointi – Videot: vaaditaan useita formaatteja, jotta toimisi mahdollisimman monella laitteella. Myös eri resoluutioita tarvittaneen – Kuvat: tarvitaan useita kokoja, ettei turhaan ladata liian isoja kuvia pienemmän resoluution laitteille • Rakenna komponentteja – ei sivuja (sivut muodostuvat komponenteista) – Komponentteja aina taustajärjestelmään asti (ei ainoastaan uudelleen käytettäviä UI-komponentteja) – Komponenttien, videoiden ja kuvien kuvasuhteiden standardointi !!!
    28. 28. Parhaita käytäntöjä II • Sisällönhallintajärjestelmässä hallitaan sisältöä, ei sisällön esitystapaa • Kouluta, tiedota ja osallistuta ajoissa kaikkia osapuolia (liiketoiminta, ylläpito jne) • Hyvin suunnitellun ja toteutetun CMS-järjestelmän ja sisältömallin avulla responsiivisen verkkopalvelun sisällönhallinta ei juurikaan poikkea perinteisestä web-sisällönhallinnasta – Huomio sisällön testaaminen ja esikatselu. Sisältö ei näy ainoastaan yhdellä tavalla! • Huom! – Responsiivisen käyttöliittymän toteutuksessa hyödynnetään usein uusia standardeja kuten HTML5, CSS3. Vanhempia selaimia ja laitteita (esim. Nokia 6110) varten voidaan tarvita erillinen ratkaisu!
    29. 29. Lisätietoja: Timo Karsisto, Talent Base Oy 050 5880355 timo.karsisto@talentbase.fi

    ×