Responsiivinen suunnittelu

Samankaltaiset tiedostot
Internetpalvelut. matkalla Mikko Sairanen

Westin Lisätty luku 6, käyttötapauskuvaukset.

Mobiilipalvelut kirjastoissa Juha Hälinen verkkopalvelusuunnittelija

Brändäystä lyhyesti. Esittelykappale, lisää:

Mikä Eräverkko? Kaikki eräelämykset yhdestä osoitteesta.

Useimmin kysytyt kysymykset

ipad yrityskäytössä AKVA -seminaari Ilona IT Oy Petra Anttila, /

Responsiivinen suunnittelu tehostaa mobiilikonversiota

Tietotalo Insight. Digitaalinen markkinointi. Beacon FAQ: Vastaukset yleisimpiin kysymyksiin beaconeista

Tavallista fiksumpaa markkinointia

izettle Reader korttimaksupäätteen käyttöohjeet

Tuunix Oy Jukka Hautakorpi

Senioriliiton oma jäsenkorttiapplikaatio! Tehty

SoLoMo InnovaatioCamp Ari Alamäki HAAGA-HELIA Tietotekniikan koulutusohjelma Ratapihantie Helsinki haaga-helia.

Tieto Edun käyttöönotto

LinkedIn MIKÄ SE ON? MITEN JA MIKSI SITÄ KÄYTETÄÄN? Materiaalit osoitteessa:

Älypuhelimet. Sisällysluettelo

Tieto Edun mobiiliversiota voi käyttää Android ja IOs laitteissa ja web version käyttöön suosittelemme joko Chrome tai Firefox selainta.

PELAAJAPROFIILI Mobiilisovellus

Tieto Edun mobiiliversiota voi käyttää Android ja IOs laitteissa ja web version käyttöön suosittelemme joko Chrome tai Firefox selainta.

Windows Phone. Sähköpostin määritys. Tässä oppaassa kuvataan uuden sähköpostitilin käyttöönotto Windows Phone 8 -puhelimessa.

Toimiva verkkosivusto lehdelle. Riikka Räisänen Projektipäällikkö, Digitaalinen markkinointi Puhelin:

SÄHKÖINEN MYYNTIMIES

LinkedIn MIKÄ SE ON? MITEN JA MIKSI SITÄ KÄYTETÄÄN? Materiaalit osoitteessa:

Asiakas ja tavoite. Tekninen toteutus

Mobiilin ekosysteemin muutos - kuoleeko tietoturva pilveen?

Tieto Edu. Tieto Edun mobiiliversiota voi käyttää Android- ja IOs-laitteissa ja web-version käyttöön suosittelemme joko Crome- tai Firefox-selainta.

Mobiili ennen desktoppia!

(Acerin) Windows 8 tabletti henkilöstön työkäytössä Koonnut Hanna Frilander, Mobiilit ohjaajat hanke

Liikkuva työ pilotin julkinen raportti

Iso kysymys: Miten saan uusia asiakkaita ja kasvatan myyntiä internetin avulla? Jari Juslén

Yrityksesi verkossa: Miksi ja miten. Aleksi Issakainen, tarjoamapäällikkö, Fonecta

EDUBOX opetusvideopalvelu

SUOJAA JA HALLINNOI MOBIILILAITTEITASI. Freedome for Business

Yhdistä kodinkoneesi tulevaisuuteen. Pikaopas

haltu..mobile.web.embedded

Copyright RGF Data. Puhelin / Älypuhelin / Tabletti / Kannettava tietokone / Pöytä-lattiatietokone

Android. Sähköpostin määritys. Tässä oppaassa kuvataan uuden sähköpostitilin käyttöönotto Android Ice Cream Sandwichissä.

Yhdistä kodinkoneesi tulevaisuuteen. Pikaopas

ZA6284. Flash Eurobarometer 413 (Companies Engaged in Online Activities) Country Questionnaire Finland (Finnish)

Verkkokaupan perustaminen ja verkkokauppa-alustan valinta

Office ohjelmiston asennusohje

JOVISION IP-KAMERA Käyttöohje

PäÄtElAiTeKeNtÄn MuRrOs, UuDeT jakelukanavat ja PaLvElUiLlE asetettavat odotukset

Senioriliiton jäsenkorttiapplikaatio

Mistä on kyse ja mitä hyötyä ne tuovat?

Työn mobilisointi lisää tuottavuutta! Jenni Kiikka Head of Sales and Marketing

Asiakaslupaus SURF-arkkitehtipalvelut Puucomp Oy

Käyttövalmiiksi asennus & päivitys älypuhelin

Käytettäväksi QR-koodin lukulaitteen/lukijan kanssa yhteensopivien sovellusten kanssa

Salon kaupunki. Ceepos Mobiilimaksu

Yhdistä kodinkoneesi tulevaisuuteen. Pikaopas

SUBSTANTIIVIT 1/6. juttu. joukkue. vaali. kaupunki. syy. alku. kokous. asukas. tapaus. kysymys. lapsi. kauppa. pankki. miljoona. keskiviikko.

MITEN RAKENTAA MENESTYVÄ VERKKOKAUPPA? Keskiviikko klo MITÄ YRITYKSESI TULEE TIETÄÄ VERKKOKAUPPAA PERUSTETTAESSA?

Markkinoinnin ulkoistamisella liiketoiminnalle arvoa. CASE Tampereen Rakennustiimi Oy

Kuvan ottaminen ja siirtäminen

Muistitko soittaa asiakkaallesi?

KYMENLAAKSON AMMATTIKORKEAKOULU. Ubuntu. Yukun Zhou

Tekninen suunnitelma - StatbeatMOBILE

Sense tiedostot Käyttöohje Opastinsilta 8 ae Helsinki

Suomalaiset mobiilissa 2018 Dentsu Data Services

DNA:n kysely esikoulu- ja ala-asteikäisten matkapuhelinten käytöstä

Näkyvyys nousuun hakukoneoptimoinnilla

PLA Mobiiliohjelmointi. Mika Saari

First Card mobiilisovellus

hakukoneoptimointiin

Comet pysäköintimittarin asennus ja kytkeminen tietokoneeseesi (Windows XP) USB-kaapelilla.

NFC ja QR tunnisteilla helposti palveluihin ja sisältöön. Jukka Suikkanen

Android ohjelmointi. Mobiiliohjelmointi 2-3T5245

Wiki korvaa intranetin. Olli Aro

Kustannusosakeyhtiö Otava 2

Lumon tuotekirjaston asennusohje. Asennus- ja rekisteröintiohje

Ristijärven metsästysseura tysseura osti lisenssin jahtipaikat.fi verkkopalveluun, jotta seuran

Yhdistä kahviautomaattisi tulevaisuuteen.

Verkkolöydettävyys lisäsi asiakkaita CASE HS-Works

Nettikalenterin tilausohjeet

KYSELYTUTKIMUS: Yritysten verkkopalvelut sekä hankaluudet niiden hankinnassa ja määrittelyssä

Windowsin kehitysvaiheet CT50A2602 Käyttöjärjestelmät

Mobiilimarkkinoinnin hyödyntäminen liiketoiminnassa

Hakukone digitaalisen mainonnan työkaluna

Salusfin Mobiilisovellus Käyttöohje

Seuraavat kysymykset koskevat erilaisia tekijöitä, jotka liittyvät digitaaliseen mediaan ja digitaalisiin laitteisiin kuten pöytätietokoneet,

PIKAOPAS NOKIA PC SUITE 4.3. Nokia puhelimelle. Copyright Nokia Mobile Phones Kaikki oikeudet pidätetään Issue 6

Verkkosivut ja hakukoneoptimointi. Julkinen yhteenveto Jaakko Suojasen esityksestä

PIKAOPAS MODEM SETUP FOR NOKIA Copyright Nokia Oyj Kaikki oikeudet pidätetään.

Nebula Kotisivutyökalu Käyttöohje - Kauppamoduuli. 1. Kaupan asetukset... 2

TIETOTURVAOHJE ANDROID-LAITTEILLE

Veistämö Knaapi. Projektidokumentaatio

Toiminnallisen määrittelyn tarina. Esimerkki Reaktorin tavasta tehdä toiminnallista määrittelyä.

Yhdistä kodinkoneesi tulevaisuuteen.

Android ja Windows ovat

DIGITALISAATIO JA TEKOÄLY

Kesäseminaari Jani Heikkilä Metsä mukaasi Kantoon sovelluksella

Miksi viedä vuosikertomus verkkoon?

Tutustu REMUC:illa ohjattavan laitteen käyttö-, huolto- ja turvaohjeisiin

NFC ja QR tunnisteilla helposti palveluihin ja sisältöön. Jukka Suikkanen

Mobiilimaailma murroksessa 2011 Tommi Teräsvirta, Tieturi

Mobiili Dokumentointi Tehoa työpäivään Pirkka Paronen Toimitusjohtaja Systems Garden Oy

Transkriptio:

TEEMU MALINEN Responsiivinen suunnittelu Varmista, että verkkopalvelusi toimii myös mobiilisti Piiputtaako palvelusi käyttö tabletilla? Sivuttaako kännykkäkansa verkkokauppasi? Verottaako mobiiliyhteensopimattomuus kukkaroasi?

