O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Próximos SlideShares
educación virtual vs educación presencial
Transfira para ler offline e ver em ecrã inteiro.



Baixar para ler offline

Native is easy. Mobile web is freaking hard.

Baixar para ler offline

Closing keynote at Web Directions Unplugged, Seattle, WA, May 2011.

Covers the major infrastructure changes that we need to support mobile web.

Native is easy. Mobile web is freaking hard.

  1. 1. http://www.flickr.com/photos/dnorman/3732851541/
  2. 2. @grigsbit.ly/grigs_wdx2011
  3. 3. http://www.flickr.com/photos/gurana/ I’m a mobile web advocate.3976626644/
  4. 4. Only21%of Google’s largest advertisers have mobile web sites. http://www.flickr.com/photos/silipo/378476114/
  5. 5. Only21%of Google’s largest advertisers have mobile web sites. Why? http://www.flickr.com/photos/silipo/378476114/
  6. 6. I told myself it was the reality distortion eld.
  7. 7. I was fooling myself.Mobile web is freaking hard.
  8. 8. http://www.flickr.com/photos/kjgarbutt/5586656028/ Reasons Why Native is Easier
  9. 9. 1. Native is Easier to Sellhttp://www.flickr.com/photos/vegaseddie/2668299674/
  10. 10. Get a lot of email from this guy... http://www.flickr.com/photos/corbett3000/2327165138/in/set-72157604094629546/
  11. 11. Mobilism 2011, 12th and 13th of May, Amsterdam Compatibility QuirksBlog Page last changed 3 months ago sitemap contact Mobile Search QuirksMode.org Search Aboutshow site navigation HTML5 apps show page contents Right now nobody’s interested in a mobile solution that does not contain the words “iPhone” and “app” and that is not submitted to Written on 8 March 2010 a closed environment where it competes with approximately 2,437 Categorized in HTML5, HTML5 apps similar mobile solutions. Previous entry: Fronteers 2010 Compared to the current crop of mobile clients and developers, lemmings Next entry: The payment argument is marching off a cliff follow a solid, sensible strategy. Startling them out of this nonsense obsession requires nothing short of a new buzzword. Therefore I’d like to re-brand standards-based mobile websites and This is the blog of Peter-Paul Koch, mobile applications, definitely including W3C Widgets, as “HTML5 apps.” People platform strategist, consultant, and trainer. outside our little technical circle are already aware of the existence of You can also follow him on Twitter. HTML5, and I don’t think it needs much of an effort to elevate it to full buzzwordiness. Atom RSS Technically, HTML5 apps would encompass all websites as well as all the myriads of (usually locally installed) web-standards-based application Maybe we should build buzz systems on mobile. The guiding principle would be to write and maintain one single core application that uses web standards, as well as a mechanism that Categories: Homepage deploys that core application across a wide range of platforms. Archives (1) around HTML5 apps What are HTML5 apps? Browsers (7) Coding techniques (14) Conferences (80) HTML5 apps Content (51) 1. have one single core application; HTML5 (6) Linkbait (1) 2. are written with web standards, primarily HTML, CSS, and JavaScript; Mobile (23) 3. and are deployed on more than one mobile platform. Site (23) Theory (18)
  12. 12. Login Join Twitter!Impressed that the Web finds itnecessary to "fight back againstFlipboard" http://bit.ly/dZqxf97:13 AM Feb 27th via bitlyRetweeted by 8 people asymco Horace Dediu© 2011 Twitter About Us Contact Blog Status Resources API Business Help Jobs Terms PrivacyWhy are we ghting native apps?
  13. 13. Native Sells Itself We remember when the webwas the source of irrational exuberance.
  14. 14. Let me share our secret for selling mobile web. http://www.flickr.com/photos/pricklebush/224674200/
  15. 15. Email Gallery Free Email Templates Email Marketing Companies Submit Advertise Here Advertise HereColumn Type of Email Type of Business Color POPULARITY RESETHyundai USA Newsletter 3 Alertful Newsletter 2 Divine Chocolate Newsletter 2 Does your company send email to customers? http://www.email-gallery.com
  16. 16. Does your company participate in social media? http://www.flickr.com/photos/intersectionconsulting/5177773774/
  17. 17. Links don’t open appshttp://www.flickr.com/photos/mattimattila/4001221570/
  18. 18. The ‘U’ in URL stands for Universal* * it actually stands for‘uniform.’ close enough ;-) http://www.flickr.com/photos/laughingsquid/255852260/sizes/o/
  19. 19. 2. Native is Easier to Design
  20. 20. Lots of resources for native app design.
  21. 21. Fewer for mobile web, but they exist.
  22. 22. But the examples mostly look like iPhone apps.
  23. 23. Does an Android user expect iPhone UI conventions?
  24. 24. Do we adjust UI for different geographies?
  25. 25. What is the uniquely mobile web experience? http://www.flickr.com/photos/nickwheeleroz/2212101890/in/photostream/
  26. 26. First uniquely mobile web UI? Pull down menus?
  27. 27. Tools don’t make people designers.
  28. 28. 3. Native is Easier to Test
  29. 29. Even Most Successful Developers Facethe Challenge of Testing on Enough Devices From the beginning, we have wanted to make Angry Birds available for every feasible Android device... We tested the game extensively on a large number of devices, and gathered all the feedback we received from our beta testing to address every possible issue. So far, we have hesitated to create multiple versions of Angry Birds for the Android platform. But judging by the feedback we have received, we feel that by providing a lightweight solution, we are doing a favour for our fans. http://www.rovio.com/index.php?mact=Blogs,cntnt01,showentry, 0&cntnt01entryid=47&cntnt01returnid=58
  30. 30. Mobile web developers face: OS fragmentation Webkit fragmentation Browser fragmentation Inconsistent standards supportCarrier transcoding and other issues Thousands of devices
  31. 31. No. ARTICLES TOPICS ABOUT CONTACT CONTRIBUTE FEED320 DECEMBER 14, 2010 Search ALA Smartphone Browser Landscape include discussions by P E T E R - P A U L K O C H Published in: User Interface Design , Mobile , Mobile Design , Mobile Development Topics Discuss this article » | Share this article » Code Content Culture Design Mobile Process User Science Snapshot Most web designers and developers (not to mention the entire blogosphere) fall squarely in the high-end market. A cultural bias Users expect websites to work on their mobile phones. In two to three years, mobile support exists against OSs aimed will become standard for any site. Web developers must add mobile web development to their at any other market. As skill set or risk losing clients. a result, most people focus on the struggle How do you make websites mobile compatible? The answer is obvious: By testing them on all between iOS and mobile phones, and by solving the problems you encounter. But, that’s a useless answer. It’s Android, and ignore the rest. This has to change. impossible to test your designs on every mobile phone out there. Within the mobile phone landscape, there are at least ten operating systems (OSs) and fifteen browsers that require consideration. Mobile devices are expensive, and not every web developer can afford to buy five to ten of them. Testing “on all mobile phones” is impossible for most web developers. In this article, I’ll give you an overview of the mobile web market, as well as phone platforms and their browsers, so that you can decide which mobile devices to test on. Then, we’ll look at how to set up a mobile test bed. Stay in better touch with customers with
  32. 32. “Testing on as many devices as possible is a greatidea in theory, but in practice it is untenable. Even if webuy a few devices to try to cover more ground, they will beoutdated in just a few months or a year at most. So are wesupposed to buy multiple devices per year?”posted at 11:32 am on December 14, 2010 by klayon“If that’s the mobile landscape, I want no part of it.”posted at 07:22 am on December 15, 2010 by Polsonby http://www.alistapart.com/comments/smartphone-browser-landscape/
  33. 33. Mobile Portland Community Device Lab • Dedicated location within mobile community in central, downtown Portland. • Adjacent event space to be used for hosting Mobile Portland events and other user groups. Also available for developer training sessions. • Free and open to anyone. Run as a non-profit. Building Lobby • Located in 25,000 sq. ft. building leased by VC-funded mobile start up Urban Airship • Other tenants in building include mobile developers Cloud Four, Uncorked Studios and Bank Simple. • We’re creating a central hub for mobile activity in the Portland area. The building is alreadyDevice Lab Glass Office becoming a magnet for mobile developers.
  34. 34. 4. Native is Easier to Build http://www.flickr.com/photos/dunechaser/134672123/
  35. 35. We often compare checklists of technical features. http://www.flickr.com/photos/mattcarman/1573507091/
  36. 36. http://www.flickr.com/photos/delta407/269540469/
  37. 37. Mobile Progressive Enhancement [content] Thanks Bryan and Stephanie http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  38. 38. Mobile Progressive Enhancement [content]Device Detection Thanks Bryan and Stephanie http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  39. 39. Mobile Progressive Enhancement [content]Device Detection Thanks Bryan and Stephanie http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  40. 40. Mobile Progressive Enhancement [content]Device Detection Phone Gap Add Functionality Thanks Bryan and Stephanie http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  41. 41. Mobile Progressive Enhancement [content]Device Detection Phone Gap Add Functionality Thanks Bryan and Stephanie http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  42. 42. Many Sites are Chaos Behind the Sceneshttp://www.flickr.com/photos/nickwheeleroz/2391631937/in/photostream/
  43. 43. Multiple Systems Taped Together http://www.flickr.com/photos/ionan/103646126/
  44. 44. Our existing systems areanchors holding us back. http://www.flickr.com/photos/caffeinehit/186362735/
  45. 45. Native Developers Start from a Clean Slate http://www.flickr.com/photos/salendron/5569020488/
  46. 46. What about RWD?http://www.flickr.com/photos/londonannie/4904832807/
  47. 47. What about RWD? Jason, you’re doing it wrong!http://www.flickr.com/photos/londonannie/4904832807/
  48. 48. “One Web” is a Rorschach test for Mobile Web http://www.flickr.com/photos/misspointypants/5575075527/
  49. 49. “Browser sniffing is a stupid, error-prone andreviled practice, ‘backed’ by a decade of failures.Doing it on the server side is completelyclueless...” http://davidwalsh.name/detect-android
  50. 50. User Agent Switching:Useful tool for developers or spawn of satan? http://www.flickr.com/photos/4nton/5692328434/sizes/l/
  51. 51. 25 of 30 sites in Alexa Top 30 Uses Device Detection Other ve don’t offer mobile sites!
  52. 52. Native iPhone App Asked to make it feel similar in mobile web.
  53. 53. Mobile WebBuilt the way you would expect: lists and css oats.
  54. 54. Mobile WebWhat about devices that don’t support oats?
  55. 55. We can deliver a great experience using tables. Should modern devices get the lowest common denominator code? http://www.flickr.com/photos/stml/3625386561/
  56. 56. Supporting those older devices made people happy.
  57. 57. is isn’t religion.http://www.flickr.com/photos/arguez/2247369944/
  58. 58. ese are simply tools.http://www.flickr.com/photos/bre/552152780/
  59. 59. Don’t let religion blind you to tools you may need tosolve real problems. http://www.flickr.com/photos/ yamagatacamille/5434502250/
  60. 60. Expert Web and Mobile design, development and strategyHome About Us Services Blog Accolades Contact Us Cloud Four Blog « Mobile operating systems and browsers More on CSS Media Queries for Mobile » are headed in opposite directions Search CSS Media Query for Mobile is Fool’s Gold August 3rd, 2010 by Jason Grigsby Ethan Marcotte’s article Responsive Web Design has caught the imagination of web Subscribe developers. Several subsequent articles have touted the CSS media query feature as RSS Feeds a way to build mobile-optimized web sites. All posts All comments Enter your email address: Subscribe Delivered by FeedBurner April 2011 M T W T F S S 1 2 3 4 5 6 7 8 9 10 Even I’m guilty of contributing to this meme with my article on CSS orientation.
  61. 61. e way in which CSS media queries have beenpromoted for mobile hides tough problems andgives developers a false promise of a simplesolution for designing for multiple screens.
  62. 62. Media Queries Hide Problems Original Resized K Saved % SavedHolmes 34.7K 8.1K 26.6K 76.6%Watson 39.0K 8.4K 30.6K 78.4%Mycroft 30.5K 6.7K 23.8K 78.0%Moriarty 43.4K 8.2K 35.2K 81.1% Adler 26.0K 6.6K 19.4K 74.6%Winter 34.7K 7.8K 26.9K 77.5% Total 208.3K 45.8K 162.5K 78.0%
  63. 63. Why theSuddenInterestin Speed?Same problemson desktop.
  64. 64. Why theSuddenInterestin Speed?Same problemson desktop.EXACTLY.
  65. 65. We’ve remade the Internet in our image.
  66. 66. Obese
  67. 67. We’ve Become Bandwidth Gluttons Since 2003: • Web Page Size Tripled •# of Objects Doubled Since 1995: • Web Page Size: 22x •# of Objects: 21x Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/
  68. 68. e mobile context maynot be what you expect.Maybe they are on wi- .
  69. 69. Yes, given more time, we would address some issues onthe back-end to keep large images from downloading formobile users in the rst place, but our site is fairlylightweight to begin with, so it wasn’t really worth thetime it would take to mess around with that stuff. Wemay revisit the issue in the future, however.Also, just to play devil’s advocate, Jeremy Keith pointedout that it’s a bad assumption that mobile devices alwayshave limited bandwidth and desktops always have plenty.
  70. 70. at site took 53.8 seconds todownload over WiFi on an iPhone 4.
  71. 71. 17% will wait no longer than 5 seconds for a site to load http://www.gomez.com/wp-content/downloads/GomezWebSpeedSurvey.pdf
  72. 72. Can we simply agree that:On average mobile is slower than desktop?
  73. 73. http://www.flickr.com/photos/achimh/3264376846/
  74. 74. MobileFirstRESPONSIVE WEB DESIGN
  75. 75. Where are the mobile rst responsive web designs?
  76. 76. Comparison of Mobile & Desktop RWD Views 9% 4% 25% 21% 4% 38% Mobile is Larger Same Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% SavingsThere are four good examples of mobile first RWD. Total.
  77. 77. Mobile First RWD is Difficult How do we handle img tag src? How to handle embedded video?How do we eliminate unnecessary assets? How can we be smart about image and video resizing and converting? How do we integrate with content management systems?
  78. 78. yiibu articles projects search... go Are we there yet? This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web. Over the coming months, we will release articles covering our approach in detail. In the meantime why not discover how these ideas came to be and how this site was developed. This site works beautifully on most modern and legacy smartphones, tablets, and of course desktop browsers. Find out how we did it.Mobile Web Reference A Practical Guide to Nokia Workshops and Conferences Browsers
  79. 79. Home Store About Contact abookapart on TwitterBrief books for people who make websitesRESPONSIVE WEB DESIGN CART 0 items $0.00 by E T H A N M A R C O T T E From mobile browsers to netbooks and tablets, users are visiting your View Cart Checkout sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, HAVE A QUESTION? including fluid grids, flexible images, and media queries, Read our FAQs demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display. FEATURED BOOK This book will be released in Spring 2011. The Elements of Content Strategy “This brief, brilliant treatise is the guidebook the industry has clamored for.” — Jeffrey Zeldman ABOUT THE AUTHOR Ethan Marcotte is a web designer & developer who cares deeply about beautiful design, elegant code, and the intersection of the two. Over the years, Ethan has enjoyed working with such clients as the Sundance Film Festival, Stanford University, New York Magazine , and The Today Show. He swears profusely on Twitter, and would like to be an unstoppable robot ninja when he grows up. Beep.NEWSLETTERKeep up to date with new book releases and announcements with our newsletter. Email address Subscribe
  80. 80. Contact UsWhat we do What weve done What were thinking Who we areResponsive Images: Experimenting with Context- Enjoy our blog? Youll love our book.Aware Image Sizing For info and pre-order:Posted by Scott on 12/14/2010Topics: javascript mobile progressive enhancement usability Visit the book siteResponsive Web Design has been avery hot topic this year, inspiringdevelopers who long for a “onecodebase serves all” future. Butcritics of the technique have pointed Subscribe to our Labout several issues that need to be Atomaddressed before it can scale RSS 2.0perfectly from handheld to desktop— specifically, while HTML, CSSand JavaScript can be light enough Recent Articlesto share across all experiences, desktop-optimized images are often too Corresponding on Responsive Designheavy for mobile connections, and mobile-optimized images are too low Building with jQuery Mobile: Slides fromquality for desktop viewers. a talk by Todd Parker and Scott JehlRecently, we began work on a large-scale responsive design Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more(collaborating with the incredibly talented Mr. Ethan Marcotte, whonotably got this whole "responsive" party started), in which weve set out Responsive Images: Experimenting with Context-Aware Image Sizingto address this shortcoming of responsive design with a technique thatrequests an appropriate image size for a given context without resorting Dingbat Webfonts: Great potential, but we see (and hear) accessibility issues
  81. 81. If responsible responsive web design means mobile rstresponsive web design, then we’re all on the same teamfacing the same challenges.
  82. 82. @jonarneshttp://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
  83. 83. Web Content Management Systemsare the Mainframes of the Mobile Era
  84. 84. Content& Services Car sketch: http://www.flickr.com/photos/cloppy/5081768461/
  85. 85. HTML HTML HTML HTML Content HTML & Services HTML HTML HTML Car sketch: http://www.flickr.com/photos/cloppy/5081768461/
  86. 86. HTML HTML NATIVE HTML HTML Content NATIVE HTML & Services NATIVE HTML HTML HTML Car sketch: http://www.flickr.com/photos/cloppy/5081768461/
  87. 87. Features of New Platforms Integrated image resizing Video conversion and resizing Separation of content from markup so content can be used in native appsPrioritization of content based on context Full-featured APIs Synchronization New Ways to Enable Content Editors http://www.flickr.com/photos/expressmonorail/3046970004/sizes/l/
  88. 88. What does WYSIWYGmean to multiple devices? WYSIWTF http://www.flickr.com/photos/ndm007/171398958/
  89. 89. http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/
  90. 90. http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/
  91. 91. http://www.flickr.com/photos/andresthor/3963368371/
  92. 92. One Possible Bridging Solutionexample.com/products/[productID] Internet Desktop Web Server
  93. 93. One Possible Bridging Solutionexample.com/products/[productID] Internet Desktop or Desktop Mobile Web Server
  94. 94. One Possible Bridging Solutionexample.com/products/[productID] Desktop Web m.example.com/ Redirect Internet Page products/[productID] Desktop Mobile Desktop or Desktop Mobile Web Server
  95. 95. One Possible Bridging Solutionexample.com/products/[productID] Desktop Web m.example.com/ Internet Redirect Internet Page products/[productID] Desktop Mobile Device Class Template A Device Class Template B Desktop or Cloud Four Desktop Mobile Mobile Web Web Server Server Device Class Template C Device Class Template D
  96. 96. One Possible Bridging Solutionexample.com/products/[productID] Desktop Web m.example.com/ Internet Redirect Internet Page products/[productID] Desktop Mobile Device Class Template A Device Class Template B Desktop or Cloud Four Desktop Mobile Mobile Web Web Server Server Device Class Template C Device Class Template D Web Services APIs
  97. 97. One Possible Bridging Solutionexample.com/products/[productID] Desktop Web m.example.com/ Internet Redirect Internet Page products/[productID] Desktop Mobile Device Class Template A Device Class Template B Desktop or Cloud Four Desktop Mobile Mobile Web Web Server Server Device Class Template C Device Class Template D Web Services APIs APIs Necessary to Support App Development
  98. 98. One Possible Bridging Solutionexample.com/products/[productID] Desktop Web m.example.com/ Internet Redirect Internet Page products/[productID] Desktop Mobile Desktop or Mobile Web Desktop Mobile Server w/ RWD Web Server Platform Web Services APIs APIs Necessary to Support App Development
  99. 99. http://www.flickr.com/photos/thebottomlesspaddlingpool/5085614383/sizes/l/
  100. 100. No matter how you approach it, wehave a lot of infrastructure to build http://www.flickr.com/photos/wwworks/2942950081/
  101. 101. thank you.http://www.flickr.com/photos/24311566@N07/4697623122/
  102. 102. http://www.flickr.com/photos/troyholden/5544097948/
  103. 103. We’re building the future right now http://www.flickr.com/photos/insightimaging/3545443883/
  104. 104. Not easy, but this is where the opportunities are. http://www.flickr.com/photos/donnagrayson/195244498/in/photostream/
  105. 105. http://www.flickr.com/photos/eole/3215868087/
  106. 106. Let’s get to work.
  107. 107. http://www.flickr.com/photos/kwerfeldein/1447907224/
  108. 108. jason@cloudfour.com | cloudfour.com/blog | @grigs | slides: bit.ly/grigs_wdx2011 http://www.flickr.com/photos/polvero/4232984120/in/faves-grigs/
  • ThatGuyCND

    May. 9, 2013
  • ghadwin

    Dec. 20, 2012
  • hotlsy

    Apr. 20, 2012
  • kevrichardson

    Oct. 21, 2011
  • gitong

    Aug. 25, 2011
  • fritzism

    Jul. 1, 2011
  • otachan

    May. 20, 2011
  • massmediamobile

    May. 18, 2011
  • cvilly

    May. 14, 2011
  • b4z81

    May. 14, 2011
  • JeffRSmall

    May. 13, 2011
  • josemontiel

    May. 13, 2011

Closing keynote at Web Directions Unplugged, Seattle, WA, May 2011. Covers the major infrastructure changes that we need to support mobile web.


Vistos totais


No Slideshare


De incorporações


Número de incorporações