SlideShare une entreprise Scribd logo
1  sur  139
Télécharger pour lire hors ligne
mobile web
                    & html5
                  performance
                  optimization

 June, 14, 2011   max firtman
Santa Clara, CA
                       @firt
                     firt.mobi
                                 1
who am I?
mobile+web developer
mobilexweb.com blog
wpo passionate

   @firt

                       2
where?
buenos aires ~ argentina     true lies
                           tango scene
          patagonia
          soccer
          tango


                                         3
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 dance




                                       8
facts




        9
you are guilty!




                  10
users hate you




                 11
why?



       12
13
mobile web
         is slow




Picture from Simon Howden freedigitalphotos.net!
                                                   14
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 context

    ‣ different behaviours

    ‣ different possible networks



                                     18
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 documentation

    ‣ (most) without a name

    ‣ (most) without debugging tools



                                       22
MOBILE WEB USAGE!


  !"#$%&'()*+,         !"#$%&'()*+,


  !(-.#/,0'()*+,       !(-.#/,0'()*+,


                         1*#%2$*,
 1*#%2$*,0'()*+,
                         0'()*+,

MARKET SHARE!

                                        23
a quick, dirty list
      ‣ Safari on iOS
      ‣ Android Browser

      ‣ Symbian Browser

      ‣ webOS Browser

      ‣ BlackBerry Browser

      ‣ Bada Browser

      ‣ Firefox

      ‣ Internet Explorer

                             24
a quick, dirty list (cont.)
      ‣ NetFront
      ‣ Myriad

      ‣ Nokia Browser (Ovi)

      ‣ Phantom

      ‣ microB

      ‣ Opera Mobile

      ‣ Opera Mini

      ‣ Skyfire

      ‣ BOLT

                              25
they are on tablets too!
     ‣ Safari on iOS
     ‣ Android Browser

     ‣ webOS Browser

     ‣ BlackBerry Browser

     ‣ Opera Mini




                            26
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 native!




                                                30
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

     ‣ unlimited power




                                               33
learn about

    ‣ server-side detection
    ‣ progressive enhancement

    ‣ responsive design

    ‣ best experience for each context

    ‣ the top-model approach




                                         34
speed




        35
speed ~ perception




                     36
measuring and debugging



                          37
two browsers
                with remote tools

Opera Mobile with DragonFly

BlackBerry Browser for PlayBook, for Smartphones 7.0




                                                       38
and the
others?


          39
emulators

    ‣ different types
    ‣ good for first testing

    ‣ free, +150

    ‣ www.mobilexweb.com/emulators

    ‣ proxy: Charles Proxy, Fiddler




                                      40
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
remote labs

    ‣ deviceanywhere.com
    ‣ perfectomobile.com

    ‣ remote device access (nokia) - free

    ‣ lab.dev (samsung) - free




                                            42
2g, 3g, 4g

‣ Remember to test it
‣ Charles Proxy helps you with

throttling




                                 43
html5




        44
html5
if 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
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
real world sample

  (nothing personal)


   united.com

                       47
original iPhone results from blaze.io/mobile

15-20 seconds to load (over WiFi!)   total 602Kb




                                                   48
original Android results from blaze.io/mobile

4-8 seconds to load (over WiFi!)   total 442Kb




                                                 49
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 server-side detection

     ‣ right experience to each context




                                            53
1. be mobile




               54
2. don’t redirect




                    55
2. don’t redirect




      united.com > www.united.com > mobile.united.com
                                                        56
2. don’t redirect

     ‣ deliver the mobile site directly
     ‣ it’s seo-compatible

     ‣ if too difficult: only one redirect and

     cached




                                               57
3. be simple




               58
3. be simple

     ‣ simple, semantic DOM
     ‣ complexity == wrong

     ‣ remember, it’s mobile

     ‣ use html5 rules and tags




                                  59
3. be simple
                          </div>
                        </div>
                     </div>
                   </div>
                 </div>
              </div>
            </div>
          </div>
       </div>
     </div>
   </div>



                                   60
3. be simple


<div class="ktable kbasemargin kwt100"
konywidgettype = "Ksegment"
>




                                         61
3. be simple


<body
class = "newBg"
>




                  62
3. be simple


<a
konywidgettype = "Ksegment"
href="#" eventname="segNewHomeevent_"
rowid="0">




                                        63
3. be simple
  Current XHTML:
  • 18Kb
  • 180 DOM elements
  • 145 has class definition (!?)
  • 80% has multiple class definition


                                       64
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/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&#174; 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 ">&#169;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
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
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
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
4. known wpo techniques




                          70
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
4. known wpo techniques
 <style type="text/css" media="screen">
 @import "iphone/iphone.css";
 </style>




                                          72
4. known wpo techniques
  check desktop-like wpo suggestions




          Yslow!        Page Speed


                                       73
5. resource != download




                          74
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
6. images




            76
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
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
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
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
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 free services: spriteme.org, css-sprit.es




                                                         83
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
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//
wDXyg1BAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAA9k
lEQVQ4je3TOw6DMAwGYMsT4hSMKKf0UTKinLJ+JEAeLmmnDo1aELQf+e0ESHMD8sBE8Ce/SQhThJD4dPBJviQ/8U0eQf/
qEfDJ6pHgEsxkacnqEkkGOJgFfRJklq0nUIgd5KY+XTJrsNiT/SLrnUS5zKU0ZGmI1g1ol0QWrSbwjnAG+dRL
+UAGTX4gmmJrCHkkl8+xNjQCmcSWVE1md81iy0u8kt0s1VLeVr
+Q5JNmW8aTkEd0WxIXg0YO2925C0OyGlkKSZb19oqVw0m0DdsVjB8nEzNJNCahI/PvvnQK6ROCSnLQGaIASs9ng31Bls/JbrW8AJuDnJ
+8sV3sAAAAAElFTkSuQmCC




                                                                                                           85
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
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
6. other tips
 ‣   450 emoji characters on iOS

                    &#xe333;


                    http://pukupi.com/post/1964




                                                  88
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
7. be ready asap




                   90
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
7. defer, defer

‣ great support for deferring content & code
‣ if you have lot of content, use your own

loading
‣ use a server-side detection




                                               92
7. don’t parse yet!

 ‣ parsing javascript takes time
 ‣ from 1ms to 100ms per 1Kb

 ‣ delays onload




                                   93
7. don’t parse yet!
‣ divide your code into modules by needs
‣ comment all your code

<script>/* ... */</script>
‣ when needed, remove comments and eval
eval(stripOutCommentBlock(script.innerHTML));

‣   created by Gmail Mobile team and Charles Jolley


                                                      94
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
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
7. forget about frameworks
  our sample uses three uncompressed
  javascript files:

  framework: 60Kb
  motionpack: 3Kb
  calendar: 7Kb

                                       97
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
8. application cache




                       99
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
9. offline storage




                   101
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
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
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
9. offline storage
    second load

                  request (with cookies)

                        response
  browser                                               server
                                       basic html
                                     basic javascript
                                   updated resources




                                                                 105
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 external javascript, no

     external images
     ‣ if you use it on different pages, then:

        ‣ external

        ‣ localStorage


                                                     107
11. touch, no click




                      108
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
12. ajax please!




                   110
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
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
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('updates.cgi');
    source.onmessage = function (event) {
      alert(event.data);
    };


                                                   115
13. more than ajax
    html5 web sockets
     http://dev.w3.org/html5/websockets/




                                           116
14. context & user decision




                              117
forget about
DECIDING 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.
   ‣ 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
WRONG




        120
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
how?




       122
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
14. detecting connection
  BlackBerry client-side API
  ‣ works on BB smartphones 4.0+

  ‣ blackberry.network==’Wi-Fi’




                                   124
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
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
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
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
15. animations & timers




                          129
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
15. animations & timers
   Timers
   ‣ be careful

   ‣ slugglish UI

   ‣ >= 1s frequency

   ‣ reduce DOM changes

   ‣ change the DOM once per cycle



                                     131
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
16. mobilize




               133
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
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: @firt
www.mobilexweb.com
 !"#$%&'()*&+,)*&''-"."$/012+$+(34'$)
                                        139

Contenu connexe

Tendances

There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]Aaron Gustafson
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with IonicMorris Singer
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyonddynamis
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWebDave Bouwman
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductiondynamis
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portlanddmethvin
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIRBuilding Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIRfunkatron
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web AppsOperation Mobile
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016Chris Love
 

