Building RIA's from the Prespective of the Finger Tip

Building RIAs from the Perspective of the Finger Tip
Renaun Erickson
Platform Evangelist

Who Am I?
Renaun Erickson
Adobe Systems 3 years – Platform Evangelist (recently)
Flex/Flash and Web Application Developer (since Flex 1.5)
Enjoy Custom Components and Frameworks
Why a Finger Tip?

The Physical Size of Devices
The Difference Between DPI and PPI
How Large is a Finger Tip
Scaling Relative to PPI
Layout Helpers for Large Content
Assumptions of High PPI

Nexus One: 800x480 254 (3.7’ Screen)
Droid Incredible: 800x480 252 PPI (3.7’ Screen)
Droid: 854x480 265 PPI

1153x813

Dots Per Inch (DPI)
Windows DPI is set to 96
Mac DPI is set to 72
Desktop’s Typically don’t factor in Monitor’s physical dimension, scaling then happens for you.
DPI is highly used with Printers
Desktop’s Capabilities.screenDPI is always Win/Mac value
PixelsPer Inch (PPI)
Real Term that factors Pixels (screen resolution) relative to Physical Size
Non-Desktop OS’sCapabilities.screenDPI is the correct PPI

Finger Tip Size
How large to make a button?
How large should text be to be readable?

What’s Your Devices Size in Finger Tip
Finger Tip Size for Nexus One
~ 8 x 5 Finger Tips

Which Way To Scale – Picking a Baseline PPI
Scaling down causes layoutartifacts.
Consider layout constraints with up to 1/2 scaling.
Scaling up causes pixilation.
Create larger layout/pictures and scale down.

Nexus One as a Baseline PPI
My Finger:
100px x 100px Button
10cm x 10cm Physical Dimension

Scaling the Application to a Relative PPI

Layout Helpers
Checks if scaled components fit in physical screen, if not:
PhysicalSizeUtil provides pan/move of component
(Future Idea) PhysicalSizeUtilprovides auto pan/move for spark Form
As the user fills out FormItems it will center on the next item for them
Opt in to layout helpers and style scaling.
PhysicalSizeUtilmeant to allow for flexibility.

Assumptions with 254 PPI as Baseline
100px x 100px for Finger Tip Size
24 Font Size
Embed Fonts (Both for Scaling and OS issues)
Images at higher resolutions.
Layout applications with Constraints.
Lower PPI just look worse then higher PPI, beware of comparing to closely.

Code & Demos

Q/A
Flash Player 10.1 Desktop and Android – http://www.adobe.com/go/getflash/
AIR for Android - http://labs.adobe.com/technologies/air2/android/
Twitter: @renaun
Blog: http://renaun.com
Email: renaun@adobe.com

http://renaun.com	51
http://fanyi.youdao.com	1
http://www.techgig.com	1

Building RIA's from the Prespective of the Finger Tip

by Renaun Erickson on Jul 23, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 53

Statistics

Building RIA’s from the Prespective of the Finger Tip — Presentation Transcript