Liiketoiminta kehittyy, kehity sinäkin! Mobiili ennen desktoppia! Helsinki, Tampere, Turku, Tukholma, Göteborg www.tieturi.fi Copyright Tieturi 10.1.2011 1
Kysymys Pitääkö web-sivuston näyttää täsmälleen samalta kaikissa selaimissa? Vastaus on sivustolla: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ 19.8.2010 Copyright Tieturi 2
Yksi sivusto vai useampi sivusto? 19.8.2010 Copyright Tieturi 3
Pelkkä desktop versio Webistä Mitä käy, jos on vain desktopille tehty web-sivusto? Hitaus Sisällön runsaus Sisällön katoaminen Palvelut saattavat riisua sisällön omavaltaisesti Google transcoder http://google.com/gwt/n?u=http:// Opera Mini http://www.opera.com/mobile/demo/ 10.1.2011 Copyright Tieturi 4
Miksi mobiili Web? Mobiililaitteet yleistyvät laptop mokkula / nettitikku puhelimet tablet laitteet Mobiili dataliikenne kasvaa mobiili -dataliikenne ohitti mobiili -ääniliikenteen määrän 12/2009 mobiililaajakaistasopimusten määrä kaksinkertaistuu 2011 http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly- 200912-201012 Webin käyttötottumukset ovat muuttumassa enää ei olla sidottuja desktop-laitteisiin mobiili on aina mukana mobiili tarjoaa erilaisen käyttökokemuksen 10.1.2011 Copyright Tieturi 5
Webin mobiilikäyttö eroaa desktopista Mobiiliwebin käyttäjä on usein kiireinen haluaa kuluttaa aikaa haluaa olla yhteydessä sosiaalisiin verkostoihinsa Mobiililaitteita on paljon erilaisia Puhelimet: Smart phone, Feature phone, Dumb phone Pelikonsolit Tabletit Laitteiden ja selaimien hajonta on paljon suurempaa kuin desktopissa 10.1.2011 Copyright Tieturi 6
Onko tässä järkeä? This site I best viewed with IPhone/IPod Mobile Safari Déjà vu? This site is best viewed with Internet Explorer or Netscape Navigator in 800 x 600 resolution Rakenna mieluummin standardien varaan kuin yksittäisille tuotteille, näin palvelet kaikkia! 10.1.2011 Copyright Tieturi 7
One Web One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using http://www.w3.org/tr/mobile-bp/#oneweb 10.1.2011 Copyright Tieturi 8
Web standardit Käyttöliittymän kolme tasoa: HTML, CSS, JavaScript progressiivinen parantaminen progressive enhancement armelias alentuminen merciful degradation JavaScript käyttäytyminen CSS ulkoasu HTML rakenne, sisältö 10.1.2011 Copyright Tieturi 9
Web sivun nopeus Mobiili datansiirto on yleensä hidasta verrattuna desktop / LAN WLAN, 3G vai jotain perinteisempää? hitaimmat mobiililaajakaistasopimukset max. 384 kbit/s hitaus vaikuttaa tietenkin olennaisesti käyttökokemukseen Kuinka hidas oma sivustoni on? Testaa itse mistä kiikastaa. Yslow Page Speed 10.1.2011 Copyright Tieturi 10
Web-sivun koodin optimointi Tiedostojen koon optimointi HTML optimointi CSS optimointi JavaScript optimointi Tiedostojen pakkaus 10.1.2011 Copyright Tieturi 11
Sisältömedian optimointi Tarjoa oikeita, päätelaitteen tukemia kuvaformaatteja Skaalaa kuvat serverillä Käytä kuvan koon määritystä HTML koodissa Käytä sprite-kuvia Optimoi kuvat metatiedot pois 10.1.2011 Copyright Tieturi 12
Minimoi verkkoliikenne Ei uudelleenohjauksia sivun koodissa, mieluummin palvelimelle konfiguroituja HTTP 301 jne. ohjauksia Ei automaattisia uudellenlatauksia Mahdollisimman vähän ulkoisia tiedostoja, jokainen vaatii HTTP pyynnön Hyödynnä välimuistia cacheta kaikki kuvat, CSS ja skriptit 10.1.2011 Copyright Tieturi 13
Vältä tunnettuja ongelmia Vältä hiireen pohjautuvaa toiminnallisuutta pop-up hover Älä luota laitteiden hardware painikkeisiin Vältä taulukoita käyttöliittymän ulkoasussa Vältä sisäkkäisiä taulukoita Ei HTML frameja Ei kuvakarttoja 10.1.2011 Copyright Tieturi 14
Resoluutio 10.1.2011 Copyright Tieturi 15
Mobiilikäyttöliittymä on pieni Se mikä deskopissa mahtuu on mahdoton infoähky mobiilissa Keskity olennaiseen Kaikki turha pois Mieti mitä erityistä mobiilikäyttäjä hakee sivuilta, käyttötilanne on usein erilainen kuin desktopissa 10.1.2011 Copyright Tieturi 16
Pikselit ovat eri kokoisia eri laitteissa Density Sama kuva on eri kokoinen eri laitteissa http://mobiforge.com/designing/story/effective-designmultiple-screen-sizes 10.1.2011 Copyright Tieturi 17
Hesari 10.1.2011 Copyright Tieturi 18
HeiaHeia 10.1.2011 Copyright Tieturi 19
Responsive design Uusi trendi käyttöliittymän toteuttamisessa on sopeuttaa se median/laitteen resoluution mukaan erilaiseksi CSS3 media query mahdollistaa resoluution haistelun http://www.w3.org/tr/css3-mediaqueries/ Esim. @media screen and (device-width: 800px) { } 10.1.2011 Copyright Tieturi 20
Fluid grid ja skaalautuvat kuvat Käyttöliittymän osien mitat sekä kuvat toteutettuna siten, että ne muuntautuvat selainikkunan koon mukaan. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html 10.1.2011 Copyright Tieturi 21
Less Framework http://lessframework.com/ Suomalainen CSS kirjasto 10.1.2011 Copyright Tieturi 22
Responsive design W3C 10.1.2011 Copyright Tieturi 23
Mobiilissa on erityispiirteitä Kosketusnäyttö Multi-Touch ja kosketuseleet Orientaatio pysty ja vaakatilan tunnistus Lokaatio GPS, WiFi, IP, Matkapuhelinverkon solut Audio Kuva & Video kamera Haptinen palaute ym. 10.1.2011 Copyright Tieturi 24
Loppusanat - Mobiili ensin! Suunnittelemalla mobiili ensin saavutetaan monia etuja Käyttöliittymässä keskitytään olennaiseen, käyttäjä löytää nopeasti tarvitsemansa Sivusto optimoidaan nopeaksi käyttää, käyttömukavuus paranee, datakustannukset pienenevät Mobiililaitteissa toteutetut uudet innovaatiot tulevat käyttöön, lokaatio, HTML5 Laajempi ja sitoutuneempi käyttäjäkunta 10.1.2011 Copyright Tieturi 25
Tietolähteitä Mobile Web Application Best Practices, http://www.w3.org/tr/mwabp/ W3C Mobile First http://www.lukew.com/ff/entry.asp?933 Luke Wroblewski dotmobi http://mtld.mobi/ Nokia Cross Browser Guidelines http://www.forum.nokia.com/info/sw.nokia.com/id/6ecc53c 6-9aa1-4ca9-b05c-c5d4ce7b447a/Cross- Browser_Guidelines.html Responsive Design http://www.alistapart.com/articles/responsive-web-design/ Ethan Marcotte 10.1.2011 Copyright Tieturi 26
Tieturin web-kurssit Tieturin web-alueen kurssit http://www.tieturi.fi/avoimetkurssit/koulutus.html?cat_id=117445451 10.1.2011 Copyright Tieturi 27