Presentation at Design4Mobile 2009 Conference

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/