Sofokus Vikkelä sähköisen liiketoiminnan ammattilainen Teemu Malinen Teemu on Sofokus Oy:n perustaja ja toimitusjohtaja. Teemu on erikoistunut ratkaisemaan organisaatioiden liiketoimintaongelmia verkkopalveluiden avustuksella. Teemu on moniyrittäjä ja osallistuu aktiivisesti useamman IT-yrityksen kehittämiseen ja vapaaehtoistehtäviin mm. Varsinais-Suomen IT yrittäjät ry:ssä. Sofokus Sofokus on liiketoimintaa edistäviin verkkosovelluksiin erikoistunut ohjelmistotalo, joka haluaa asiakkaansa menestyvän. Takuulla. Palvelemme yrityksiä, oppilaitoksia, virastoja ja julkishallintoa. Yritys on perustettu 2000, yksityisomistuksessa ja kuuluu Soliditetin parhaaseen AAA-luottoluokkaan. Copyright 2013 Sofokus Oy Teksti: Teemu Malinen / Sofokus Oy Ulkoasu ja taitto: Aleksandra Forslund / Leimahdus Oy Kuvitukset: Eppu Vainonen / Leimahdus Oy

Sisällysluettelo Alkusanat 4 Responsiivinen suunnittelu tähtää toimivuuteen kaikissa laitteissa 5 Suomessa on huutava tarve responsiivisille verkkopalveluille 6 Responsiivisuuden vaihtoehdot 8 Erillinen mobiilisivusto 8 Mobiilisovellus on kuningas vai onko? 9 Esimerkkejä responsiivisten verkkopalveluiden toteutuksesta 10 Snoobin responsiiviset verkkosivut 11 Skinny Ties on responsiivinen verkkokauppa 11 Keikkatori on toistaiseksi harvinainen responsiivinen verkkosovellus 12 Responsiivinen suunnittelu on pienempi investointi kuin menetetyt asiakkaat 13 Uuden verkkopalvelun toteuttaminen 13 Vanhan verkkopalvelun päivittäminen 14 Loppusanat 14 Lähdeluettelo 15

4 Alkusanat Case O Neill: Mobiilikäyttäjien kulutus kasvoi moninkertaiseksi. [1] Olet varmaan huomannut ilmiön. 3-vuotias ihmisen alku, joka rakastaa ipadillä leikkimistä. Yli 50 % todennäköisyydellä taskussasi on älypuhelin, jolla pääsee sujuvasti nettiin. [2] Mikäli ostit älypuhelimesi vuoden 2011 aikana, olit omalta osaltasi edistämässä historiallista murrosta. Nimittäin tuolloin äly puhelimia myytiin ensimmäistä kertaa enemmän kuin tietokoneita. [3] Voidaan siis sanoa, että internetin seuraava merkittävä murros sosiaalisen median jälkeen on alkanut. On arvioitu, että mobiililaitteiden nettiselailu ohittaa tänä vuonna PC-surffailun. Valtaosaa verkkopalveluista ei ole kuitenkaan optimoitu mobiilikäyttöön. Syitä tähän on monia, mutta asian lakaiseminen maton alle on taatusti huono ratkaisu. Jos sinulla on verkkopalvelu, lukuisat ihmiset ovat jo vierailleet mobiilisti sivuillasi. Riskinä on, että verkkosivujesi huono käyttökokemus mobiilissa vahingoittaa brändiäsi ja turhauttaa potentiaalisia asiakkaitasi. Verkkokauppasi saattaa myös menettää silkkaa rahaa, kun mobiiliostaminen ei onnistukaan. Maailmalla on nykyään tuhansia erilaisia laitteita vaihtelevilla näyttölaitteilla ja ominaisuuksilla. Miten yrityksesi on mahdollista pysyä vaivattomasti kehityksen mukana ja tarjota sujuva mobiilikäyttökokemus jokaiselle eri näyttökoon omaavalle laitteelle? Lyhyesti: ota avuksesi responsiivinen suunnittelu. Turussa 2.7.2013 Teemu Malinen Verkkopalveluguru RESPONSIIVINEN SUUNNITTELU ALKUSANAT