Tendances (20)

There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyond
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIRBuilding Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIR
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016
 

En vedette

CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley
 
2011 Mobile & Web technologies
2011 Mobile & Web technologies 2011 Mobile & Web technologies
2011 Mobile & Web technologies JungHyuk Kwon
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptSencha
 
Estetica tenologia, gastronomia y cirugia
Estetica tenologia, gastronomia y cirugiaEstetica tenologia, gastronomia y cirugia
Estetica tenologia, gastronomia y cirugiaalfredo estrada
 
Jornadas sobre Planificación Hidrológica 2000
Jornadas sobre Planificación Hidrológica 2000Jornadas sobre Planificación Hidrológica 2000
Jornadas sobre Planificación Hidrológica 2000Nueva Cultura del Agua
 
Cooler Bags Business Xinxinyu(Xiamen) Industrial Co., Ltd.
Cooler Bags Business   Xinxinyu(Xiamen) Industrial Co., Ltd.Cooler Bags Business   Xinxinyu(Xiamen) Industrial Co., Ltd.
Cooler Bags Business Xinxinyu(Xiamen) Industrial Co., Ltd.zrl07
 
TRANSPARENCY "THE FULL STORY"
TRANSPARENCY "THE FULL STORY"TRANSPARENCY "THE FULL STORY"
TRANSPARENCY "THE FULL STORY"Tim Kitchin
 
