SlideShare a Scribd company logo
1 of 90
Download to read offline
the so-called end of
                                              unlimited bandwidth
                                         towards a more network efficient user experience in an age of network austerity




http://www.flickr.com/photos/beggs/34117133
DISCLAIMER
              I am NOT a network guru...
                           I might be completely wrong!




http://www.flickr.com/photos/andreasivarsson/4893862500
designing for mobile devices is
                                         not simply design for smaller screens...




http://www.flickr.com/photos/32615508@N02/3047982712
designing for network
                                                 efficiency is not optional...




http://www.flickr.com/photos/wwworks/2943810776
why?
you may have received
                                                   an unexpected txt recently...




http://www.flickr.com/photos/msimdottv/3326696626
“   Your unlimited data promotion ends on
    the date of your next bill. Which is when your
    new 500MB a month data allowance starts...




    SMS received from my operator, you may have received something similar...
                        http://shop.o2.co.uk/new-iphone/tariffs.html
according to


Your 500MB data allowance will enable you to (approximately):
send 500,000 emails, without attachments
or send 1,000 emails, with photos attached
or visit 5,000 sites, like Twitter or favourite blogs
or visit 1,500 rich content sites like bbc.co.uk...
or download 50 (low-quality) music tracks
or watch 60 YouTube videos, about 4.5 minutes long




                            iPhone 4 - What you get for 500MB
                          http://shop.o2.co.uk/new-iphone/DataAllow500.html
“   Expect monthly average monthly data usage
       to be around 325MB by end of 2010...




                      US Mobile Data Market Update Q3 2010
      http://www.chetansharma.com/blog/2010/11/07/us-mobile-data-market-update-q3-2010/
that’s lovely and all, but...




http://www.flickr.com/photos/wonderferret/215802064
“
...iPhone reports I’ve exceeded my monthly
 bandwidth cap by 4GB. Bugger. (how do I
 figure out what drained that bandwidth?)




                    @iamdanw via Twitter
         http://twitter.com/iamdanw/status/3232692573310976
let’s try a little experiment...


http://www.flickr.com/photos/maxwellgs/4267311036
turn your Wi-Fi off temporarily




Step 1                                               Step 2
Select ‘Wi-Fi’ in ‘Settings’...                      Switch ‘Wi-Fi’ to ‘OFF’ position.



        Remember to turn on Wi-Fi back on once you’re done!
          And be sure to always use Wi-Fi networks for data intensive activities.
reset your usage statistics




                                                                                                                   0 bytes




Step 3                                         Step 4                                               Step 5
Tap ‘General’ in ‘Settings’...                 Tap ‘Usage’ in ‘General’...                          Tap ‘Reset Statistics’ in ‘Usage’.



                                 Remember to turn on Wi-Fi back on once you’re done!
                                  And be sure to always use Wi-Fi networks for data intensive activities.
very cautious
                                                          or for the geeks among us...




                          ||                           +                          ||

     Safari Web Browser        iPhone Simulator              Charles HTTP Proxy        WireShark


change user-agent to ‘Mobile
Safari’ via Developer tools




                               How To Change The User Agent In Safari
                                  http://www.youtube.com/watch?v=ZSJ_KLEsX4M
briefly
                                                   now use your iPhone...




http://www.flickr.com/photos/carbonnyc/5140154965
reset, record, repeat...

                                              record results +                              record results +
reset data              use data                 reset data             use data               reset data




                0MB                   7.1MB                      0MB               42.3MB




                                                        repeat as desired




             keep in mind that tablets such as the iPad may consume significantly more data...
here’s my data usage...



                        a new month...
                                      0KB




                   0MB
Start of the monthly 500MB data allowance...
comedy sketch
                                              40.6 MB over 05:28




                             refresh + tweet                                                      “Pearl Jam”
                              973KB over 00:20                                                23MB over 00:20




                                                               51MB
Listen to 3 songs on Spotify, view links, check Twitter and Facebook twice, watch a 5 minute video on YouTube and check Google Maps...
refresh + update status
                                                                                       803KB over 00:10

                              find meeting...
                              2.1MB over 00:05




                                                  read TechCrunch                                   a funny video
                                                     2.7MB over 00:15                             3.2 MB over 02:13




                                                                101MB
Check Google Maps for meeting location, watch new Samsung video, browse, tweet, Facebook, funny animal video and listen to new Muse track.
conference talks
                                                             113 MB over 00:20




                             new Muse album                                upload photos...                                find lunch...
                                 78MB over 01:30                             3.4MB over 00:12                          1.8MB over 00:05




                             refresh + tweet                       read email...                         updates...
                             3.1MB over 00:10                   6.7MB over 00:45                   1.6MB over 00:10




                                                                   315MB
Listen to a few more tracks on Spotify, another couple of videos on YouTube, chat via Twitter, Facebook, a few emails + photos, maps and surf...
and that’s before lunch...




http://www.flickr.com/photos/adactio/274644831
please turn your Wi-Fi back on




                                                                                        networks
                                                                                        will vary...




Step 6                                               Step 7
Select ‘Wi-Fi’ in ‘Settings’...                      Switch ‘Wi-Fi’ to ‘ON’ position.



        Remember to turn on Wi-Fi back on once you’re done!
          And be sure to always use Wi-Fi networks for data intensive activities.
the demand upon a resource tends to
                               expand to match the supply of the resource




                                                         Generalisation of Parkinson’s Law
http://www.flickr.com/photos/mikebaird/3898808431          http://en.wikipedia.org/wiki/Parkinson's_Law
“
                                                                    the Internet!

...significant shift in 2010 as (globally) off-deck revenues
       surpass on-deck revenues for the first time...
                operator portals




             Paraphrased from US Mobile Data Market Update Q3 2010
        http://www.chetansharma.com/blog/2010/11/07/us-mobile-data-market-update-q3-2010/
so the demand is obviously there,
                                                      but let’s look at the supply...




http://www.flickr.com/photos/johanl/4397800453
5 MBps
                                 90%       2G
                                                                        estimated worldwide
                                                                        2G penetration in 2010...
                                                                                          3G                            4G
                            5
                                  Average
                                  Theoretical


                          3.75
  network speed in Mbps




                           2.5




                          1.25




                            0
                                 GRPS      EvDO       EDGE       UMTS        HSPA+        LTE       WiMAX      WiFi LTE-Advanced
                                                                      network technology




                                                    Comparison of wireless data standards
                                                  http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf
150 MBps
                                21%       2G
                                                                       projected worldwide
                                                                       3G penetration in 2010...
                                                                                      3G                               4G
                         150
                                 Average
                                 Theoretical


                        112.5
network speed in Mbps




                          75




                         37.5




                           0
                                GRPS      EvDO       EDGE       UMTS      HSPA+        LTE      WiMAX        WiFi LTE-Advanced
                                                                    network technology




                                               Morgan Stanley Internet Trends, April 12, 2010
                                 http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf
1,000 MBps                               0% 2G
                                                                        actual worldwide
                                                                        4G penetration in 2010...
                                                                                        3G                                 4G
                           1000
                                   Average
                                   Theoretical


                            750
   network speed in Mbps




                           500




                           250




                             0
                                  GRPS      EvDO      EDGE       UMTS       HSPA+       LTE       WiMAX           WiFi LTE-Advanced
                                                                     network technology




                                                    Comparison of wireless data standards
                                             http://en.wikipedia.org/wiki/Comparison_of_wireless_data_standards
“   Consumers do not understand the technical alphabet soup
    of technologies involved in 4G, but for our purposes we
    define WiMAX, LTE and HSPA+ as 4G technologies...
                                                                      marketing                                                  redacted
                                                                                           4G
                                             2G                                            3G                               4G
                            1000
                                    Average
                                    Theoretical


                             750
    network speed in Mbps




                            500




                            250




                              0
                                   GRPS      EvDO       EDGE        UMTS       HSPA+        LTE      WiMAX         WiFi LTE-Advanced
                                                                        network technology




                            T-Mobile 4G Service Now Available in More Markets and on New Devices - 02/11/2010
                                                  http://press.t-mobile.com/articles/americas-largest-4g-network
“      ...fact is that there are no IMT-Advanced–or 4G–
                systems available or deployed at this stage.
                                            The Dirty Secret of Today’s 4G: It’s not 4G
                                     http://gizmodo.com/5680755/the-dirty-secret-of-todays-4g-its-not-4g




http://www.flickr.com/photos/flissphil/6341843/
don’t panic




http://www.flickr.com/photos/alexnormand/2916476207
The End of Unlimited Bandwidth
“
...the idea of buying service from wholesalers and
thereby offloading data traffic as an excellent
method for handling [the problem of mobile operators
struggling to manage surging network traffic]...




         Reality Check: Wholesale ... more exciting than you think
          http://www.rcrwireless.com/article/20101102/REALITY_CHECK/101109990
bandwidth as a commodity...




http://www.flickr.com/photos/pinkmoose/2461093066
oddly familiar...




not so long ago...
yes, that




                   Enron Open Bandwidth Commodity Trading Service
http://www.internetnews.com/xSP/article.php/253861/Enron-Opens-Bandwidth-Commodity-Trading-Service.htm
anyway...
http://www.mobypicture.com/user/andrewgrill/view/7998275/sizes/full




                              the mobile industry oxymoron
“unlimited 500 MB internet”
                                     - how do they get away with saying this?


                 @andrewgrill via Twitter
     http://twitter.com/#!/AndrewGrill/status/3462590709633024
smartphone users:
                                                     I want my unlimited data



http://www.flickr.com/photos/chadmagiera/3035522407       http://news.cnet.com/8301-30686_3-20023471-266.html
“   ...a large number of light users, people consuming less
    than 200MB of data per month, prefer unlimited plans...
    even if their usage patterns suggest that they would
    save money by getting a plan that's capped.




                  Smartphone users: I want my unlimited data
                   http://news.cnet.com/8301-30686_3-20023471-266.html
greater bandwidth is coming,
                                                        but not as fast as many would like...




http://www.flickr.com/photos/schillergarcia/2836059154
operators are cutting prices with the idea
                                              to generate revenue from data...




                                                                 Africa is on the cusp on an Internet boom
http://www.flickr.com/photos/kiwanja/3169449999         http://www.csmonitor.com/World/Africa/Africa-Monitor/2010/1105/
                                                                             Africa-is-on-the-cusp-of-an-Internet-boom
...via free content, with operating cost
                                                             based on data consumption...




http://www.flickr.com/photos/flickr_faris/361848995
in the meantime...
designing for mobile devices isn’t simply
a matter of taking screen size into account...
...design for network efficiency*




*you also need to design for context, but that’s another discussion...
a few network efficient
                                                          design strategies...




http://www.flickr.com/photos/edo-finelight/4514878784
filter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra dignissim consectetur. Donec ut nisl nisi, et pretium sem. Proin libero libero, mollis in vestibulum
sed, interdum at nibh. Curabitur vel lectus sit amet leo blandit tincidunt quis sed nulla. Etiam scelerisque metus eget augue placerat vel elementum sem mattis. Pellentesque
sapien mauris, laoreet sed malesuada ac, rhoncus in ipsum. Fusce ultrices consectetur odio ac tincidunt. Donec pharetra auctor lacus sit amet pulvinar. Nullam a urna
turpis, sit amet vulputate mi. Donec eu suscipit purus. Mauris tincidunt scelerisque tellus, vel semper sapien hendrerit sed.

Ut magna augue, gravida ac luctus vel, posuere in neque. Nullam vel lacus mi. Nulla et ante massa. In hac habitasse platea dictumst. Nam gravida tempor metus, ut viverra
arcu feugiat vitae. Duis placerat, urna vel blandit cursus, metus purus condimentum velit, eu faucibus nisi nunc ac turpis. Nulla id enim elit. Pellentesque nec arcu et quam
venenatis viverra. Sed magna neque, blandit eget lacinia vel, sollicitudin at lacus. Quisque eleifend dui eget tortor ornare quis fermentum sem auctor. Etiam vitae rhoncus
velit. Aenean nulla nulla, suscipit non ullamcorper vel, eleifend ut dui. Morbi eu tortor in massa consectetur porttitor laoreet fringilla nisl. Vestibulum laoreet lobortis lacus
non scelerisque. Ut bibendum rhoncus felis ut auctor. Integer porttitor viverra elementum. Vivamus sit amet ipsum ac velit feugiat tristique. Praesent nec velit ipsum.
Maecenas in orci nulla, eu interdum mauris.