Responsiivinen suunnittelu tähtää toimivuuteen kaikissa laitteissa 5 Responsiivisessa suunnittelussa verkkopalvelu mukautetaan eri päätelaitteita varten niin, että käyttäjien käyttökokemus olisi jokaisella laitteella mahdollisimman hyvä. [4] Terminä responsiivinen suunnittelu ei kuitenkaan vielä ole vakiintunut Suomessa, joten siitä saattaa myös kuulla puhuttavan nimellä mukautuva verkkosuunnittelu tai mukautuva suunnittelu. Yksinkertaistettuna responsiivinen suunnittelu tarkoittaa nykyaikaista tapaa toteuttaa verkkopalvelu siten, että muutkin kuin perinteisellä pöytätietokoneella surffailevat voivat käyttää palvelua sujuvasti. Verkkopalvelun mukauttaminen eri päätelaitteelle on erittäin tärkeää, koska kuluttajilla on todennäköisesti eri tarpeet pöytäkonetta käytettäessä kuin älykännykkää käytettäessä. Kännykällä ei esimerkiksi välttämättä haluta selailla sivuston sisältöä, vaan etsitään jotakin tiettyä yksityiskohtaisempaa tietoa, kuten vastausta polttavaan kysymykseen kuten aukioloaikoihin tai liikkeen yhteystietoihin. [5] Pöytäkonetta taas käytetään älypuhelinta enemmän yleiseen nettisurffailuun ja sisällön selailuun. Kun verkkopalvelusi tarjoaa helposti ja nopeasti haluttua tietoa, on käyttäjien konvertoituminen asiakkaiksi paljon todennäköisempää. [6] Case Maxatec: Konversioaste kasvoi 12 %. [1] Ò Tätä on nykypäivän netti RESPONSIIVINEN SUUNNITTELU RESPONSIIVINEN SUUNNITTELU TÄHTÄÄ TOIMIVUUTEEN KAIKISSA LAITTEISSA

6 Erikokoisille näytöille räätälöidyistä sivustoista halutaan yksinkertaisempia, jotta tieto olisi helpommin löydettävissä. Tämän vuoksi responsiivisessa suunnittelussa on suosittua käyttää mobile first -ajattelumallia, jossa sivusto suunnitellaan ensin mobiililaitteelle sopivaksi. Tämän jälkeen sitä voidaan laajentaa lisätoiminnallisuuksilla esimerkiksi tabletti- tai työpöytänäkymiin. [7] Tämä auttaa ymmärtämään, mikä tieto on kuluttajille tärkeää ja mitä tietoa verkkosivustolla halutaan oikeasti esittää, kun menetetään 80 % esityspinta-alasta. [8] Tämän ajattelumallin tulos ovatkin usein yksinkertaisemmat sivustot, joilta tieto löytyy helpommin. Montako kertaa asiakkaasi on ottanut sinuun yhteyttä ja valittanut verkkosivustosi olevan liian helppokäyttöinen? Mobile first -ajattelu pakottaa keskittymään olennaiseen. Suomessa on huutava tarve responsiivisille verkkopalveluille Maailmaan syntyy noin 371 000 lasta päivittäin. Joka päivä myydään keskimäärin 378 000 iphonea. [9] Sattumaa? Ehkä, mutta sitä faktaa ei voida kiistää, että todellinen mobiiliaikakausi on vasta tuloillaan. Pelkästään Suomessa myytiin vuoden 2012 tammi-syyskuun aikana peräti 1,1 miljoonaa älypuhelinta. [10] Pelkät älypuhelimet eivät kuitenkaan enää riitä meille. Jopa yli puoli miljoonaa tablettiakin on löytänyt tiensä härmäläisiin koteihin. [11] 23 % suomalaisista on käyttänyt matkapuhelintaan tuotteen tai palvelun ostamiseen. [12] Ò Mobile first ajattelumalli, jossa sivusto suunnitellaan ensin mobiililaitteelle sopivaksi RESPONSIIVINEN SUUNNITTELU RESPONSIIVINEN SUUNNITTELU TÄHTÄÄ TOIMIVUUTEEN KAIKISSA LAITTEISSA

