0
Best Practices in Mobile
   Web Applications

              Prof. Jeff Sonstein
     Department of Information Technology
...
“What Should Be”
       “What Is”
    & “What Will Be”
• I’m here to talk about getting work done
  today, and about getti...
Why Am I Here Talking
   to Developers

• Because you are the folks who have actually
  built the Web of today, and who wi...
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 ...
And a Mobile Web App?
   Also:
1. accessed via a Web browser
2. over a network using HTTP
3. coded in browser-supported la...
What’s the Difference?
1. limitations of the mobile context
 •   small screen
 •   intermittent connectivity
 •   etc
2. a...
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

 •   advanta...
Non-Resident
 Web Apps
         standard pages, desktop/palmtop
         shortcuts

            •     advantage: cross-pla...
Resident & Non-Resident Mobile
           Web Apps

  With the emergence of HTML5 ideas, the
  differences are blurring, a...
Best Practices


There are significant Best Practices which can help all
Mobile WebApps, and which work on a broad range
of...
Mobile Web Apps Best Practices

 1. Application Data
      Use cookies for simple client-side state
  Cookies are a simple...
Mobile Web Apps Best Practices

 1. Application Data
      Use cookies for simple client-side state
  but consider using H...
Resource

http://developer.apple.com/safari/library/
documentation/iPhone/Conceptual/
SafariJSDatabaseGuide/Introduction/
...
Example
try {
  if ( !window.openDatabase ) {
    alert( 'not supported' );
  } else {
    var shortName = 'mydatabase';
 ...
Mobile Web Apps Best Practices

 2. Security and Privacy
      Do not execute untrusted JavaScript
  Ensure that any data ...
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.par...
Tradeoff:
    var myObject = eval( '(' + myJSONtext + ')' ); // built-in JavaScript functionality




var myObject = JSON....
Mobile Web Apps Best Practices

 3. User Awareness and Control
  • Inform the user about & provide sufficient
     means fo...
Example




 Prof. Jeff Sonstein
Mobile Web Apps Best Practices



 4. Conservative Use of Resources
  • Use transfer compression to minimize App size




...
Tradeoff:

      compressed files move across the wire faster


                       But
decompression requires processin...
Mobile Web Apps Best Practices


 4. Conservative Use of Resources
  • Avoid redirects & otherwise optimize network
     r...
Mobile Web Apps Best Practices


 4. Conservative Use of Resources
  • Minimize external resources, & consider putting
   ...
Conservative Use of Resources
    Remember: a request may end up
 moving across the cellular network, and
   each request ...
Example
// hide MobileSafari address bar

<script type=quot;text/javascriptquot; charset=quot;utf-8quot;>
  /* <![CDATA[ *...
Mobile Web Apps Best Practices

 5. User Experience
   •   Design for Multiple Interaction Methods
   •   Use Scripting to...
Design for Multiple
         Interaction Methods

• Will the user need to use tabs or “tapping”
  or “accesskey” to move f...
Use Scripting to
Improve Perceived Performance

• Asynchronous loading (aka AJAX or non-
  blocking I/O) is a wonderful th...
Preserve Focus on Dynamic
          Page Updates

• Why should they have to tap again to get
  back to that search field?

...
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...
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”




             ...
User Experience

• Use canvas tag for dynamic graphics, consider SVG
  when you need DOM-visibility...
  Canvas is a highl...
Mobile Web Apps Best Practices

 6. Handle Device Capability Variation
   • Consider using server-side capability detectio...
Mobile Web Apps &
      the One-Web Initiative

• Problems inherent in maintaining dual mobile
  & desktop sites
  conside...
Examples




 Prof. Jeff Sonstein
Mobile Web Apps &
      the One-Web Initiative

• There are problems inherent in separating
  the machine-readable & human...
Resource


http://www.w3.org/TR/xhtml-rdfa-primer/


         (RDFa is easy to implement)




                Prof. Jeff S...
Mobile Web Apps Best Practices
        some of what we’ve talked about:
 •   “what should be”, “what is”, and “what will b...
Mobile Web Apps Best Practices
           Want More Depth?


 • talk to me (after the show)
 • email me (jeffs@it.rit.edu)...
Best Practices in Mobile
   Web Applications

              Prof. Jeff Sonstein
     Department of Information Technology
...
Upcoming SlideShare
Loading in...5
×

Mobile Web Apps Best Practices Presentation at Design4Mobile 2009

3,962

Published on

Presentation at Design4Mobile 2009 Conference

Published in: Design, Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,962
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
255
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide




  • Why Widgets are WebApps, but not all WebApps are Widgets.


  • ask them: what other limitations can they think of? what other additional scope/features?
  • Tell them this is my dichotomy: Resident vs Non-Resident, Widgets vs ...
  • Tell them this is my dichotomy: Resident vs Non-Resident, Widgets vs ...
  • specifically aimed at downloading onto your palmtop, to be loaded from there next time you run them. might be widgets, might not be.
  • we&#x2019;ll talk later about how we can make these act like they are resident

  • talk about building the future, maybe talk about server-side vs client-side processing here

  • (look up who supports this already)






  • users want and need to be in control of their personal & device info... OnStar/Mob/FBI example













  • Plan for international users
  • Plan for international users










  • Transcript of "Mobile Web Apps Best Practices Presentation at Design4Mobile 2009"

    1. 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. 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. 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. 4. Web Apps & Mobile Web Apps • What are they, and why should you care? Prof. Jeff Sonstein
    5. 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. 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. 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. 8. What Kinds of Mobile Web Apps Are There? Prof. Jeff Sonstein
    9. 9. My Dichotomy: Resident versus Non-Resident Prof. Jeff Sonstein
    10. 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. 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. 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. 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. 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. 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. 16. Resource http://developer.apple.com/safari/library/ documentation/iPhone/Conceptual/ SafariJSDatabaseGuide/Introduction/ chapter_1_section_1.html Prof. Jeff Sonstein
    17. 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. 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. 19. Resource http://www.json.org/json2.js (When minified it is less than 2.5K) Prof. Jeff Sonstein
    20. 20. Unsafe Example var myObject = eval( '(' + myJSONtext + ')' ); Safe Example var myObject = JSON.parse( myJSONtext, reviver ); Prof. Jeff Sonstein
    21. 21. Tradeoff: var myObject = eval( '(' + myJSONtext + ')' ); // built-in JavaScript functionality var myObject = JSON.parse( myJSONtext, reviver ); // additional JavaScript download Prof. Jeff Sonstein
    22. 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. 23. Example Prof. Jeff Sonstein
    24. 24. Mobile Web Apps Best Practices 4. Conservative Use of Resources • Use transfer compression to minimize App size Prof. Jeff Sonstein
    25. 25. Tradeoff: compressed files move across the wire faster But decompression requires processing power on the client Prof. Jeff Sonstein
    26. 26. Mobile Web Apps Best Practices 4. Conservative Use of Resources • Avoid redirects & otherwise optimize network requests Prof. Jeff Sonstein
    27. 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. 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. 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. 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. 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. 32. Use Scripting to Improve Perceived Performance • Asynchronous loading (aka AJAX or non- blocking I/O) is a wonderful thing Prof. Jeff Sonstein
    33. 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. 34. Telephone URIs • Make Telephone Numbers “Click-To-Call” Prof. Jeff Sonstein
    35. 35. Resource http://www.rfc-editor.org/rfc/rfc3966.txt Prof. Jeff Sonstein
    36. 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. 37. User Experience Notice how much of this is about the user experience? Prof. Jeff Sonstein
    38. 38. User Experience • Ensure consistency between Desktop & Mobile... Strive for “One Web” Prof. Jeff Sonstein
    39. 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. 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. 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. 42. Examples Prof. Jeff Sonstein
    43. 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. 44. Resource http://www.w3.org/TR/xhtml-rdfa-primer/ (RDFa is easy to implement) Prof. Jeff Sonstein
    45. 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. 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. 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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×