Mobile Web Apps Best Practices Presentation at Design4Mobile 2009
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile Web Apps Best Practices Presentation at Design4Mobile 2009

  • 7,039 views
Uploaded on

Presentation at Design4Mobile 2009 Conference

Presentation at Design4Mobile 2009 Conference

More in: Design , Technology
  • 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
7,039
On Slideshare
6,998
From Embeds
41
Number of Embeds
1

Actions

Shares
Downloads
254
Comments
0
Likes
15

Embeds 41

http://www.slideshare.net 41

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
  • <br />
  • <br />
  • <br />
  • <br />
  • Why Widgets are WebApps, but not all WebApps are Widgets. <br /> <br />
  • <br />
  • ask them: what other limitations can they think of? what other additional scope/features? <br />
  • Tell them this is my dichotomy: Resident vs Non-Resident, Widgets vs ... <br />
  • Tell them this is my dichotomy: Resident vs Non-Resident, Widgets vs ... <br />
  • specifically aimed at downloading onto your palmtop, to be loaded from there next time you run them. might be widgets, might not be. <br />
  • we’ll talk later about how we can make these act like they are resident <br />
  • <br />
  • talk about building the future, maybe talk about server-side vs client-side processing here <br />
  • <br />
  • (look up who supports this already) <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • users want and need to be in control of their personal & device info... OnStar/Mob/FBI example <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Plan for international users <br />
  • Plan for international users <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Transcript

  • 1. Best Practices in Mobile Web Applications Prof. Jeff Sonstein Department of Information Technology Rochester Institute of Technology jeffs@it.rit.edu http://www.it.rit.edu/~jxs/ Center for the Handheld Web http://chw.rit.edu/blog/ Mobile Web Best Practices Working Group http://www.w3.org/2005/MWI/BPWG/Group/
  • 2. “What Should Be” “What Is” & “What Will Be” • I’m here to talk about getting work done today, and about getting even better work done tomorrow Prof. Jeff Sonstein
  • 3. Why Am I Here Talking to Developers • Because you are the folks who have actually built the Web of today, and who will build- out the Web of tomorrow Prof. Jeff Sonstein
  • 4. Web Apps & Mobile Web Apps • What are they, and why should you care? Prof. Jeff Sonstein
  • 5. What is a Web App? An application that: 1. is accessed via a Web browser, or similar context wrapper 2. over a network using HTTP 3. coded in browser-supported languages like HTML, CSS, & JavaScript 4. provides an quot;application-likequot; experience using server-side and/ or client-side processing Prof. Jeff Sonstein
  • 6. And a Mobile Web App? Also: 1. accessed via a Web browser 2. over a network using HTTP 3. coded in browser-supported languages like HTML, CSS, & JavaScript 4. providing an quot;application-likequot; experience within a mobile context using either server-side or client-side processing Prof. Jeff Sonstein
  • 7. What’s the Difference? 1. limitations of the mobile context • small screen • intermittent connectivity • etc 2. additional scope & features of the mobile context • device context / location • personal data on the device • etc Prof. Jeff Sonstein
  • 8. What Kinds of Mobile Web Apps Are There? Prof. Jeff Sonstein
  • 9. My Dichotomy: Resident versus Non-Resident Prof. Jeff Sonstein
  • 10. Resident Web Apps whole new set of naming conventions, MIME assignment, packaging scheme, etc • advantage: looser security model, so can do more • disadvantage: cross-platform standards still developing Prof. Jeff Sonstein
  • 11. Non-Resident Web Apps standard pages, desktop/palmtop shortcuts • advantage: cross-platform standards are known • disadvantage: tighter security model, can do less Prof. Jeff Sonstein
  • 12. Resident & Non-Resident Mobile Web Apps With the emergence of HTML5 ideas, the differences are blurring, and we’re going to come back & talk about some of those ideas today Prof. Jeff Sonstein
  • 13. Best Practices There are significant Best Practices which can help all Mobile WebApps, and which work on a broad range of platforms... that is what we will focus on first Prof. Jeff Sonstein
  • 14. Mobile Web Apps Best Practices 1. Application Data Use cookies for simple client-side state Cookies are a simple way to store client-side state, but remember: every request means exchanging cookie data with the server, and this can have a performance impact. Prof. Jeff Sonstein
  • 15. Mobile Web Apps Best Practices 1. Application Data Use cookies for simple client-side state but consider using HTML5 client-side storage for local data models. Prof. Jeff Sonstein
  • 16. Resource http://developer.apple.com/safari/library/ documentation/iPhone/Conceptual/ SafariJSDatabaseGuide/Introduction/ chapter_1_section_1.html Prof. Jeff Sonstein
  • 17. Example try { if ( !window.openDatabase ) { alert( 'not supported' ); } else { var shortName = 'mydatabase'; var version = '1.0'; var displayName = 'My Important Database'; var maxSize = 65536; // in bytes var mydb = openDatabase( shortName, version, displayName, maxSize ); } } catch( e ) { // Error handling code goes here. if ( e == 2 ) { // Version number mismatch. alert( quot;Invalid database version.quot; ); } else { alert( quot;Unknown error quot; + e + quot;.quot; ); } return; } alert( quot;Database is: quot; + mydb ); Prof. Jeff Sonstein
  • 18. Mobile Web Apps Best Practices 2. Security and Privacy Do not execute untrusted JavaScript Ensure that any data comes from a trusted source, and prefer a Safe EVAL method to encode potentially unsafe characters in the datafeed before evaluating. Prof. Jeff Sonstein
  • 19. Resource http://www.json.org/json2.js (When minified it is less than 2.5K) Prof. Jeff Sonstein
  • 20. Unsafe Example var myObject = eval( '(' + myJSONtext + ')' ); Safe Example var myObject = JSON.parse( myJSONtext, reviver ); Prof. Jeff Sonstein
  • 21. Tradeoff: var myObject = eval( '(' + myJSONtext + ')' ); // built-in JavaScript functionality var myObject = JSON.parse( myJSONtext, reviver ); // additional JavaScript download Prof. Jeff Sonstein
  • 22. Mobile Web Apps Best Practices 3. User Awareness and Control • Inform the user about & provide sufficient means for them to control automatic network access and/or use of personal & device information Prof. Jeff Sonstein
  • 23. Example Prof. Jeff Sonstein
  • 24. Mobile Web Apps Best Practices 4. Conservative Use of Resources • Use transfer compression to minimize App size Prof. Jeff Sonstein
  • 25. Tradeoff: compressed files move across the wire faster But decompression requires processing power on the client Prof. Jeff Sonstein
  • 26. Mobile Web Apps Best Practices 4. Conservative Use of Resources • Avoid redirects & otherwise optimize network requests Prof. Jeff Sonstein
  • 27. Mobile Web Apps Best Practices 4. Conservative Use of Resources • Minimize external resources, & consider putting small stylesheets and scripts inline Prof. Jeff Sonstein
  • 28. Conservative Use of Resources Remember: a request may end up moving across the cellular network, and each request will result in another charge to the user on top of the per- byte charges That HTTP is a request/response protocol has financial implications for the user Prof. Jeff Sonstein
  • 29. Example // hide MobileSafari address bar <script type=quot;text/javascriptquot; charset=quot;utf-8quot;> /* <![CDATA[ */ window.addEventListener( quot;loadquot;, function() { setTimeout( loaded, 100 ) }, false ); function loaded() { document.getElementById( quot;toolbarquot; ).style.visibility = quot;visiblequot;; window.scrollTo( 0, 1 ); // pan to the bottom, hides the location bar } /* ]]> */ </script> // note “what should be” (type=quot;application/javascriptquot;) // versus “what works” (type=quot;text/javascriptquot;) Prof. Jeff Sonstein
  • 30. Mobile Web Apps Best Practices 5. User Experience • Design for Multiple Interaction Methods • Use Scripting to Improve Perceived Performance • Preserve Focus on Dynamic Page Updates • Make Telephone Numbers “Click-To-Call” Prof. Jeff Sonstein
  • 31. Design for Multiple Interaction Methods • Will the user need to use tabs or “tapping” or “accesskey” to move from field to field? Prof. Jeff Sonstein
  • 32. Use Scripting to Improve Perceived Performance • Asynchronous loading (aka AJAX or non- blocking I/O) is a wonderful thing Prof. Jeff Sonstein
  • 33. Preserve Focus on Dynamic Page Updates • Why should they have to tap again to get back to that search field? Prof. Jeff Sonstein
  • 34. Telephone URIs • Make Telephone Numbers “Click-To-Call” Prof. Jeff Sonstein
  • 35. Resource http://www.rfc-editor.org/rfc/rfc3966.txt Prof. Jeff Sonstein
  • 36. Examples <a href=quot;tel:+1-900-555-0191quot;>Find free information here</a> <a href=quot;tel:+1-900-555-0191quot;>tel:+1-900-555-0191</a> Prof. Jeff Sonstein
  • 37. User Experience Notice how much of this is about the user experience? Prof. Jeff Sonstein
  • 38. User Experience • Ensure consistency between Desktop & Mobile... Strive for “One Web” Prof. Jeff Sonstein
  • 39. User Experience • Use canvas tag for dynamic graphics, consider SVG when you need DOM-visibility... Canvas is a highly-flexible drawing system for JavaScript, but exists outside the DOM. SVG on the other hand is available for DOM- manipulation Prof. Jeff Sonstein
  • 40. Mobile Web Apps Best Practices 6. Handle Device Capability Variation • Consider using server-side capability detection, but be aware that some UserAgents lie • Use client-side capability detection for dynamic device state and DOM-injection Prof. Jeff Sonstein
  • 41. Mobile Web Apps & the One-Web Initiative • Problems inherent in maintaining dual mobile & desktop sites consider using XML with XSLT for either client-side or server-side processing Prof. Jeff Sonstein
  • 42. Examples Prof. Jeff Sonstein
  • 43. Mobile Web Apps & the One-Web Initiative • There are problems inherent in separating the machine-readable & human-readable Webs consider using XHTML+RDFa to “Bridge the Human and Data Webs” Prof. Jeff Sonstein
  • 44. Resource http://www.w3.org/TR/xhtml-rdfa-primer/ (RDFa is easy to implement) Prof. Jeff Sonstein
  • 45. Mobile Web Apps Best Practices some of what we’ve talked about: • “what should be”, “what is”, and “what will be” • Widgets, WebApps, & Mobile WebApps • application data • security & privacy • user awareness & control • conservative use of resources • user experience • device capability variation • XML, XSLT, and XHTML+RDFa Prof. Jeff Sonstein
  • 46. Mobile Web Apps Best Practices Want More Depth? • talk to me (after the show) • email me (jeffs@it.rit.edu) • tweet me (@jeffsonstein) • attend RIT (we’d love to have you) Prof. Jeff Sonstein
  • 47. Best Practices in Mobile Web Applications Prof. Jeff Sonstein Department of Information Technology Rochester Institute of Technology jeffs@it.rit.edu http://www.it.rit.edu/~jxs/ Center for the Handheld Web http://chw.rit.edu/blog/ Mobile Web Best Practices Working Group http://www.w3.org/2005/MWI/BPWG/Group/