7 Edellä mainitut luvut puhuvat puolestaan. Mobiili on vallannut Suomen. On siis huutava pula rakentaa verkkopalveluita, jotka mukautuvat valtavaan päätelaitekirjoon. Responsiivisen suunnittelu ratkaisee juuri tämän haasteen paremmin kuin mikään muu aiemmin käytetty toteutusmalli. Jos kuitenkin epäilet responsiivisen suunnittelun rokkaavuutta, tässä muutama merkittävä hyöty: 1. Säästöt. Yksi käyttöliittymä kaikkeen käyttöön madaltaa kehitys- ja ylläpitokuluja. 2. Lisää myyntiä ja parempi konversio. Kun verkkosivustosi on johdonmukainen jokaisella laitteella, asiakas tottuu palveluusi ja löytää helpommin haluamansa. 4. Parempi hakukonenäkyvyys. Erillinen mobiilisivusto hajottaa hakukonenäkyvyytesi kahteen sivustoon. Keskittämällä korjaat potin. Muun muassa Google suosittelee responsiivista toteutustapaa [13]. 5. Analytiikan helpompi tulkinta. Kävijän liikkeitä on helpompi seurata yhden palvelun sisällä kuin monen eri palvelun välillä. [13] [6] Nyt kun responsiivisuutta on tullut käsiteltyä jonkin verran, on hyvä muistuttaa, että se ei ole kuitenkaan ainoa tapa rakentaa mobiiliyhteensopivuus verkkopalvelulle. Case Think Tank Photo: Mobiili- ja tablettikäyttäjien maksutapahtumat lisääntyivät yli 96 %. [1] 3. Kaikki mobiililaitteet toimivat. Verkkopalvelun selailu onnistuu kaikilla laitteilla vähintään auttavasti, vaikka sitä ei ole erityisesti kyseessä olevalle laitteelle optimoitu. RESPONSIIVINEN SUUNNITTELU RESPONSIIVINEN SUUNNITTELU TÄHTÄÄ TOIMIVUUTEEN KAIKISSA LAITTEISSA

8 Responsiivisuuden vaihtoehdot Mobiiliyhteensopivuuden toteuttamiseen on perinteisesti käytetty kahta erilaista tapaa: erillinen mobiilisivusto tai natiivi kännykkäsovellus. Seuraavassa käyn läpi nämä tavat sekä niiden plussat ja miinukset tiiviisti. Erillinen mobiilisivusto Mobiilisivusto on erillinen, yleensä rankasti riisuttu versio täydestä työpöytäkäyttöön suunnitellusta käyttöliittymästä, joka on optimoitu toimimaan sujuvammin pienellä ruudulla. Tällöin yrityksellä on ylläpidettävänään kaksi erillistä käyttöliittymää verkkopalvelustaan (normaalija mobiiliversio). Mobiiliversioon valitaan vain tärkeimmät toiminnot ja nappeihin osuu kosketusnäytölläkin. Mobiilisivustot ovat yleensä helposti tunnistettavissa m.palvelu.fi -muotoisesta verkko-osoitteesta. Erillinen mobiilisivusto on toteutustapa, jonka mahdollista käyttöönottoa kannattaa harkita todella tarkkaan. Responsiivinen toteutus on todennäköisesti parempi toteutustapa, joten erillisten mobiilisivustojen käyttö todennäköisesti vähenee jatkossa. Arvelen näin, koska kahden palvelun ylläpito on kalliimpaa ja erillinen mobiilisivu ei lopulta sovi hyvin kuin alun perin suunnitellulle ruutukoolle. Esimerkiksi tabletilla mobiilisivusto näyttää yleensä hieman hassulta. Alla olevassa kuvassa oleva Finnkino on mallikas esimerkki siitä, miltä verkkopalvelu näyttää tietokoneen näytöllä ja erillisellä mobiilisivustolla. Ò Finnkinolla on erillinen mobiilisivusto RESPONSIIVINEN SUUNNITTELU RESPONSIIVISUUDEN VAIHTOEHDOT