MPAK_Electric_Bus_Brochure_Small
MPAK_Electric_Bus_Brochure_SmallMPAK_Electric_Bus_Brochure_Small
MPAK_Electric_Bus_Brochure_Smalljason lanham
 
TITUS @ Security Summit Roma 2011 - Classificazione, Compliance, DLP
TITUS @ Security Summit Roma 2011 -  Classificazione, Compliance, DLPTITUS @ Security Summit Roma 2011 -  Classificazione, Compliance, DLP
TITUS @ Security Summit Roma 2011 - Classificazione, Compliance, DLPClever Consulting
 
CEO Keynote I Love APIs 2015: Chet Kapoor Apigee
CEO Keynote I Love APIs 2015: Chet Kapoor Apigee CEO Keynote I Love APIs 2015: Chet Kapoor Apigee
CEO Keynote I Love APIs 2015: Chet Kapoor Apigee Apigee | Google Cloud
 
Mecanismo de resistencia gram negativos
Mecanismo de resistencia gram negativosMecanismo de resistencia gram negativos
Mecanismo de resistencia gram negativosNataly Vanesa
 
Pantera negra
Pantera negraPantera negra
Pantera negraCarmeCL
 
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...Raj Lal
 
Teoría del sí mismo Carl Rogers
Teoría del sí mismo Carl RogersTeoría del sí mismo Carl Rogers
Teoría del sí mismo Carl Rogersfundación CIMA
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuBryan Rieger
 

En vedette (20)

CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
2011 Mobile & Web technologies
2011 Mobile & Web technologies 2011 Mobile & Web technologies
2011 Mobile & Web technologies
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
 
Estetica tenologia, gastronomia y cirugia
Estetica tenologia, gastronomia y cirugiaEstetica tenologia, gastronomia y cirugia
Estetica tenologia, gastronomia y cirugia
 
Jornadas sobre Planificación Hidrológica 2000
Jornadas sobre Planificación Hidrológica 2000Jornadas sobre Planificación Hidrológica 2000
Jornadas sobre Planificación Hidrológica 2000
 
Cooler Bags Business Xinxinyu(Xiamen) Industrial Co., Ltd.
Cooler Bags Business   Xinxinyu(Xiamen) Industrial Co., Ltd.Cooler Bags Business   Xinxinyu(Xiamen) Industrial Co., Ltd.
Cooler Bags Business Xinxinyu(Xiamen) Industrial Co., Ltd.
 
Dilataciones
DilatacionesDilataciones
Dilataciones
 
TRANSPARENCY "THE FULL STORY"
TRANSPARENCY "THE FULL STORY"TRANSPARENCY "THE FULL STORY"
TRANSPARENCY "THE FULL STORY"
 
MPAK_Electric_Bus_Brochure_Small
MPAK_Electric_Bus_Brochure_SmallMPAK_Electric_Bus_Brochure_Small
MPAK_Electric_Bus_Brochure_Small
 
Proyecto smart shopping
Proyecto smart shoppingProyecto smart shopping
Proyecto smart shopping
 
TITUS @ Security Summit Roma 2011 - Classificazione, Compliance, DLP
TITUS @ Security Summit Roma 2011 -  Classificazione, Compliance, DLPTITUS @ Security Summit Roma 2011 -  Classificazione, Compliance, DLP
TITUS @ Security Summit Roma 2011 - Classificazione, Compliance, DLP
 
