Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building RIAs from the Perspective of the Finger Tip<br />Renaun Erickson<br />Platform Evangelist<br />
<ul><li> Who Am I?</li></ul>Renaun Erickson<br />Adobe Systems 3 years – Platform Evangelist (recently)<br />Flex/Flash an...
 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</li></li></ul><li>Nexus One: 800x480 254 (3.7’ Screen)<br />Droid Incredible: 800x480 252 PPI (3....
1153x813<br />
Dots Per Inch (DPI)<br /><ul><li> 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</li></ul>PixelsPer Inch (PPI)<br /><ul><li> Real Term that facto...
 Non-Desktop OS’sCapabilities.screenDPI is the correct PPI</li></li></ul><li>Finger Tip Size<br />How large to make a butt...
What’s Your Devices Size in Finger Tip<br />Finger Tip Size for Nexus One <br />~ 8 x 5 Finger Tips<br />
Which Way To Scale – Picking a Baseline PPI<br /><ul><li> Scaling down causes layoutartifacts.
Upcoming SlideShare
Loading in …5
×

Building RIA's from the Prespective of the Finger Tip

1,566 views

Published on

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.

Published in: Technology
  • Be the first to comment

Building RIA's from the Prespective of the Finger Tip

  1. 1. Building RIAs from the Perspective of the Finger Tip<br />Renaun Erickson<br />Platform Evangelist<br />
  2. 2. <ul><li> Who Am I?</li></ul>Renaun Erickson<br />Adobe Systems 3 years – Platform Evangelist (recently)<br />Flex/Flash and Web Application Developer (since Flex 1.5)<br />Enjoy Custom Components and Frameworks<br /><ul><li> Why a Finger Tip?</li></li></ul><li><ul><li> The Physical Size of Devices
  3. 3. The Difference Between DPI and PPI
  4. 4. How Large is a Finger Tip
  5. 5. Scaling Relative to PPI
  6. 6. Layout Helpers for Large Content
  7. 7. Assumptions of High PPI</li></li></ul><li>Nexus One: 800x480 254 (3.7’ Screen)<br />Droid Incredible: 800x480 252 PPI (3.7’ Screen)<br />Droid: 854x480 265 PPI<br />
  8. 8.
  9. 9. 1153x813<br />
  10. 10. Dots Per Inch (DPI)<br /><ul><li> Windows DPI is set to 96
  11. 11. Mac DPI is set to 72
  12. 12. Desktop’s Typically don’t factor in Monitor’s physical dimension, scaling then happens for you.
  13. 13. DPI is highly used with Printers
  14. 14. Desktop’s Capabilities.screenDPI is always Win/Mac value</li></ul>PixelsPer Inch (PPI)<br /><ul><li> Real Term that factors Pixels (screen resolution) relative to Physical Size
  15. 15. Non-Desktop OS’sCapabilities.screenDPI is the correct PPI</li></li></ul><li>Finger Tip Size<br />How large to make a button?<br />How large should text be to be readable?<br />
  16. 16. What’s Your Devices Size in Finger Tip<br />Finger Tip Size for Nexus One <br />~ 8 x 5 Finger Tips<br />
  17. 17. Which Way To Scale – Picking a Baseline PPI<br /><ul><li> Scaling down causes layoutartifacts.
  18. 18. Consider layout constraints with up to 1/2 scaling.
  19. 19. Scaling up causes pixilation.
  20. 20. Create larger layout/pictures and scale down.</li></li></ul><li>Nexus One as a Baseline PPI<br /><ul><li> My Finger:
  21. 21. 100px x 100px Button
  22. 22. 10cm x 10cm Physical Dimension</li></li></ul><li>Scaling the Application to a Relative PPI<br />
  23. 23. Layout Helpers<br /><ul><li> Checks if scaled components fit in physical screen, if not:
  24. 24. PhysicalSizeUtil provides pan/move of component
  25. 25. (Future Idea) PhysicalSizeUtilprovides auto pan/move for spark Form
  26. 26. As the user fills out FormItems it will center on the next item for them
  27. 27. Opt in to layout helpers and style scaling.
  28. 28. PhysicalSizeUtilmeant to allow for flexibility.</li></li></ul><li>Assumptions with 254 PPI as Baseline<br /><ul><li> 100px x 100px for Finger Tip Size
  29. 29. 24 Font Size
  30. 30. Embed Fonts (Both for Scaling and OS issues)
  31. 31. Images at higher resolutions.
  32. 32. Layout applications with Constraints.
  33. 33. Lower PPI just look worse then higher PPI, beware of comparing to closely.</li></li></ul><li>Code & Demos<br />
  34. 34. Q/A<br />Flash Player 10.1 Desktop and Android – http://www.adobe.com/go/getflash/<br />AIR for Android - http://labs.adobe.com/technologies/air2/android/<br />Twitter: @renaun<br />Blog: http://renaun.com<br />Email: renaun@adobe.com<br />

×