Your SlideShare is downloading. ×
0
mobile web                    & html5                  performance                  optimization June, 14, 2011   max firtm...
who am I?mobile+web developermobilexweb.com blogwpo passionate   @firt                       2
where?buenos aires ~ argentina     true lies                           tango scene          patagonia          soccer     ...
books        Image from my house                              4
5
good news!today ~ last day  save 50%  oreilly.com                         6
agenda         7
agenda   ‣ a little overview of mobile web   ‣ measuring and debugging   ‣ mobile html5   ‣ optimization areas   ‣ tango d...
facts        9
you are guilty!                  10
users hate you                 11
why?       12
13
mobile web         is slowPicture from Simon Howden freedigitalphotos.net!                                                ...
mobile web is slow because...   we are doing it wrong                                15
!"#$%&()   it’s complicated                      16
differences             17
differences    ‣ slower networks    ‣ higher latency    ‣ slower hardware    ‣ different browsing experience    ‣ different c...
differences             19
mobile browsers                  20
differences    There are browsers supporting 1, 2,    4, 6 parallel downloads                                          21
mobile browsers    ‣ too many    ‣ (some) too limited    ‣ (some) too innovative    ‣ (some) proxied    ‣ (most) without d...
MOBILE WEB USAGE!  !"#$%&()*+,         !"#$%&()*+,  !(-.#/,0()*+,       !(-.#/,0()*+,                         1*#%2$*, 1*#...
a quick, dirty list      ‣ Safari on iOS      ‣ Android Browser      ‣ Symbian Browser      ‣ webOS Browser      ‣ BlackBe...
a quick, dirty list (cont.)      ‣ NetFront      ‣ Myriad      ‣ Nokia Browser (Ovi)      ‣ Phantom      ‣ microB      ‣ O...
they are on tablets too!     ‣ Safari on iOS     ‣ Android Browser     ‣ webOS Browser     ‣ BlackBerry Browser     ‣ Oper...
and with different versions...                                27
and there’s more!                    28
pseudo-browsers                  29
pseudobrowsers    ‣ mostly on iOS and Android    ‣ uses the internal web control    ‣ have different behavior than the nati...
wait       we can do it!                       31
we need to forget    and learn                    32
forget about     ‣ pixels     ‣ static designs     ‣ desktop frameworks   (ok, not always)     ‣ always connected     ‣ un...
learn about    ‣ server-side detection    ‣ progressive enhancement    ‣ responsive design    ‣ best experience for each c...
speed        35
speed ~ perception                     36
measuring and debugging                          37
two browsers                with remote toolsOpera Mobile with DragonFlyBlackBerry Browser for PlayBook, for Smartphones 7...
and theothers?          39
emulators    ‣ different types    ‣ good for first testing    ‣ free, +150    ‣ www.mobilexweb.com/emulators    ‣ proxy: Cha...
real devices    ‣ proxys on wifi? charles, fiddler    ‣ proxys on the device: mobitest    ‣ hybrids / pseudobrowsers: mobite...
remote labs    ‣ deviceanywhere.com    ‣ perfectomobile.com    ‣ remote device access (nokia) - free    ‣ lab.dev (samsung...
2g, 3g, 4g‣ Remember to test it‣ Charles Proxy helps you withthrottling                                 43
html5        44
html5if the device is not html5-compatible‣ it’s fine...‣ it will work without those enhancements‣ even html5-compatible de...
html5 compatibility 2011   ‣ iOS 3.0+   ‣ android 2.0+   ‣ blackberry smartphones 5.0+   ‣ blackberry playbook 1.0+   ‣ we...
real world sample  (nothing personal)   united.com                       47
original iPhone results from blaze.io/mobile15-20 seconds to load (over WiFi!)   total 602Kb                              ...
original Android results from blaze.io/mobile4-8 seconds to load (over WiFi!)   total 442Kb                               ...
400 / 600Kb? Where are they?                               50
let’s start              51
1. be mobile               52
1. be mobile     ‣ don’t leave just a desktop website     ‣ use mobile meta tags & viewport     ‣ usability     ‣ use serv...
1. be mobile               54
2. don’t redirect                    55
2. don’t redirect      united.com > www.united.com > mobile.united.com                                                    ...
2. don’t redirect     ‣ deliver the mobile site directly     ‣ it’s seo-compatible     ‣ if too difficult: only one redirect...
3. be simple               58
3. be simple     ‣ simple, semantic DOM     ‣ complexity == wrong     ‣ remember, it’s mobile     ‣ use html5 rules and ta...
3. be simple                          </div>                        </div>                     </div>                   </...
3. be simple<div class="ktable kbasemargin kwt100"konywidgettype = "Ksegment">                                         61
3. be simple<bodyclass = "newBg">                  62
3. be simple<akonywidgettype = "Ksegment"href="#" eventname="segNewHomeevent_"rowid="0">                                  ...
3. be simple  Current XHTML:  • 18Kb  • 180 DOM elements  • 145 has class definition (!?)  • 80% has multiple class definiti...
3. be simple  Current CSS:  • 137Kb!  • 6700 lines  • 681 selectors                    65
3. be simple  <?xml version="1.0" encoding="UTF-8"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org...
3. be simple  Apply HTML5 semantic tips       ‣ doctype: <!DOCTYPE html>       ‣ no xml ns       ‣ no insane attributes <s...
3. be simple   <!DOCTYPE html>   <html>   <head>...</head>   <body>   <header>        <img src="index_archivos/inewh.png">...
3. be simple  Semantic HTML5  • 1.3Kb (7% of original size)  • 31 DOM elements (17% of original qty)  • NO class  • <1Kb C...
4. known wpo techniques                          70
4. known wpo techniques • gzip components • be friend of caching • stylesheets at the top • scripts to the bottom (maybe) ...
4. known wpo techniques <style type="text/css" media="screen"> @import "iphone/iphone.css"; </style>                      ...
4. known wpo techniques  check desktop-like wpo suggestions          Yslow!        Page Speed                             ...
5. resource != download                          74
5. resource != download  Reduce http requests       ‣ every request hurts       ‣ a lot...       ‣ more in the mobile spac...
6. images            76
6. images    ‣ only semantic images    ‣ no effects, no ornaments    ‣ use CSS 2.1, CSS 3 or nothing    ‣ compress images  ...
6. images            • 7 images on icons            • 2 images for logos            • 1 image for arrow            • 1 ima...
6. images  ‣ we have 2 semantic images: logos  ‣ remove background, icons & other images  ‣ don’t worry! we’ll try to prov...
6. images  for the background           a CSS3 gradient                       background: #1e5799;                       !...
6. images  CSS3 gradientes  http://www.colorzilla.com/gradient-editor/                                               81
6. images  for the cell background    ...a CSS3 gradient too                             82
6. logos & icons We can use CSS sprites    ‣ very good support on mobile    ‣ use a device library to detect    ‣ lot of f...
6. logos & icons We can use inline images (aka data URI)    ‣ very good support on mobile    ‣ use a device library to det...
6. logos & icons       We can use inline images (aka data URI)             data:<mime-type>;base64,<base64 data>data:image...
6. logos & icons inline images are just GREAT   ‣ new way to think about images   ‣ new way to transmit & store images   ‣...
6. logos & icons you can create them on the fly with html5   ‣ (check compatibility)   ‣ use with html5 canvas drawing API ...
6. other tips ‣   450 emoji characters on iOS                                        http://pukupi.com/post/1964         ...
6. other tips ‣ CSS3 multiple backgrounds ‣ CSS3 transformations ‣ CSS3 shadows, effects ‣ CSS3 rounded borders, border ima...
7. be ready asap                   90
7. be ready asap    ‣ defer most of your code after onload    ‣ defer content    ‣ don’t even parse frameworks    ‣ did yo...
7. defer, defer‣ great support for deferring content & code‣ if you have lot of content, use your ownloading‣ use a server...
7. don’t parse yet! ‣ parsing javascript takes time ‣ from 1ms to 100ms per 1Kb ‣ delays onload                           ...
7. don’t parse yet!‣ divide your code into modules by needs‣ comment all your code<script>/* ... */</script>‣ when needed,...
7. forget about frameworks    ‣ ok, not always    ‣ think it 100 times    ‣ do you really need it?    ‣ don’t use jQuery j...
7. forget about frameworks   ‣ W3C Selectors API w3.org/TR/selectors-api        document.querySelector!   ‣ create your ow...
7. forget about frameworks  our sample uses three uncompressed  javascript files:  framework: 60Kb  motionpack: 3Kb  calend...
7. remove address bar ‣ hack for some browsers ‣ scroll to 0, 1 after onload ‣ you need to have a min-height container of ...
8. application cache                       99
8. application cache    ‣ Defines an offline installation package       <html manifest=‘offline.appcache’>    ‣ Next time, it w...
9. offline storage                   101
9. offline storage   ‣ localStorage and SQL storage   ‣ localStorage easier and faster   ‣ store strings (2x faster than obj...
9. offline storage   ‣ we can mix it with cookies   ‣ resource storage library   ‣ we store some resources client-side   ‣ n...
9. offline storage    first load                     request (no cookies)                              response  browser     ...
9. offline storage    second load                  request (with cookies)                        response  browser          ...
10. internal is better                         106
10. internal is better     ‣ code and resources used only once must be     inlined in the HTML     ‣ no external css, no e...
11. touch, no click                      108
11. touch, no click    ‣ on touch devices, click delays between 300    and 500 ms before executing.    ‣ Too much!    ‣ Us...
12. ajax please!                   110
12. ajax please!    ‣ progressive enhancement    ‣ server-side framework    ‣ it’s seo-friendly too!    ‣ most devices sup...
12. ajax please!    ‣ onhashchange for history management    ‣ request only what needs to be changed    ‣ html > json > xm...
12. ajax please!                   server                            113
13. upgrading ajax                     114
13. more than ajax    html5 server-sent events     http://dev.w3.org/html5/eventsource/    var source = new EventSource(up...
13. more than ajax    html5 web sockets     http://dev.w3.org/html5/websockets/                                           ...
14. context & user decision                              117
forget aboutDECIDING FOR THE USER                        118
14. context & user decision   ‣ now, you decide the user experience based   on the device or based on... I don’t know.   ‣...
WRONG        120
14. context & user decision    ‣provide different experiences   ‣ YouTube resolution idea   ‣ SD/HD version   ‣ decide best...
how?       122
14. detecting connection  W3C Network Information API  ‣ it’s client-side  ‣ works on Android 2.2+  ‣ navigator.connection...
14. detecting connection  BlackBerry client-side API  ‣ works on BB smartphones 4.0+  ‣ blackberry.network==’Wi-Fi’       ...
14. detecting connection  Server-side detection  ‣ Symbian header x-nokia-musicshop-bearer  ‣ BlackBerry header via  ‣ Try...
14. detecting connection  iOS detection  ‣ No official way (there are some hacks)  ‣ If you are an iOS developer, go to   bu...
14. detecting pixel density   don’t download pixels that can not be seen   ‣ iPhone 3 vs iPhone 4   ‣ android   ‣ on WebKi...
14. html5 audio & video The standard only cares about codecs/formats ‣ You should care about connectivity ‣ iOS: Quicktime...
15. animations & timers                          129
15. animations & timers   Browsers animations or nothing   ‣ ok, it was a bit extreme...   ‣ don’t use javascript based an...
15. animations & timers   Timers   ‣ be careful   ‣ slugglish UI   ‣ >= 1s frequency   ‣ reduce DOM changes   ‣ change the...
15. animations & timers   html5 web workers   ‣ starting to appear on mobile   ‣ allow different threads on javascript   ‣ ...
16. mobilize               133
16. mobilize  ‣   speed is also about total time to do an action  ‣ reduce input, use html5 input types  ‣ use context and...
135
use good practices                     136
test, test & test                    137
you can reach a good experience                                  138
you can reach a good experience                      thank you!     firt.mobi   twitter: @firtwww.mobilexweb.com !"#$%&()*&+...
Upcoming SlideShare
Loading in...5
×

Mobile Web & HTML5 Performance Optimization

80,590

Published on

Presentation for my last workshop at Velocity 2011.

Mobile web is coming in 2011 with a strong wave; mobile devices are more powerful every year; mobile browsers are evolving even faster than desktop web browser; and tablets have mobile browsers rather tan desktop browsers. That is a good mix of new problems for WPO.

How to deal with mobile browsers?


How is WPO impacting on mobile web?

Published in: Technology
11 Comments
257 Likes
Statistics
Notes
No Downloads
Views
Total Views
80,590
On Slideshare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
3,543
Comments
11
Likes
257
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Web & HTML5 Performance Optimization"

  1. 1. mobile web & html5 performance optimization June, 14, 2011 max firtmanSanta Clara, CA @firt firt.mobi 1
  2. 2. who am I?mobile+web developermobilexweb.com blogwpo passionate @firt 2
  3. 3. where?buenos aires ~ argentina true lies tango scene patagonia soccer tango 3
  4. 4. books Image from my house 4
  5. 5. 5
  6. 6. good news!today ~ last day save 50% oreilly.com 6
  7. 7. agenda 7
  8. 8. agenda ‣ a little overview of mobile web ‣ measuring and debugging ‣ mobile html5 ‣ optimization areas ‣ tango dance 8
  9. 9. facts 9
  10. 10. you are guilty! 10
  11. 11. users hate you 11
  12. 12. why? 12
  13. 13. 13
  14. 14. mobile web is slowPicture from Simon Howden freedigitalphotos.net! 14
  15. 15. mobile web is slow because... we are doing it wrong 15
  16. 16. !"#$%&() it’s complicated 16
  17. 17. differences 17
  18. 18. differences ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different behaviours ‣ different possible networks 18
  19. 19. differences 19
  20. 20. mobile browsers 20
  21. 21. differences There are browsers supporting 1, 2, 4, 6 parallel downloads 21
  22. 22. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxied ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging tools 22
  23. 23. MOBILE WEB USAGE! !"#$%&()*+, !"#$%&()*+, !(-.#/,0()*+, !(-.#/,0()*+, 1*#%2$*, 1*#%2$*,0()*+, 0()*+,MARKET SHARE! 23
  24. 24. a quick, dirty list ‣ Safari on iOS ‣ Android Browser ‣ Symbian Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Bada Browser ‣ Firefox ‣ Internet Explorer 24
  25. 25. a quick, dirty list (cont.) ‣ NetFront ‣ Myriad ‣ Nokia Browser (Ovi) ‣ Phantom ‣ microB ‣ Opera Mobile ‣ Opera Mini ‣ Skyfire ‣ BOLT 25
  26. 26. they are on tablets too! ‣ Safari on iOS ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mini 26
  27. 27. and with different versions... 27
  28. 28. and there’s more! 28
  29. 29. pseudo-browsers 29
  30. 30. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have different behavior than the native! 30
  31. 31. wait we can do it! 31
  32. 32. we need to forget and learn 32
  33. 33. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power 33
  34. 34. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design ‣ best experience for each context ‣ the top-model approach 34
  35. 35. speed 35
  36. 36. speed ~ perception 36
  37. 37. measuring and debugging 37
  38. 38. two browsers with remote toolsOpera Mobile with DragonFlyBlackBerry Browser for PlayBook, for Smartphones 7.0 38
  39. 39. and theothers? 39
  40. 40. emulators ‣ different types ‣ good for first testing ‣ free, +150 ‣ www.mobilexweb.com/emulators ‣ proxy: Charles Proxy, Fiddler 40
  41. 41. real devices ‣ proxys on wifi? charles, fiddler ‣ proxys on the device: mobitest ‣ hybrids / pseudobrowsers: mobitest ‣ network sniffers: pcapperf ‣ server-side sniffers ‣ remote javascript tools: weinre, jdrop, mobileperf (p.ad.ag) 41
  42. 42. remote labs ‣ deviceanywhere.com ‣ perfectomobile.com ‣ remote device access (nokia) - free ‣ lab.dev (samsung) - free 42
  43. 43. 2g, 3g, 4g‣ Remember to test it‣ Charles Proxy helps you withthrottling 43
  44. 44. html5 44
  45. 45. html5if the device is not html5-compatible‣ it’s fine...‣ it will work without those enhancements‣ even html5-compatible devices don’t have the same compatibility level‣ don’t be fanatic, be multiplatform 45
  46. 46. html5 compatibility 2011 ‣ iOS 3.0+ ‣ android 2.0+ ‣ blackberry smartphones 5.0+ ‣ blackberry playbook 1.0+ ‣ webOS 1.4+ ‣ symbian anna+ ‣ bada 2.0 ‣ windows phone mango+ ‣ .... 46
  47. 47. real world sample (nothing personal) united.com 47
  48. 48. original iPhone results from blaze.io/mobile15-20 seconds to load (over WiFi!) total 602Kb 48
  49. 49. original Android results from blaze.io/mobile4-8 seconds to load (over WiFi!) total 442Kb 49
  50. 50. 400 / 600Kb? Where are they? 50
  51. 51. let’s start 51
  52. 52. 1. be mobile 52
  53. 53. 1. be mobile ‣ don’t leave just a desktop website ‣ use mobile meta tags & viewport ‣ usability ‣ use server-side detection ‣ right experience to each context 53
  54. 54. 1. be mobile 54
  55. 55. 2. don’t redirect 55
  56. 56. 2. don’t redirect united.com > www.united.com > mobile.united.com 56
  57. 57. 2. don’t redirect ‣ deliver the mobile site directly ‣ it’s seo-compatible ‣ if too difficult: only one redirect and cached 57
  58. 58. 3. be simple 58
  59. 59. 3. be simple ‣ simple, semantic DOM ‣ complexity == wrong ‣ remember, it’s mobile ‣ use html5 rules and tags 59
  60. 60. 3. be simple </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> 60
  61. 61. 3. be simple<div class="ktable kbasemargin kwt100"konywidgettype = "Ksegment"> 61
  62. 62. 3. be simple<bodyclass = "newBg"> 62
  63. 63. 3. be simple<akonywidgettype = "Ksegment"href="#" eventname="segNewHomeevent_"rowid="0"> 63
  64. 64. 3. be simple Current XHTML: • 18Kb • 180 DOM elements • 145 has class definition (!?) • 80% has multiple class definition 64
  65. 65. 3. be simple Current CSS: • 137Kb! • 6700 lines • 681 selectors 65
  66. 66. 3. be simple <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/><meta name="apple-touch-fullscreen" content="YES"/><meta http-equiv="Content- Type" content="text/html; charset=utf-8"/><script type="application/x-javascript" src="iphone/konyframework.js"></script><style type="text/css" media="screen">@import "iphone/konyiphone.css";</style><script type="application/x-javascript" src="iphone/ konycalendar.js"></script><script type="text/javascript" src="iphone/motionpack.js"></script><title>United Airlines</title></head><body class="newBg"><form class="newBg" id="frmNewHome" action="http://mobile.united.com/p" method="post" selected="true"><input name="formid" type="hidden" value="frmNewHome"/><input name="cacheid" type="hidden" value="1b76e288d-c637-4007-930d-b48a619e0bb2"/><input name="node" type="hidden" value="1"/><div class="ktable middleleftalign kmg0000 kwt100"><div class="middleleftalign kwt100 krow"><div class="middlecenteralign kwt100 kcell"><img src="http://mobile.united.com/iphone/images/inewh.png" alt=""class="kmg0000 kbasepadding "/></div></div></div><ul class="kmg0000 kbasepadding "><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="0"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/icin.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">Check-in</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></div></ div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="1"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ifstat.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">Flight status</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></ div></div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="2"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ires.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">My reservations</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></ div></div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="3"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ifavail.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">Flight availability</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></ div></div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="4"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/imps.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">Mileage Plus® summary</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></ div></div></div></div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="5"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ifnot.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">Flight notifications</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/ images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></div></div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="6"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/imore.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">More</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></div></div></div></div></div></div></div></div></div></a></li></ul><div class="ktable middleleftalign kmg2020 kwt100"><div class="middleleftalign kwt100 krow"><div class="middlecenteralign kwt98 kcell"><div class="kbasemargin ktable kwt100"><div class="middleleftalign kwt100 krow"><div class="middleleftalign kwt100 kcell"><div class="ktable middleleftalign kmg0303 kwt94"><div class="middleleftalign kwt100 krow"><div class="topleftalign kwt40 kcell"><a type="submit" id="link1921680154479258760" href="#" class="kwt100 kheight lnkwit kbasemargin kbasepadding " konywidgettype="Klink" event="yes">Full site</a></div><div class="toprightalign kwt60 kcell"><a type="submit" id="link1921680154479258763" href="#" class="kwt100 kheight lnkwit kbasemargin kbasepadding " konywidgettype="Klink" event="yes">Continental mobile</a></div></div></div></div></div></div></div><div class="lblnorm topleftalign kwt2 kcell"><label class="kwt100 kheight lblnorm kbasemargin kbasepadding "></label></div></div></div><div class="kwt100 ktable"><div class="kwt100 krow"><div class="middlecenteralign kwt100 kcell"><img src="http://mobile.united.com/iphone/images/istar.png" alt=""class="kmg0000 kbasepadding "/></div></div></div><div class="kbasepadding kmg0000 kwt100 ktable"><div class="kwt100 krow"><div class="lblsmallwite middlecenteralign kwt100 kcell"><label class="kwt100 kheight lblsmallwite kbasepadding ">©2011 United Airlines</label></div></div></div><div class="kbasepadding kmg0000 kwt100 ktable"><div class="kwt100 krow"><div class="lblsmallwite middlecenteralign kwt100 kcell"><label class="kwt100 kheight lblsmallwite kbasepadding ">Powered by Kony Solutions</ label></div></div></div></form></body></html> 66
  67. 67. 3. be simple Apply HTML5 semantic tips ‣ doctype: <!DOCTYPE html> ‣ no xml ns ‣ no insane attributes <script type?> ‣ no divitis: article, section, nav, ... ‣ no classitis: header, footer, ... 67
  68. 68. 3. be simple <!DOCTYPE html> <html> <head>...</head> <body> <header> <img src="index_archivos/inewh.png"> </header> <nav> <ul> <li><a href=checkin.html>Check in</a></li> <li><a href=flight.html>Flight status</a></li> <li><a href=reservations.html>My reservations</a></li> <li><a href=availability.html>Flight availability</a></li> <li><a href=milleage.html>Milleage Plus Summary</a></li> <li><a href=notifications.html>Flight Notifications</a></li> <li><a href=more.html>More</a></li> </ul> </nav> <footer> <a href=http://united.com id=lnkFull>Full site</a> <a href=http://continental.com id=lnkContinental>Continental mobile</a> <img src="index_archivos/istar.png"> <h5>©2011 United Airlines</h5> </footer> </body></html> 68
  69. 69. 3. be simple Semantic HTML5 • 1.3Kb (7% of original size) • 31 DOM elements (17% of original qty) • NO class • <1Kb CSS • Same design using CSS. • If CSS is not there, no design! 69
  70. 70. 4. known wpo techniques 70
  71. 71. 4. known wpo techniques • gzip components • be friend of caching • stylesheets at the top • scripts to the bottom (maybe) • scripts and styles external • reduce dns lookups • minify javascript and css 71
  72. 72. 4. known wpo techniques <style type="text/css" media="screen"> @import "iphone/iphone.css"; </style> 72
  73. 73. 4. known wpo techniques check desktop-like wpo suggestions Yslow! Page Speed 73
  74. 74. 5. resource != download 74
  75. 75. 5. resource != download Reduce http requests ‣ every request hurts ‣ a lot... ‣ more in the mobile space ‣ ideal: 1 only request initial load ‣ even no request! 75
  76. 76. 6. images 76
  77. 77. 6. images ‣ only semantic images ‣ no effects, no ornaments ‣ use CSS 2.1, CSS 3 or nothing ‣ compress images ‣ deliver the right image size for every device - context ‣ don’t think on image=file 77
  78. 78. 6. images • 7 images on icons • 2 images for logos • 1 image for arrow • 1 image for cell background • 1 background image... • ...350Kb and 854x854 pixels!! 78
  79. 79. 6. images ‣ we have 2 semantic images: logos ‣ remove background, icons & other images ‣ don’t worry! we’ll try to provide alternatives if the context helps 79
  80. 80. 6. images for the background a CSS3 gradient background: #1e5799; ! background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #7db9e8 100%); ! ! background: -webkit-gradient(linear, left top, left bottom, color-stop (0%,#1e5799), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); 80
  81. 81. 6. images CSS3 gradientes http://www.colorzilla.com/gradient-editor/ 81
  82. 82. 6. images for the cell background ...a CSS3 gradient too 82
  83. 83. 6. logos & icons We can use CSS sprites ‣ very good support on mobile ‣ use a device library to detect ‣ lot of free services: spriteme.org, css-sprit.es 83
  84. 84. 6. logos & icons We can use inline images (aka data URI) ‣ very good support on mobile ‣ use a device library to detect ‣ first, compress! ‣ lot of free online services ‣ just convert bytes into base64 ‣ easy to convert from server-side base64_encode() in PHP 84
  85. 85. 6. logos & icons We can use inline images (aka data URI) data:<mime-type>;base64,<base64 data>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMUAAAAiAgMAAACSF/VZAAAAA3NCSVQICAjb4U/gAAAACVBMVEX///////+ZmZlVZlogAAAAA3RSTlP//wDXyg1BAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAA9klEQVQ4je3TOw6DMAwGYMsT4hSMKKf0UTKinLJ+JEAeLmmnDo1aELQf+e0ESHMD8sBE8Ce/SQhThJD4dPBJviQ/8U0eQf/qEfDJ6pHgEsxkacnqEkkGOJgFfRJklq0nUIgd5KY+XTJrsNiT/SLrnUS5zKU0ZGmI1g1ol0QWrSbwjnAG+dRL+UAGTX4gmmJrCHkkl8+xNjQCmcSWVE1md81iy0u8kt0s1VLeVr+Q5JNmW8aTkEd0WxIXg0YO2925C0OyGlkKSZb19oqVw0m0DdsVjB8nEzNJNCahI/PvvnQK6ROCSnLQGaIASs9ng31Bls/JbrW8AJuDnJ+8sV3sAAAAAElFTkSuQmCC 85
  86. 86. 6. logos & icons inline images are just GREAT ‣ new way to think about images ‣ new way to transmit & store images ‣ they are just plain text ‣ can be used on HTML or CSS 86
  87. 87. 6. logos & icons you can create them on the fly with html5 ‣ (check compatibility) ‣ use with html5 canvas drawing API ‣ use toDataURL() method from canvas ‣ voilá! ‣ even useful for converting image real files into data uri client-side 87
  88. 88. 6. other tips ‣ 450 emoji characters on iOS  http://pukupi.com/post/1964 88
  89. 89. 6. other tips ‣ CSS3 multiple backgrounds ‣ CSS3 transformations ‣ CSS3 shadows, effects ‣ CSS3 rounded borders, border image ‣ SVG, inline SVG and canvas ‣ if not compatible, accept it! 89
  90. 90. 7. be ready asap 90
  91. 91. 7. be ready asap ‣ defer most of your code after onload ‣ defer content ‣ don’t even parse frameworks ‣ did you say frameworks? ‣ remove address bar onload 91
  92. 92. 7. defer, defer‣ great support for deferring content & code‣ if you have lot of content, use your ownloading‣ use a server-side detection 92
  93. 93. 7. don’t parse yet! ‣ parsing javascript takes time ‣ from 1ms to 100ms per 1Kb ‣ delays onload 93
  94. 94. 7. don’t parse yet!‣ divide your code into modules by needs‣ comment all your code<script>/* ... */</script>‣ when needed, remove comments and evaleval(stripOutCommentBlock(script.innerHTML));‣ created by Gmail Mobile team and Charles Jolley 94
  95. 95. 7. forget about frameworks ‣ ok, not always ‣ think it 100 times ‣ do you really need it? ‣ don’t use jQuery just for $(“”) ‣ jQuery can take up to 8s to parse on some phones 95
  96. 96. 7. forget about frameworks ‣ W3C Selectors API w3.org/TR/selectors-api document.querySelector! ‣ create your own mini-library ‣ use mini-frameworks: XUI, zepto.js, microjs ‣ jQuery Mobile is not a mini-framework! it’s a ui framework. ‣ if it’s not compatible, do you really need it? 96
  97. 97. 7. forget about frameworks our sample uses three uncompressed javascript files: framework: 60Kb motionpack: 3Kb calendar: 7Kb 97
  98. 98. 7. remove address bar ‣ hack for some browsers ‣ scroll to 0, 1 after onload ‣ you need to have a min-height container of the available height - device library ‣ window.scrollTo(0, 1); ‣ the user will be happy to start using your web inmediatly 98
  99. 99. 8. application cache 99
  100. 100. 8. application cache ‣ Defines an offline installation package <html manifest=‘offline.appcache’> ‣ Next time, it will be available inmediately (even without connection) ‣ Update process ‣ Make the HTML and some basic resources cached and manage your own cache with localStorage 100
  101. 101. 9. offline storage 101
  102. 102. 9. offline storage ‣ localStorage and SQL storage ‣ localStorage easier and faster ‣ store strings (2x faster than objects) ‣ what to store? ‣ images ‣ code ‣ styles ‣ html elements ‣ data 102
  103. 103. 9. offline storage ‣ we can mix it with cookies ‣ resource storage library ‣ we store some resources client-side ‣ next time, we don’t send them ‣ on mobile, up to 2Mb per domain is safe 103
  104. 104. 9. offline storage first load request (no cookies) response browser full html server inline images css styles stores resources in javascript code localStorage and create cookie 104
  105. 105. 9. offline storage second load request (with cookies) response browser server basic html basic javascript updated resources 105
  106. 106. 10. internal is better 106
  107. 107. 10. internal is better ‣ code and resources used only once must be inlined in the HTML ‣ no external css, no external javascript, no external images ‣ if you use it on different pages, then: ‣ external ‣ localStorage 107
  108. 108. 11. touch, no click 108
  109. 109. 11. touch, no click ‣ on touch devices, click delays between 300 and 500 ms before executing. ‣ Too much! ‣ Use touch events: ontouchend ‣ We can use progressive enhancement and change links behavior 109
  110. 110. 12. ajax please! 110
  111. 111. 12. ajax please! ‣ progressive enhancement ‣ server-side framework ‣ it’s seo-friendly too! ‣ most devices support XHR ‣ why don’t use it! ‣ it’s mobile-friendly! 111
  112. 112. 12. ajax please! ‣ onhashchange for history management ‣ request only what needs to be changed ‣ html > json > xml ‣ with json, JSON.parse is up to 2x faster than eval 112
  113. 113. 12. ajax please! server 113
  114. 114. 13. upgrading ajax 114
  115. 115. 13. more than ajax html5 server-sent events http://dev.w3.org/html5/eventsource/ var source = new EventSource(updates.cgi); source.onmessage = function (event) { alert(event.data); }; 115
  116. 116. 13. more than ajax html5 web sockets http://dev.w3.org/html5/websockets/ 116
  117. 117. 14. context & user decision 117
  118. 118. forget aboutDECIDING FOR THE USER 118
  119. 119. 14. context & user decision ‣ now, you decide the user experience based on the device or based on... I don’t know. ‣ if you have an iPhone or Android, this is the experience you want. ‣ if you have a feature phone, then this is what you need 119
  120. 120. WRONG 120
  121. 121. 14. context & user decision ‣provide different experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on context ‣ let the user change the decision 121
  122. 122. how? 122
  123. 123. 14. detecting connection W3C Network Information API ‣ it’s client-side ‣ works on Android 2.2+ ‣ navigator.connection.type ‣ can be WIFI, CELL_2G, CELL_3G, others if (navigator.connection.type==navigator.connection.WIFI) { } 123
  124. 124. 14. detecting connection BlackBerry client-side API ‣ works on BB smartphones 4.0+ ‣ blackberry.network==’Wi-Fi’ 124
  125. 125. 14. detecting connection Server-side detection ‣ Symbian header x-nokia-musicshop-bearer ‣ BlackBerry header via ‣ Trying to detect if it’s a carrier network ‣ Massive’s Operator Identification Platform (www.werwar.com) 125
  126. 126. 14. detecting connection iOS detection ‣ No official way (there are some hacks) ‣ If you are an iOS developer, go to bugrequest.apple.com and request this feature 126
  127. 127. 14. detecting pixel density don’t download pixels that can not be seen ‣ iPhone 3 vs iPhone 4 ‣ android ‣ on WebKit: window.devicePixelRatio ‣ can be used also in css3 media queries ‣ remember: let the user decide! 127
  128. 128. 14. html5 audio & video The standard only cares about codecs/formats ‣ You should care about connectivity ‣ iOS: Quicktime Reference Movies ‣ A reference movie decides different sources regarding the current bandwidth ‣ Doesn’t update dynamically ‣ Search for free MakeRefMovie tool 128
  129. 129. 15. animations & timers 129
  130. 130. 15. animations & timers Browsers animations or nothing ‣ ok, it was a bit extreme... ‣ don’t use javascript based animation ‣ use css3 transitions & animations ‣ they can be hardware-accelerated ‣ move & scale using css3 transforms 130
  131. 131. 15. animations & timers Timers ‣ be careful ‣ slugglish UI ‣ >= 1s frequency ‣ reduce DOM changes ‣ change the DOM once per cycle 131
  132. 132. 15. animations & timers html5 web workers ‣ starting to appear on mobile ‣ allow different threads on javascript ‣ we can do things without affecting ui rendering (too much) ‣ use it if they are available! 132
  133. 133. 16. mobilize 133
  134. 134. 16. mobilize ‣ speed is also about total time to do an action ‣ reduce input, use html5 input types ‣ use context and html5 to help the user reduce times ‣ use w3c geolocation api ‣ use localStorage for history and analytics 134
  135. 135. 135
  136. 136. use good practices 136
  137. 137. test, test & test 137
  138. 138. you can reach a good experience 138
  139. 139. you can reach a good experience thank you! firt.mobi twitter: @firtwww.mobilexweb.com !"#$%&()*&+,)*&-"."$/012+$+(34$) 139
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×