Responsiivinen design vs. mobiilisivusto Tietotalo Academy-webinaarisarja, 27.9.2012
Tietotalo Academy Verkkopalvelun kehityspolku Tietotalo Academy on webinaarisarja, jossa asiantuntijamme kertovat ajankohtaisista aiheista, joista verkkopalvelusta vastaavan henkilön tulee tietää. Osallistu webinaareihin, tartu ideoihin ja kehitä verkkopalvelustasi yhä parempi. Miksi osallistua? o o o o Päivitä tietosi ja opi lisää ajankohtaisista teemoista Saat näkemystä päätöksenteon pohjaksi Käytä InfoWeb-järjestelmääsi tehokkaasti Valmistaudu tiedollisesti verkkopalvelujen uusiin kehitysaskeleisiin 27.9.2012 Responsiivinen design vs. mobiilisivusto 25.10.2012 Digitaalinen markkinointi ja -kauppa Venäjällä 29.11.2012 Mobiili- ja pilvipalvelut työssä
Verkkopalvelun kehityspolku Digitaalinen markkinointi Sosiaalinen media Hakukoneoptimointi CMS CSS XML Verkkopalvelu JS ASP HTML
Esittäytyminen Antti Brunni Ratkaisupäällikkö Tel. 050 407 2766 Email: antti.brunni@tietotalo.fi Linkedin: http://fi.linkedin.com/in/anttibrunni Twitter: http://www.twitter.com/anttibrunni Google+: http://gplus.to/anttibrunni 5 vuoden kokemus verkkopalvelujen suunnittelusta Erikoistunut verkkopalvelujen suunnitteluun ja määrittelyyn, palvelumuotoiluun ja ratkaisukonsultaatioon, sosiaalisen median hyödyntämiseen. Ratkaisualustat: Episerver, InfoWeb, Sharepoint, Microsoft Innavation Process Management ja avoimet alustat Julkaisut: Digital Cinema Experience (Leofinland / Dodona Research, 2008) Top Talent Awards Quality Seal 2004 (SnowNow Media Channel) ja 2007 (Hannu Hautala Luontokuvakeskus)
Esittäytyminen Jarno Malaprade Projektipäällikkö Tel. 040 5461110 Email: jarno.malaprade@tietotalo.fi Kasvatustieteiden maisteri, erikoistumisalana mediakasvatus 7 vuoden kokemus verkkopalvelujen kehittämisestä. Erityisosaaminen projektinhallinnassa, palvelumuotoilussa, käytettävyys- ja konseptisuunnittelussa, konsultaatio- ja koulutuspalveluissa ja sosiaalisen median konsultaatiossa. Julkaisut: Informaatioteknologian filosofia, Lapin yliopistokustannus, 2011. Aate ja arki - J.V. Snellmanin elävä perintö, Lapin yliopisto, 2007.
Aikajana 4G Web apps NMT Websivut GSM UMTS EDGE GPRS Mobiiliselaimet WAP HSPA 3G Mobiilisivustot Tekstiversiot Responsiiviset palvelut Mobiilisovellukset
Mobiilikäyttö Lähde: Tieto- ja viestintätekniikan käyttö -tutkimus 2011, Tilastokeskus
Käyttää internetiä kannettavalla tietokoneella kodin ja työpaikan ulkopuolella Käyttää internetiä taulutietokoneella kodin ja työpaikan ulkopuolella Käyttää internetiä taulutietokoneella kodin ja työpaikan ulkopuolella viikoittain Käyttää internetiä matkapuhelinella kautta Käyttää Käyttää internetiä internetiä matkamatkapuhelimel puhelimella la 3G-yhteyden viikottain kautta %-osuus väestöstä 16-24v 26 1 1 44 29 36 25-34v 35 3 2 51 39 46 35-44v 36 6 4 52 37 47 45-54v 30 2 2 30 18 26 55-64v 18 1 0 15 9 13 65-74v 11 0 0 6 2 5 Opiskelija 30 1 1 43 30 34 Työllinen 31 3 2 41 28 36 Eläkeläinen 10 0 0 6 3 5 Perusasteen koulutus 17 1 1 27 16 21 Keskiasteen koulutus 24 1 1 30 21 27 Korkea-asteen koulutus 36 5 3 43 30 38 Pääkaupunkiseutu 36 6 4 42 32 37 Suuret kaupungit 30 1 1 37 26 32 Muut kaupunkimaiset kunnat 27 3 2 35 23 30 Taajaan as/maaseutum. kunnat 17 0 0 24 13 21 Miehet 30 3 2 43 30 39 Naiset 22 2 1 23 15 19 Yhteensä 26 2 1 33 22 29 Lähde: Tieto- ja viestintätekniikan käyttö -tutkimus 2011, Tilastokeskus
Käyttää internetiä kannettavalla tietokoneella kodin ja työpaikan ulkopuolella Käyttää internetiä taulutietokoneella kodin ja työpaikan ulkopuolella Käyttää internetiä taulutietokoneella kodin ja työpaikan ulkopuolella viikoittain Käyttää internetiä matkapuhelinella kautta Käyttää Käyttää internetiä internetiä matkamatkapuheli- puhelimella mella 3Gyhteyden viikottain kautta %-osuus väestöstä 16-24v 26 1 1 44 29 36 25-34v 35 3 2 51 39 46 35-44v 36 6 4 52 37 47 45-54v 30 2 2 30 18 26 55-64v 18 1 0 15 9 13 65-74v 11 0 0 6 2 5 Opiskelija 30 1 1 43 30 34 Työllinen 31 3 2 41 28 36 Eläkeläinen 10 0 0 6 3 5 Perusasteen koulutus 17 1 1 27 16 21 Keskiasteen koulutus 24 1 1 30 21 27 Korkea-asteen koulutus 36 5 3 43 30 38 Pääkaupunkiseutu 36 6 4 42 32 37 Suuret kaupungit 30 1 1 37 26 32 Muut kaupunkimaiset kunnat 27 3 2 35 23 30 Taajaan as/maaseutum. kunnat 17 0 0 24 13 21 Miehet 30 3 2 43 30 39 Naiset 22 2 1 23 15 19 Yhteensä 26 2 1 33 22 29 Lähde: Tieto- ja viestintätekniikan käyttö -tutkimus 2011, Tilastokeskus
Mobiilikäyttö Lähde: Tieto- ja viestintätekniikan käyttö -tutkimus 2011, Tilastokeskus
Yhteenveto Jos et huomioi käyttäjiesi mobiilitarpeita Käännytät puolet asiakkaistasi pois ovelta. Strateginen valinta Halutaanko optimoida mobiilikäyttötilannetta varten Kuinka syvällisesti halutaan huomioida
Mikä siinä mobiilissa on niin tärkeää? 1. Mobiili on henkilökohtaista 2. Pysyvästi mukana 3. Aina päällä 4. Sisältää maksukanavan 5. Aina valmiina luovaa impulssia varten 6. Tarkin väline yleisön mittaamiseen 7. Kuluttamisen konteksti-ulottuvuus mallinnettavissa 8. Augmented Reality -palvelut hyödynnettävissä - Tomi Ahonen, tietokirjailija @tomiahonen
Mobiilikäyttötilanne? Tarve syntyy: Lapsi sairastuu kotimaan lomamatkalla. Kysymys: Missä on lähin päivystävä apteekki tai lääkäri? Etsintä: Google Apteekki Rovaniemi + Lääkäri Rovaniemi Onko tieto kaupungin sivuilla? Kuka on palvelun tarjoaja? Siirtyminen palveluun Sijaintitiedon tunnistus, kellonajan tunnistus lähimmän päivystyspalvelun näyttäminen. Palvelutapahtuma paikanpäällä tai mobiilisti (esim. click-to-call, ajanvaraus)
Mobiilikäyttötilanne? Tarve syntyy: Lapsi sairastuu kotimaan lomamatkalla. Kysymys: Missä on lähin päivystävä apteekki optimointia, tai lääkäri? käyttötapausten Etsintä: tuntemusta Google Apteekki Rovaniemi + Lääkäri Rovaniemi Onko tieto kaupungin sivuilla? Kuka on palvelun tarjoaja? Siirtyminen palveluun Teesejä: - Tapahtuu usein tässä ja nyt - Vaatii markkinointia, - Mobiilistrategia - Kohdentaminen? - Applikaatio - Responsiivinen - Mobiilisivusto - ROI: aidosti läsnä oleva hyöty (win-win) Sijaintitiedon tunnistus, kellonajan tunnistus lähimmän päivystyspalvelun näyttäminen. Palvelutapahtuma paikanpäällä tai mobiilisti (esim. click-to-call, ajanvaraus)
Responsiivinen design vs. mobiilisivusto VS.
Mobiilisivusto www.verkkopalvelusi.fi m.verkkopalvelusi.fi Kaksi verkkopalvelua. Pääsivusto ja sen mobiiliversio. Asiakkaat ohjataan automaattisesti sopivimpaan versioon.
Mobiilisivusto www.domain.fi Mobiililaitteen tunnistus ja ohjaus Automaattinen ohjaus tai valintasivu mobiililaitteille Asiakas siirtyy palveluun joko www.domain.fi tai suoraan m.domain.fi. Yhteinen tietokanta m.domain.fi Mobiililaitteelle optimoidut verkkosisällöt Uutisten, tapahtumatietojen, sivusisältöjen jne. Julkaiseminen yhdellä kertaa automaattisesti sivuston mobiilipalveluun. Kaksi verkkopalvelua. Pääsivusto ja sen mobiiliversio. Asiakkaat ohjataan automaattisesti sopivimpaan versioon.
Mobiilisivusto www.domain.fi Mobiililaitteen tunnistus ja ohjaus Automaattinen ohjaus tai valintasivu mobiililaitteille Asiakas siirtyy palveluun joko www.domain.fi tai suoraan m.domain.fi. Yhteinen tietokanta m.domain.fi Mobiililaitteelle optimoidut verkkosisällöt Uutisten, tapahtumatietojen, sivusisältöjen jne. Julkaiseminen yhdellä kertaa automaattisesti sivuston mobiilipalveluun. Kaksi verkkopalvelua. Pääsivusto ja sen mobiiliversio. Asiakkaat ohjataan automaattisesti sopivimpaan versioon.
Mobiilisivusto Hyötyjä Optimoidut sisällöt mobiilikäyttäjille. Kohdennettu sisältö mobiilikäyttötapauksiin. Optimoitu sisältö tuo käyttöön nopeutta. E-Commerce-optimointi suoraviivaisempaa. Säästöjä suoraviivaisemmasta toteutustavasta. Priorisointi valittuihin kohderyhmiin mobiilikäyttötapauksissa. Mahdollisuus parempaan ROI-arvoon. Näyttää aina halutun kaltaiselta. Haasteita Kaksi domainia. Näkyvyyden optimointi. Eli usein kaikki varsinaisen verkkopalvelun sisällöt eivät saavutettavissa. Mutta kasvattaa suunnittelun ja sisältötyön tarvetta. Mutta ei palvele kaikkia käyttötapauksia. Ylläpitokustannukset kuitenkin usein suuremmat. Muiden käyttötapausten kustannuksella. Mutta vaatii syvemmän tason (teknisen, käytettävyyden ja sisällön) optimointia. Vaatii sisältötyötä.
Responsiivinen design Yksi verkkopalvelu, mikä skaalautuu automaattisesti erilaisilla päätelaitteilla.
Responsiivinen design Hyötyjä Yksi verkkopalvelu. Optimaalinen hakukonenäkyvyydelle ja markkinoinnille. Informaatiorakenne sama. Sisällöntuotannon työmäärän optimointi ylläpitovaiheessa. (säästöjä pitkällä aikavälillä) Sisältö saadaan skaalautumaan. Haasteita Sisällöntuotannossa ja rakenteessa käyttötapaukset huomioitava (simple is beautiful). Informaatiorakenne sama. Mutta suuremman suunnittelumäärän vuoksi toteutusvaiheessa suuremman kertainvestoinnin. Sisältö tulee suunnitella ja toteuttaa skaalautuvaksi niiltä osin kun automatisointia ei voida tai haluta tehdä. Optimaalisesti vastataan useampiin käyttötapauksiin. Erityistoimintojen kuten ecommercen optimointi haasteellisempaa. Yleispätevyys. Filosofia: kaikki tieto saatavilla Nopeus ja sujuvuus vaarantuvat. Käytäntö: Mahdollistaa erityyppisen kirjoitustyylin (kohdentaminen) usein rajatusti
Progressive enhancement t. adaptiivinen design Peruslähtökohtana pääsy tietoon (accessibility) kaikilla laitteilla, semanttinen HTML-koodaus (<i> <em> = kuvataan tietoa samalla kun sen ulkoasua). 1. Sisältö suuntaa suunnittelua (ei teknologia tai selaintuki vaan palvelumuotoilu) 2. Perussisältö kaikille 3. Perustoiminnot kaikille 4. Semanttisuutta korostava koodaus 5. Eristyislayoutit (dekstop, mobiilit, padit) eri CSS-tiedostoina (reponsiivisuutta) 6. Erityistoiminnot eivät poissulje käyttäjiä 7. Käyttäjän selainasetuksia kunnioitetaan
Case: KAMK 2012
Tekniikasta
Hybridimalli On mahdollista tuottaa mobiilioptimoidun sivuston edut ja responsiivisuuden yhdistävä hybridimalli. Lähtökohtaisesti responsiivinen ratkaisu. Tunnistetaan mobiilikäyttölitanteet. Priorisoidaan sisältö tai tuodaan mobiilitilanteisiin lisäelementtejä kuten paikkatietoon liittyviä toimintoja. Esim. toimipisteiden aukioloajat + oletusnäkymään lähimmän toimipisteen tiedot.
Hybridimalli? Tarve syntyy: Lapsi sairastuu kotimaan lomamatkalla. Kysymys: Missä on lähin päivystävä apteekki tai lääkäri? Etsintä: Google Apteekki Rovaniemi + Lääkäri Rovaniemi Onko tieto kaupungin sivuilla? Kuka on palvelun tarjoaja? Siirtyminen palveluun Sijaintitiedon tunnistus, kellonajan tunnistus lähimmän päivystyspalvelun näyttäminen. Palvelutapahtuma paikanpäällä tai mobiilisti (esim. click-to-call, ajanvaraus)
HTML 5 ja CSS 3 HTML5, CSS ja JavaScript - rakennetaan eri laitealustoilla toimiva sovelluskokonaisuus (WebApp). Offline/online -ominaisuudet. Esimerkiksi paikkatiedot matkaan.
Esim. PhoneGap - puhelimen ominaisuuksien hyödyntäminen
Sisältöstrategia mobiiliin 1. Muista! Mobiilikäyttäjien sisältötarpeita ei voi arvata 2. Nykyistä analyysitietoa voi käyttää vain suuntaa antavana ohjeena mobiilin palvelun kehittämisessä Käyttäjien tarpeet ovat muuta kuin mitä on luettavissa analytiikasta 3. Kaikki mikä webissä on nyt on saatava mobiiliin muotoon tavalla tai toisella 4. Ala priorisoimaan sisältöjä todellisen mobiilikäytön datan pohjalta 5. Poista huono sisältö 6. Tutki miten käytössä olevat ratkaisut tukevat ja soveltuvat käyttöön Karen McGrane/ karenmcgrane.com
Miten käytännössä? Olemassa olevan sivuston muokkaaminen responsiiviseksi on mahdollista. Vaatii oletettavasti joitain kompromisseja. Sivustouudistuksen yhteydessä sovitaan palvelun responsiivisuudesta. Ota yhteyttä ja haetaan yhdessä sopiva ratkaisumalli. Jarno Malaprade, 040 546 1110, jarno.malaprade@tietotalo.fi Antti Brunni, 050 407 2766, antti.brunni@tietotalo.fi Karen McGrane/ karenmcgrane.com