Mobiili ennen desktoppia!

Transkriptio

1 Liiketoiminta kehittyy, kehity sinäkin! Mobiili ennen desktoppia! Helsinki, Tampere, Turku, Tukholma, Göteborg Copyright Tieturi

2 Kysymys Pitääkö web-sivuston näyttää täsmälleen samalta kaikissa selaimissa? Vastaus on sivustolla: Copyright Tieturi 2

3 Yksi sivusto vai useampi sivusto? Copyright Tieturi 3

4 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 Opera Mini Copyright Tieturi 4

5 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 Webin käyttötottumukset ovat muuttumassa enää ei olla sidottuja desktop-laitteisiin mobiili on aina mukana mobiili tarjoaa erilaisen käyttökokemuksen Copyright Tieturi 5

6 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 Copyright Tieturi 6

7 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! Copyright Tieturi 7

8 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 Copyright Tieturi 8

9 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ö Copyright Tieturi 9

10 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 Copyright Tieturi 10

11 Web-sivun koodin optimointi Tiedostojen koon optimointi HTML optimointi CSS optimointi JavaScript optimointi Tiedostojen pakkaus Copyright Tieturi 11

12 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 Copyright Tieturi 12

13 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 Copyright Tieturi 13

14 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 Copyright Tieturi 14

15 Resoluutio Copyright Tieturi 15

16 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 Copyright Tieturi 16

17 Pikselit ovat eri kokoisia eri laitteissa Density Sama kuva on eri kokoinen eri laitteissa Copyright Tieturi 17

18 Hesari Copyright Tieturi 18

19 HeiaHeia Copyright Tieturi 19

20 Responsive design Uusi trendi käyttöliittymän toteuttamisessa on sopeuttaa se median/laitteen resoluution mukaan erilaiseksi CSS3 media query mahdollistaa resoluution haistelun screen and (device-width: 800px) { } Copyright Tieturi 20

21 Fluid grid ja skaalautuvat kuvat Käyttöliittymän osien mitat sekä kuvat toteutettuna siten, että ne muuntautuvat selainikkunan koon mukaan Copyright Tieturi 21

22 Less Framework Suomalainen CSS kirjasto Copyright Tieturi 22

23 Responsive design W3C Copyright Tieturi 23

24 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 Copyright Tieturi 24

25 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 Copyright Tieturi 25

26 Tietolähteitä Mobile Web Application Best Practices, W3C Mobile First Luke Wroblewski dotmobi Nokia Cross Browser Guidelines 6-9aa1-4ca9-b05c-c5d4ce7b447a/Cross- Browser_Guidelines.html Responsive Design Ethan Marcotte Copyright Tieturi 26

27 Tieturin web-kurssit Tieturin web-alueen kurssit Copyright Tieturi 27