Multi-Device Best Practices

I recently spoke at the 360|Flex conference in Devner, CO on “Multi-Device Best Practices”.  This presentation was focused upon multi-device & multi-platform development strategies for both PhoneGap and Flex/AIR applications.  Below you can view my presentation slides and source code, and a brief summary.

• Multi-Device-Best-Practices.pdf

First, I gave an overview of mobile & multi-platform with AIR and PhoneGap.  See these links for more detail on the platforms:

• What is PhoneGap
• Multi-platform development with AIR
• Why cross-platform development?

Next, I emphasized the differences in user experience, display density, usability, and application style/feel between different platforms and device form factors.  You can read more detail on these topics here:

• Flex/AIR: Device form factor detection
• Device form factor detection in PhoneGap (example project):

var _w = Math.max( $(window).width(), $(window).height() );
var _h = Math.min( $(window).width(), $(window).height() );

// assume tablet view based upon display resolution
var tabletView = (_w >= 1000 && _h >= 600);

if ( tabletView ) {
  //Setup the tablet form factor via JS
}
else {
  //Setup the phone form factor via JS
}

I also covered various libraries and techniques for making your creations feel like “native apps” instead of “web pages in a container”, and ways to make your apps look & feel “more native” for a given platform.

Details on Flex/AIR-specific tools & frameworks for native-like app experiences:

• Platform specific styles via CSS media queries
• Eskimo framework for platform specific styles
• Flex Code Samples (FXP)

Frameworks/Libraries for HTML/Web/PhoneGap, for “app-like” experiences:

• Twitter Boostrap
• Zurb Foundation
• iUI
• jQuery Mobile
• jQuery UI
• Sencha Touch
• Kendo UI
• App-UI
• iScroll
• Moobile JS

Feel free to leave a comment with any questions.
Enjoy!