Physical screen size

The display size in pixels is only half the story. As a designer, you should also be aware of the impact that the physical screen dimensions will have on your designs. Consider the three devices pictured below. Each has a 240 x 320-pixel display, but they vary in physical dimensions and, consequently, in screen resolution.

Figure: Physical screen size and resolution comparison

Each of the three devices shown has a 240 x 320-pixel display, but they vary in physical dimension and, therefore, in pixel density, which ranges from 154 to 199 pixels per inch.

The implications are most obvious on images, particularly on those that contain graphic text or fine details. All of these devices share a 240-pixel screen width, yet a logo that is legible at 154 pixels per inch may be somewhat less so at 199 pixels per inch. Although it probably doesn’t make sense to group these three devices into separate families and create separate graphics for each, this does illustrate the importance of testing designs on real devices early on, to ensure that assets designed on a large computer monitor are suitable once transferred to a mobile device and that critical visual elements remain legible at all common or supported screen sizes.

Figure: Legibility at different resolutions

The same content viewed at higher screen resolutions can quickly become illegible.