Display
Screen
A mobile device has a small screen when compared to a desktop or laptop screen. In the desktop world, the sizes range 13, 15, 17, 19, and 21-inch screen sizes (diagonally). In mobile development the screen size range is usually 1.5 to 5 inches for mobile phone devices.
Screen Resolution
In the desktop world the most common screen resolution is 1024x768 pixels. How many pixels (width x height) are available on your target audience's device(s)? This is important to consider when creating graphics for mobile screens.
The most widely available screen resolution is 240x320 pixels. Some devices might have a resolution of 128x128 pixels, and some 800x600. Up until 2010 most mobile devices fell into four basic groups:
When Apple introduced the iPhone 4 in 2010 it boasted a new 960x640 resolution, and an 800:1 contrast ratio. The third generation of iPad revealed support for 2048 x 1536 resolution with its new retina display.
The next set of Android phones featured much higher PPI only to be bested by Nokia's next generation of smartphones and finally the iPhone 4.
As you can see, the mobile design landscape continues to evolve as these new technological advances in screen displays presents new challenges. The above information was provided by Luke Wroblewski as his site has an excellent list of resources on this topic here: http://www.lukew.com/ff/entry.asp?1142
It is recommended that you stick to using design templates for both paper sketches and authoring tool screens that are sized to the target platform size right from the beginning. Do not use any other size, no matter how temporary. (Elearning Guild, 2013)
The most widely available screen resolution is 240x320 pixels. Some devices might have a resolution of 128x128 pixels, and some 800x600. Up until 2010 most mobile devices fell into four basic groups:
- Low-end devices: 128x160 or 128x128 pixels
- Mid-end devices (group #1): 176x220 or 176x208 pixels
- Mid-end devices (group #2) and high-end devices: 240x320 pixels
- Touch-enabled high-end devices and smartphones: 240x480, 320x480, 360x480, 480x800, 480x854, or 640x960 pixels
When Apple introduced the iPhone 4 in 2010 it boasted a new 960x640 resolution, and an 800:1 contrast ratio. The third generation of iPad revealed support for 2048 x 1536 resolution with its new retina display.
- iPhone: 320x480 | 3.5 in | 164ppi
- Palm Pre | 320x480 | 3.1 in 186ppi
- Palm Pixie | 320x400 | 2.63 in | 194ppi
- T-Mobile G1 | 320x480 | 3.2 in | 180ppi
- MyTouch 3G | 320x480 | 3.2 in | 180ppi
- HTC Hero | 320x480 | 3.2 in | 180ppi
The next set of Android phones featured much higher PPI only to be bested by Nokia's next generation of smartphones and finally the iPhone 4.
- Motorola Droid | 480x854 | 3.7 in | 264ppi
- Nexus One | 480x800 | 3.7 in | 252ppi
- HTC Desire | 480x800 | 3.7 in | 252ppi
- Nokia N97 | 360x640 | 3.2 in | 229ppi
- Nokia N900 | 800x480 | 3.5 in | 266ppi
- Apple iPhone 4 | 960x640 | 3.5 in | 326ppi
As you can see, the mobile design landscape continues to evolve as these new technological advances in screen displays presents new challenges. The above information was provided by Luke Wroblewski as his site has an excellent list of resources on this topic here: http://www.lukew.com/ff/entry.asp?1142
It is recommended that you stick to using design templates for both paper sketches and authoring tool screens that are sized to the target platform size right from the beginning. Do not use any other size, no matter how temporary. (Elearning Guild, 2013)
Aspect Ratio
This is the ratio between the longer and shorter dimensions of a display.
Mobile content should be developed with an awareness of the rotation/orientation capability provided by accelerometers and should offer a consistent experience in any screen orientation.
- Horizontal (landscape) devices have displays that are wider than they are tall
- Vertical (portrait) devices have displays that are taller than they are wide
- Square screens have the same width and height
Mobile content should be developed with an awareness of the rotation/orientation capability provided by accelerometers and should offer a consistent experience in any screen orientation.
Text Sizes
(from Elearning Guild, 2013)
- For small phones, use 4pt (1.4mm)
- For larger phones, use 6pt (2.1mm)
- For tablets, use 8pt (2.8mm)
Touch Area (Buttons, etc.) Sizes
(from Elearning Guild, 2013)
- At least 17pt (6mm) and preferably 23pt (8mm).
- No need to be larger than about 43pt (15mm) in the smallest dimension.
- Space items out so users don't hit the wrong target. Measured from the center, keep everything else clear of a circle at least 23pt (8mm) across, and if at all possible, 28pt (10mm).
- In general, touch areas should be positioned and sized so that fingers do not obscure important information where they are clicking.
- Do not tell users to “click” to interact with a button. Use "push".