Plussat: Mahdollisuus rakentaa kaksi hyvin erilaista, sujuvaa käyttäjäkokemusta Miinukset: Kaksi erillistä käyttöliittymää ylläpidettävänä Hakukonenäkyvyys hajoaa kahdelle sivustolle Mobiilisivusto ei mukaudu erilaisiin päätelaitteisiin automaattisesti, vaan vaatii yleensä teknisiä muutoksia Esimerkiksi Sofokuksen verkkosivuja on selailtu tilastojen mukaan muutaman kuukauden aikana 66 erilaisella mobiili- ja tablettilaitteella. Tiedätkö millaisilla mobiililaitteilla sinun verkkopalveluasi käytetään? 9 Mobiilisovellus on kuningas vai onko? Mobiili- tai tablettisovelluksen tekeminen on äkkiseltään ajatellen optimaalinen ratkaisu. Onhan vaikkapa huolellisesti tehdyn iphonesovelluksen käyttökokemus ja -nopeus yleensä vertaansa vailla. Esimerkkinä loistavasta mobiilisovelluksesta on Nordean iphone-pankkisovellus. Kun sitä on hetken käyttänyt, niin tajuaa kuinka vapauttavaa (perus)pankkiasiointi voi parhaimmillaan olla. Mobiilisovelluksia on itse asiassa muutamaa eri tyyppiä toteutustavasta riippuen. Natiivi mobiilisovellus viittaa ohjelmaan, joka on toteutettu suoraan tietylle ekosysteemille, kuten Applen ios:lle. Toinen vaihtoehto on tehdä JavaScript-pohjainen verkkosovellus, joka ikään kuin matkii natiivia sovellusta. Jälkimmäiseen viitataan usein myös HTML5-mobiilisovelluksena. Ongelmaksi muodostuu usein tuettavien päätelaitteiden määrä. Ihan jokaiselle laitteelle ei tarvitse tehdä omaa sovellusta, mutta laitteiden määrä on kuitenkin suuri ja se elää jatkuvasti. Lienee myös turvallista veikata, että päätelaitekirjo ei ole ainakaan vähenemään päin. Mobiilisovelluksilla on kaikesta huolimatta valoisat näkymät ja niiden määrä tulee kasvamaan edelleen. Niillä on oma paikkansa ja ne ovat toistaiseksi lyömättömiä määrättyihin tarpeisiin. Plussat: Mahdollisuus erinomaiseen käyttäjäkokemukseen Asennuksen jälkeen sovellus on nopea käynnistää ja käyttää Mahdollisuus hyödyntää laitteen sisäisiä sensoreita (esim. GPS tai kamera) Miinukset: Jokainen ekosysteemi (esim. Apple, Android, Windows) vaatii oman sovelluksensa Kallista, koska vaatii oman erillisen sovelluksen kehittämistä ja ylläpitämistä Käyttö vaatii, että käyttäjä löytää sovelluksen sekä lataa ja asentaa sen laitteelleen Jakelukanava ottaa provision maksullisten sovelluksien latauksista Ei kasvata hakukonenäkyvyyttä yhtä tehokkaasti kuin responsiivisesti suunnitteltu sivusto [14] RESPONSIIVINEN SUUNNITTELU RESPONSIIVISUUDEN VAIHTOEHDOT

10 Esimerkkejä responsiivisten verkkopalveluiden toteutuksesta Case Time Magazine: Uusien/yksilöityjen kävijöiden lukumäärä kasvoi 15 %. [1] Kuten jo aikaisemmin kävimme läpi, responsiivinen suunnittelu poistaa usein tarpeen toteuttaa erillisiä mobiilisovelluksia tai -sivustoja. Seuraavaksi esittelen kolme erilaisista lähtökohdista toteutettua responsiivista verkkopalvelua. Kaikki kolme esimerkkiä edustavat erilaisia verkkopalvelutyyppejä: verkkosivusto (koti sivut), verkkokauppa ja tiettyyn tarpeeseen räätälöity verkkosovellus. Tällä haluan korostaa, että responsiivinen suunnittelu on universaali tapa toteuttaa mitä tahansa verkkopalveluita tyypistä riippumatta. Esimerkkipalveluiden responsiivisuutta kannattaa itse käydä kokeilemassa. Testaaminen onnistuu helposti suurentamalla ja pienentämällä selainikkunaa. Näin huomaat konkreettisesti miten jokainen sivusto muuttuu luontevasti ruudun koon mukaan. Tämä on myös helppo tapa testata, onko jokin sivusto responsiivinen vai ei. Ò Snoobin verkkosivuja voi käyttää kännylläkin sujuvasti RESPONSIIVINEN SUUNNITTELU ESIMERKKEJÄ RESPONSIIVISTEN VERKKOPALVELUIDEN TOTEUTUKSESTA

Snoobin responsiiviset verkkosivut Snoobi.fi on responsiivinen verkkosivusto (kotisivut), joka on toteutettu suoraan valmiin WordPress-julkaisujärjestelmän päälle. Tämä tarkoittaa, että verkkopalvelun pohjana oleva koneisto on valmis tuote, johon yksinkertaistaen vain syötetään haluttu sisältö ja sopiva ulkoasupohja. Responsiivisuuden kannalta on oleellista huomata, että kaikille suosituimmille sisällönhallintajärjestelmille on olemassa valmiita responsiivisia ulkoasupohjia, joita voi käyttää pohjana omissa toteutuksissaan. Uutta palvelua luotaessa responsiivisuus voi siis olla hyvinkin helppo nakki. Skinny Ties on responsiivinen verkkokauppa Erilaisia verkkopalvelutyyppejä on joskus vaikea erottaa toisistaan, mutta verkkokauppa on helpoimmasta päästä. Jokainen tunnistaa NetAnttilan paikaksi, josta voi ostaa. Verkkokaupan muuttaminen jälkikäteen responsiiviseksi saattaa olla erittäin työlästä riippuen käytetystä alustateknologiasta tai käyttöliittymän efektirikkaudesta. Malliesimerkki hyvin tehdystä responsiivisesta Magentopohjaisesta verkkokaupasta on Skinny Tiesin kravattiverkkokauppa. 11 Ò Skinny Ties on esimerkki responsiivisesta verkkokaupasta Responsiivisen suunnittelun seurauksena Skinny Tiesin liikevaihto kasvoi 42 %. [1] RESPONSIIVINEN SUUNNITTELU ESIMERKKEJÄ RESPONSIIVISTEN VERKKOPALVELUIDEN TOTEUTUKSESTA

