Crossing the Resolution Divide

Crossing the Resolution Dividespanning an application across multiple devices Cyrene Domogalla James Ketrenos

Who we are Cyrene Domogalla Intel Interaction and Graphics Designer James Ketrenos Intel Software Architect and Developer2

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

So what?4

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

Impact Layout6

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

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

Whats the solution?9

Density Independence Specify the graphics and layout in physical units Write your app using MeeGo.Ux.Units10

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

MeeGo.Ux.Units properties real mm - Pixels per millimeter real inch - Pixels per inch real vp - Pixels per "virtual-pixel"12

A note on rounding The properties returned by Units are non-integer units.mm is 4.3307087 on a 110PPI display Working directly with units.mm = non-integer #s Introduces crawling and inconsistent pixel layout13

Solution?14

Use MeeGo.Ux.Units conversion functions15

MeeGo.Ux.Units functions  int mm2px (real millimeters)  int inch2px (real inches)  int vp2px (real virtualPixels)16

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

Getting MeeGo.Ux.Units $ git clone git://meego.gitorious.org/meego-ux/meego-ux-components $ cd meego-ux-components $ qmake $ make && sudo make install18

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

But... units only get you so far!20

Scaling and Layout „Scaling up‟ preserves layout but not aesthetics21

Scaling and Layout A UI can‟t always just be scaled to fit the device specs.22

Scaling Down The paradigm likely will not fit The UI may need to be completely redesigned www.funny-cat-pictures.com/23

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

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

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

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

Crash course on SCI QML allows you to specify the border dimensions directly in the QML28

Crash course on SCI However this is not designer friendly and could require code change with a graphics update29

Crash course on SCI Instead – use SCI files30

Crash course on SCISCI example Instead of: Use: BorderImage { BorderImage { source: “frame.png” source: “frame.sci” border.top: 4 } border.right: 4 border.bottom: 4 and in frame.sci: border.left: 4 } source: frame.jpg border.top: 4 border.right: 4 border.bottom: 4 border.left: 431

Generating Assets32

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

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

Tools Commercial: Photoshop and Illustrator Open source Gimp and Inkscape Illustrator and Inkscape are your vector programs Gimp and Photoshop are better for layout35

Interaction Best Practices36

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

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

Interaction Best Methods Negative Space is your ally.39

Interaction Best Methods If you can, prototype.40

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

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

Demo!43

Crossing the Resolution Divide

by Cyrene Domogalla on Jun 27, 2011

Accessibility

Upload Details

Usage Rights

Statistics

Crossing the Resolution Divide Presentation Transcript