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

Mobile Web Apps Best Practices Presentation at Design4Mobile 2009

on

  • 6,947 views

Presentation at Design4Mobile 2009 Conference

Presentation at Design4Mobile 2009 Conference

Statistics

Views

Total Views
6,947
Views on SlideShare
6,906
Embed Views
41

Actions

Likes
15
Downloads
253
Comments
0

1 Embed 41

http://www.slideshare.net 41

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <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 />

Mobile Web Apps Best Practices Presentation at Design4Mobile 2009 Mobile Web Apps Best Practices Presentation at Design4Mobile 2009 Presentation Transcript

  • 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/
  • “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
  • 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
  • Web Apps & Mobile Web Apps • What are they, and why should you care? Prof. Jeff Sonstein
  • 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
  • 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
  • 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
  • What Kinds of Mobile Web Apps Are There? Prof. Jeff Sonstein
  • My Dichotomy: Resident versus Non-Resident Prof. Jeff Sonstein
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Resource http://developer.apple.com/safari/library/ documentation/iPhone/Conceptual/ SafariJSDatabaseGuide/Introduction/ chapter_1_section_1.html Prof. Jeff Sonstein
  • 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
  • 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
  • Resource http://www.json.org/json2.js (When minified it is less than 2.5K) Prof. Jeff Sonstein
  • Unsafe Example var myObject = eval( '(' + myJSONtext + ')' ); Safe Example var myObject = JSON.parse( myJSONtext, reviver ); Prof. Jeff Sonstein
  • Tradeoff: var myObject = eval( '(' + myJSONtext + ')' ); // built-in JavaScript functionality var myObject = JSON.parse( myJSONtext, reviver ); // additional JavaScript download Prof. Jeff Sonstein
  • 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
  • Example Prof. Jeff Sonstein
  • Mobile Web Apps Best Practices 4. Conservative Use of Resources • Use transfer compression to minimize App size Prof. Jeff Sonstein
  • Tradeoff: compressed files move across the wire faster But decompression requires processing power on the client Prof. Jeff Sonstein
  • Mobile Web Apps Best Practices 4. Conservative Use of Resources • Avoid redirects & otherwise optimize network requests Prof. Jeff Sonstein
  • Mobile Web Apps Best Practices 4. Conservative Use of Resources • Minimize external resources, & consider putting small stylesheets and scripts inline Prof. Jeff Sonstein
  • 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
  • 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
  • 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
  • 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
  • Use Scripting to Improve Perceived Performance • Asynchronous loading (aka AJAX or non- blocking I/O) is a wonderful thing Prof. Jeff Sonstein
  • Preserve Focus on Dynamic Page Updates • Why should they have to tap again to get back to that search field? Prof. Jeff Sonstein
  • Telephone URIs • Make Telephone Numbers “Click-To-Call” Prof. Jeff Sonstein
  • Resource http://www.rfc-editor.org/rfc/rfc3966.txt Prof. Jeff Sonstein
  • 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
  • User Experience Notice how much of this is about the user experience? Prof. Jeff Sonstein
  • User Experience • Ensure consistency between Desktop & Mobile... Strive for “One Web” Prof. Jeff Sonstein
  • 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
  • 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
  • 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
  • Examples Prof. Jeff Sonstein
  • 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
  • Resource http://www.w3.org/TR/xhtml-rdfa-primer/ (RDFa is easy to implement) Prof. Jeff Sonstein
  • 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
  • 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
  • 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/