Integer porta lacinia tempor. Curabitur sit amet nibh a sapien scelerisque accumsan. Curabitur feugiat suscipit imperdiet. Fusce orci ipsum, malesuada non cursus sit amet,
laoreet ut purus. Praesent eget ligula urna. Donec mattis est eu tortor pulvinar mollis dictum elit malesuada. Aliquam varius nisl euismod massa accumsan quis accumsan
erat viverra. Nunc ac velit velit. Sed lobortis, eros vel blandit luctus, nunc velit malesuada lacus, eget tincidunt neque nisl et neque. Aenean sagittis tellus purus, a aliquet
augue. In hac habitasse platea dictumst. Vestibulum sed ipsum a ipsum fringilla congue eget at eros.

Etiam feugiat, mi vel elementum tempor, massa dolor varius augue, id tempus tortor elit sed justo. In pulvinar, sapien in feugiat elementum, velit diam vehicula ligula, a
semper felis lorem id justo. Aliquam erat volutpat. Sed varius tempor nibh et fringilla. Donec id suscipit leo. Nullam quis nisl lacus, vitae placerat massa. Aenean at massa
dui, eu scelerisque sapien. Mauris vel neque et mi porttitor dapibus. Fusce quis libero eget justo facilisis scelerisque. Mauris eu dolor at purus volutpat suscipit. Cras libero
nisi, placerat eget rhoncus et, auctor et magna. Vivamus quis vehicula ante. Nulla laoreet egestas gravida. Vestibulum tortor massa, feugiat ut sodales id, mattis id risus.
Nulla egestas rutrum lacus at pretium. Nunc blandit dapibus libero, a facilisis tellus convallis vel. Integer auctor eros dapibus massa dapibus quis tempus quam pretium.
Mauris ultricies leo eget odio convallis eget consectetur purus pharetra. Nulla facilisi.

Duis nec velit ut ante suscipit auctor. Etiam leo tellus, eleifend a fermentum vel, luctus et libero. Proin urna felis, venenatis porttitor sollicitudin id, pellentesque vel lorem.
In blandit mattis fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ligula dolor, viverra vitae tincidunt at, congue eget
arcu. Pellentesque id interdum lacus. Suspendisse in lectus et nibh consectetur luctus vitae non magna. Ut interdum, est aliquam ultrices tempor, elit lorem mollis turpis,
sed faucibus nisl enim sit amet sem. Vestibulum dapibus quam a lectus accumsan vitae posuere urna volutpat. Donec commodo fermentum arcu quis pulvinar. Nam eget
eros ac turpis lobortis fermentum. Sed ultrices tristique nibh a aliquet. Cras tristique auctor elementum. Sed placerat, libero ac suscipit tincidunt, enim elit pharetra ligula,
sit amet ultrices risus est ac diam.

Nullam erat ligula, sagittis nec auctor imperdiet, scelerisque nec dolor. Mauris tincidunt risus at turpis facilisis congue. Curabitur purus ante, mollis ut bibendum sed,
tincidunt quis nulla. Nam non ligula at eros dapibus porta. Fusce sapien justo, tempor ut viverra quis, consequat sit amet nisi. Integer iaculis, metus quis venenatis rhoncus,
dolor erat venenatis lacus, et posuere odio diam eu orci. In hac habitasse platea dictumst. Morbi vulputate scelerisque diam. In gravida porttitor hendrerit. Curabitur nec
augue ac dolor mattis dictum. Suspendisse accumsan facilisis tortor tincidunt feugiat. Etiam ante urna, auctor id fermentum a, varius vitae enim. Curabitur a bibendum

                                                                                                                                     edit ruthlessly...
tellus. Curabitur pellentesque, felis ut molestie iaculis, sapien lectus cursus orci, sit amet accumsan dolor augue ac dui. Nulla cursus ipsum eget nisl aliquam ut mollis nibh
dictum.

Donec ut mauris sem. Suspendisse potenti. Nullam scelerisque ultrices mattis. Mauris ultrices magna orci, vitae adipiscing enim. Aliquam aliquam, nibh in mattis ornare,
nisl risus sodales orci, nec molestie sem metus sed leo. Sed placerat diam eu lectus laoreet eu dictum nisi bibendum. In ullamcorper varius vestibulum. Sed congue varius
orci vitae semper. Aenean risus justo, egestas eu pellentesque at, accumsan ac mi. Sed semper velit lacinia diam commodo ullamcorper. In quis tortor felis, non eleifend
odio. Mauris quis sem mi, in placerat lacus. Phasellus at nisl quis magna adipiscing convallis. Aenean ut massa mauris, sit amet imperdiet dui. Aliquam dictum gravida
egestas. Etiam interdum, risus sit amet dignissim cursus, sem dui porta sapien, tempus egestas quam velit vitae tellus. Vivamus a purus nec felis porttitor vehicula. Donec
nec diam sem. In eget justo et mauris porta placerat vitae id purus.

Sed nisi quam, scelerisque non pretium sit amet, malesuada elementum augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam fermentum venenatis ornare. Etiam id erat nisl, tincidunt scelerisque sapien. Praesent ut faucibus lectus. Sed sit amet diam metus. Etiam pellentesque bibendum
dui, eu volutpat tortor scelerisque et. Aliquam ut eros leo, sed ultricies lacus. Proin posuere sagittis magna, ac tristique sapien ultrices id. In gravida bibendum justo, eget
rutrum risus commodo eu. Donec turpis arcu, laoreet pharetra egestas nec, tincidunt in leo. Vestibulum pulvinar nibh eget magna fringilla dictum. Cras et velit et lectus
porttitor lobortis. Sed consectetur, eros sit amet tempor placerat, dui mi porttitor diam, in suscipit eros nisl quis lacus. Cras sed urna mi. Vestibulum at felis vitae.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra dignissim consectetur. Donec ut nisl nisi, et pretium sem. Proin libero libero, mollis in vestibulum
sed, interdum at nibh. Curabitur vel lectus sit amet leo blandit tincidunt quis sed nulla. Etiam scelerisque metus eget augue placerat vel elementum sem mattis. Pellentesque
sapien mauris, laoreet sed malesuada ac, rhoncus in ipsum. Fusce ultrices consectetur odio ac tincidunt. Donec pharetra auctor lacus sit amet pulvinar. Nullam a urna
turpis, sit amet vulputate mi. Donec eu suscipit purus. Mauris tincidunt scelerisque tellus, vel semper sapien hendrerit sed.

Ut magna augue, gravida ac luctus vel, posuere in neque. Nullam vel lacus mi. Nulla et ante massa. In hac habitasse platea dictumst. Nam gravida tempor metus, ut viverra
arcu feugiat vitae. Duis placerat, urna vel blandit cursus, metus purus condimentum velit, eu faucibus nisi nunc ac turpis. Nulla id enim elit. Pellentesque nec arcu et quam
venenatis viverra. Sed magna neque, blandit eget lacinia vel, sollicitudin at lacus. Quisque eleifend dui eget tortor ornare quis fermentum sem auctor. Etiam vitae rhoncus
velit. Aenean nulla nulla, suscipit non ullamcorper vel, eleifend ut dui. Morbi eu tortor in massa consectetur porttitor laoreet fringilla nisl. Vestibulum laoreet lobortis lacus
non scelerisque. Ut bibendum rhoncus felis ut auctor. Integer porttitor viverra elementum. Vivamus sit amet ipsum ac velit feugiat tristique. Praesent nec velit ipsum.
Maecenas in orci nulla, eu interdum mauris.

Integer porta lacinia tempor. Curabitur sit amet nibh a sapien scelerisque accumsan. Curabitur feugiat suscipit imperdiet. Fusce orci ipsum, malesuada non cursus sit amet,
laoreet ut purus. Praesent eget ligula urna. Donec mattis est eu tortor pulvinar mollis dictum elit malesuada. Aliquam varius nisl euismod massa accumsan quis accumsan
erat viverra. Nunc ac velit velit. Sed lobortis, eros vel blandit luctus, nunc velit malesuada lacus, eget tincidunt neque nisl et neque. Aenean sagittis tellus purus, a aliquet
augue. In hac habitasse platea dictumst. Vestibulum sed ipsum a ipsum fringilla congue eget at eros.

Etiam feugiat, mi vel elementum tempor, massa dolor varius augue, id tempus tortor elit sed justo. In pulvinar, sapien in feugiat elementum, velit diam vehicula ligula, a
semper felis lorem id justo. Aliquam erat volutpat. Sed varius tempor nibh et fringilla. Donec id suscipit leo. Nullam quis nisl lacus, vitae placerat massa. Aenean at massa
dui, eu scelerisque sapien. Mauris vel neque et mi porttitor dapibus. Fusce quis libero eget justo facilisis scelerisque. Mauris eu dolor at purus volutpat suscipit. Cras libero
nisi, placerat eget rhoncus et, auctor et magna. Vivamus quis vehicula ante. Nulla laoreet egestas gravida. Vestibulum tortor massa, feugiat ut sodales id, mattis id risus.
Nulla egestas rutrum lacus at pretium. Nunc blandit dapibus libero, a facilisis tellus convallis vel. Integer auctor eros dapibus massa dapibus quis tempus quam pretium.
Mauris ultricies leo eget odio convallis eget consectetur purus pharetra. Nulla facilisi.

Duis nec velit ut ante suscipit auctor. Etiam leo tellus, eleifend a fermentum vel, luctus et libero. Proin urna felis, venenatis porttitor sollicitudin id, pellentesque vel lorem.
In blandit mattis fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ligula dolor, viverra vitae tincidunt at, congue eget
arcu. Pellentesque id interdum lacus. Suspendisse in lectus et nibh consectetur luctus vitae non magna. Ut interdum, est aliquam ultrices tempor, elit lorem mollis turpis,
sed faucibus nisl enim sit amet sem. Vestibulum dapibus quam a lectus accumsan vitae posuere urna volutpat. Donec commodo fermentum arcu quis pulvinar. Nam eget
eros ac turpis lobortis fermentum. Sed ultrices tristique nibh a aliquet. Cras tristique auctor elementum. Sed placerat, libero ac suscipit tincidunt, enim elit pharetra ligula,
sit amet ultrices risus est ac diam.

Nullam erat ligula, sagittis nec auctor imperdiet, scelerisque nec dolor. Mauris tincidunt risus at turpis facilisis congue. Curabitur purus ante, mollis ut bibendum sed,
tincidunt quis nulla. Nam non ligula at eros dapibus porta. Fusce sapien justo, tempor ut viverra quis, consequat sit amet nisi. Integer iaculis, metus quis venenatis rhoncus,
dolor erat venenatis lacus, et posuere odio diam eu orci. In hac habitasse platea dictumst. Morbi vulputate scelerisque diam. In gravida porttitor hendrerit. Curabitur nec
augue ac dolor mattis dictum. Suspendisse accumsan facilisis tortor tincidunt feugiat. Etiam ante urna, auctor id fermentum a, varius vitae enim. Curabitur a bibendum

                                                                                         then edit a few more times....
tellus. Curabitur pellentesque, felis ut molestie iaculis, sapien lectus cursus orci, sit amet accumsan dolor augue ac dui. Nulla cursus ipsum eget nisl aliquam ut mollis nibh
dictum.