MiSys Documentation
MiSys DocumentationMiSys Documentation
MiSys Documentation
 
CEO Keynote I Love APIs 2015: Chet Kapoor Apigee
CEO Keynote I Love APIs 2015: Chet Kapoor Apigee CEO Keynote I Love APIs 2015: Chet Kapoor Apigee
CEO Keynote I Love APIs 2015: Chet Kapoor Apigee
 
Nueva vida vol 1
Nueva vida vol  1Nueva vida vol  1
Nueva vida vol 1
 
Mecanismo de resistencia gram negativos
Mecanismo de resistencia gram negativosMecanismo de resistencia gram negativos
Mecanismo de resistencia gram negativos
 
Pantera negra
Pantera negraPantera negra
Pantera negra
 
Mision, vision
Mision, visionMision, vision
Mision, vision
 
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
 
Teoría del sí mismo Carl Rogers
Teoría del sí mismo Carl RogersTeoría del sí mismo Carl Rogers
Teoría del sí mismo Carl Rogers
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by Yiibu
 

Similaire à Mobile Web & HTML5 Performance Optimization

Mobile for PHP developers
Mobile for PHP developersMobile for PHP developers
Mobile for PHP developersIvo Jansch
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesJames D Bloom
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011davyjones
 
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltBuilding a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltEric Shepherd
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser worldPeter-Paul Koch
 
Maximiliano Firtman - Разработка приложений с помощью PhoneGap
Maximiliano Firtman - Разработка приложений с помощью PhoneGap Maximiliano Firtman - Разработка приложений с помощью PhoneGap
Maximiliano Firtman - Разработка приложений с помощью PhoneGap .toster
 
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...jward5519
 
Leverage web technology in a mobile world
Leverage web technology in a mobile worldLeverage web technology in a mobile world
Leverage web technology in a mobile worldDieter Blomme
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGapRaymond Camden
 
Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009Tom Deryckere
 
Optimizing content for the "mobile web"
Optimizing content for the "mobile web"Optimizing content for the "mobile web"
Optimizing content for the "mobile web"Chris Mills
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiencesBen Mantooth
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High PerformanceAmjad Rafique
 
Firefox OS Apps and Web APIs
Firefox OS Apps and Web APIsFirefox OS Apps and Web APIs
Firefox OS Apps and Web APIsJan Jongboom
 
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilPerformance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilFresh Tilled Soil
 
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5   moosecon - robert virkus - 2013-03-07Ugly truths about html5   moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07Enough Software
 

Similaire à Mobile Web & HTML5 Performance Optimization (20)

Mobile for PHP developers
Mobile for PHP developersMobile for PHP developers
Mobile for PHP developers
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltBuilding a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at Gilt
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
 
PhoneGap mobile development
PhoneGap mobile developmentPhoneGap mobile development
PhoneGap mobile development
 
Maximiliano Firtman - Разработка приложений с помощью PhoneGap
Maximiliano Firtman - Разработка приложений с помощью PhoneGap Maximiliano Firtman - Разработка приложений с помощью PhoneGap
Maximiliano Firtman - Разработка приложений с помощью PhoneGap
 
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Leverage web technology in a mobile world
Leverage web technology in a mobile worldLeverage web technology in a mobile world
Leverage web technology in a mobile world
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009Siruna session at Drupalcon Paris 2009
Siruna session at Drupalcon Paris 2009
 
Optimizing content for the "mobile web"
Optimizing content for the "mobile web"Optimizing content for the "mobile web"
Optimizing content for the "mobile web"
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Firefox OS Apps and Web APIs
Firefox OS Apps and Web APIsFirefox OS Apps and Web APIs
Firefox OS Apps and Web APIs
 
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilPerformance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled Soil
 
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5   moosecon - robert virkus - 2013-03-07Ugly truths about html5   moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
 

Plus de Maximiliano Firtman

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersMaximiliano Firtman
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Maximiliano Firtman
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsMaximiliano Firtman
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)Maximiliano Firtman
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Maximiliano Firtman
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoMaximiliano Firtman
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and PerformanceMaximiliano Firtman
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the WebMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Maximiliano Firtman
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesMaximiliano Firtman
 
Modeveast Keynote: "Mobile. Change is the only constant"
Modeveast Keynote: "Mobile. Change is the only constant"Modeveast Keynote: "Mobile. Change is the only constant"
Modeveast Keynote: "Mobile. Change is the only constant"Maximiliano Firtman
 

