(ws11) lucijan blagonić: budućnost mobilnih stranica
TRANSCRIPT
![Page 1: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/1.jpg)
Budućnost mobilnih stranica
Web Strategija 11Lucijan Blagonić
![Page 2: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/2.jpg)
“A smartphone is a mobile phone that offers more advanced computing
ability and connectivity than a contemporary feature phone.”
en.wikipedia.org/wiki/Smartphone
![Page 3: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/3.jpg)
Broj pametnih telefona(prodani uređaji, u tisućama)
gartner.com/it/page.jsp?id=1434613 (09/2010)
2009 2010 2011 2014
172,374268,784
413,481
875,574
![Page 4: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/4.jpg)
Mobile vs. DesktopTrenutno stanje za Q1 2011.
Desktop
Mobile
95,51%
4,49%
gs.statcounter.com/#mobile_vs_desktop-ww-quarterly-201101-201101-bar
![Page 5: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/5.jpg)
Kontekst
Korisnika koristi svoj pametni telefontijekom cijelog dana.
89%
The Mobile Movement Study, Google/Ipsos OTX MediaCT, Apr 2011
![Page 6: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/6.jpg)
The Mobile Movement Study, Google/Ipsos OTX MediaCT, Apr 2011
77%81% 48%68%
![Page 7: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/7.jpg)
Mobilni internetU raznovrsnim situacijama.
![Page 8: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/8.jpg)
The Mobile Movement Study, Google/Ipsos OTX MediaCT, Apr 2011
39%40% 20%27%
48%59% 43%44%
17%20% 13%14%
![Page 9: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/9.jpg)
Što očekujemo?Novosti. Zabava. Informacija.
![Page 10: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/10.jpg)
InformacijaKoja utječe na našu odluku.
![Page 11: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/11.jpg)
Akcija
Korisnika poduzelo je akciju naosnovu rezultata pretraživanja.
9/10
The Mobile Movement Study, Google/Ipsos OTX MediaCT, Apr 2011
![Page 12: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/12.jpg)
Što pronalazimo?Loše korisničko iskustvo. Previše informacija. Flash.
![Page 13: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/13.jpg)
Desktop vs. MobilePostoje bitne razlike i...
![Page 14: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/14.jpg)
Ograničenja!Okruženje. Interakcija. Vrijeme.
Brzina. Ekran/rezolucija.
![Page 15: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/15.jpg)
OkruženjeDesktop
Zatvoreni prostorBolja koncentracija
MobileSvugdje + buka
![Page 16: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/16.jpg)
InterakcijaDesktop
Miš i tipkovnica,ponekad trackpad,
veća preciznost
MobileEkran osjetljiv na dodir,
ponekad tipkovnica,manja preciznost
![Page 17: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/17.jpg)
VrijemeDesktop
Više vremenaMobile
Manje vremena
![Page 18: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/18.jpg)
BrzinaDesktop
Širokopojasni internet,jak hardver
MobileMobilna mreža,slabiji hardver
![Page 19: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/19.jpg)
Ekran/rezolucijaDesktop
Više prostora, više sadržaja
MobileManje prostora,manje sadržaja
![Page 20: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/20.jpg)
TabletiKako se oni uklapaju?
![Page 21: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/21.jpg)
Dobar balansRezolucija. Hardver. Brzina.
Ekran osjetljiv na dodir.
![Page 22: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/22.jpg)
BudućnostU novim tehnologijama i
ekranima osjetljivim na dodir.
![Page 23: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/23.jpg)
Tehnologija.
![Page 24: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/24.jpg)
Mobilni BrowseriQ1 2009. do Q1 2011.
gs.statcounter.com/#mobile_browser-ww-quarterly-200901-201101
0%
6%
12%
18%
24%
30%
2009 Q1 2009 Q3 2010 Q1 2010 Q3 2011 Q1
OperaiPhoneNokiaBlackBerryAndroidiPod Touch
![Page 25: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/25.jpg)
HTML5Od 1 do 400
Verzija Broj bodova
Opera Mini
Android
Apple iPhone, iPod and iPad
Blackberry
Opera Mobile
6 35
2.3 182
iOS 4.3 206
6 233
11 234
html5test.com/results.html
![Page 26: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/26.jpg)
2022?
w3.org/TR/html5/ (working draft)
![Page 27: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/27.jpg)
Vizualni efektiKoristite CSS(3) efekte umjereno.
border-radius, text-shadow, box-shadow, gradient...
Fancy Effects
![Page 28: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/28.jpg)
FallbackIzgleda li stranica dobro i bez njih?
Fancy Effects
![Page 29: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/29.jpg)
WebKitOptimizirano.
![Page 30: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/30.jpg)
WebKitOptimizirano.
![Page 31: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/31.jpg)
OprezWebKit nije standard.
w3.org/TR/html5/ (working draft)
![Page 32: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/32.jpg)
Posebna stranicaI dalje je najčešća praksa.
![Page 33: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/33.jpg)
amazon.co.uk
![Page 34: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/34.jpg)
amazon.co.uk
![Page 35: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/35.jpg)
cnn.com
![Page 36: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/36.jpg)
imdb.com
![Page 37: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/37.jpg)
arstechnica.com
![Page 38: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/38.jpg)
facebook.com
![Page 39: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/39.jpg)
nytimes.com
![Page 40: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/40.jpg)
RaznovrsnostRazličite veličine ekrana
i različite rezolucije
320x240, 400x240, 480x320, 360x540, 640x480, 800x480,
960x640...
![Page 41: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/41.jpg)
AlternativaJedna stranica za sve!?
![Page 42: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/42.jpg)
CSS3Responsive Web Design.
mediaqueri.es
![Page 43: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/43.jpg)
informationarchitects.jp
![Page 44: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/44.jpg)
webdesignerwall.com
![Page 45: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/45.jpg)
awwapp.com
![Page 46: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/46.jpg)
Obrnuta psihologijaPrvo mobilna stranica, a onda ostalo.
![Page 47: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/47.jpg)
PrilagodbaArhitektura. Informacije.
Optimizacija. Web standardi.
![Page 48: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/48.jpg)
Magično rješenje™Nije primjenjivo svugdje.
![Page 49: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/49.jpg)
Ostali?Što je s “ostalim” mobitelima.
![Page 50: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/50.jpg)
Acer, Airis, Alcatel, Alfatel, Alltel, Amoi, Amoisonic, AnexTek, Arima, Asus, AT&T, au by KDDI, Audiovox, BenQ, BenQ-Siemens, Beyond,
Bird, BKK, BlackBerry, Capitel, Casio, CECT, Chess, Cingular, Compal, Coolpad, CyberBank, Dallab, Danger, Daxian, DBTEL, Dell, DoEasy, Dopod, Dragon, E-TEN, Emobile, Eurotel, Ezze, Fly, GHT, Gigabyte,
Google, Gradiente, Grundig, GSPDA, Haier, Hitachi, HP, HTC, Huawei, Hummer, i-mate, i-mobile, Innostream, INQ, Karbonn, Kejian, Konka, KPT, Krome, Kyocera, Lava, Lemon, Lenovo, LG, Lobster, Maxon,
Maxx, Micromax, Mio, Mitac, Mitsubishi, Motorola, MoviStar, MyPhone, NEC, Neonode, Nexian, Nokia, NTT DoCoMo, O2, Onda, Onida, Orange, Palm, Panasonic, Pantech, Pharos, Philips, Psion, Qtek,
Qwest, RoverPC, Sagem, Samsung, Sanyo, Sendo, Sharp, Siemens, SoftBank, Sonim, Sony, Sony Ericsson, Soutec, Spice, Sprint,
Swisscom, T-Mobile, Tapwave, Taxco, TCL, Tecno, Telit, Telson, Thuraya, Tianyu, Tiger, TMN, Toshiba, Uriver, Usha-Lexus, UTStarcom, Venera, Verizon, Vertu, Vitelcom, VKMobile, Vodafone, Voxtel, WeTab,
Willcom, Wonu, Xcute, Zen, ZTE
![Page 51: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/51.jpg)
Opera Mini & Mobile
operamini.com/mobile/download/devices/
![Page 52: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/52.jpg)
Trendovi
Rast broja korisnika pametnih telefona.Rast touchscreen uređaja.Mogućnosti u browserima.
Mobilne web aplikacije.
![Page 53: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/53.jpg)
PitanjaSmatrate li mobilno tržište
važnim za vaš posao?
![Page 54: (WS11) Lucijan Blagonić: Budućnost mobilnih stranica](https://reader035.vdocument.in/reader035/viewer/2022062320/55945faa1a28ab064e8b4669/html5/thumbnails/54.jpg)
Hvala!Lucijan Blagonić
Blagonic Brothers
@lucijanblagonic
blagonic.com