Donec ut mauris sem. Suspendisse potenti. Nullam scelerisque ultrices mattis. Mauris ultrices magna orci, vitae adipiscing enim. Aliquam aliquam, nibh in mattis ornare,
nisl risus sodales orci, nec molestie sem metus sed leo. Sed placerat diam eu lectus laoreet eu dictum nisi bibendum. In ullamcorper varius vestibulum. Sed congue varius
orci vitae semper. Aenean risus justo, egestas eu pellentesque at, accumsan ac mi. Sed semper velit lacinia diam commodo ullamcorper. In quis tortor felis, non eleifend
odio. Mauris quis sem mi, in placerat lacus. Phasellus at nisl quis magna adipiscing convallis. Aenean ut massa mauris, sit amet imperdiet dui. Aliquam dictum gravida
egestas. Etiam interdum, risus sit amet dignissim cursus, sem dui porta sapien, tempus egestas quam velit vitae tellus. Vivamus a purus nec felis porttitor vehicula. Donec
nec diam sem. In eget justo et mauris porta placerat vitae id purus.

Sed nisi quam, scelerisque non pretium sit amet, malesuada elementum augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam fermentum venenatis ornare. Etiam id erat nisl, tincidunt scelerisque sapien. Praesent ut faucibus lectus. Sed sit amet diam metus. Etiam pellentesque bibendum
dui, eu volutpat tortor scelerisque et. Aliquam ut eros leo, sed ultricies lacus. Proin posuere sagittis magna, ac tristique sapien ultrices id. In gravida bibendum justo, eget
rutrum risus commodo eu. Donec turpis arcu, laoreet pharetra egestas nec, tincidunt in leo. Vestibulum pulvinar nibh eget magna fringilla dictum. Cras et velit et lectus
porttitor lobortis. Sed consectetur, eros sit amet tempor placerat, dui mi porttitor diam, in suscipit eros nisl quis lacus. Cras sed urna mi. Vestibulum at felis vitae.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam pharetra dignissim consectetur. Donec ut
nisl nisi, et pretium sem. Proin libero libero, mollis in
vestibulum sed, interdum at nibh. Curabitur vel
lectus sit amet leo blandit tincidunt quis sed nulla.
Etiam scelerisque metus eget augue placerat vel
elementum sem mattis. Pellentesque sapien mauris,
laoreet sed malesuada ac, rhoncus in ipsum. Fusce
ultrices consectetur odio ac tincidunt. Donec
pharetra auctor lacus sit amet pulvinar. Nullam a
urna turpis, sit amet vulputate mi. Donec eu suscipit
purus. Mauris tincidunt scelerisque tellus, vel semper
sapien hendrerit sed.

Curabitur feugiat suscipit imperdiet. Fusce orci
ipsum, malesuada non cursus sit amet, laoreet ut
purus. Praesent eget ligula urna. Donec mattis est eu
tortor pulvinar mollis dictum elit malesuada.
Aliquam varius nisl euismod massa accumsan quis
accumsan erat viverra. Nunc ac velit velit. Sed
lobortis, eros vel blandit luctus, nunc velit malesuada
lacus, eget tincidunt neque nisl et neque.

Donec id suscipit leo.

Nulla laoreet egestas gravida. Vestibulum tortor
massa, feugiat ut sodales id, mattis id risus. Nulla
egestas rutrum lacus at pretium. Nunc blandit
dapibus libero, a facilisis tellus convallis vel. Integer
auctor eros dapibus massa dapibus quis tempus
quam pretium.

Mauris tincidunt risus at turpis facilisis congue.
Curabitur purus ante, mollis ut bibendum sed,
tincidunt quis nulla. Nam non ligula at eros dapibus
porta. Fusce sapien justo, tempor ut viverra quis,
consequat sit amet nisi. Integer iaculis, metus quis        think small...
venenatis rhoncus, dolor erat venenatis lacus, et
posuere odio diam eu orci.

Sed semper velit lacinia diam commodo ullamcorper.
Phasellus at nisl quis magna adipiscing convallis.
Aenean ut massa mauris, sit amet imperdiet dui.

Sed nisi quam, scelerisque non pretium sit amet,
malesuada elementum augue. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Aliquam fermentum venenatis
ornare. Etiam id erat nisl, tincidunt scelerisque
sapien.
this includes markup...
      soup is best
      served in a bowl...


                                                we see this much more
                                                than you’d think...

                                                                    recreating
                                   <div class="body">               existing <tags>
                                    <div class="header">            is not cool
                                     <div class= "h1">
                                       <span>Hello World!</span>       <div> soup...
                                     </div>
                                    </div>
                                    <div class="body">HTML
                                     <span class="emphasis">can actually be</span>meaningful.
                                    </div>
                                   </div>




unnecessary markup will increase the amount of data you transfer, and may impact performance
well structured & meaningful




        contains
       71%
       less filler
                               <h1>Hello World!</h1>
                               <p>HTML<em>can actually be</em>meaningful.</p>




keep markup short, semantic and meaningful – less data transfer and better performance
“full web”                vs.     “mobile web”
basic comparison of The New York Times and The Guardian websites on the iPhone...
more clicks to find
                        relevant content



requires pinch + zoom




        each page requires
        an almost full refresh
no pinch + zoom




             fewer clicks




much less
bandwidth required
996.3 KB                                  81.2 KB



 mobile optimised sites are far more network efficient
filter   compress
appropriately resize and compress
                                                           media for each device




                              large.jpg
                              35.73 KB




http://www.flickr.com/photos/ulybug/152518872
appropriately resize and compress
                                                           media for each device




                              medium.jpg
                              10.69 KB




http://www.flickr.com/photos/ulybug/152518872
appropriately resize and compress
                                                              media for each device




                                               small.jpg
                                               4.57 KB




http://www.flickr.com/photos/ulybug/152518872
appropriately resize and compress
                                                           media for each device




 large.jpg                                              medium.jpg     small.jpg
 35.73 KB                                               10.69 KB       4.57 KB




http://www.flickr.com/photos/ulybug/152518872
/*!
 * jQuery JavaScript Library v1.4.4
 * http://jquery.com/
 *
 * Copyright 2010, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2010, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
                                                                                           devices don’t care
 *
 * Date: Thu Nov 11 19:04:53 2010 -0500                                            about formatting & style...
 */
