© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Narciso (nj) Jaramillo Building Multi-Density and Multi-Platform UIs with

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. UI paerns: Phones 10

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. UI paerns: Tablets 11

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Example: Floupon – a Groupon browser 12

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Example: Floupon – a Groupon browser   Information   Deals for current

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Phone version 14

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Tablet version (landscape) 15

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Tablet version (portrait) 16

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Tablet version (portrait) 17

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Tablet version (portrait) 18

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Building adaptive UI with Flex: Phone vs. tablet

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Calibrating…   Have a touchscreen smartphone (Android, iOS, other)?   H

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Separate phone and tablet apps 20 ViewNavigatorApplication List

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Floupon: Unied phone and tablet app 21 ViewNavigator List ActionBar View

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Handling the Back key private function initializeHandler(event:Event):voi

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Using states to handle layout variations private function resizeHandler(e

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Using state groups <states>!!<State name="portraitPhone&quo

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Managing states in views private function handleViewActivate(): void !{!!

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 26 DEMO: Floupon running on Droid Pro, iPad (portrait/landscape).

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Building adaptive UI with Flex: Density management

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 28 DEMO: App designed for 160 dpi running on Droid 2, iPhone 4 with no a

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. CHEAT SHEET: How to deal with density Set applicationDPI=“160” on your ap

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Overview   Challenges in multiscreen development   Designing adaptive U

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Multiple densities: e problem 30 150 x 40 pixel buon Desktop monitor @1

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Another perspective 31 3.5” diagonal screen Same physical size, different

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Can I use dynamic layout to solve this? 32 (Not easily. You can make stuff

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Solution: Automatic scaling for different DPIs 33 <Application applicat

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Resolution and density 34 Droid Pro 320 x 480 @160dpi Droid 2 480 x 854 @

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 35 DEMO: App running on device with proper autoscaling (Droid 2, iPhone 4

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Scaling different types of objects 36 Vectors scale up well (scaling down

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 37 DEMO: Refresh buon icon without MultiDPIBitmapSource (on desktop).

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Flex density concepts: Multi-DPI bitmaps <Button click="dealSumma

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 39 DEMO: Refresh buon icon with MultiDPIBitmapSource.

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. What I won’t be covering in depth   New mobile app components (ViewNavig

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Default mapping for DPI classications 40 Classication 160 DPI Devices M

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. CHEAT SHEET revisited Set applicationDPI=“160” on your application tag La

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Manual DPI management   Leave applicationDPI unset (will default to same

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Building adaptive UI with Flex: Multiple platforms

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. UI differences across platforms 44 Android phone iPhone Title le-aligned

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Per-platform style rules @media (os-platform: "ios") {!! !Actio

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Using states for platform differences <states>!!<State name="

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 47 DEMO: App running on iPhone/iPad compared to Droid 2/Galaxy Tab.

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Other common platform differences 48 Android Menu buon (use ViewMenu) Lon

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. 49 Know your platforms!

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Challenges in multiscreen development

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Conclusion

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Key takeaways Design for multiple screens Resolution | Orientation | Dens

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. What next?   Watch my blog: rictus.com/muchado for slides and code   Fo

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. What does multiscreen mean? 6 Pixel densities Form factors UI and hardwar

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Leveraging Flex 4.5 for multiscreen mobile UI development 7 Classic Flex

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Designing adaptive UI for multiple mobile screens

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Before you design… Know your platforms Platform UI guidelines | Great app