building ria's from the prespective of the finger tip

Building RIAs from the Perspective of the Finger Tip

Renaun EricksonPlatform Evangelist

o 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

o Why a Finger Tip?

o The Physical Size of Devices

o The Difference Between DPI and PPI

o How Large is a Finger Tip

o Scaling Relative to PPI

o Layout Helpers for Large Content

o Assumptions of High PPI

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

Droid: 854x480 265 PPI

Device Resolution PPI Physical Size

Nexus One 800x480 254 3.7’

Droid Incredible 800x480 254 3.7’

Droid 854x480 265 3.7’

Droid X 854x480 240 4.3’

iPhone 3GS and lower

480x320 163 3.5’

iPhone 4 960x640 326 3.5’

iPad 1024x768 132 9.7’

Nvidia Prototype 1024x600 160 7.4’

1153x813

Dots Per Inch (DPI)

Pixels Per Inch (PPI)

o Windows DPI is set to 96o Mac DPI is set to 72o Desktop’s Typically don’t factor in Monitor’s physical dimension, scaling then happens for you.o DPI is highly used with Printerso Desktop’s Capabilities.screenDPI is always Win/Mac value

o Real Term that factors Pixels (screen resolution) relative to Physical Sizeo Non-Desktop OS’s Capabilities.screenDPI is the correct PPI

Finger Tip SizeHow 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

o Scaling down causes layout artifacts.

o Consider layout constraints with up to 1/2 scaling.

o Scaling up causes pixilation.

o Create larger layout/pictures and scale down.

Nexus One as a Baseline PPI

Device Resolution

PPI PPI / 254

Nexus One 800x480 254 100%

Droid 854x480 265 104.3%

iPhone 3GS and lower

480x320 163 64.17%

iPhone 4 960x640 326 128.3%

iPad 1024x768 132 51.96%

Nvidia Prototype 1024x600 160 62.99%

o My Finger:o 100px x 100px Buttono 10cm x 10cm Physical Dimension

Scaling the Application to a Relative PPI

Layout Helpers

o Checks if scaled components fit in physical screen, if not:

o PhysicalSizeUtil provides pan/move of component

o (Future Idea) PhysicalSizeUtil provides auto pan/move for spark Form

o As the user fills out FormItems it will center on the next item for them

o Opt in to layout helpers and style scaling.

o PhysicalSizeUtil meant to allow for flexibility.

Assumptions with 254 PPI as Baseline

o 100px x 100px for Finger Tip Size

o 24 Font Size

o Embed Fonts (Both for Scaling and OS issues)

o Images at higher resolutions.

o Layout applications with Constraints.

o Lower PPI just look worse then higher PPI, beware of comparing to closely.

Code & Demos

Q/A

Twitter: @renaunBlog: http://renaun.comEmail: renaun@adobe.com

Flash Player 10.1 Desktop and Android – http://www.adobe.com/go/getflash/AIR for Android - http://labs.adobe.com/technologies/air2/android/