12 Ò Keikkatori on responsiivinen verkkosovellus Keikkatori on toistaiseksi harvinainen responsiivinen verkkosovellus Keikkatori on responsiivinen verkkosovellus, joka on toteutettu Django-ohjelmistokehyksen päälle. Ohjelmistokehys mahdollistaa verkkopalvelun kehittämisen käytännössä vapaasti. Verkkosovelluksen ohjelmointi on näin ollen paljon haastavampaa puuhaa kuin esimerkiksi yrityksen kotisivujen teko. Vastaavasti myös responsiivisen käyttöliittymän toteutus pitää yleensä tehdä niin sanotusti käsin. Ohjelmoija laittaa visuaalisen ulkoasun käyttöliittymään ja muokkaa sen toimimaan responsiivisesti. Toisin kuin verkkokauppoihin tai verkkosivustoihin, verkkosovelluksiin ei todennäköisesti saa valmiiksi responsiivisia ulkosasupohjia. Vastaavasti, mikäli haluat muuttaa nykyisen verkkosovelluksesi ulkoasun responsiiviseksi, kannattaa kysyä asiaan perehtyneeltä ammattilaiselta mielipide toteutettavuudesta. RESPONSIIVINEN SUUNNITTELU ESIMERKKEJÄ RESPONSIIVISTEN VERKKOPALVELUIDEN TOTEUTUKSESTA

Responsiivinen suunnittelu on pienempi investointi kuin menetetyt asiakkaat 13 Responsiiviseen suunnitteluun vaadittavan investoinnin arviointi on tapauskohtaista. Varmaa on ainoastaan se, että responsiivinen suunnittelu maksaa enemmän kuin mobiilikäyttäjien unohtaminen. Toisaalta responsiivisuuden huomioimatta jättäminen on varmin tapa menettää tulevaisuudessa asiakkaita. Tietokone-lehti uutisoi 8.5.2013, että tablettien määrä on kasvanut 6 prosentista 16 prosenttiin ja älypuhelimien 44 prosentista 61 prosenttiin. [15] On vain ajan kysymys, milloin pelkästään työpöydällä sujuvasti surraava verkkopalvelu on auttamattomasti menneen talven lumia. Onkin ollut ilo huomata, että useat isot suomalaiset verkkopalvelut on päivitetty responsiiviseksi viimeisen kuuden kuukauden aikana. Vaikka hinnan arviointi on tapauskohtaista, muutamia yleisohjeita on mahdollista antaa. Uuden verkkopalvelun toteuttaminen Jos olet hankkimassa uutta verkkosivustoa, kannattaa pitää huoli, että siitä tehdään responsiivinen. Jos sekä graafikko että ohjelmoija osaavat hyvin responsiivista suunnittelua, perustason toteutus on nopea, kivuton eikä välttämättä lisää juuri kustannuksia. Puhutaan parhaimmillaan tunneista tai muutamista päivistä, maksimissaan yleensä viikosta tai parista. Kustannuksiin on helppo vaikuttaa sivusuunnittelun toteutuksella ja tuen rakentamisella. Kustannuksiin vaikuttavat mm. seuraavat seikat: Miten skaalautuminen toteutetaan isosta pieneen ruutukokoon? Elementit voi yksinkertaisesti latoa nopeasti päällekkäin tai sitten rakentaa mobiiliin kokonaan erilaisen käyttökokemuksen (vrt. esim. Skinny Ties). Kuinka monia dynaamisia toimintoja verkkopalvelun käyttöliittymä sisältää? Mitä yksinkertaisempi ulkoasu, sitä nopeampi toteutus. Miten ruutukoon suunnittelu suoritetaan? Kuinka monta ruutukokoa testataan toimivaksi ja miten käyttöliittymä käyttäytyy valittujen kokojen välissä? Responsiivisen suunnittelun ammattilainen osaa suositella projektiisi (ja kukkaroosi) sopivan tason mukautuvalle suunnittelulle. Responsiivisuudessa on erilaisia toteutustasoja. Näin ollen responsiivinen toteutus ei välttämättä tarkoita automaattisesti kallista toteutusta. RESPONSIIVINEN SUUNNITTELU RESPONSIIVINEN SUUNNITTELU ON PIENEMPI INVESTOINTI KUIN MENETETYT ASIAKKAAT

