8 November 2010
Knowledge of Flash development, but experience authoring for mobile is not required.
You might be surprised when you attempt to access your own website on a smart phone and discover that your content is not laid out as you had envisioned; and as you try to alter your content so that its displayed equally well on the desktop as it is on a smart phone or tablet, you will discover that there are some challenges to overcome.
This white paper reviews the necessary steps to identify the device and its capabilities that the user has on hand, circumvent the phones browser "features" that are intended to make legacy desktop content accessible via the phone, and review other challenges to create a seamless, predictable experience between the user and your content.
Obstacles to creating a consistent and usable experience include mobile content transcoders, mobile devices that behave in certain ways to make a web experience really intended for desktop systems accessible to mobile users, inconsistent use of HTML tags and meta-tags across device families, and user-configurable browser or device settings.
This document walks you through the steps necessary to eliminate the various potential points of variation so that you can create an experience that scales gracefully between desktop and mobile browsers. The sample ActionScript 3 project call TestStage, created with Adobe FlashÂ® Builder 4, exemplifies many of the key concepts conveyed in this document.
- Display modes
- HTML tips for mobile-optimized web content
- Scaling and aligning content
- Device orientation
- Sizing your content appropriately
- Device detection in HTML and Flash
Where to go from here
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.