Yiibu rethinkingthemobileweb-100910074556-phpapp01
2 likes987 views
The document discusses designing mobile web experiences. It begins by noting that while some devices like the iPhone are popular, the overall penetration of smartphones remains relatively low globally. It then examines the diversity of mobile devices and browsers in use. The document argues for an adaptive approach that works across different browsers and devices, using techniques like responsive design with media queries. It provides guidelines for mobile-friendly development, such as using semantic HTML, limiting animations for performance, and structuring CSS to deliver the right styles for each device type. The goal is to make the mobile web accessible to all users, not just those with specific devices.
Yiibu rethinkingthemobileweb-100910074556-phpapp01
- 1. Rethinking the Mobile Web a pragmatic look at creating an accessible and inclusive mobile experience http://www.๏ฌickr.com/photos/fpat/3692425154
- 2. we a lovely, location-b ased, social, photo thing y... this presentation is not about these. http://www.๏ฌickr.com/photos/scobleizer/3985020876 apps, and...
- 3. Dinosaurs! we think the iPad is pretty awesome, but... http://www.๏ฌickr.com/photos/goincase/4647893507
- 5. billion 1.8 the number of internet connections in the world today... 26% of the worldโs population at the beginning of 2010 โ http://www.internetworldstats.com
- 6. billion 6.8 the number of people in the world today... *2009 estimates put the population around 6.79 billion inhabitants...
- 7. billion 3.4 the number of people with mobile devices today... or roughly 1/2 the population of the planet, which is...
- 8. itโs about people not devices...
- 9. so hereโs the dilemma... http://www.๏ฌickr.com/photos/soundman1024/1796003688
- 10. "The future is already here โ itโs just not evenly distributed." โ William Gibson http://www.๏ฌickr.com/photos/kiwanja/3169447879
- 11. no home Sony Ericsson w810i no iPhone technology should not only be accessible... http://www.๏ฌickr.com/photos/walkadog/3093763311
- 13. and available to everyone... iPhone http://www.๏ฌickr.com/photos/pictfactory/2796367140
- 14. yes, even this man who does not have an iPhone... not an iPhone... http://www.๏ฌickr.com/photos/dopesmuglar/486087009
- 15. so, who actually has an iPhone... http://www.๏ฌickr.com/photos/data_op/2468057934
- 16. USA
- 17. about 6% US market share... enormous impact US Population: 307 million Smartphone penetration: 31% of pop. iPhone market share: 21% of smp. Total iPhones in US: 19 million (~6%) low overall penetration The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact http://moconews.net/article/419-deep-discounts-on-smartphones-drive-u.s.-adoption-rates-to-nearly-a-thi/ and http://www.npd.com/press/releases/press_100510.html
- 18. EU5
- 19. only 4% EU5* market share... enormous impact EU5* = France, Germany, Italy, Spain and United Kingdom low overall penetration The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact http://www.comscore.com/layout/set/popup/layout/set/popup/Press_Events/Press_Releases/2010/6/The_iPhone_Reality_in_Europe_Low_Overall_Penetration_Enormous_Impact
- 20. <4% global market share* enormous impact low overall penetration *I suspect itโs actually much less, but ๏ฌnding accurate global ๏ฌgures is a tad di๏ฌcult...
- 21. ie: BMW The โmost popularโ devices donโt necessarily translate to the most used devices. ie: Ford
- 22. โ yeah, but those devices suck! http://www.๏ฌickr.com/photos/eldret_99/3311540398
- 23. ahem...
- 24. the ๏ฌrst smartphone in 2003... considered portable in 1984 ๏ฌts in your pocket still widely used... Released: 1984 CPU: 8 MHz RAM: 128k (512k max) Storage: 400k (3.5โ ๏ฌoppy) Display: 22.9 cm Monochrome Dimensions: 34.5 x 24.4 x 27.7 cm Weight: 7.5 kgs Released: 2003 CPU: 104 MHz RAM: 6 MB Storage: 32 MB MMC Card Display: 5.3 cm Thousands of colours Dimensions: 10.9 x 5.8 x 2.4 cm Weight: 122 g
- 25. the music phone in 2008... again, it was โportableโ...? ...this runs Flash not a feature phone, nor a smartphone... Released: 1998 CPU: 233 MHz RAM: 32 MB (512 MB max) Storage: 4 GB (+ optical drive) Display: 38.1 cm Millions of colours Dimensions: 40.1 x 38.6 x 44.7 cm Weight: 17.3 kgs Released: 2008 CPU: 434 MHz RAM: 128 MB Storage: 8 GB (16 GB max) Display: 8.1 cm Millions of colours Dimensions: 11.1 x 5.2 x 1.5 cm Weight: 109 g
- 26. the feature phone in 2009... smartphone from 2005 extremely popular today... still widely used today... Released: 2005 CPU: 220 MHz RAM: 22 MB Storage: 64 MB Display: 5.3 cm Thousands of colours Dimensions: 10.8 x 5.3 x 2.2 cm Weight: 126 g Released: 2009 CPU: 369 MHz RAM: 30 MB Storage: 1 GB (16 GB max) Display: 5.1 cm Thousands of colours Dimensions: 10.6 x 4.7 x 1.5 cm Weight: 88 g
- 27. the smartphone in 2010... ...playing โcatch-upโ Released: 2010 CPU: 680 MHz RAM: 256 MB Storage: 16 GB (32 GB max) Display: 8.9 cm Millions of colours Dimensions: 11.4 x 5.9 x 1.3 cm Weight: 135 g raising the โbarโ... Released: 2010 CPU: 1 GHz A4 Processor RAM: 512 MB Storage: 16 GB (32 GB max) Display: 8.9 cm Millions of colours Dimensions: 11.5 x 5.9 x 0.9 cm Weight: 137 g
- 28. โ ...but folks with those other phones simply donโt use the Internet. http://www.๏ฌickr.com/photos/carbonnyc/3369424492
- 29. โ yeah, and grandma doesnโt do Facebook... Grandma* Facebook http://www.๏ฌickr.com/photos/amagill/304701054 *not my Grandma
- 30. billion 1.3 the number of mobile internet users today... ...includes WAP and โreal webโ via Tomi Ahonen Consulting
- 31. 1/3 number of global internet users who access the internet only via mobile... ...includes WAP and โreal webโ via Tomi Ahonen Consulting
- 32. 21% the projected worldwide 3G penetration in 2010... via Morgan Stanley
- 33. so, what are they using...
- 34. mobile browser market share via http://gs.statcounter.com - 02/2010 other? things have changed skeptical UC ate Nokiaโs share... other? other? note OperaMini... quality + sample size? Data Source: http://gs.statcounter.com Published Under a Creative Commons Attribution 3.0 Unported License You are free to copy, distribute and transmit the work and to adapt the work providing it is attributed to www.icrossing.co.uk http://www.๏ฌickr.com/photos/icrossing_uk/4342659861 Blackberry!
- 35. something happened in February... UC browser... Nokia browser... Top 9 Mobile Browsers in China from Sep 09 to Aug 10 | StatCounter Global Stats http://gs.statcounter.com/#mobile_browser-CN-monthly-200909-201008
- 36. moving forward... used in iOS, Android, Palm WebOS, Nokia Qt, Bada, Symbian and new Blackberry... primarily used on feature phones supporting Java ME... + WebKit OperaMini watch these... Windows Mobile proxy browser... lots of new browsers, variation and of course โ legacy browsers Obigo โFennecโ Internet Explorer Browser UC proxy browsers MicroB SkyFire Internet Browser
- 37. the importance of WebKit... open source licensed under the GNU Library General Public License excellent standards support including HTML, CSS3, SVG, etc. innovations often contributed back example: HTML5, CSS animations, SquirrelFish, etc. adopted by many leading companies WebKit including Apple, Nokia, Samsung, Google, Palm, etc. used in many mobile operating systems including iOS, Android, webOS, Bada, Symbian, etc. btw - โThere is no WebKit on Mobileโ by @ppk http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
- 38. the importance of OperaMini... free costs consumers absolutely nothing a full-web experience supports Ajax, zooming, tabbed browsing, etc excellent standards support based on the same code-base as the Opera browser available just about anywhere on JavaME, iPhone, Android, Windows Mobile + more an extremely e๏ฌcient browser a proxy server ๏ฌlters, compresses & pre-renders content usable on older devices breathe new life into those antique devices... very important OperaMini
- 39. proxy browser rendered + optimised on proxy server... and proxy browsers... free + unlimited bandwidth OBML* limited + costly bandwidth HTML proxy server bbc.co.uk *OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
- 40. on private networks... caller a d limited + costly bandwidth switching centre c receiver b base-station to the Internet... transcoding, bandwidth limitations, service blocking and no packet neutrality
- 41. also availabl e for Android ... OperaMini is great for browsing the web on iPhone when your connection stinks. Which is unfortunately is fairly often in my case. โ @jonathanstark http://www.๏ฌickr.com/photos/johanl/4424185115 โ
- 42. app yeah, whateverโI just wanna build a mobile website...
- 43. traditionally you might consider... a device database ie. DeviceAtlas or WURFL device detection content adaptation an abstraction layer media types WURFL/WALL transcoding exhausting testing device capabilities various standards multiple templates private networks ge๎ing โon-deckโ data limits multiple sites an o๏ฌ-deck strategy... cHTML thematic the โOne Webโ dream consistency correct doctypes fragmentation switching algorithms using UAProf data WML XHTML-MP mimetypes http://www.๏ฌickr.com/photos/rmlowe/3281353786 WAP
- 44. but that might be a bit overwhelming... โ OMG... http://www.๏ฌickr.com/photos/richardmoross/1413692087
- 46. ...a look at what weโre doing now?* *for illustration purposes only
- 48. but thatโs not terribly mobile friendly โ what about...
- 50. oh, but then that just begs the question...
- 51. other... TVs laptops/netbooks handheld consoles what exactly is mobile... http://www.๏ฌickr.com/photos/amagill/26273015
- 54. then again, we could...
- 55. create an adaptive experience... http://www.๏ฌickr.com/photos/rohit_saxena/4873732679
- 56. an example http://colly.com* *for illustration purposes only, Iโm not criticising the talented Mr. Collison or his ๏ฌne work...
- 57. http://colly.com MOBILE SITE OF THE YEAR NOMINEE http://www.thenetawards.com/
- 60. also available on mobile... squishy http://colly.com/ squishy
- 61. al an optimce experien squishy squishy brought to you through the magic of @media queries... http://colly.com/ tada!
- 63. these are also mobile... WebKit approximations based on actual device testing - font rendering will vary... http://colly.com/ WebKit
- 64. as are these... the iPhone is #1 device for OperaMini *OperaMini is often preferred by many users as it optimises content prior to download, which reduces data costs. http://colly.com/
- 65. and these... 77mm 47mm Mozilla insanely tiny! expect many more tablet devices on the market soon... http://colly.com/
- 66. traditionally used for the ๏ฌne print... which now require this... http://www.๏ฌickr.com/photos/chrisbrenschmidt/1832787028
- 67. viewport is much smaller than the actual content and this... http://www.๏ฌickr.com/photos/katerha/4592429363
- 68. keyhole browsing for this experience http://colly.com/
- 69. ...would you be happy with this? hmm... http://colly.com/
- 70. once again why are we writing for only one browser... 2000 2010 ...is WebKit the new Internet Explorer?
- 71. โ โThis site works best in Safari 4โ is ok where โThis site works best in IE4โ wasnโt?!? Open standards or double standards? โ @csssquirrel via @brucel http://www.๏ฌickr.com/photos/pjanvandaele/3990379048
- 72. โ If you want to use the web on a mobile device, is the purchase of an iPhone the cost of entry? or Android device this design can work on *many* more devices... let alone only one device?
- 73. as per my highly sophisticated mobile web triage process... ;) Good Could be improved Needs to be improved letโs make it more accessible... http://colly.com/
- 74. 3 one style sheet w/@media queries 4 jQuery used only for animation... 5 same images used for all screen devices... only a few issues... 2 4 well structured, meaningful markup Javascript animations tend to work poorly on the majority of mobile devices... Good Could be improved Needs to be improved
- 76. 2. use well structured, meaningful markup for those still paying attention, yes there is a #1 and we will get to it shortly...
- 77. 2 well structured, meaningful markup... mmm... meaning! structure thereโs lots more, but who wants to stare at code... http://colly.com/ view source
- 78. 2 well structured, meaningful markup... use <header>, <h1>, <p> and other semantically meaningful tags to provide basic structure *Note: this is not from h๎p://colly.com recreating existing <tags> is not cool <div class="body"> <div class="header"> <div class= "h1"> <span>Hello World!</span> </div> <div> soup... </div> <div class="body">HTML <span class="emphasis">can actually be</span>meaningful. </div> </div> soup is best served in a bowl... without a basic, meaningful structure you will need to re-create many existing properties
- 79. 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the ๏ฌrst @media query...
- 80. 3 all-in-one stylesheet with @media queries... a single css ๏ฌle is network e๏ฌcient, but often includes unnecessary style data for mobile devices... <link href="screen.css" type="text/css" rel="stylesheet" media="screen" /> ....towards the end of โscreen.cssโ we ๏ฌnd the @media queries mobile speci๏ฌc tweaks are added at the very end, and only through @media queries... @media (max-device-width:480px) and (orientation:portrait) { ...
- 82. rocket science a desktop browser... are we expecting too much... http://www.๏ฌickr.com/photos/nasa_goddard/4678389619/
- 83. rocket science a mobile browser... http://www.๏ฌickr.com/photos/wwworks/3749061604 ...from our mobile browsers?
- 84. which brings us to...
- 85. 1. mobile ๏ฌrst 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the ๏ฌrst @media query... aha, I told you weโd eventually get to #1!
- 87. traditional thinking goes like so...
- 88. is technically served to everyone... a full desktop site
- 89. sprinkle on a few @media queries... + @media queries a full desktop site
- 90. ...if the @media query resolves to true, tada - a mobile site! = mobile site + @media queries a full desktop site
- 91. but hereโs the problem...
- 92. FAIL = mobile site + @media queries a full desktop site http://www.๏ฌickr.com/photos/hendry/3053419265
- 93. = mobile site a full desktop site http://www.๏ฌickr.com/photos/hendry/3053419265
- 94. @media queries will resolve to false on most devices... no, really โ you simply cannot rely on them currently on mobile devices
- 95. resulting in this experience... http://colly.com/
- 96. so itโs far more e๏ฌective when we start with...
- 97. is technically served to everyone... a mobile site
- 98. for browsers that support them, other browsers will just ignore them... + @media queries a mobile site
- 99. tada โ a desktop site! ;) = full desktop site + @media queries a mobile site
- 100. which is really just...
- 101. and not a new idea at all... progressive enhancement = full desktop site Jeremy Keith + media queries a mobile site http://www.๏ฌickr.com/photos/clagnut/315554083
- 102. think mobile ๏ฌrst
- 103. but letโs get back to...
- 104. 1. mobile ๏ฌrst 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the ๏ฌrst @media query...
- 105. 3 all-in-one stylesheet with @media queries... a single css ๏ฌle is network e๏ฌcient, but often includes unnecessary style data for mobile devices... <link href="screen.css" type="text/css" rel="stylesheet" media="screen" /> ....towards the end of โscreen.cssโ we ๏ฌnd the @media queries mobile speci๏ฌc tweaks are added at the very end, and only through @media queries... @media (max-device-width:480px) and (orientation:portrait) { ...
- 106. 3 default stylesheet plus @media queries... place mobile related styles into a default stylesheet... <link href="default.css" type="text/css" rel="stylesheet" media="screen" /> <link href="desktop.css" type="text/css" rel="stylesheet" media="screen and (min-device-width:1024px) and (max-width:989px)" /> link additional style sheets using @media queries to progressively enhance the content for more capable browsers some mobile browsers look for it... *you may want to use both the โscreenโ and โhandheldโ media types for your default stylesheet
- 107. 1. mobile ๏ฌrst 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the ๏ฌrst @media query... 4. progressively enhance using JavaScript and @media queries
- 108. 4 jQuery/JavaScript used only for animation... jQuery is still a rather hefty library for use on mobile devices... <script type="text/javascript" src=".../jquery.min.js"><script> <script type="text/javascript" src=".../scrollto.js"><script> animation in JavaScript can be very taxing on mobile devices...
- 109. mobile browsers arenโt as capable as desktop browsers... again, are we expecting too much...? http://www.๏ฌickr.com/photos/mjryall/3638778588
- 110. 4 use CSS instead of JavaScript for animations... are jQuery (and JavaScript) necessary to provide an experience on mobile devices...? <script type="text/javascript" src=".../jquery.min.js"><script> <script type="text/javascript" src=".../scrollto.js"><script> consider using basic DOM manipulation, or a mobile optimised Javascript library <script type="text/javascript" src=".../xui.min.js"><script> the โjQuery Mobileโ long before jQuery Mobile... http://xuijs.com http://jquerymobile.com use CSS for animations if available instead of Javascript .scrollto { -webkit-transform: translate(540px, -200px); -moz-transform: translate(540px, -200px); -o-transform: translate(540px, -200px); } ...use CSS animations (where possible) instead ignored on browsers that donโt support it
- 111. look ma, no jQuery? from a time before jQuery... Twi๎er? http://www.๏ฌickr.com/photos/wordridden/2474879344
- 112. then again, do you really need javascript? *none of these services relied on Javascript when they ๏ฌrst started...
- 113. 1. mobile ๏ฌrst 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the ๏ฌrst @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device
- 114. 5 same images used for all devices... one size rarely ๏ฌts all... ul li#biography a span.label { background: url("../pig.png") repeat-x center bottom; } 16 Kb also adapt content used in <img /> tags we should also adapt images found within the markup... <img src="butter๏ฌy.png" width="200" height="160" alt="butter๏ฌy" /> 16 Kb http://colly.com/
- 115. 5 images adapted appropriately for each device... ul li#biography a span.label { background: url("../pig-small.png") repeat-x center bottom; } provide appropriate sized images for various devices also adapt content used in <img /> tags 6 Kb many CMSโs such as WordPress provide a means of ๏ฌltering HTML before itโs sent to the client <img src="butter๏ฌy-small.png" width="100" height="80" alt="butter๏ฌy" /> be sure to update the width and height a๎ributes accordingly services such as http://tinysrc.net can automatically resize + compress your images http://colly.com/ 6 Kb
- 116. we could also rethink the <img />* tag... one image can have multiple source ๏ฌles, each for an appropriate context <img alt="butter๏ฌy"> <source src="butter๏ฌy-small.png" width="100" height="80" /> <source src="butter๏ฌy.png" width="200" height="160" /> <source src="butter๏ฌy-large.svg" width="400" height="400" media="min-device-width:320px" /> image formats, and aspect ratios could be modi๏ฌed as required </img> and possibly even include media queries... *Iโm just dreaming here, this doesnโt currently exist...
- 117. the results could be...
- 118. much better... approximations based on actual device testing - font rendering will vary... http://colly.com/
- 119. quick another example... http://2010.dconstruct.org* *again, for illustration purposes only, Iโm not criticising the ๏ฌne folks behind dConstruct...
- 122. di๏ฌerent di๏ฌerent again, brought to you through the magic of @media queries... http://2010.dconstruct.org/ tada!
- 124. 6 fonts often not supported on mobile sprite image not used 6 on mobile devices... 6 images not used on mobile devices... only one real issue... 3 2 a single (and compressed!) style sheet well structured, meaningful and compressed markup Good simple DOM scripting without 4 large Javascript libraries Could be improved Needs to be improved
- 125. 1. mobile ๏ฌrst 2. use well structured, meaningful markup 3. the absence of support for media queries is in fact the ๏ฌrst @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device 6. compress content where possible, and avoid sending unnecessary data
- 126. 6 display:none still loads resources... donโt expect mobile bandwidth to be free... @media (max-device-width:767px), all and (max-width:449px) { ... .speaker-carousel { display: none; } all of the speaker-carousel images are actually loaded, even though they are never displayed on mobile devices...
- 127. images not used on mobile devices... 367.35 KB http://2010.dconstruct.org/ @font-face not supported on most mobile devices... 93.63 KB
- 128. 6 ...avoid sending unnecessary data @media (max-device-width:767px), all and (max-width:449px) { ... .speaker-carousel { display: none; } ๏ฌnd another way to remove the unused resources on mobile devices...
- 129. anything else...?
- 130. little tweaks... ๏ฌxed width relative width width: 90%; height: auto; http://2010.dconstruct.org/
- 132. 1. mobile ๏ฌrst 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the ๏ฌrst @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device 6. compress content where possible, and donโt include unnecessary data
- 133. why even bother... Iโve seen that look... http://www.๏ฌickr.com/photos/eldret_99/3311540632
- 134. ...people actually do use the mobile web source comScore MobiLens http://www.๏ฌickr.com/photos/pictfactory/2796367140
- 135. ...but, not only on these devices
- 136. but, also on these... WebKit OperaMini
- 138. and, these... btw - expect many, many more devices to be heading our ways soon...
- 139. Dinosaurs! ...and shouldnโt everyone bene๏ฌt from technology? http://www.๏ฌickr.com/photos/goincase/4647893507