Talent Base: Sisällönhallinta ja responsiivinen web design
Download as PPTX, PDF1 like1,228 views
Mitä tarkoittaa responsiviinen verkkosisällön esitystapa? Mitä sisällönhallinnassa tulee ottaa huomioon? Käytännön haasteita ja ratkaisuja.
More Related Content
Similar to Talent Base: Sisällönhallinta ja responsiivinen web design (20)
More from Loihde Advisory (20)
Talent Base: Sisällönhallinta ja responsiivinen web design
- 1. SISÄLLÖNHALLINTA JA RESPONSIIVINEN WEB DESIGN SISÄLLÖN- & DOKUMENTTIEN HALLINTA Jukka-Pekka Kääriäinen Senior Consultant, Talent Base
- 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 äٳää?
- 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. 1. Mitä tarkoittaa responsiivinen verkkosisällön esitystapa?
- 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
- 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. ... 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. 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. 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. Esimerkki 2: Responsiivinen esitystapa - Suositeltava vaihtoehto Verkkosisällön esittäminen erilaisille päätelaitteille
- 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
- 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)
- 23. 3. Käytännön haasteita ja ratkaisuja...
- 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!
- 26. 4. Miltä tulevaisuus äٳää?
- 27. Miltä tulevaisuus äٳää? • 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
- 29. Lisätietoja Jukka-Pekka Kääriäinen, Talent Base Oy + 358 40 511 6827 jp@talentbase.fi www.talentbase.fi
Editor's Notes
- #4: CMS: Filenet, IBM DB2 Content Manager, Documentum, Coremedia... WCM: Sharepoint, Wordpress, Joomla, Drupal, Coremedia, IBM WCM, Open Text, SDL Tridion, Adobe, Opensource
- #5: 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.
- #6: 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
- #7: 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ä
- #8: 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.
- #9: 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?
- #10: Vaihtoehto jonka valitsemista kannattaa harkita huolella.
- #11: 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!
- #12: Suositeltava vaihtoehto.
- #13: 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ä
- #15: 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/
- #16: 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
- #17: 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
- #18: Mikäli responsiivinen esitystapa valitaan etenemisvaihtoehdoksi, niin mitä asioita sisällönhallinnan tulisi huomioida?
- #19: 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
- #20: 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
- #21: 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
- #22: 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!
- #23: 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
- #25: 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!
- #26: 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.
- #28: http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200807-201207