March 27th, 2012
Courtesy of Microsoft
After much anticipation, the big splash of the moment is the release of the Apple iPad 3 with its high density “Retina” display.
This will allow for more detail in higher resolution images and sharper text with legibility to rival paper. Soon, Microsoft and other tablet manufacturers will follow suit with high density displays in their devices.
But what does this mean for application designers and software developers?
Since the early days of desktop computing, developers have had to deal with different screen resolutions.
Any modern, desktop GUI application will have been designed to scale so that it can run full screen or in a smaller window. The bigger the window, the more you can fit in. And, if something doesn’t fit, you re-arrange stuff or introduce scrolling.
Nice and easy (sort of).
Display adapters can usually kick out a number of different resolutions. In the days of CRT monitors (not so long ago, actually), you could pick a screen resolution that matched the size of your monitor and the quality of your eyesight. Got a big monitor? Whack up the resolution?
Screen density has still been a problem, though. I once made the mistake of choosing the ‘upgraded’ screen option on a new laptop. Instead of the regular 1024 x 768 display, I thought I’d be much more productive if I could fit more on screen and opted for the 1400 x 1050 display.
What I didn’t realize at the time was that the high resolution (high pixel density) on such a small, 15″ screen made everything so small that text was hard to read and buttons became hard to click, requiring greater accuracy in mouse control.
Stuck with the built-in TFT screen, there were two options:
And that’s where screen density issues crop up.
Digital, flat-screen displays have a fixed number of pixels, determined by their size and pixel density. This means they are optimized for that resolution. If you change the display to any other resolution, artefacts show up that make everything look nasty. Single pixels need to map onto, say, 1.4 pixels. Some end up using 1 pixel and others 2, or anti-aliasing is engaged to try to smooth everything out.
While bitmap image scaling generally does a good job of this sort of thing, text and general UI elements can end up looking blurred and fuzzy, inducing headaches after prolonged use.
So, what about the new wave of high-density tablets?
If you compare the specifications, just as with the iPhone 4 previously, Apple have smartly chosen to exactly double the resolution of the iPad 3, from 1024 x 768 on the original iPad and iPad 2, to 2048 x 1536 on the iPad 3.
This means all the graphic assets from an application designed for the older display will look identical on the new Retina display with no jaggies or other artefacts. Each pixel in the original will map to 4 pixels on the new display (a 2 x 2 square). Text will get the full Retina effect and developers can choose to provide higher resolution images for their applications, or not.
Meanwhile, at Microsoft, as you might imagine, the Windows 8 team have been doing extensive research into all things display-related to ensure that Windows 8 works well not just on fixed-sized mobile devices but also variable-resolution desktops.
Instead of using a 200% scaling factor, like the iPad 3, Microsoft have identified a number of resolution sweet spots and settled on two different scaling factors: 140% and 180%. While these seem like odd numbers, they allow for the same user experience on standard (1366 x 768), HD (1920 x 1080) and Quad-XGA (2560 x 1440) displays.
Devices running Google Android seem to be even more varied in screen size and pixel density, including some of the smallest screens around at about 2.5 inches. The recommended practice for supporting multiple screen sizes is to strive for density independence in your applications and focus on physical dimensions instead.
Just like my experience with that old laptop, the key factor for touch-based mobile devices and tablets is not the screen resolution but the screen size. Using a finger as a pointing device is much less accurate than a mouse so the target area needs to be consistently large enough regardless of pixel density.
The way you design your applications will be highly dependent on your target device. If your application is being designed for desktop use only then screen resolution (pixel density) is important because you can use flexible layouts to fit more or less on screen. You can’t assume anything about the number of pixels available to your application because it could be running full screen or in a smaller window.
When it comes to touch-based mobile devices, the most important factor is the physical size of the screen and not the pixel density. While you can make use of higher density displays by providing larger versions of image assets for crisper rendering, the key consideration will be to design different layouts for a few fixed screen sizes (large, medium, small) and then scale the entire application to fit those layouts.
If you’re thinking of creating an application, especially a web application, that is intended to run on all devices, from desktop to mobile, then consider carefully whether this is the right approach. For full-screen applications like games, it may make a lot of sense. For most other applications, you’ll need to tailor the user experience to the target device based on its physical size and input method.
As a general rule, unless you have a specific requirement to the contrary, design for the lowest common denominator of screen size and pixel density (resolution). Not only will this ensure it will work for all users, it will be much more manageable within your design tool.
The following dimensions assume a landscape layout – simply flip them for portrait:
| General Size | Resolution | Recommended For |
|---|---|---|
| Very Small | 320 x 240 | Small Android or other Phone |
| Small A | 480 x 320 | iPhone, iPod Touch, Android Phone, Windows Phone |
| Small B | 640 x 480 | BlackBerry Torch |
| Medium A | 1024 x 600 | 7″ Android Tablet |
| Medium B | 1024 x 768 | iPad, Desktop, Laptop, Windows 8 Device |
| Medium Wide | 1280 x 768 | 10″ Android Tablet, Desktop, Laptop |
| Large | 1920 x 1080 | Intense full-screen Desktop Apps |
Write a comment below if you agree or disagree with any of this!
The smallest individual component of a digital image, a pixel can best be described as a tiny square of color and gets its name from the contraction of “picture element.” Pixels make up television images, digital photographs and all other types of digital displays, from computer screens to cellphones and everything in between. The term “pixel density” often comes into play when determining an image’s digital quality and resolution.
Thanks a lot…
Hey, Thanks for your post, it was really informative. I’ll be looking forward for your next post….