14 Vanhan verkkopalvelun päivittäminen Jos sinulla on jo verkkopalvelu, tilanne on toinen. Mitä suurimmalla todennäköisyydellä palvelusi käyttöliittymää ei ole suunniteltu skaalautumaan, joten on tuurista ja toimittajasi toteutustavoista kiinni, kuinka kallis operaatio on. Jos palvelusi on ikivanha ja se on rakennettu taulukoin, viisainta lienee rakentaa koko käyttöliittymä alusta. Jos taas ulkoasu on hyvin modulaarinen ja toteutettu nykyaikaisin tekniikoin, voi perustason responsiivisuuden saavuttaa muutaman päivän työllä. Jos verkkopalvelu sisältää paljon toimintaa ja on sovellusmainen, esimerkiksi web-erp tai varausjärjestelmä, voi responsiivinen suunnittelu olla iso urakka, jossa palvelusi käyttöliittymä joudutaan rakentamaan pitkälti uudelleen. Työ voi viedä viikkoja, jopa kuukausia. Toisaalta kun käyttöliittymän uusii fiksusti, saa mukana muitakin etuja. Kuolevan Flashin voi korjata JavaScript-pohjaisilla komponenteilla, toteutuksessa voi käyttää sivupohjamoottoreita ja niin edelleen. Verkkopalveluhan ei ole koskaan valmis, vaan vaatii kehittämistä. Tai ainakin sitä käyttäjät sinulta odottavat. Viisainta on kysyä ammattilaiselta miten oman verkkopalvelun päivittäminen responsiiviseksi kannattaisi tehdä. Loppusanat Tämän oppaan päätarkoituksena on antaa sinulle käsitys responsiivisen suunnittelun mahdollisuuksista ja haasteista. Jokaisen verkkopalvelujen kanssa tekemisissä olevan tahon olisi hyvä omaksua responsiivinen suunnittelu. Se on pian aivan yhtä yleistä kuin esimerkiksi rikkaat Web 2.0 käyttöliittymät ovat nykyisin. Lisäksi mobiilikäyttäjien kasvava joukko tulee vaatimaan palveluilta enemmän erilaisia laitteita käyttäessään. Jotenkin käyttökokemus on luotava, joten miksi et hyödyntäisi siihen erinomaisesti soveltuvaa responsiivista suunnittelua? Mobiiliyhteensopivuus olisi syytä olla osa jokaisen digitaalisessa ajassa elävän yrityksen strategiaa. RESPONSIIVINEN SUUNNITTELU RESPONSIIVINEN SUUNNITTELU ON PIENEMPI INVESTOINTI KUIN MENETETYT ASIAKKAAT

15 Lähdeluettelo [1] http://econsultancy.com/fi/blog/62260-five-brands-that-reaped-rewards-after-adopting-responsive-design [2] Idean, 06/2012. Mobile content services market in Finland 2011-2015. [3] http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011 [4] Marcotte, Ethan, 2011. Responsive Web Design. [5] http://www.suomi.fi/suomifi/tyohuone/laatua_verkkoon/laatukriteeristo/02_kriteerit/2_sisalto/2_03_sisalto_on_kattava/ [6] http://www.thebyte9.com/news/responsive-web-design-what-can-it-do-for-your-business [7] Väätäinen, Atte, 2012. Responsiivinen verkkosuunnittelu, opinnäytetyö. [8] http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ [9] Falkowski, Brendan, 04/2012. https://speakerdeck.com/player/4f9edef7590eda001f00cb90 [10] http://www.taloussanomat.fi/kauppa/2012/11/02/alypuhelinten-myynti-kasvanut-57-prosenttia/201241238/12 [11] http://www.taloustutkimus.fi/?x1538426=2631154 [12] http://www.digibusiness.fi/luokaton/mobiiliostaminen-kasvattaa-suosiotaan-kertoo-suuri-verkkokauppatutkimus/ [13] http://www.ericmobley.net/six-benefits-of-responsive-web-design-now-that-google-has-recommends-it-for-mobile/ [14] http://www.searchenginejournal.com/responsive-design-mobile-seo-best-practices-for-2013/58158/ [15] http://www.tietokone.fi/uutiset/tabletti_ja_alypuhelin_yha_useammalla_suomalaisella RESPONSIIVINEN SUUNNITTELU LÄHDELUETTELO

Sofokus Vikkelä sähköisen liiketoiminnan ammattilainen Tarvitseko apua mobiiliyhteensopivuuden luomisessa verkkopalveluusi? Ota meihin yhteyttä, niin tarjoamme veloituksetta näkemyksemme.