DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Multi-Device Best Practices

Multi-Device Best Practices

Andrew Trice user avatar by
Andrew Trice
·
May. 05, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
6.86K Views

Join the DZone community and get the full member experience.

Join For Free

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!

Multi-platform mobile app

Published at DZone with permission of Andrew Trice, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Modern REST API Design Principles and Rules
  • Portfolio Architecture Examples: Retail Collection
  • A First Look at CSS When and Else Statements
  • Augmented Analytics: The Future of Business Intelligence

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo