Crossing the Resolution Divide


Published on

MeeGo Conference 2011 in San Francisco. Talk on density independence when developing MeeGo applications and how to address the issue through both code and generating proper graphics

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Crossing the Resolution Divide

  1. 1. Crossing the Resolution Dividespanning an application across multiple devices Cyrene Domogalla James Ketrenos
  2. 2. Who we are Cyrene Domogalla Intel Interaction and Graphics Designer James Ketrenos Intel Software Architect and Developer2
  3. 3. So many choices… MeeGo can run on a variety of resolutions and display sizes -Some examples- Handset Tablet 800x480 – 4” – 233PPI 1024x768 – 10” – 119PPI 864x480 – 3.67” – 269PPI 1360x768 – 11.6” – 135PPI 960x640 – 3.5” – 326PPI3
  4. 4. So what?4
  5. 5. Impact Graphics  Status bar is 30px tall and designed 150PPI for 150PPI  Seen on target 150PPI screen: ~5mm 110PPI  (25.4mm/inch * 30px / 150px/inch)  Seen on 330PPI screen: 2.3mm 330PPI  Seen on 110PPI screen: ~7mm5
  6. 6. Impact Layout6
  7. 7. Impact Interaction  Touchable areas  Higher PPI devices makes buttons smaller and hard to hit  Gesture: Tap vs. Pan  “Tap” – down and up within a specific period of time and little movement  “Pan” – down and more than a little movement  If movement threshold is defined in pixels then on high PPI handsets, triggering the “Tap” becomes difficult.7
  8. 8. Impact Legibility  Fonts... similar to the graphics problem  Compounded by device usage – reading distance  “96DPI” desktop world defined to make fonts look (roughly) the same size as on paper given recommended viewing distance8
  9. 9. Whats the solution?9
  10. 10. Density Independence Specify the graphics and layout in physical units Write your app using MeeGo.Ux.Units10
  11. 11. What is MeeGo.Ux.Units?  QML element which ties into the display density (similar to QtMobility DisplayInfo)  Uses QX11Info::appDpiX()  Assumes square pixels – developers interested in non-square pixels can base similar code on DisplayInfos full display metrics11
  12. 12. MeeGo.Ux.Units properties real mm - Pixels per millimeter real inch - Pixels per inch real vp - Pixels per "virtual-pixel"12
  13. 13. A note on rounding The properties returned by Units are non-integer is 4.3307087 on a 110PPI display Working directly with = non-integer #s Introduces crawling and inconsistent pixel layout13
  14. 14. Solution?14
  15. 15. Use MeeGo.Ux.Units conversion functions15
  16. 16. MeeGo.Ux.Units functions  int mm2px (real millimeters)  int inch2px (real inches)  int vp2px (real virtualPixels)16
  17. 17. What is a virtual pixel?  A virtual pixel is the size of a pixel on a normalized 330PPI device.  Allows graphics to be designed “pixel perfect” while maintaining density independence  A single pixel border specified in mm/inches can introduce too much rounding error17
  18. 18. Getting MeeGo.Ux.Units $ git clone git:// $ cd meego-ux-components $ qmake $ make && sudo make install18
  19. 19. Example! import Qt 4.7 import MeeGo.Ux.Units 0.1 Rectangle { Units { id: units } width: units.mm2px(100.0) height: units.mm2px(50.0) }19
  20. 20. But... units only get you so far!20
  21. 21. Scaling and Layout „Scaling up‟ preserves layout but not aesthetics21
  22. 22. Scaling and Layout A UI can‟t always just be scaled to fit the device specs.22
  23. 23. Scaling Down The paradigm likely will not fit The UI may need to be completely redesigned
  24. 24. The problem with scaling It is better to have a higher resolution image and scale down than be stuck with an inflexible low res image24
  25. 25. The problem with scaling Sometimes you just have to make pixel perfect sized graphics for a larger or smaller design. This is especially important when dealing with icons.25
  26. 26. Design  Theme  Separate your graphics from your icons  Icons are typically fixed size and connote a contextual meaning.  Graphics are used to create your layout - they provide the backgrounds, borders, and color but do not add any specific meaning.  Use BorderImage with sci files26
  27. 27. Crash course on „BorderImage‟  BorderImage breaks images into 9 blocks  Border dimensions specifies which region of graphical asset to scale when filling BorderImage with 4 Result when applied to pixel border on each a 200x32 element side27
  28. 28. Crash course on SCI QML allows you to specify the border dimensions directly in the QML28
  29. 29. Crash course on SCI However this is not designer friendly and could require code change with a graphics update29
  30. 30. Crash course on SCI Instead – use SCI files30
  31. 31. Crash course on SCISCI example Instead of: Use: BorderImage { BorderImage { source: “frame.png” source: “frame.sci” 4 } border.right: 4 border.bottom: 4 and in frame.sci: border.left: 4 } source: frame.jpg 4 border.right: 4 border.bottom: 4 border.left: 431
  32. 32. Generating Assets32
  33. 33. Vector graphics  Make sure your graphics are as scalable as possible.  Vector based graphics  Benefits of a vector graphic are -- super powers. Theyre based on math instead of pixels. You can easily manipulate them; they are easily update-able.  You can use scripts to pull them out of the application they are in.33
  34. 34. The pretty pieces  Regardless of your ability to use SVGs in MeeGo currently, graphics made as SVG standard compliant will help you in the long run34
  35. 35. Tools Commercial: Photoshop and Illustrator Open source Gimp and Inkscape Illustrator and Inkscape are your vector programs Gimp and Photoshop are better for layout35
  36. 36. Interaction Best Practices36
  37. 37. Interaction Best Methods Think about how the user would hold the device Does this effect your layout? Does it need to change when the orientation changes Where are the fingers likely to be? Sides and bottom work well Top is often a good spot for actions used less often37
  38. 38. Interaction Best Methods Keep your user in the know. Do your best to keep the context of the interaction How can you use animations to describe the touch interaction?38
  39. 39. Interaction Best Methods Negative Space is your ally.39
  40. 40. Interaction Best Methods If you can, prototype.40
  41. 41. Interaction Best Methods Being clever can be brilliant or it can be trouble, so be carefull! Basically stick to the paradigms. It is tempting to re-invent, but if it is confusing it is useless. Use the components; theyre there to help!41
  42. 42. MeeGo Future SVG support in theming Automatic change if device density changes (screen migration) Enhance BorderImage to support virtual pixel borders in .sci files Pixel perfect size preference vs. automatic scaling User and device specified font scaling support Input resolution properties42
  43. 43. Demo!43