Responsiivinen design vs. mobiilisivusto. Tietotalo Academy-webinaarisarja,

Transkriptio

1 Responsiivinen design vs. mobiilisivusto Tietotalo Academy-webinaarisarja,

2 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 Responsiivinen design vs. mobiilisivusto Digitaalinen markkinointi ja -kauppa Venäjällä Mobiili- ja pilvipalvelut työssä

3 Verkkopalvelun kehityspolku Digitaalinen markkinointi Sosiaalinen media Hakukoneoptimointi CMS CSS XML Verkkopalvelu JS ASP HTML

4 Esittäytyminen Antti Brunni Ratkaisupäällikkö Tel Linkedin: Twitter: Google+: 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)

5 Esittäytyminen Jarno Malaprade Projektipäällikkö Tel 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, Aate ja arki - J.V. Snellmanin elävä perintö, Lapin yliopisto, 2007.

6 Aikajana 4G Web apps NMT Websivut GSM UMTS EDGE GPRS Mobiiliselaimet WAP HSPA 3G Mobiilisivustot Tekstiversiot Responsiiviset palvelut Mobiilisovellukset

7 Mobiilikäyttö Lähde: Tieto- ja viestintätekniikan käyttö -tutkimus 2011, Tilastokeskus

8 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 v v v v v Opiskelija Työllinen Eläkeläinen Perusasteen koulutus Keskiasteen koulutus Korkea-asteen koulutus Pääkaupunkiseutu Suuret kaupungit Muut kaupunkimaiset kunnat Taajaan as/maaseutum. kunnat Miehet Naiset Yhteensä Lähde: Tieto- ja viestintätekniikan käyttö -tutkimus 2011, Tilastokeskus

9 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 v v v v v Opiskelija Työllinen Eläkeläinen Perusasteen koulutus Keskiasteen koulutus Korkea-asteen koulutus Pääkaupunkiseutu Suuret kaupungit Muut kaupunkimaiset kunnat Taajaan as/maaseutum. kunnat Miehet Naiset Yhteensä Lähde: Tieto- ja viestintätekniikan käyttö -tutkimus 2011, Tilastokeskus

10 Mobiilikäyttö Lähde: Tieto- ja viestintätekniikan käyttö -tutkimus 2011, Tilastokeskus

11 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

12 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,

13 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)

14 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)

15 Responsiivinen design vs. mobiilisivusto VS.

16 Mobiilisivusto m.verkkopalvelusi.fi Kaksi verkkopalvelua. Pääsivusto ja sen mobiiliversio. Asiakkaat ohjataan automaattisesti sopivimpaan versioon.

17 Mobiilisivusto Mobiililaitteen tunnistus ja ohjaus Automaattinen ohjaus tai valintasivu mobiililaitteille Asiakas siirtyy palveluun joko 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.

18 Mobiilisivusto Mobiililaitteen tunnistus ja ohjaus Automaattinen ohjaus tai valintasivu mobiililaitteille Asiakas siirtyy palveluun joko 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.

19 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ä.

20 Responsiivinen design Yksi verkkopalvelu, mikä skaalautuu automaattisesti erilaisilla päätelaitteilla.

21 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

22 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

23 Case: KAMK 2012

24 Tekniikasta

25 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.

26 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)

27 HTML 5 ja CSS 3 HTML5, CSS ja JavaScript - rakennetaan eri laitealustoilla toimiva sovelluskokonaisuus (WebApp). Offline/online -ominaisuudet. Esimerkiksi paikkatiedot matkaan.

28

29 Esim. PhoneGap - puhelimen ominaisuuksien hyödyntäminen

30 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

31 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, , Antti Brunni, , Karen McGrane/ karenmcgrane.com