Mobile application design considerationsThe operating context and physical characteristics of mobile devices demand careful coding and design. For example, streamlining code so that it executes as fast as possible is crucial. Code optimization can only go so far, of course; intelligent design that works within the device limitations can also help prevent your visual presentation from overtaxing the rendering system. Code While making your code run faster is always beneficial, the slower processor speed of most mobile devices increases the rewards of the time spent writing lean code. In addition, mobile devices are almost always run on battery power. Achieving the same result with less work uses less battery power. Design Factors like the small screen size, the touch-screen interaction mode, and even the constantly changing environment of a mobile user must be considered when designing the user experience of your application. Code and design together If your application uses animation, then rendering optimization is very important. However, code optimization alone is often not enough. You must design the visual aspects of the application such that the code can render them efficiently. Important optimization techniques are discussed in the Optimizing Content for the Flash Platform guide. The techniques covered in the guide apply to all Flash and AIR content, but are essential to developing applications that run well on mobile devices. Application life cycleWhen your application loses focus to another app, AIR drops the framerate to 4 frames-per-second and stops rendering graphics. Below this framerate, streaming network and socket connections tend to break. If your app doesn’t use such connections, you can throttle the framerate even lower. When appropriate, you should stop audio playback and remove listeners to the geolocation and accelerometer sensors. The AIR NativeApplication object dispatches activate and deactivate events. Use these events to manage the transition between the active and the background state. Most mobile operating systems terminate background applications without warning. By saving application state frequently, your application should be able to restore itself to a reasonable state whether it is returning to active status from the background or by being launched anew. Information densityThe physical size of the screen of mobile devices is smaller than on the desktop, although their pixel density (pixels per inch) is higher. The same font size will produce letters that are physically smaller on a mobile device screen than on a desktop computer. You must often use a larger font to ensure legibility. In general, 14 points is the smallest font size that can be easily read. Mobile devices are often used on the move and under poor lighting conditions. Consider how much information you can realistically display on screen legibly. It might be less than you would display on a screen of the same pixel dimensions on a desktop. Also consider that when a user is touching the screen, their finger and hand block part of the display from view. Place interactive elements at the sides and bottom of the screen when the user has to interact with them for longer than a momentary touch. Text inputMany devices use a virtual keyboard for text entry. Virtual keyboards obscure part of the screen and are often cumbersome to use. Consider implementing alternatives to using input text fields. For example, to have the user enter a numerical value, you do not need a text field. You can provide two buttons to increase or decrease the value. Do not rely on keyboard events. On mobile devices without a physical keyboard, the virtual keyboard is only present when the user edits a text field. On such devices an application only dispatches most keyboard events when the virtual keyboard is present. Soft keysMobile devices include a varying number of soft keys. Soft keys are buttons that are programmable to have different functions. Follow the platform conventions for these keys in your application. Screen orientation changesMobile content can be viewed in portrait or landscape orientation. Consider how your application will deal with screen orientation changes. For more information, see Detecting device orientation. Screen dimmingAIR does not automatically prevent the screen from dimming while video is playing. You can use the systemIdleMode property of the AIR NativeApplication object to control whether the device will enter a power saving mode. (On some platforms, you must request the appropriate permissions for this feature to work.) Incoming phone callsThe AIR runtime automatically mutes audio when the user makes or receives a phone call. On Android, you should set the Android READ_PHONE_STATE permission in the application descriptor if your application plays audio while it is in the background. Otherwise, Android prevents the runtime from detecting phone calls and muting the audio automatically. See Android permissions. Hit targetsConsider the size of hit targets when designing buttons and other user interface elements that the user taps. Make these elements large enough that they can be comfortably activated with a finger on a touch screen. Also, make sure that you have enough space between targets. The hit target area should be about 44 pixels to 57 pixels on each side for a typical high-dpi phone screen. Application package install sizeMobile devices typically have far less storage space for installing applications and data than desktop computers. Minimize the package size by removing unused assets and libraries. On Android, the application package is not extracted into separate files when an app is installed. Instead, assets are decompressed into temporary storage when they are accessed. To minimize this decompressed asset storage footprint, close file and URL streams when assets are completely loaded. UI componentsMany Flex components and Flash components are designed for use in desktop applications. These components, especially display components, may perform slowly on mobile devices. In addition to performing slowly, desktop components may have inappropriate interaction models for mobile devices. Adobe is developing a mobile-optimized version of the Flex framework. For more information, see http://labs.adobe.com/technologies/flex/mobile/. Community component projects suitable for mobile applications are also available. These include:
|
|