(function( window, undefined ) {

// Use the correct document accordingly with window argument (sandbox)
var document = window.document;
var jQuery = (function() {

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
	    	     // The jQuery object is actually just the init constructor 'enhanced'
	    	     return new jQuery.fn.init( selector, context );
	    },

	    // Map over jQuery in case of overwrite
	    _jQuery = window.jQuery,

	    // Map over the $ in case of overwrite
	    _$ = window.$,

	    // A central reference to the root jQuery(document)
	    rootjQuery,

	    // A simple way to check for HTML strings or ID strings
	    // (both of which we optimize for)
	    quickExpr = /^(?:[^<]*(<[wW]+>)[^>]*$|#([w-]+)$)/,

	    // Is it a simple selector
	    isSimple = /^.[^:#[.,]*$/,

	    // Check if a string has a non-whitespace character in it
	    rnotwhite = /S/,
	    rwhite = /s/,

	    // Used for trimming whitespace
	    trimLeft = /^s+/,
	    trimRight = /s+$/,
(function(E,B){function ka(a,b,d){if(d===B&&a.nodeType===1){d=a.getAttribute("data-"+b);if(typeof d==="string"){try{d=d==="true"?true:d==="false"
false:d==="null"?null:!c.isNaN(d)?parseFloat(d):Ja.test(d)?c.parseJSON(d):d}catch(e){}c.data(a,b,d)}else d=B}return d}function U(){return false}
function ca(){return true}function la(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function Ka(a){var b,d,e,f,h,l,k,o,x,r,A,C=[];f=[];h=c.dat
(this,this.nodeType?"events":"__events__");if(typeof h==="function")h=h.events;if(!(a.liveFired===this||!h||!h.live||a.button&&a.type==="click")){if
(a.namespace)A=RegExp("(^|.)"+a.namespace.split(".").join(".(?:.*.)?")+"(.|$)");a.liveFired=this;var J=h.live.slice(0);for(k=0;k<J.length;k+
+){h=J[k];h.origType.replace(X,"")===a.type?f.push(h.selector):J.splice(k--,1)}f=c(a.target).closest(f,a.currentTarget);o=0;for(x=f.length;o<x;o++)
{r=f[o];for(k=0;k<J.length;k++){h=J[k];if(r.selector===h.selector&&(!A||A.test(h.namespace))){l=r.elem;e=null;if(h.preType==="mouseenter"||
h.preType==="mouseleave"){a.type=h.preType;e=c(a.relatedTarget).closest(h.selector)[0]}if(!e||e!==l)C.push({elem:l,handleObj:h,level:r.level})}}}
o=0;for(x=C.length;o<x;o++){f=C[o];if(d&&f.level>d break;a.currentTarget=f.elem;a.data=f.handleObj.data;a.handleObj=f.handleObj;

                                                                                         minify all styles, scripts
A=f.handleObj.origHandler.apply(f.elem,arguments);if(A===false||a.isPropagationStopped()){d=f.level;if(A===false)b=false;if
(a.isImmediatePropagationStopped())break}}return b}}function Y(a,b){return(a&&a!=="*"?a+".":"")+b.replace(La,"`").replace(Ma,"&")}function ma(a,b,d)
{if(c.isFunction(b))return c.grep(a,function(f,h){return!!b.call(f,h,f)===d});else if(b.nodeType)return c.grep(a,function(f){return f===b===d});else

                                                                                          and JSON/XML data...
if(typeof b==="string"){var e=c.grep(a,function(f){return f.nodeType===1});if(Na.test(b))return c.filter(b,e,!d);else b=c.filter(b,e)}return c.grep
(a,function(f){return c.inArray(f,b)>=0===d})}function na(a,b){var d=0;b.each(function(){if(this.nodeName===(a[d]&&a[d].nodeName)){var e=c.data(a[d+
+]),f=c.data(this,e);if(e=e&&e.events){delete f.handle;f.events={};for(var h in e)for(var l in e[h])c.event.add(this,h,e[h][l],e[h][l].data)}}})}
function Oa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");
b.parentNode&&b.parentNode.removeChild(b)}function oa(a,b,d){var e=b==="width"?a.offsetWidth:a.offsetHeight;if(d==="border")return e;c.each
(b==="width"?Pa:Qa,function(){d||(e-=parseFloat(c.css(a,"padding"+this))||0);if(d==="margin")e+=parseFloat(c.css(a,"margin"+this))||0;else e-
=parseFloat(c.css(a,"border"+this+"Width"))||0});return e}function da(a,b,d,e){if(c.isArray(b)&&b.length)c.each(b,function(f,h){d||Ra.test(a)?e
(a,h):da(a+"["+(typeof h==="object"||c.isArray(h)?f:"")+"]",h,d,e)});else if(!d&&b!=null&&typeof b==="object")c.isEmptyObject(b)?e(a,""):c.each
(b,function(f,h){da(a+"["+f+"]",h,d,e)});else e(a,b)}function S(a,b){var d={};c.each(pa.concat.apply([],pa.slice(0,b)),function(){d[this]=a});return
d}function qa(a){if(!ea[a]){var b=c("<"+a+">").appendTo("body"),d=b.css("display");b.remove();if(d==="none"||d==="")d="block";ea[a]=d}return ea[a]}
function fa(a){return c.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:false}var t=E.document,c=function(){function a(){if(!b.isReady)
{try{t.documentElement.doScroll("left")}catch(j){setTimeout(a,1);return}b.ready()}}var b=function(j,s){return new b.fn.init(j,s)},d=E.jQuery,e=E.
$,f,h=/^(?:[^<]*(<[wW]+>)[^>]*$|#([w-]+)$)/,l=/S/,k=/^s+/,o=/s+$/,x=/W/,r=/d/,A=/^<(w+)s*/?>(?:</1>)?$/,C=/^[],:{}s]*$/,J=/(?:["
/bfnrt]|u[0-9a-fA-F]{4})/g,w=/"[^"nr]*"|true|false|null|-?d+(?:.d*)?(?:[eE][+-]?d+)?/g,I=/(?:^|:|,)(?:s*[)+/g,L=/(webkit)[ /]([w.]
+)/,g=/(opera)(?:.*version)?[ /]([w.]+)/,i=/(msie) ([w.]+)/,n=/(mozilla)(?:.*? rv:([w.))?/,m=navigator.userAgent,p=false,q=
[],u,y=Object.prototype.toString,F=Object.prototype.hasOwnProperty,M=Array.prototype.push,N=Array.prototype.slice,O=String.prototype.trim,D=Array.pro
totype.indexOf,R={};b.fn=b.prototype={init:function(j,s){var v,z,H;if(!j)return this;if(j.nodeType){this.context=this[0]=j;this.length=1;return this}
if(j==="body"&&!s&&t.body){this.context=t;this[0]=t.body;this.selector="body";this.length=1;return this}if(typeof j==="string")if((v=h.exec(j))&&(v
[1]||!s))if(v[1]){H=s?s.ownerDocument||s:t;if(z=A.exec(j))if(b.isPlainObject(s)){j=[t.createElement(z[1])];b.fn.attr.call(j,s,true)}else j=
[H.createElement(z[1])];else{z=b.buildFragment([v[1]],[H]);j=(z.cacheable?z.fragment.cloneNode(true):z.fragment).childNodes}return b.merge(this,j)}
else{if((z=t.getElementById(v[2]))&&z.parentNode){if(z.id!==v[2])return f.find(j);this.length=1;this[0]=z}this.context=t;this.selector=j;return this}
else if(!s&&!x.test(j)){this.selector=j;this.context=t;j=t.getElementsByTagName(j);return b.merge(this,j)}else return!s||s.jquery?(s||f).find(j):b
(s).find(j);else if(b.isFunction(j))return f.ready(j);if(j.selector!==B){this.selector=j.selector;this.context=j.context}return b.makeArray
(j,this)},selector:"",jquery:"1.4.4",length:0,size:function(){return this.length},toArray:function(){return N.call(this,0)},get:function(j){return
j==null?this.toArray():j<0?this.slice(j)[0]:this[j]},pushStack:function(j,s,v){var z=b();b.isArray(j)?M.apply(z,j):b.merge(z,j);z.prevObject=
this;z.context=this.context;if(s==="find")z.selector=this.selector+(this.selector?" ":"")+v;else if(s)z.selector=this.selector+"."+s+"("+v+")";return
z},each:function(j,s){return b.each(this,j,s)},ready:function(j){b.bindReady();if(b.isReady)j.call(t,b);else q&&q.push(j);return this},eq:function(j)
{return j===-1?this.slice(j):this.slice(j,+j+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return
this.pushStack(N.apply(this,arguments),"slice",N.call(arguments).join(","))},map:function(j){return this.pushStack(b.map(this,function(s,v){return
j.call(s,v,s)}))},end:function(){return this.prevObject||b(null)},push:M,sort:[].sort,splice:[].splice};b.fn.init.prototype=b.
fn;b.extend=b.fn.extend=function(){var j,s,v,z,H,G=arguments[0]||{},K=1,Q=arguments.length,ga=false;if(typeof G==="boolean"){ga=G;G=arguments[1]||
{};K=2}if(typeof G!=="object"&&!b.isFunction(G))G={};if(Q===K){G=this;--K}for(;K<Q;K++)if((j=arguments[K])!=null)for(s in j){v=G[s];z=j[s];if(G!==z)
if(ga&&z&&(b.isPlainObject(z)||(H=b.isArray(z)))){if(H){H=false;v=v&&b.isArray(v)?v:[]}else v=v&&b.isPlainObject(v)?v:{};G[s]=b.extend(ga,v,z)}else
if(z!==B)G[s]=z}return G};b.extend({noConflict:function(j){E.$=e;if(j)E.jQuery=d;return b},isReady:false,readyWait:1,ready:function(j)
{j===true&&b.readyWait--;if(!b.readyWait||j!==true&&!b.isReady){if(!t.body)return setTimeout(b.ready,1);b.isReady=true;if(!(j!==true&&--
b.readyWait>0))if(q){var s=0,v=q;for(q=null;j=v[s++];)j.call(t,b);b.fn.trigger&&b(t).trigger("ready").unbind("ready")}}},bindReady:function(){if(!p)
{p=true;if(t.readyState==="complete")return setTimeout(b.ready,1);if(t.addEventListener){t.addEventListener("DOMContentLoaded",u,false);
E.addEventListener("load",b.ready,false)}else if(t.attachEvent){t.attachEvent("onreadystatechange",u);E.attachEvent("onload",b.ready);var j=false;
data formats do matter...




   XML         JSON

94 KB       76 KB


          same data,
         20% lighter...
XML     JSON

18.5 KB   14 KB


                80% smaller
              when compressed

              and compression can
            make a huge difference...
but unpacking requires time...




http://www.flickr.com/photos/spine/436111793
?
                                                  use strategically




                     CSS            XML   HTML   JSON             JS


                 not always a good
               idea for everything...
                                                    uncompressing data
                                        can impact browser performance


...thanks to @ for the reminder!
reuse existing data formats in
                                     creative + efficient ways...




                       ...seriously?




7.1MB of audio data compressed to 1.2MB using PNG format
     http://audioscene.org/scene-files/yury/pngencoding/sample.html
rendered + optimised
proxy browser        on proxy server...                     off-load to the server...




                                                                                  free + unlimited
                                                                                     bandwidth


                       OBML*                               HTML
                         limited + costly       proxy server                           bbc.co.uk
                            bandwidth

    *OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
...a little information design
                             can significantly reduce data transfer




1 year of data <1KB
                                             sparklines
                http://insideanalytics.blogspot.com/2006/09/busy-but-good-dashboard.html
filter   compress   cache
moving the same bits around
                                                   eventually gets expensive...



http://www.flickr.com/photos/fabricio/1576392520
conveniently store bits so
                                                       they can be reused in the future...



http://www.flickr.com/photos/seattlemunicipalarchives/3762792170
cache as much
 as possible...                          must be requested
                                         from the network
                      0 KB

                     0 KB              7.5 KB
             CSS                                      JSON



                     0 KB              18 KB
             JS                                      HTML


                               14 KB
                      0 KB
            jQuery



                     0 KB        every HTTP
                               request adds up

          these are only
        downloaded once...

   local cache                 network data
via headers, manifests, etc.     new data requests
filter   compress   cache   communicate
global seings could be used
                                                         by other applications to
                                                         determine how they use the
                                                         network...




Settings > Bandwidth                                    Settings > Bandwidth > Usage Profile
Settings to enable/disable (non-roaming) data           Setting to determine how applications
access, as well as provide a means of limiting          accessing the Internet via operator networks
data use.                                               should use data services.




                            doesn’t currently exist – just an idea...
On more teeny button...                                 Usage Profiles
Add an extra button that launches a ‘Usage              Applications could provide users with ‘usage
Profile’...                                              profiles’ where their data consumption within
                                                        each application is easily and instantly
                                                        communicated.


                            doesn’t currently exist – just an idea...
communicate




Loading...                                             Loading revisited...
Mobile browsers currently provide a means of           It wouldn’t be a huge stretch to add a simple
displaying download progress.                          status bar that displays the total KB (or MB’s!)
                                                       being downloaded.




                           doesn’t currently exist – just an idea...
...equivalent efficiency
                                         ratings for data?




                                    point of differentiation




doesn’t currently exist – just an idea...
filter   compress   cache   communicate
oh, and don’t forget...
filter   compress   off-load   cache   communicate
off-load high bandwidth
                                                        activities and services to Wi-Fi...



http://www.flickr.com/photos/yodelanecdotal/4092671973
No Wi-Fi Network Available                             Option to defer activity due to lack of Wi-Fi
Application simply chews up 3G data                    Application alerts the user to the lack of Wi-Fi
allowance without warning.                             connectivity and prompts them to continue.




                           doesn’t currently exist – just an idea...
filter   compress   off-load   cache   communicate
design for network
                                                  efficiency is essential...




http://www.flickr.com/photos/lingaraj/2415084235
mobile data shouldn’t be the
                                                                 luxury it currently is...
                                                                             – @timberners_lee




http://www.flickr.com/photos/campuspartymexico/4102296282
thank you




                       hello@yiibu.com




http://www.slideshare.net/bryanrieger/the-end-of-unlimited-bandwidth

More Related Content

Viewers also liked

10 Things Your Customers Wish You Knew About Them
10 Things Your Customers Wish You Knew About Them10 Things Your Customers Wish You Knew About Them
10 Things Your Customers Wish You Knew About ThemHelp Scout
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuBryan Rieger
 
Why Managing Sucks and How to Fix It
Why Managing Sucks and How to Fix ItWhy Managing Sucks and How to Fix It
Why Managing Sucks and How to Fix ItAchievers
 
Wicked Ambiguity and User Experience
Wicked Ambiguity and User ExperienceWicked Ambiguity and User Experience
Wicked Ambiguity and User ExperienceJonathon Colman
 
How to Build SEO into Content Strategy
How to Build SEO into Content StrategyHow to Build SEO into Content Strategy
How to Build SEO into Content StrategyJonathon Colman
 
The Brand Gap
The Brand GapThe Brand Gap
The Brand Gapcoolstuff
 
Broadband Presentation
Broadband PresentationBroadband Presentation
Broadband PresentationSadie Maybe
 
The Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsThe Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsXPLAIN
 
Upworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The InternetsUpworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The InternetsUpworthy
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next PresentationSOAP Presentations
 
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Velocity Partners
 

Viewers also liked (18)

10 Things Your Customers Wish You Knew About Them
10 Things Your Customers Wish You Knew About Them10 Things Your Customers Wish You Knew About Them
10 Things Your Customers Wish You Knew About Them
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by Yiibu
 
How to Become a Better Speaker
How to Become a Better SpeakerHow to Become a Better Speaker
How to Become a Better Speaker
 
Why Managing Sucks and How to Fix It
Why Managing Sucks and How to Fix ItWhy Managing Sucks and How to Fix It
Why Managing Sucks and How to Fix It
 
Wicked Ambiguity and User Experience
Wicked Ambiguity and User ExperienceWicked Ambiguity and User Experience
Wicked Ambiguity and User Experience
 
2012 and We're STILL Using PowerPoint Wrong
2012 and We're STILL Using PowerPoint Wrong2012 and We're STILL Using PowerPoint Wrong
2012 and We're STILL Using PowerPoint Wrong
 
Why Presentations Matter
Why Presentations MatterWhy Presentations Matter
Why Presentations Matter
 
Can't Buy Me Love
Can't Buy Me LoveCan't Buy Me Love
Can't Buy Me Love
 
How to Build SEO into Content Strategy
How to Build SEO into Content StrategyHow to Build SEO into Content Strategy
How to Build SEO into Content Strategy
 
The Brand Gap
The Brand GapThe Brand Gap
The Brand Gap
 
Broadband Presentation
Broadband PresentationBroadband Presentation
Broadband Presentation
 
You Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedeeYou Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedee
 
The Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsThe Seven Deadly Social Media Sins
The Seven Deadly Social Media Sins
 
Upworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The InternetsUpworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The Internets
 
Design Your Career 2018
Design Your Career 2018Design Your Career 2018
Design Your Career 2018
 
Displaying Data
Displaying DataDisplaying Data
Displaying Data
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation
 
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.
 

Similar to The End of Unlimited Bandwidth

Heavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef
 
Web design and_hosting
Web design and_hostingWeb design and_hosting
Web design and_hostingxmgkklglt1991
 
Digital research renaissance - Social Media Analysis
Digital research renaissance - Social Media AnalysisDigital research renaissance - Social Media Analysis
Digital research renaissance - Social Media AnalysisSerendio Inc.
 
Digitalresearchrenaissancemra 100627222944-phpapp01
Digitalresearchrenaissancemra 100627222944-phpapp01Digitalresearchrenaissancemra 100627222944-phpapp01
Digitalresearchrenaissancemra 100627222944-phpapp01SocialNuggets
 
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Raymond Morin
 
Practical resource monitoring with munin (English editon)
Practical resource monitoring with munin  (English editon)Practical resource monitoring with munin  (English editon)
Practical resource monitoring with munin (English editon)Masahito Zembutsu
 
Mobile Development on a Shoestring Connection
Mobile Development on a Shoestring ConnectionMobile Development on a Shoestring Connection
Mobile Development on a Shoestring ConnectionJenifer Hanen
 
Going Mobile - A Pragmatic Look At Mobile Design
Going Mobile - A Pragmatic Look At Mobile DesignGoing Mobile - A Pragmatic Look At Mobile Design
Going Mobile - A Pragmatic Look At Mobile DesignBryan Rieger
 
Web 3 Tom Gruber
Web 3 Tom GruberWeb 3 Tom Gruber
Web 3 Tom GruberMediabistro
 
URIplay for Google Tech Talk (2008)
URIplay for Google Tech Talk (2008)URIplay for Google Tech Talk (2008)
URIplay for Google Tech Talk (2008)Chris Jackson
 
Professional AV with WebRTC
Professional AV with WebRTCProfessional AV with WebRTC
Professional AV with WebRTCDan Jenkins
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
 
IoT: Internet of Things with Python
IoT: Internet of Things with PythonIoT: Internet of Things with Python
IoT: Internet of Things with PythonLelio Campanile
 
Multi-network Solutions in the Real World: NAB 2012, Will Law, Akamai
Multi-network Solutions in the Real World: NAB 2012, Will Law, AkamaiMulti-network Solutions in the Real World: NAB 2012, Will Law, Akamai
Multi-network Solutions in the Real World: NAB 2012, Will Law, AkamaiVerimatrix
 
Mobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech TipsMobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech TipsDoug Sillars
 
E magazine publishing
E magazine publishingE magazine publishing
E magazine publishingDave Taylor
 
CyberLink MediaShow 5
CyberLink MediaShow 5CyberLink MediaShow 5
CyberLink MediaShow 5CyberLink
 

Similar to The End of Unlimited Bandwidth (20)

Heavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great Mobisites
 
Web design and_hosting
Web design and_hostingWeb design and_hosting
Web design and_hosting
 
Digital research renaissance - Social Media Analysis
Digital research renaissance - Social Media AnalysisDigital research renaissance - Social Media Analysis
Digital research renaissance - Social Media Analysis
 
Digitalresearchrenaissancemra 100627222944-phpapp01
Digitalresearchrenaissancemra 100627222944-phpapp01Digitalresearchrenaissancemra 100627222944-phpapp01
Digitalresearchrenaissancemra 100627222944-phpapp01
 
USB 3.0 Intro
USB 3.0 IntroUSB 3.0 Intro
USB 3.0 Intro
 
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01
 
Webcam app ppt
Webcam  app ppt   Webcam  app ppt
Webcam app ppt
 
Practical resource monitoring with munin (English editon)
Practical resource monitoring with munin  (English editon)Practical resource monitoring with munin  (English editon)
Practical resource monitoring with munin (English editon)
 
Mobile Development on a Shoestring Connection
Mobile Development on a Shoestring ConnectionMobile Development on a Shoestring Connection
Mobile Development on a Shoestring Connection
 
Going Mobile - A Pragmatic Look At Mobile Design
Going Mobile - A Pragmatic Look At Mobile DesignGoing Mobile - A Pragmatic Look At Mobile Design
Going Mobile - A Pragmatic Look At Mobile Design
 
Web 3 Tom Gruber
Web 3 Tom GruberWeb 3 Tom Gruber
Web 3 Tom Gruber
 
URIplay for Google Tech Talk (2008)
URIplay for Google Tech Talk (2008)URIplay for Google Tech Talk (2008)
URIplay for Google Tech Talk (2008)
 
Professional AV with WebRTC
Professional AV with WebRTCProfessional AV with WebRTC
Professional AV with WebRTC
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
IoT: Internet of Things with Python
IoT: Internet of Things with PythonIoT: Internet of Things with Python
IoT: Internet of Things with Python
 
Multi-network Solutions in the Real World: NAB 2012, Will Law, Akamai
Multi-network Solutions in the Real World: NAB 2012, Will Law, AkamaiMulti-network Solutions in the Real World: NAB 2012, Will Law, Akamai
Multi-network Solutions in the Real World: NAB 2012, Will Law, Akamai
 
Mobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech TipsMobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech Tips
 
How to design a wireless world
How to design a wireless worldHow to design a wireless world
How to design a wireless world
 
E magazine publishing
E magazine publishingE magazine publishing
E magazine publishing
 
CyberLink MediaShow 5
CyberLink MediaShow 5CyberLink MediaShow 5
CyberLink MediaShow 5
 

More from Bryan Rieger

Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of WonderfulBryan Rieger
 
What Would Picasso Do?
What Would Picasso Do?What Would Picasso Do?
What Would Picasso Do?Bryan Rieger
 
Going Mobile (2010) by Yiibu
Going Mobile (2010) by YiibuGoing Mobile (2010) by Yiibu
Going Mobile (2010) by YiibuBryan Rieger
 
8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User ExperienceBryan Rieger
 
Mobile Ajax Workshop
Mobile Ajax WorkshopMobile Ajax Workshop
Mobile Ajax WorkshopBryan Rieger
 
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The CurtainOf Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The CurtainBryan Rieger
 
Modeling the Mobile User Experience
Modeling the Mobile User ExperienceModeling the Mobile User Experience
Modeling the Mobile User ExperienceBryan Rieger
 
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?Bryan Rieger
 
Creating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long TailCreating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long TailBryan Rieger
 

More from Bryan Rieger (12)

Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
 
What Would Picasso Do?
What Would Picasso Do?What Would Picasso Do?
What Would Picasso Do?
 
Going Mobile (2010) by Yiibu
Going Mobile (2010) by YiibuGoing Mobile (2010) by Yiibu
Going Mobile (2010) by Yiibu
 
8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience
 
Mobile Ajax Workshop
Mobile Ajax WorkshopMobile Ajax Workshop
Mobile Ajax Workshop
 
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The CurtainOf Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
 
Modeling the Mobile User Experience
Modeling the Mobile User ExperienceModeling the Mobile User Experience
Modeling the Mobile User Experience
 
Mobile Persuasion
Mobile PersuasionMobile Persuasion
Mobile Persuasion
 
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
 
Creating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long TailCreating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long Tail
 
Makin It Work
Makin It WorkMakin It Work
Makin It Work
 
Prime Sky
Prime SkyPrime Sky
Prime Sky
 

Recently uploaded

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Recently uploaded (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

The End of Unlimited Bandwidth

  • 1. the so-called end of unlimited bandwidth towards a more network efficient user experience in an age of network austerity http://www.flickr.com/photos/beggs/34117133
  • 2. DISCLAIMER I am NOT a network guru... I might be completely wrong! http://www.flickr.com/photos/andreasivarsson/4893862500
  • 3. designing for mobile devices is not simply design for smaller screens... http://www.flickr.com/photos/32615508@N02/3047982712
  • 4. designing for network efficiency is not optional... http://www.flickr.com/photos/wwworks/2943810776
  • 6. you may have received an unexpected txt recently... http://www.flickr.com/photos/msimdottv/3326696626
  • 7. Your unlimited data promotion ends on the date of your next bill. Which is when your new 500MB a month data allowance starts... SMS received from my operator, you may have received something similar... http://shop.o2.co.uk/new-iphone/tariffs.html
  • 8. according to Your 500MB data allowance will enable you to (approximately): send 500,000 emails, without attachments or send 1,000 emails, with photos attached or visit 5,000 sites, like Twitter or favourite blogs or visit 1,500 rich content sites like bbc.co.uk... or download 50 (low-quality) music tracks or watch 60 YouTube videos, about 4.5 minutes long iPhone 4 - What you get for 500MB http://shop.o2.co.uk/new-iphone/DataAllow500.html
  • 9. Expect monthly average monthly data usage to be around 325MB by end of 2010... US Mobile Data Market Update Q3 2010 http://www.chetansharma.com/blog/2010/11/07/us-mobile-data-market-update-q3-2010/
  • 10. that’s lovely and all, but... http://www.flickr.com/photos/wonderferret/215802064
  • 11. “ ...iPhone reports I’ve exceeded my monthly bandwidth cap by 4GB. Bugger. (how do I figure out what drained that bandwidth?) @iamdanw via Twitter http://twitter.com/iamdanw/status/3232692573310976
  • 12. let’s try a little experiment... http://www.flickr.com/photos/maxwellgs/4267311036
  • 13. turn your Wi-Fi off temporarily Step 1 Step 2 Select ‘Wi-Fi’ in ‘Settings’... Switch ‘Wi-Fi’ to ‘OFF’ position. Remember to turn on Wi-Fi back on once you’re done! And be sure to always use Wi-Fi networks for data intensive activities.
  • 14. reset your usage statistics 0 bytes Step 3 Step 4 Step 5 Tap ‘General’ in ‘Settings’... Tap ‘Usage’ in ‘General’... Tap ‘Reset Statistics’ in ‘Usage’. Remember to turn on Wi-Fi back on once you’re done! And be sure to always use Wi-Fi networks for data intensive activities.
  • 15. very cautious or for the geeks among us... || + || Safari Web Browser iPhone Simulator Charles HTTP Proxy WireShark change user-agent to ‘Mobile Safari’ via Developer tools How To Change The User Agent In Safari http://www.youtube.com/watch?v=ZSJ_KLEsX4M
  • 16. briefly now use your iPhone... http://www.flickr.com/photos/carbonnyc/5140154965
  • 17. reset, record, repeat... record results + record results + reset data use data reset data use data reset data 0MB 7.1MB 0MB 42.3MB repeat as desired keep in mind that tablets such as the iPad may consume significantly more data...
  • 18. here’s my data usage... a new month... 0KB 0MB Start of the monthly 500MB data allowance...
  • 19. comedy sketch 40.6 MB over 05:28 refresh + tweet “Pearl Jam” 973KB over 00:20 23MB over 00:20 51MB Listen to 3 songs on Spotify, view links, check Twitter and Facebook twice, watch a 5 minute video on YouTube and check Google Maps...
  • 20. refresh + update status 803KB over 00:10 find meeting... 2.1MB over 00:05 read TechCrunch a funny video 2.7MB over 00:15 3.2 MB over 02:13 101MB Check Google Maps for meeting location, watch new Samsung video, browse, tweet, Facebook, funny animal video and listen to new Muse track.
  • 21. conference talks 113 MB over 00:20 new Muse album upload photos... find lunch... 78MB over 01:30 3.4MB over 00:12 1.8MB over 00:05 refresh + tweet read email... updates... 3.1MB over 00:10 6.7MB over 00:45 1.6MB over 00:10 315MB Listen to a few more tracks on Spotify, another couple of videos on YouTube, chat via Twitter, Facebook, a few emails + photos, maps and surf...
  • 22. and that’s before lunch... http://www.flickr.com/photos/adactio/274644831
  • 23. please turn your Wi-Fi back on networks will vary... Step 6 Step 7 Select ‘Wi-Fi’ in ‘Settings’... Switch ‘Wi-Fi’ to ‘ON’ position. Remember to turn on Wi-Fi back on once you’re done! And be sure to always use Wi-Fi networks for data intensive activities.
  • 24. the demand upon a resource tends to expand to match the supply of the resource Generalisation of Parkinson’s Law http://www.flickr.com/photos/mikebaird/3898808431 http://en.wikipedia.org/wiki/Parkinson's_Law
  • 25. the Internet! ...significant shift in 2010 as (globally) off-deck revenues surpass on-deck revenues for the first time... operator portals Paraphrased from US Mobile Data Market Update Q3 2010 http://www.chetansharma.com/blog/2010/11/07/us-mobile-data-market-update-q3-2010/
  • 26. so the demand is obviously there, but let’s look at the supply... http://www.flickr.com/photos/johanl/4397800453
  • 27. 5 MBps 90% 2G estimated worldwide 2G penetration in 2010... 3G 4G 5 Average Theoretical 3.75 network speed in Mbps 2.5 1.25 0 GRPS EvDO EDGE UMTS HSPA+ LTE WiMAX WiFi LTE-Advanced network technology Comparison of wireless data standards http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf
  • 28. 150 MBps 21% 2G projected worldwide 3G penetration in 2010... 3G 4G 150 Average Theoretical 112.5 network speed in Mbps 75 37.5 0 GRPS EvDO EDGE UMTS HSPA+ LTE WiMAX WiFi LTE-Advanced network technology Morgan Stanley Internet Trends, April 12, 2010 http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf
  • 29. 1,000 MBps 0% 2G actual worldwide 4G penetration in 2010... 3G 4G 1000 Average Theoretical 750 network speed in Mbps 500 250 0 GRPS EvDO EDGE UMTS HSPA+ LTE WiMAX WiFi LTE-Advanced network technology Comparison of wireless data standards http://en.wikipedia.org/wiki/Comparison_of_wireless_data_standards
  • 30. Consumers do not understand the technical alphabet soup of technologies involved in 4G, but for our purposes we define WiMAX, LTE and HSPA+ as 4G technologies... marketing redacted 4G 2G 3G 4G 1000 Average Theoretical 750 network speed in Mbps 500 250 0 GRPS EvDO EDGE UMTS HSPA+ LTE WiMAX WiFi LTE-Advanced network technology T-Mobile 4G Service Now Available in More Markets and on New Devices - 02/11/2010 http://press.t-mobile.com/articles/americas-largest-4g-network
  • 31. ...fact is that there are no IMT-Advanced–or 4G– systems available or deployed at this stage. The Dirty Secret of Today’s 4G: It’s not 4G http://gizmodo.com/5680755/the-dirty-secret-of-todays-4g-its-not-4g http://www.flickr.com/photos/flissphil/6341843/
  • 34. “ ...the idea of buying service from wholesalers and thereby offloading data traffic as an excellent method for handling [the problem of mobile operators struggling to manage surging network traffic]... Reality Check: Wholesale ... more exciting than you think http://www.rcrwireless.com/article/20101102/REALITY_CHECK/101109990
  • 35. bandwidth as a commodity... http://www.flickr.com/photos/pinkmoose/2461093066
  • 37. yes, that Enron Open Bandwidth Commodity Trading Service http://www.internetnews.com/xSP/article.php/253861/Enron-Opens-Bandwidth-Commodity-Trading-Service.htm
  • 39. http://www.mobypicture.com/user/andrewgrill/view/7998275/sizes/full the mobile industry oxymoron “unlimited 500 MB internet” - how do they get away with saying this? @andrewgrill via Twitter http://twitter.com/#!/AndrewGrill/status/3462590709633024
  • 40. smartphone users: I want my unlimited data http://www.flickr.com/photos/chadmagiera/3035522407 http://news.cnet.com/8301-30686_3-20023471-266.html
  • 41. ...a large number of light users, people consuming less than 200MB of data per month, prefer unlimited plans... even if their usage patterns suggest that they would save money by getting a plan that's capped. Smartphone users: I want my unlimited data http://news.cnet.com/8301-30686_3-20023471-266.html
  • 42. greater bandwidth is coming, but not as fast as many would like... http://www.flickr.com/photos/schillergarcia/2836059154
  • 43. operators are cutting prices with the idea to generate revenue from data... Africa is on the cusp on an Internet boom http://www.flickr.com/photos/kiwanja/3169449999 http://www.csmonitor.com/World/Africa/Africa-Monitor/2010/1105/ Africa-is-on-the-cusp-of-an-Internet-boom
  • 44. ...via free content, with operating cost based on data consumption... http://www.flickr.com/photos/flickr_faris/361848995
  • 46. designing for mobile devices isn’t simply a matter of taking screen size into account...
  • 47. ...design for network efficiency* *you also need to design for context, but that’s another discussion...
  • 48. a few network efficient design strategies... http://www.flickr.com/photos/edo-finelight/4514878784
  • 50. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra dignissim consectetur. Donec ut nisl nisi, et pretium sem. Proin libero libero, mollis in vestibulum sed, interdum at nibh. Curabitur vel lectus sit amet leo blandit tincidunt quis sed nulla. Etiam scelerisque metus eget augue placerat vel elementum sem mattis. Pellentesque sapien mauris, laoreet sed malesuada ac, rhoncus in ipsum. Fusce ultrices consectetur odio ac tincidunt. Donec pharetra auctor lacus sit amet pulvinar. Nullam a urna turpis, sit amet vulputate mi. Donec eu suscipit purus. Mauris tincidunt scelerisque tellus, vel semper sapien hendrerit sed. Ut magna augue, gravida ac luctus vel, posuere in neque. Nullam vel lacus mi. Nulla et ante massa. In hac habitasse platea dictumst. Nam gravida tempor metus, ut viverra arcu feugiat vitae. Duis placerat, urna vel blandit cursus, metus purus condimentum velit, eu faucibus nisi nunc ac turpis. Nulla id enim elit. Pellentesque nec arcu et quam venenatis viverra. Sed magna neque, blandit eget lacinia vel, sollicitudin at lacus. Quisque eleifend dui eget tortor ornare quis fermentum sem auctor. Etiam vitae rhoncus velit. Aenean nulla nulla, suscipit non ullamcorper vel, eleifend ut dui. Morbi eu tortor in massa consectetur porttitor laoreet fringilla nisl. Vestibulum laoreet lobortis lacus non scelerisque. Ut bibendum rhoncus felis ut auctor. Integer porttitor viverra elementum. Vivamus sit amet ipsum ac velit feugiat tristique. Praesent nec velit ipsum. Maecenas in orci nulla, eu interdum mauris. Integer porta lacinia tempor. Curabitur sit amet nibh a sapien scelerisque accumsan. Curabitur feugiat suscipit imperdiet. Fusce orci ipsum, malesuada non cursus sit amet, laoreet ut purus. Praesent eget ligula urna. Donec mattis est eu tortor pulvinar mollis dictum elit malesuada. Aliquam varius nisl euismod massa accumsan quis accumsan erat viverra. Nunc ac velit velit. Sed lobortis, eros vel blandit luctus, nunc velit malesuada lacus, eget tincidunt neque nisl et neque. Aenean sagittis tellus purus, a aliquet augue. In hac habitasse platea dictumst. Vestibulum sed ipsum a ipsum fringilla congue eget at eros. Etiam feugiat, mi vel elementum tempor, massa dolor varius augue, id tempus tortor elit sed justo. In pulvinar, sapien in feugiat elementum, velit diam vehicula ligula, a semper felis lorem id justo. Aliquam erat volutpat. Sed varius tempor nibh et fringilla. Donec id suscipit leo. Nullam quis nisl lacus, vitae placerat massa. Aenean at massa dui, eu scelerisque sapien. Mauris vel neque et mi porttitor dapibus. Fusce quis libero eget justo facilisis scelerisque. Mauris eu dolor at purus volutpat suscipit. Cras libero nisi, placerat eget rhoncus et, auctor et magna. Vivamus quis vehicula ante. Nulla laoreet egestas gravida. Vestibulum tortor massa, feugiat ut sodales id, mattis id risus. Nulla egestas rutrum lacus at pretium. Nunc blandit dapibus libero, a facilisis tellus convallis vel. Integer auctor eros dapibus massa dapibus quis tempus quam pretium. Mauris ultricies leo eget odio convallis eget consectetur purus pharetra. Nulla facilisi. Duis nec velit ut ante suscipit auctor. Etiam leo tellus, eleifend a fermentum vel, luctus et libero. Proin urna felis, venenatis porttitor sollicitudin id, pellentesque vel lorem. In blandit mattis fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ligula dolor, viverra vitae tincidunt at, congue eget arcu. Pellentesque id interdum lacus. Suspendisse in lectus et nibh consectetur luctus vitae non magna. Ut interdum, est aliquam ultrices tempor, elit lorem mollis turpis, sed faucibus nisl enim sit amet sem. Vestibulum dapibus quam a lectus accumsan vitae posuere urna volutpat. Donec commodo fermentum arcu quis pulvinar. Nam eget eros ac turpis lobortis fermentum. Sed ultrices tristique nibh a aliquet. Cras tristique auctor elementum. Sed placerat, libero ac suscipit tincidunt, enim elit pharetra ligula, sit amet ultrices risus est ac diam. Nullam erat ligula, sagittis nec auctor imperdiet, scelerisque nec dolor. Mauris tincidunt risus at turpis facilisis congue. Curabitur purus ante, mollis ut bibendum sed, tincidunt quis nulla. Nam non ligula at eros dapibus porta. Fusce sapien justo, tempor ut viverra quis, consequat sit amet nisi. Integer iaculis, metus quis venenatis rhoncus, dolor erat venenatis lacus, et posuere odio diam eu orci. In hac habitasse platea dictumst. Morbi vulputate scelerisque diam. In gravida porttitor hendrerit. Curabitur nec augue ac dolor mattis dictum. Suspendisse accumsan facilisis tortor tincidunt feugiat. Etiam ante urna, auctor id fermentum a, varius vitae enim. Curabitur a bibendum edit ruthlessly... tellus. Curabitur pellentesque, felis ut molestie iaculis, sapien lectus cursus orci, sit amet accumsan dolor augue ac dui. Nulla cursus ipsum eget nisl aliquam ut mollis nibh dictum. Donec ut mauris sem. Suspendisse potenti. Nullam scelerisque ultrices mattis. Mauris ultrices magna orci, vitae adipiscing enim. Aliquam aliquam, nibh in mattis ornare, nisl risus sodales orci, nec molestie sem metus sed leo. Sed placerat diam eu lectus laoreet eu dictum nisi bibendum. In ullamcorper varius vestibulum. Sed congue varius orci vitae semper. Aenean risus justo, egestas eu pellentesque at, accumsan ac mi. Sed semper velit lacinia diam commodo ullamcorper. In quis tortor felis, non eleifend odio. Mauris quis sem mi, in placerat lacus. Phasellus at nisl quis magna adipiscing convallis. Aenean ut massa mauris, sit amet imperdiet dui. Aliquam dictum gravida egestas. Etiam interdum, risus sit amet dignissim cursus, sem dui porta sapien, tempus egestas quam velit vitae tellus. Vivamus a purus nec felis porttitor vehicula. Donec nec diam sem. In eget justo et mauris porta placerat vitae id purus. Sed nisi quam, scelerisque non pretium sit amet, malesuada elementum augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fermentum venenatis ornare. Etiam id erat nisl, tincidunt scelerisque sapien. Praesent ut faucibus lectus. Sed sit amet diam metus. Etiam pellentesque bibendum dui, eu volutpat tortor scelerisque et. Aliquam ut eros leo, sed ultricies lacus. Proin posuere sagittis magna, ac tristique sapien ultrices id. In gravida bibendum justo, eget rutrum risus commodo eu. Donec turpis arcu, laoreet pharetra egestas nec, tincidunt in leo. Vestibulum pulvinar nibh eget magna fringilla dictum. Cras et velit et lectus porttitor lobortis. Sed consectetur, eros sit amet tempor placerat, dui mi porttitor diam, in suscipit eros nisl quis lacus. Cras sed urna mi. Vestibulum at felis vitae.
  • 51. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra dignissim consectetur. Donec ut nisl nisi, et pretium sem. Proin libero libero, mollis in vestibulum sed, interdum at nibh. Curabitur vel lectus sit amet leo blandit tincidunt quis sed nulla. Etiam scelerisque metus eget augue placerat vel elementum sem mattis. Pellentesque sapien mauris, laoreet sed malesuada ac, rhoncus in ipsum. Fusce ultrices consectetur odio ac tincidunt. Donec pharetra auctor lacus sit amet pulvinar. Nullam a urna turpis, sit amet vulputate mi. Donec eu suscipit purus. Mauris tincidunt scelerisque tellus, vel semper sapien hendrerit sed. Ut magna augue, gravida ac luctus vel, posuere in neque. Nullam vel lacus mi. Nulla et ante massa. In hac habitasse platea dictumst. Nam gravida tempor metus, ut viverra arcu feugiat vitae. Duis placerat, urna vel blandit cursus, metus purus condimentum velit, eu faucibus nisi nunc ac turpis. Nulla id enim elit. Pellentesque nec arcu et quam venenatis viverra. Sed magna neque, blandit eget lacinia vel, sollicitudin at lacus. Quisque eleifend dui eget tortor ornare quis fermentum sem auctor. Etiam vitae rhoncus velit. Aenean nulla nulla, suscipit non ullamcorper vel, eleifend ut dui. Morbi eu tortor in massa consectetur porttitor laoreet fringilla nisl. Vestibulum laoreet lobortis lacus non scelerisque. Ut bibendum rhoncus felis ut auctor. Integer porttitor viverra elementum. Vivamus sit amet ipsum ac velit feugiat tristique. Praesent nec velit ipsum. Maecenas in orci nulla, eu interdum mauris. Integer porta lacinia tempor. Curabitur sit amet nibh a sapien scelerisque accumsan. Curabitur feugiat suscipit imperdiet. Fusce orci ipsum, malesuada non cursus sit amet, laoreet ut purus. Praesent eget ligula urna. Donec mattis est eu tortor pulvinar mollis dictum elit malesuada. Aliquam varius nisl euismod massa accumsan quis accumsan erat viverra. Nunc ac velit velit. Sed lobortis, eros vel blandit luctus, nunc velit malesuada lacus, eget tincidunt neque nisl et neque. Aenean sagittis tellus purus, a aliquet augue. In hac habitasse platea dictumst. Vestibulum sed ipsum a ipsum fringilla congue eget at eros. Etiam feugiat, mi vel elementum tempor, massa dolor varius augue, id tempus tortor elit sed justo. In pulvinar, sapien in feugiat elementum, velit diam vehicula ligula, a semper felis lorem id justo. Aliquam erat volutpat. Sed varius tempor nibh et fringilla. Donec id suscipit leo. Nullam quis nisl lacus, vitae placerat massa. Aenean at massa dui, eu scelerisque sapien. Mauris vel neque et mi porttitor dapibus. Fusce quis libero eget justo facilisis scelerisque. Mauris eu dolor at purus volutpat suscipit. Cras libero nisi, placerat eget rhoncus et, auctor et magna. Vivamus quis vehicula ante. Nulla laoreet egestas gravida. Vestibulum tortor massa, feugiat ut sodales id, mattis id risus. Nulla egestas rutrum lacus at pretium. Nunc blandit dapibus libero, a facilisis tellus convallis vel. Integer auctor eros dapibus massa dapibus quis tempus quam pretium. Mauris ultricies leo eget odio convallis eget consectetur purus pharetra. Nulla facilisi. Duis nec velit ut ante suscipit auctor. Etiam leo tellus, eleifend a fermentum vel, luctus et libero. Proin urna felis, venenatis porttitor sollicitudin id, pellentesque vel lorem. In blandit mattis fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ligula dolor, viverra vitae tincidunt at, congue eget arcu. Pellentesque id interdum lacus. Suspendisse in lectus et nibh consectetur luctus vitae non magna. Ut interdum, est aliquam ultrices tempor, elit lorem mollis turpis, sed faucibus nisl enim sit amet sem. Vestibulum dapibus quam a lectus accumsan vitae posuere urna volutpat. Donec commodo fermentum arcu quis pulvinar. Nam eget eros ac turpis lobortis fermentum. Sed ultrices tristique nibh a aliquet. Cras tristique auctor elementum. Sed placerat, libero ac suscipit tincidunt, enim elit pharetra ligula, sit amet ultrices risus est ac diam. Nullam erat ligula, sagittis nec auctor imperdiet, scelerisque nec dolor. Mauris tincidunt risus at turpis facilisis congue. Curabitur purus ante, mollis ut bibendum sed, tincidunt quis nulla. Nam non ligula at eros dapibus porta. Fusce sapien justo, tempor ut viverra quis, consequat sit amet nisi. Integer iaculis, metus quis venenatis rhoncus, dolor erat venenatis lacus, et posuere odio diam eu orci. In hac habitasse platea dictumst. Morbi vulputate scelerisque diam. In gravida porttitor hendrerit. Curabitur nec augue ac dolor mattis dictum. Suspendisse accumsan facilisis tortor tincidunt feugiat. Etiam ante urna, auctor id fermentum a, varius vitae enim. Curabitur a bibendum then edit a few more times.... tellus. Curabitur pellentesque, felis ut molestie iaculis, sapien lectus cursus orci, sit amet accumsan dolor augue ac dui. Nulla cursus ipsum eget nisl aliquam ut mollis nibh dictum. Donec ut mauris sem. Suspendisse potenti. Nullam scelerisque ultrices mattis. Mauris ultrices magna orci, vitae adipiscing enim. Aliquam aliquam, nibh in mattis ornare, nisl risus sodales orci, nec molestie sem metus sed leo. Sed placerat diam eu lectus laoreet eu dictum nisi bibendum. In ullamcorper varius vestibulum. Sed congue varius orci vitae semper. Aenean risus justo, egestas eu pellentesque at, accumsan ac mi. Sed semper velit lacinia diam commodo ullamcorper. In quis tortor felis, non eleifend odio. Mauris quis sem mi, in placerat lacus. Phasellus at nisl quis magna adipiscing convallis. Aenean ut massa mauris, sit amet imperdiet dui. Aliquam dictum gravida egestas. Etiam interdum, risus sit amet dignissim cursus, sem dui porta sapien, tempus egestas quam velit vitae tellus. Vivamus a purus nec felis porttitor vehicula. Donec nec diam sem. In eget justo et mauris porta placerat vitae id purus. Sed nisi quam, scelerisque non pretium sit amet, malesuada elementum augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fermentum venenatis ornare. Etiam id erat nisl, tincidunt scelerisque sapien. Praesent ut faucibus lectus. Sed sit amet diam metus. Etiam pellentesque bibendum dui, eu volutpat tortor scelerisque et. Aliquam ut eros leo, sed ultricies lacus. Proin posuere sagittis magna, ac tristique sapien ultrices id. In gravida bibendum justo, eget rutrum risus commodo eu. Donec turpis arcu, laoreet pharetra egestas nec, tincidunt in leo. Vestibulum pulvinar nibh eget magna fringilla dictum. Cras et velit et lectus porttitor lobortis. Sed consectetur, eros sit amet tempor placerat, dui mi porttitor diam, in suscipit eros nisl quis lacus. Cras sed urna mi. Vestibulum at felis vitae.
  • 52. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra dignissim consectetur. Donec ut nisl nisi, et pretium sem. Proin libero libero, mollis in vestibulum sed, interdum at nibh. Curabitur vel lectus sit amet leo blandit tincidunt quis sed nulla. Etiam scelerisque metus eget augue placerat vel elementum sem mattis. Pellentesque sapien mauris, laoreet sed malesuada ac, rhoncus in ipsum. Fusce ultrices consectetur odio ac tincidunt. Donec pharetra auctor lacus sit amet pulvinar. Nullam a urna turpis, sit amet vulputate mi. Donec eu suscipit purus. Mauris tincidunt scelerisque tellus, vel semper sapien hendrerit sed. Curabitur feugiat suscipit imperdiet. Fusce orci ipsum, malesuada non cursus sit amet, laoreet ut purus. Praesent eget ligula urna. Donec mattis est eu tortor pulvinar mollis dictum elit malesuada. Aliquam varius nisl euismod massa accumsan quis accumsan erat viverra. Nunc ac velit velit. Sed lobortis, eros vel blandit luctus, nunc velit malesuada lacus, eget tincidunt neque nisl et neque. Donec id suscipit leo. Nulla laoreet egestas gravida. Vestibulum tortor massa, feugiat ut sodales id, mattis id risus. Nulla egestas rutrum lacus at pretium. Nunc blandit dapibus libero, a facilisis tellus convallis vel. Integer auctor eros dapibus massa dapibus quis tempus quam pretium. Mauris tincidunt risus at turpis facilisis congue. Curabitur purus ante, mollis ut bibendum sed, tincidunt quis nulla. Nam non ligula at eros dapibus porta. Fusce sapien justo, tempor ut viverra quis, consequat sit amet nisi. Integer iaculis, metus quis think small... venenatis rhoncus, dolor erat venenatis lacus, et posuere odio diam eu orci. Sed semper velit lacinia diam commodo ullamcorper. Phasellus at nisl quis magna adipiscing convallis. Aenean ut massa mauris, sit amet imperdiet dui. Sed nisi quam, scelerisque non pretium sit amet, malesuada elementum augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fermentum venenatis ornare. Etiam id erat nisl, tincidunt scelerisque sapien.
  • 53. this includes markup... soup is best served in a bowl... we see this much more than you’d think... recreating <div class="body"> existing <tags> <div class="header"> is not cool <div class= "h1"> <span>Hello World!</span> <div> soup... </div> </div> <div class="body">HTML <span class="emphasis">can actually be</span>meaningful. </div> </div> unnecessary markup will increase the amount of data you transfer, and may impact performance
  • 54. well structured & meaningful contains 71% less filler <h1>Hello World!</h1> <p>HTML<em>can actually be</em>meaningful.</p> keep markup short, semantic and meaningful – less data transfer and better performance
  • 55. “full web” vs. “mobile web” basic comparison of The New York Times and The Guardian websites on the iPhone...
  • 56. more clicks to find relevant content requires pinch + zoom each page requires an almost full refresh
  • 57. no pinch + zoom fewer clicks much less bandwidth required
  • 58. 996.3 KB 81.2 KB mobile optimised sites are far more network efficient
  • 59. filter compress
  • 60. appropriately resize and compress media for each device large.jpg 35.73 KB http://www.flickr.com/photos/ulybug/152518872
  • 61. appropriately resize and compress media for each device medium.jpg 10.69 KB http://www.flickr.com/photos/ulybug/152518872
  • 62. appropriately resize and compress media for each device small.jpg 4.57 KB http://www.flickr.com/photos/ulybug/152518872
  • 63. appropriately resize and compress media for each device large.jpg medium.jpg small.jpg 35.73 KB 10.69 KB 4.57 KB http://www.flickr.com/photos/ulybug/152518872
  • 64. /*! * jQuery JavaScript Library v1.4.4 * http://jquery.com/ * * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * Includes Sizzle.js * http://sizzlejs.com/ * Copyright 2010, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. devices don’t care * * Date: Thu Nov 11 19:04:53 2010 -0500 about formatting & style... */ (function( window, undefined ) { // Use the correct document accordingly with window argument (sandbox) var document = window.document; var jQuery = (function() { // Define a local copy of jQuery var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); }, // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$, // A central reference to the root jQuery(document) rootjQuery, // A simple way to check for HTML strings or ID strings // (both of which we optimize for) quickExpr = /^(?:[^<]*(<[wW]+>)[^>]*$|#([w-]+)$)/, // Is it a simple selector isSimple = /^.[^:#[.,]*$/, // Check if a string has a non-whitespace character in it rnotwhite = /S/, rwhite = /s/, // Used for trimming whitespace trimLeft = /^s+/, trimRight = /s+$/,
  • 65. (function(E,B){function ka(a,b,d){if(d===B&&a.nodeType===1){d=a.getAttribute("data-"+b);if(typeof d==="string"){try{d=d==="true"?true:d==="false" false:d==="null"?null:!c.isNaN(d)?parseFloat(d):Ja.test(d)?c.parseJSON(d):d}catch(e){}c.data(a,b,d)}else d=B}return d}function U(){return false} function ca(){return true}function la(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function Ka(a){var b,d,e,f,h,l,k,o,x,r,A,C=[];f=[];h=c.dat (this,this.nodeType?"events":"__events__");if(typeof h==="function")h=h.events;if(!(a.liveFired===this||!h||!h.live||a.button&&a.type==="click")){if (a.namespace)A=RegExp("(^|.)"+a.namespace.split(".").join(".(?:.*.)?")+"(.|$)");a.liveFired=this;var J=h.live.slice(0);for(k=0;k<J.length;k+ +){h=J[k];h.origType.replace(X,"")===a.type?f.push(h.selector):J.splice(k--,1)}f=c(a.target).closest(f,a.currentTarget);o=0;for(x=f.length;o<x;o++) {r=f[o];for(k=0;k<J.length;k++){h=J[k];if(r.selector===h.selector&&(!A||A.test(h.namespace))){l=r.elem;e=null;if(h.preType==="mouseenter"|| h.preType==="mouseleave"){a.type=h.preType;e=c(a.relatedTarget).closest(h.selector)[0]}if(!e||e!==l)C.push({elem:l,handleObj:h,level:r.level})}}} o=0;for(x=C.length;o<x;o++){f=C[o];if(d&&f.level>d break;a.currentTarget=f.elem;a.data=f.handleObj.data;a.handleObj=f.handleObj; minify all styles, scripts A=f.handleObj.origHandler.apply(f.elem,arguments);if(A===false||a.isPropagationStopped()){d=f.level;if(A===false)b=false;if (a.isImmediatePropagationStopped())break}}return b}}function Y(a,b){return(a&&a!=="*"?a+".":"")+b.replace(La,"`").replace(Ma,"&")}function ma(a,b,d) {if(c.isFunction(b))return c.grep(a,function(f,h){return!!b.call(f,h,f)===d});else if(b.nodeType)return c.grep(a,function(f){return f===b===d});else and JSON/XML data... if(typeof b==="string"){var e=c.grep(a,function(f){return f.nodeType===1});if(Na.test(b))return c.filter(b,e,!d);else b=c.filter(b,e)}return c.grep (a,function(f){return c.inArray(f,b)>=0===d})}function na(a,b){var d=0;b.each(function(){if(this.nodeName===(a[d]&&a[d].nodeName)){var e=c.data(a[d+ +]),f=c.data(this,e);if(e=e&&e.events){delete f.handle;f.events={};for(var h in e)for(var l in e[h])c.event.add(this,h,e[h][l],e[h][l].data)}}})} function Oa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||""); b.parentNode&&b.parentNode.removeChild(b)}function oa(a,b,d){var e=b==="width"?a.offsetWidth:a.offsetHeight;if(d==="border")return e;c.each (b==="width"?Pa:Qa,function(){d||(e-=parseFloat(c.css(a,"padding"+this))||0);if(d==="margin")e+=parseFloat(c.css(a,"margin"+this))||0;else e- =parseFloat(c.css(a,"border"+this+"Width"))||0});return e}function da(a,b,d,e){if(c.isArray(b)&&b.length)c.each(b,function(f,h){d||Ra.test(a)?e (a,h):da(a+"["+(typeof h==="object"||c.isArray(h)?f:"")+"]",h,d,e)});else if(!d&&b!=null&&typeof b==="object")c.isEmptyObject(b)?e(a,""):c.each (b,function(f,h){da(a+"["+f+"]",h,d,e)});else e(a,b)}function S(a,b){var d={};c.each(pa.concat.apply([],pa.slice(0,b)),function(){d[this]=a});return d}function qa(a){if(!ea[a]){var b=c("<"+a+">").appendTo("body"),d=b.css("display");b.remove();if(d==="none"||d==="")d="block";ea[a]=d}return ea[a]} function fa(a){return c.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:false}var t=E.document,c=function(){function a(){if(!b.isReady) {try{t.documentElement.doScroll("left")}catch(j){setTimeout(a,1);return}b.ready()}}var b=function(j,s){return new b.fn.init(j,s)},d=E.jQuery,e=E. $,f,h=/^(?:[^<]*(<[wW]+>)[^>]*$|#([w-]+)$)/,l=/S/,k=/^s+/,o=/s+$/,x=/W/,r=/d/,A=/^<(w+)s*/?>(?:</1>)?$/,C=/^[],:{}s]*$/,J=/(?:[" /bfnrt]|u[0-9a-fA-F]{4})/g,w=/"[^"nr]*"|true|false|null|-?d+(?:.d*)?(?:[eE][+-]?d+)?/g,I=/(?:^|:|,)(?:s*[)+/g,L=/(webkit)[ /]([w.] +)/,g=/(opera)(?:.*version)?[ /]([w.]+)/,i=/(msie) ([w.]+)/,n=/(mozilla)(?:.*? rv:([w.))?/,m=navigator.userAgent,p=false,q= [],u,y=Object.prototype.toString,F=Object.prototype.hasOwnProperty,M=Array.prototype.push,N=Array.prototype.slice,O=String.prototype.trim,D=Array.pro totype.indexOf,R={};b.fn=b.prototype={init:function(j,s){var v,z,H;if(!j)return this;if(j.nodeType){this.context=this[0]=j;this.length=1;return this} if(j==="body"&&!s&&t.body){this.context=t;this[0]=t.body;this.selector="body";this.length=1;return this}if(typeof j==="string")if((v=h.exec(j))&&(v [1]||!s))if(v[1]){H=s?s.ownerDocument||s:t;if(z=A.exec(j))if(b.isPlainObject(s)){j=[t.createElement(z[1])];b.fn.attr.call(j,s,true)}else j= [H.createElement(z[1])];else{z=b.buildFragment([v[1]],[H]);j=(z.cacheable?z.fragment.cloneNode(true):z.fragment).childNodes}return b.merge(this,j)} else{if((z=t.getElementById(v[2]))&&z.parentNode){if(z.id!==v[2])return f.find(j);this.length=1;this[0]=z}this.context=t;this.selector=j;return this} else if(!s&&!x.test(j)){this.selector=j;this.context=t;j=t.getElementsByTagName(j);return b.merge(this,j)}else return!s||s.jquery?(s||f).find(j):b (s).find(j);else if(b.isFunction(j))return f.ready(j);if(j.selector!==B){this.selector=j.selector;this.context=j.context}return b.makeArray (j,this)},selector:"",jquery:"1.4.4",length:0,size:function(){return this.length},toArray:function(){return N.call(this,0)},get:function(j){return j==null?this.toArray():j<0?this.slice(j)[0]:this[j]},pushStack:function(j,s,v){var z=b();b.isArray(j)?M.apply(z,j):b.merge(z,j);z.prevObject= this;z.context=this.context;if(s==="find")z.selector=this.selector+(this.selector?" ":"")+v;else if(s)z.selector=this.selector+"."+s+"("+v+")";return z},each:function(j,s){return b.each(this,j,s)},ready:function(j){b.bindReady();if(b.isReady)j.call(t,b);else q&&q.push(j);return this},eq:function(j) {return j===-1?this.slice(j):this.slice(j,+j+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(N.apply(this,arguments),"slice",N.call(arguments).join(","))},map:function(j){return this.pushStack(b.map(this,function(s,v){return j.call(s,v,s)}))},end:function(){return this.prevObject||b(null)},push:M,sort:[].sort,splice:[].splice};b.fn.init.prototype=b. fn;b.extend=b.fn.extend=function(){var j,s,v,z,H,G=arguments[0]||{},K=1,Q=arguments.length,ga=false;if(typeof G==="boolean"){ga=G;G=arguments[1]|| {};K=2}if(typeof G!=="object"&&!b.isFunction(G))G={};if(Q===K){G=this;--K}for(;K<Q;K++)if((j=arguments[K])!=null)for(s in j){v=G[s];z=j[s];if(G!==z) if(ga&&z&&(b.isPlainObject(z)||(H=b.isArray(z)))){if(H){H=false;v=v&&b.isArray(v)?v:[]}else v=v&&b.isPlainObject(v)?v:{};G[s]=b.extend(ga,v,z)}else if(z!==B)G[s]=z}return G};b.extend({noConflict:function(j){E.$=e;if(j)E.jQuery=d;return b},isReady:false,readyWait:1,ready:function(j) {j===true&&b.readyWait--;if(!b.readyWait||j!==true&&!b.isReady){if(!t.body)return setTimeout(b.ready,1);b.isReady=true;if(!(j!==true&&-- b.readyWait>0))if(q){var s=0,v=q;for(q=null;j=v[s++];)j.call(t,b);b.fn.trigger&&b(t).trigger("ready").unbind("ready")}}},bindReady:function(){if(!p) {p=true;if(t.readyState==="complete")return setTimeout(b.ready,1);if(t.addEventListener){t.addEventListener("DOMContentLoaded",u,false); E.addEventListener("load",b.ready,false)}else if(t.attachEvent){t.attachEvent("onreadystatechange",u);E.attachEvent("onload",b.ready);var j=false;
  • 66. data formats do matter... XML JSON 94 KB 76 KB same data, 20% lighter...
  • 67. XML JSON 18.5 KB 14 KB 80% smaller when compressed and compression can make a huge difference...
  • 68. but unpacking requires time... http://www.flickr.com/photos/spine/436111793
  • 69. ? use strategically CSS XML HTML JSON JS not always a good idea for everything... uncompressing data can impact browser performance ...thanks to @ for the reminder!
  • 70. reuse existing data formats in creative + efficient ways... ...seriously? 7.1MB of audio data compressed to 1.2MB using PNG format http://audioscene.org/scene-files/yury/pngencoding/sample.html
  • 71. rendered + optimised proxy browser on proxy server... off-load to the server... free + unlimited bandwidth OBML* HTML limited + costly proxy server bbc.co.uk bandwidth *OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
  • 72. ...a little information design can significantly reduce data transfer 1 year of data <1KB sparklines http://insideanalytics.blogspot.com/2006/09/busy-but-good-dashboard.html
  • 73. filter compress cache
  • 74. moving the same bits around eventually gets expensive... http://www.flickr.com/photos/fabricio/1576392520
  • 75. conveniently store bits so they can be reused in the future... http://www.flickr.com/photos/seattlemunicipalarchives/3762792170
  • 76. cache as much as possible... must be requested from the network 0 KB 0 KB 7.5 KB CSS JSON 0 KB 18 KB JS HTML 14 KB 0 KB jQuery 0 KB every HTTP request adds up these are only downloaded once... local cache network data via headers, manifests, etc. new data requests
  • 77. filter compress cache communicate
  • 78. global seings could be used by other applications to determine how they use the network... Settings > Bandwidth Settings > Bandwidth > Usage Profile Settings to enable/disable (non-roaming) data Setting to determine how applications access, as well as provide a means of limiting accessing the Internet via operator networks data use. should use data services. doesn’t currently exist – just an idea...
  • 79. On more teeny button... Usage Profiles Add an extra button that launches a ‘Usage Applications could provide users with ‘usage Profile’... profiles’ where their data consumption within each application is easily and instantly communicated. doesn’t currently exist – just an idea...
  • 80. communicate Loading... Loading revisited... Mobile browsers currently provide a means of It wouldn’t be a huge stretch to add a simple displaying download progress. status bar that displays the total KB (or MB’s!) being downloaded. doesn’t currently exist – just an idea...
  • 81. ...equivalent efficiency ratings for data? point of differentiation doesn’t currently exist – just an idea...
  • 82. filter compress cache communicate
  • 83. oh, and don’t forget...
  • 84. filter compress off-load cache communicate
  • 85. off-load high bandwidth activities and services to Wi-Fi... http://www.flickr.com/photos/yodelanecdotal/4092671973
  • 86. No Wi-Fi Network Available Option to defer activity due to lack of Wi-Fi Application simply chews up 3G data Application alerts the user to the lack of Wi-Fi allowance without warning. connectivity and prompts them to continue. doesn’t currently exist – just an idea...
  • 87. filter compress off-load cache communicate
  • 88. design for network efficiency is essential... http://www.flickr.com/photos/lingaraj/2415084235
  • 89. mobile data shouldn’t be the luxury it currently is... – @timberners_lee http://www.flickr.com/photos/campuspartymexico/4102296282
  • 90. thank you hello@yiibu.com http://www.slideshare.net/bryanrieger/the-end-of-unlimited-bandwidth