Plus de Maximiliano Firtman (20)

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020
 
The modern PWA Cheat Sheet
The modern PWA Cheat SheetThe modern PWA Cheat Sheet
The modern PWA Cheat Sheet
 
Hacking Web Performance 2019
Hacking Web Performance 2019Hacking Web Performance 2019
Hacking Web Performance 2019
 
Progressive Web Apps Keynote
Progressive Web Apps KeynoteProgressive Web Apps Keynote
Progressive Web Apps Keynote
 
Hacking Web Performance
Hacking Web PerformanceHacking Web Performance
Hacking Web Performance
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web Apps
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the Web
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Modeveast Keynote: "Mobile. Change is the only constant"
Modeveast Keynote: "Mobile. Change is the only constant"Modeveast Keynote: "Mobile. Change is the only constant"
Modeveast Keynote: "Mobile. Change is the only constant"
 

Dernier

Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 

Dernier (20)

Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 

Mobile Web & HTML5 Performance Optimization

  • 1. mobile web & html5 performance optimization June, 14, 2011 max firtman Santa Clara, CA @firt firt.mobi 1
  • 2. who am I? mobile+web developer mobilexweb.com blog wpo passionate @firt 2
  • 3. where? buenos aires ~ argentina true lies tango scene patagonia soccer tango 3
  • 4. books Image from my house 4
  • 5. 5
  • 6. good news! today ~ last day save 50% oreilly.com 6
  • 7. agenda 7
  • 8. agenda ‣ a little overview of mobile web ‣ measuring and debugging ‣ mobile html5 ‣ optimization areas ‣ tango dance 8
  • 9. facts 9
  • 12. why? 12
  • 13. 13
  • 14. mobile web is slow Picture from Simon Howden freedigitalphotos.net! 14
  • 15. mobile web is slow because... we are doing it wrong 15
  • 16. !"#$%&'() it’s complicated 16
  • 18. differences ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different behaviours ‣ different possible networks 18
  • 21. differences There are browsers supporting 1, 2, 4, 6 parallel downloads 21
  • 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. MOBILE WEB USAGE! !"#$%&'()*+, !"#$%&'()*+, !(-.#/,0'()*+, !(-.#/,0'()*+, 1*#%2$*, 1*#%2$*,0'()*+, 0'()*+, MARKET SHARE! 23
  • 24. a quick, dirty list ‣ Safari on iOS ‣ Android Browser ‣ Symbian Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Bada Browser ‣ Firefox ‣ Internet Explorer 24
  • 25. a quick, dirty list (cont.) ‣ NetFront ‣ Myriad ‣ Nokia Browser (Ovi) ‣ Phantom ‣ microB ‣ Opera Mobile ‣ Opera Mini ‣ Skyfire ‣ BOLT 25
  • 26. they are on tablets too! ‣ Safari on iOS ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mini 26
  • 27. and with different versions... 27
  • 30. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have different behavior than the native! 30
  • 31. wait we can do it! 31
  • 32. we need to forget and learn 32
  • 33. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power 33
  • 34. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design ‣ best experience for each context ‣ the top-model approach 34
  • 35. speed 35
  • 38. two browsers with remote tools Opera Mobile with DragonFly BlackBerry Browser for PlayBook, for Smartphones 7.0 38
  • 40. emulators ‣ different types ‣ good for first testing ‣ free, +150 ‣ www.mobilexweb.com/emulators ‣ proxy: Charles Proxy, Fiddler 40
  • 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. remote labs ‣ deviceanywhere.com ‣ perfectomobile.com ‣ remote device access (nokia) - free ‣ lab.dev (samsung) - free 42
  • 43. 2g, 3g, 4g ‣ Remember to test it ‣ Charles Proxy helps you with throttling 43
  • 44. html5 44
  • 45. html5 if 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. 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. real world sample (nothing personal) united.com 47
  • 48. original iPhone results from blaze.io/mobile 15-20 seconds to load (over WiFi!) total 602Kb 48
  • 49. original Android results from blaze.io/mobile 4-8 seconds to load (over WiFi!) total 442Kb 49
  • 50. 400 / 600Kb? Where are they? 50
  • 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
  • 56. 2. don’t redirect united.com > www.united.com > mobile.united.com 56
  • 57. 2. don’t redirect ‣ deliver the mobile site directly ‣ it’s seo-compatible ‣ if too difficult: only one redirect and cached 57
  • 59. 3. be simple ‣ simple, semantic DOM ‣ complexity == wrong ‣ remember, it’s mobile ‣ use html5 rules and tags 59
  • 60. 3. be simple </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> 60
  • 61. 3. be simple <div class="ktable kbasemargin kwt100" konywidgettype = "Ksegment" > 61
  • 62. 3. be simple <body class = "newBg" > 62
  • 63. 3. be simple <a konywidgettype = "Ksegment" href="#" eventname="segNewHomeevent_" rowid="0"> 63
  • 64. 3. be simple Current XHTML: • 18Kb • 180 DOM elements • 145 has class definition (!?) • 80% has multiple class definition 64
  • 65. 3. be simple Current CSS: • 137Kb! • 6700 lines • 681 selectors 65
  • 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&#174; 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 ">&#169;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. 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. 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. 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. 4. known wpo techniques 70
  • 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. 4. known wpo techniques <style type="text/css" media="screen"> @import "iphone/iphone.css"; </style> 72
  • 73. 4. known wpo techniques check desktop-like wpo suggestions Yslow! Page Speed 73
  • 74. 5. resource != download 74
  • 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. 6. images 76
  • 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. 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. 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. 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. 6. images CSS3 gradientes http://www.colorzilla.com/gradient-editor/ 81
  • 82. 6. images for the cell background ...a CSS3 gradient too 82
  • 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. 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. 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// wDXyg1BAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAA9k lEQVQ4je3TOw6DMAwGYMsT4hSMKKf0UTKinLJ+JEAeLmmnDo1aELQf+e0ESHMD8sBE8Ce/SQhThJD4dPBJviQ/8U0eQf/ qEfDJ6pHgEsxkacnqEkkGOJgFfRJklq0nUIgd5KY+XTJrsNiT/SLrnUS5zKU0ZGmI1g1ol0QWrSbwjnAG+dRL +UAGTX4gmmJrCHkkl8+xNjQCmcSWVE1md81iy0u8kt0s1VLeVr +Q5JNmW8aTkEd0WxIXg0YO2925C0OyGlkKSZb19oqVw0m0DdsVjB8nEzNJNCahI/PvvnQK6ROCSnLQGaIASs9ng31Bls/JbrW8AJuDnJ +8sV3sAAAAAElFTkSuQmCC 85
  • 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. 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. 6. other tips ‣ 450 emoji characters on iOS &#xe333; http://pukupi.com/post/1964 88
  • 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. 7. be ready asap 90
  • 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. 7. defer, defer ‣ great support for deferring content & code ‣ if you have lot of content, use your own loading ‣ use a server-side detection 92
  • 93. 7. don’t parse yet! ‣ parsing javascript takes time ‣ from 1ms to 100ms per 1Kb ‣ delays onload 93
  • 94. 7. don’t parse yet! ‣ divide your code into modules by needs ‣ comment all your code <script>/* ... */</script> ‣ when needed, remove comments and eval eval(stripOutCommentBlock(script.innerHTML)); ‣ created by Gmail Mobile team and Charles Jolley 94
  • 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. 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. 7. forget about frameworks our sample uses three uncompressed javascript files: framework: 60Kb motionpack: 3Kb calendar: 7Kb 97
  • 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
  • 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
  • 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. 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. 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. 9. offline storage second load request (with cookies) response browser server basic html basic javascript updated resources 105
  • 106. 10. internal is better 106
  • 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. 11. touch, no click 108
  • 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
  • 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. 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. 12. ajax please! server 113
  • 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. 13. more than ajax html5 web sockets http://dev.w3.org/html5/websockets/ 116
  • 117. 14. context & user decision 117
  • 118. forget about DECIDING FOR THE USER 118
  • 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. WRONG 120
  • 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. how? 122
  • 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. 14. detecting connection BlackBerry client-side API ‣ works on BB smartphones 4.0+ ‣ blackberry.network==’Wi-Fi’ 124
  • 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. 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. 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. 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. 15. animations & timers 129
  • 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. 15. animations & timers Timers ‣ be careful ‣ slugglish UI ‣ >= 1s frequency ‣ reduce DOM changes ‣ change the DOM once per cycle 131
  • 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. 16. mobilize 133
  • 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
  • 137. test, test & test 137
  • 138. you can reach a good experience 138
  • 139. you can reach a good experience thank you! firt.mobi twitter: @firt www.mobilexweb.com !"#$%&'()*&+,)*&''-"."$/012+$+(34'$) 139