building ria's from the prespective of the finger tip
DESCRIPTION
Its inevitable that rich internet application will be developed for all the multi touch devices with various form factors. In this presentation I will demonstrate an approach to use the physical size of the finger tip as the center point for design. From the perspective of the finger tip all devices are the same, basically it has a screen and the finger doesn't change size regardless of the pixels per inch of the screen. I will be showcasing Flex 4 code that makes development for RIA's across the various form factors possible.TRANSCRIPT
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: [email protected]
Flash Player 10.1 Desktop and Android – http://www.adobe.com/go/getflash/AIR for Android - http://labs.adobe.com/technologies/air2/android/
