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
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
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
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+$/,
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
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
78. global seings 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...
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...