This document discusses designing user interfaces that span multiple devices with varying screen resolutions and sizes. It introduces MeeGo.Ux.Units, which allows specifying graphics and layout using physical units like millimeters instead of pixels to achieve density independence. Key techniques include using vector graphics, separating graphics from icons, generating assets for different densities, and following interaction best practices.

1. Crossing the Resolution Divide
spanning an application across multiple devices
Cyrene Domogalla
James Ketrenos

2. Who we are
Cyrene Domogalla
Intel Interaction and Graphics Designer
James Ketrenos
Intel Software Architect and Developer
2

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” – 326PPI
3

4. So what?
4

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: ~7mm
5

6. Impact Layout
6

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. 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 distance
8

9. What's the solution?
9

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

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
DisplayInfo's full display metrics
11

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

13. 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 layout
13

14. Solution?
14

15. Use MeeGo.Ux.Units' conversion functions
15

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

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 error
17

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

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. But... units only get you so far!
20

21. Scaling and Layout
„Scaling up‟ preserves layout but not aesthetics
21

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

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

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 image
24

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. 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 files
26

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
side
27

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

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

30. Crash course on SCI
Instead – use SCI files
30

31. Crash course on SCI
SCI 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: 4
31

32. Generating Assets
32

33. Vector graphics
 Make sure your graphics are as scalable as possible.
 Vector based graphics
 Benefits of a vector graphic are -- super powers.
They're 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. 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 run
34

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

36. Interaction Best Practices
36

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 often
37

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. Interaction Best Methods
Negative Space is your ally.
39

40. Interaction Best Methods
If you can, prototype.
40

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; they're there to help!
41

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 properties
42

43. Demo!
43