Rethinking the mobile web

  • 2,097 views
Uploaded on

Важнее всего подход к восприятию "мобильного" в этой презентации. Кодинг - менее интересно..

Важнее всего подход к восприятию "мобильного" в этой презентации. Кодинг - менее интересно..

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,097
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
128
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Rethinking the Mobile Web a pragmatic look at creating an accessible and inclusive mobile experiencehttp://www.flickr.com/photos/fpat/3692425154
  • 2. we apps, and... a lovely, location-b ased, social, photo thing y... this presentation is not about these.http://www.flickr.com/photos/scobleizer/3985020876
  • 3. Dinosaurs! we think the iPad is pretty awesome, but...http://www.flickr.com/photos/goincase/4647893507
  • 4. something is askew...
  • 5. 1.8 billion 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. 6.8 billion the number of people in the world today...*2009 estimates put the population around 6.79 billion inhabitants...
  • 7. 3.4 billion 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.flickr.com/photos/soundman1024/1796003688
  • 10. "The future is already here – it’s just not evenly distributed." – William Gibsonhttp://www.flickr.com/photos/kiwanja/3169447879
  • 11. no home Sony Ericsson w810i no iPhone technology should not only be accessible...http://www.flickr.com/photos/walkadog/3093763311
  • 12. but inclusive... iPhonehttp://www.flickr.com/photos/javiercito/2319331695
  • 13. and available to everyone... iPhonehttp://www.flickr.com/photos/pictfactory/2796367140
  • 14. yes, even this man who does not have an iPhone... not an iPhone...http://www.flickr.com/photos/dopesmuglar/486087009
  • 15. so, who actually has an iPhone...http://www.flickr.com/photos/data_op/2468057934
  • 16. USA
  • 17. about 6% US market share... US Population: 307 million Smartphone penetration: 31% of pop. iPhone market share: 21% of smp. enormous Total iPhones in US: 19 million (~6%) impact low overall penetration The iPhone Reality in Europe: Low Overall Penetration, Enormous Impacthttp://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 EU5* = France, Germany, Italy, Spain and United Kingdom impact low overall penetration The iPhone Reality in Europe: Low Overall Penetration, Enormous Impacthttp://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 finding accurate global figures is a tad difficult...
  • 21. ie: BMWThe ”most popular” devices don’t necessarily translate to the most used devices. ie: Ford
  • 22. ” yeah, but those devices suck!http://www.flickr.com/photos/eldret_99/3311540398
  • 23. ahem...
  • 24. the first smartphone in 2003... considered portable in 1984 fits in your pocket still widely used... Released: 1984 Released: 2003 CPU: 8 MHz CPU: 104 MHz RAM: 128k (512k max) RAM: 6 MB Storage: 400k (3.5” floppy) Storage: 32 MB MMC Card Display: 22.9 cm Monochrome Display: 5.3 cm Thousands of coloursDimensions: 34.5 x 24.4 x 27.7 cm Dimensions: 10.9 x 5.8 x 2.4 cm Weight: 7.5 kgs 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 Released: 2008 CPU: 233 MHz CPU: 434 MHz RAM: 32 MB (512 MB max) RAM: 128 MB Storage: 4 GB (+ optical drive) Storage: 8 GB (16 GB max) Display: 38.1 cm Millions of colours Display: 8.1 cm Millions of colours Dimensions: 40.1 x 38.6 x 44.7 cm Dimensions: 11.1 x 5.2 x 1.5 cm Weight: 17.3 kgs Weight: 109 g
  • 26. the feature phone in 2009... smartphone from 2005 extremely popular today... still widely used today... Released: 2005 Released: 2009 CPU: 220 MHz CPU: 369 MHz RAM: 22 MB RAM: 30 MB Storage: 64 MB Storage: 1 GB (16 GB max)Display: 5.3 cm Thousands of colours Display: 5.1 cm Thousands of colours Dimensions: 10.8 x 5.3 x 2.2 cm Dimensions: 10.6 x 4.7 x 1.5 cm Weight: 126 g Weight: 88 g
  • 27. the smartphone in 2010... ...playing “catch-up” raising the “bar”... Released: 2010 Released: 2010 CPU: 680 MHz CPU: 1 GHz A4 Processor RAM: 256 MB RAM: 512 MB Storage: 16 GB (32 GB max) Storage: 16 GB (32 GB max)Display: 8.9 cm Millions of colours Display: 8.9 cm Millions of colours Dimensions: 11.4 x 5.9 x 1.3 cm Dimensions: 11.5 x 5.9 x 0.9 cm Weight: 135 g Weight: 137 g
  • 28. ” ...but folks with those other phones simply don’t use the Internet.http://www.flickr.com/photos/carbonnyc/3369424492
  • 29. yeah, and grandma doesn’t do Facebook... ” Grandma* Facebookhttp://www.flickr.com/photos/amagill/304701054 *not my Grandma
  • 30. 1.3 billion 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... Blackberry! quality + sample size?Data Source: http://gs.statcounter.comPublished Under a Creative Commons Attribution 3.0 Unported LicenseYou are free to copy, distribute and transmit the work and to adapt the work providing it is attributed to www.icrossing.co.ukhttp://www.flickr.com/photos/icrossing_uk/4342659861
  • 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, primarily used on feature Bada, Symbian and new Blackberry... phones supporting Java ME... + WebKit OperaMini Windows Mobile proxy browser... watch these... lots of new browsers, variation and of course – legacy browsers “Fennec” Browser UCObigo SkyFire proxy browsers Internet Explorer MicroB 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 including Apple, Nokia, Samsung, Google, Palm, etc.WebKit 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 OperaMini available just about anywhere on JavaME, iPhone, Android, Windows Mobile + more an extremely efficient browsera proxy server filters, compresses & pre-renders content usable on older devices breathe new life into those antique devices... very important
  • 39. rendered + optimised and proxy browsers...proxy browser on proxy 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.
  • 40. on private networks... caller a d limited + costly bandwidth switching centre receiver c bbase-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. – @jonathanstarkhttp://www.flickr.com/photos/johanl/4424185115
  • 42. appyeah, whatever–I just wanna build a mobile website...
  • 43. traditionally you might consider... a device database ie. DeviceAtlas device detection or WURFL content adaptation an abstraction layer device various standards exhausting capabilities media types WURFL/WALL testing transcoding multiple templates private networks mimetypes geing “on-deck” data limits multiple sites an off-deck strategy... cHTML the “One Web” dream thematic correct doctypes consistency fragmentation switching algorithms WML using UAProf data XHTML-MPhttp://www.flickr.com/photos/rmlowe/3281353786 WAP
  • 44. but that might be a bit overwhelming... OMG... ”http://www.flickr.com/photos/richardmoross/1413692087
  • 45. start somewhere familiar...http://www.flickr.com/photos/adactio/4742158560
  • 46. ...a look at what we’re doing now?* *for illustration purposes only
  • 47. we coulddo nothing... http://www.alistapart.com/
  • 48. but that’s not terribly mobile friendly – what about...
  • 49. a mobile specific site...http://mobify.me http://m.alistapart.com/
  • 50. oh, but then that just begs the question...
  • 51. other... laptops/netbooks TVs handheld consoles what exactly is mobile...http://www.flickr.com/photos/amagill/26273015
  • 52. or, more specifically...
  • 53. 128x160 240x320 320x480 what isn’t...1280x768 1024x768 480x800
  • 54. then again, we could...
  • 55. create an adaptive experience... http://www.flickr.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 fine work...
  • 57. http://colly.comMOBILE SITE OF THE YEAR NOMINEEhttp://www.thenetawards.com/
  • 58. a lovely websitehttp://colly.com/
  • 59. squishy squishy with flexible layouthttp://colly.com/
  • 60. also available on mobile... squishy squishyhttp://colly.com/
  • 61. al an optimce experien squishy squishy tada! brought to you through the magic of @media queries...http://colly.com/
  • 62. ahem...http://www.flickr.com/photos/jakerome/3481634789
  • 63. these are also mobile... WebKit WebKit approximations based on actual device testing - font rendering will vary...http://colly.com/
  • 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... Mozilla 77mm 47mm insanely tiny! expect many more tablet devices on the market soon...http://colly.com/
  • 66. traditionally used for the fine print... which now require this...http://www.flickr.com/photos/chrisbrenschmidt/1832787028
  • 67. viewport is much smaller than the actual content and this...http://www.flickr.com/photos/katerha/4592429363
  • 68. keyhole browsing for this experiencehttp://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 @brucelhttp://www.flickr.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 well structured, meaningful markup Good4 Javascript animations tend to work poorly on the majority of mobile devices... Could be improved Needs to be improved
  • 75. a few guidelines...
  • 76. 2. use well structured, meaningful markupfor 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> <div class="body"> is not cool <div class="header"> <div class= "h1"> <span>Hello World!</span> </div> </div> <div> soup... <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 markup3. the absence of support for @media queries is in fact the first @media query...
  • 80. 3 all-in-one stylesheet with @media queries... a single css file is network efficient, 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 find the @media queries mobile specific tweaks are added at the very end, and only through @media queries...@media (max-device-width:480px) and (orientation:portrait) { ...
  • 81. how retro... kinda backwards...http://www.flickr.com/photos/dumbledad/3400708183
  • 82. rocket science a desktop browser... are we expecting too much...http://www.flickr.com/photos/nasa_goddard/4678389619/
  • 83. rocket science a mobile browser... ...from our mobile browsers?http://www.flickr.com/photos/wwworks/3749061604
  • 84. which brings us to...
  • 85. 1. mobile first2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the first @media query... aha, I told you we’d eventually get to #1!
  • 86. Luke Wroblewski mobile first http://www.lukew.com/ff/entry.asp?933http://www.flickr.com/photos/pete-karl/4637024524
  • 87. traditional thinking goes like so...
  • 88. is technically served to everyone... a full desktop site
  • 89. sprinkle on a few @media queries... + @media queriesa full desktop site
  • 90. ...if the @media query resolvesto 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 sitehttp://www.flickr.com/photos/hendry/3053419265
  • 93. = mobile site a full desktop sitehttp://www.flickr.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 effective when we start with...
  • 97. is technically servedto 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.flickr.com/photos/clagnut/315554083
  • 102. think mobile first
  • 103. but let’s get back to...
  • 104. 1. mobile first2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the first @media query...
  • 105. 3 all-in-one stylesheet with @media queries... a single css file is network efficient, 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 find the @media queries mobile specific 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 first2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the first @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.flickr.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 ...use CSS animations.scrollto { (where possible) instead -webkit-transform: translate(540px, -200px); -moz-transform: translate(540px, -200px); -o-transform: translate(540px, -200px); } ignored on browsers that don’t support it
  • 111. look ma, no jQuery? from a time before jQuery... Twier?http://www.flickr.com/photos/wordridden/2474879344
  • 112. then again, do you really need javascript?*none of these services relied on Javascript when they first started...
  • 113. 1. mobile first2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the first @media query...4. progressively enhance using JavaScript and @media queries5. adapt content (especially images) appropriately for each device
  • 114. 5 same images used for all devices... one size rarely fits 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="butterfly.png" width="200" height="160" alt="butterfly" /> 16 Kbhttp://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 6 Kb also adapt content used in <img /> tags many CMS’s such as WordPress provide a means of filtering HTML before it’s sent to the client<img src="butterfly-small.png" width="100" height="80" alt="butterfly" /> 6 Kb be sure to update the width and height aributes accordingly services such as http://tinysrc.net can automatically resize + compress your imageshttp://colly.com/
  • 116. we could also rethink the <img />* tag... one image can have multiple source files, each for an appropriate context<img alt="butterfly"> <source src="butterfly-small.png" width="100" height="80" /> <source src="butterfly.png" width="200" height="160" /> <source src="butterfly-large.svg" width="400" height="400" media="min-device-width:320px" /> image formats, and aspect ratios</img> could be modified as required 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 fine folks behind dConstruct...
  • 120. http://2010.dconstruct.org/
  • 121. squishy squishy http://2010.dconstruct.org/
  • 122. different different tada! again, brought to you through the magic of @media queries...http://2010.dconstruct.org/
  • 123. so close...http://2010.dconstruct.org/
  • 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 a single (and compressed!) style sheet2 well structured, meaningful and compressed markup Good simple DOM scripting without Could be improved 4 large Javascript libraries Needs to be improved
  • 125. 1. mobile first2. use well structured, meaningful markup3. the absence of support for media queries is in fact the first @media query...4. progressively enhance using JavaScript and @media queries5. adapt content (especially images) appropriately for each device6. 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 @font-face not supported mobile devices... on most mobile devices... 367.35 KB 93.63 KBhttp://2010.dconstruct.org/
  • 128. 6 ...avoid sending unnecessary data@media (max-device-width:767px), all and (max-width:449px) { ... .speaker-carousel { display: none; find another way to remove the unused resources on mobile devices... }
  • 129. anything else...?
  • 130. little tweaks... fixed relative width width width: 90%; height: auto;http://2010.dconstruct.org/
  • 131. accessibility* features functionality usability performance experience bandwidth a balancing act...http://www.flickr.com/photos/superfantastic/50088733
  • 132. 1. mobile first2. use well structured, meaningful markup3. the absence of support for @media queries is in fact the first @media query...4. progressively enhance using JavaScript and @media queries5. adapt content (especially images) appropriately for each device6. compress content where possible, and don’t include unnecessary data
  • 133. why even bother... I’ve seen that look...http://www.flickr.com/photos/eldret_99/3311540632
  • 134. ...people actually do use the mobile web source comScore MobiLenshttp://www.flickr.com/photos/pictfactory/2796367140
  • 135. ...but, not only on these devices
  • 136. but, also on these...WebKit OperaMini
  • 137. and, these...WebKit OperaMini
  • 138. and, these...btw - expect many, many more devices to be heading our ways soon...
  • 139. Dinosaurs! ...and shouldn’t everyone benefit from technology?http://www.flickr.com/photos/goincase/4647893507
  • 140. thank youhello@yiibu.com