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.
First, I gave an overview of mobile & multi-platform with AIR and PhoneGap. See these links for more detail on the platforms:
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:
Feel free to leave a comment with any questions.
Enjoy!
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
