Mobile Web Apps Best Practices Presentation at Design4Mobile 2009

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 signiﬁcant Best Practices which can help all
Mobile WebApps, and which work on a broad range
of platforms... that is what we will focus on ﬁrst

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


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


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 miniﬁed 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


3. User Awareness and Control
• Inform the user about & provide sufﬁcient
means for them to control automatic network
access and/or use of personal & device
information

Prof. Jeff Sonstein

Example

Prof. Jeff Sonstein


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

Prof. Jeff Sonstein

Tradeoff:

compressed ﬁles move across the wire faster

But
decompression requires processing power on the client

Prof. Jeff Sonstein


• Avoid redirects & otherwise optimize network
requests

Prof. Jeff Sonstein


• 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 ﬁnancial 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


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 ﬁeld to ﬁeld?

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 ﬁeld?

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-ﬂexible drawing system for
JavaScript, but exists outside the DOM.
SVG on the other hand is available for DOM-
manipulation

Prof. Jeff Sonstein


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

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

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

Mobile Web Apps Best Practices Presentation at Design4Mobile 2009

Related slideshows

More Related Content

Mobile Web Apps Best Practices Presentation at Design4Mobile 2009

Editor's Notes