About two years ago there have been some lively discussions on resolution independent user interfaces in the context of icon design. An interesting start page for past discussions is Sven Porst’s blog article. At that time, resolution-independent UI-related products such as Mac OS X Leopard, Windows Vista or Silverlight were either yet to come or have been used solely by a small bunch of insiders. Now, almost two years later, these are established brands – reason enough to shed some light on this topic again and to see if something has changed during this time, and if so what.
After finishing my initial draft, I thought it would make sense to split this article into a series of four parts. The first part will acquaint you with resolution independence in the context of icon design while the second part outlines the two possible ways of achieving such resolution independence. The third part shows how Centigrade deals with current technical constraints during our everyday work. Finally, I will make an out-of-the-box suggestion on how a better tool support could ease the creation of resolution-independent icons.
Resolution vs. Pixel Density
First of all, let’s start with a quick introduction to resolution independence in general. Most commonly, a monitor’s resolution is understood as the number of pixels it can display in horizontal and vertical direction. I heard people that can hardly remember their own phone number say: “I want a 1920 by 1080 resolution display so that I can watch my HD movies”. Though the count of pixels in each dimension is indeed important (to watch those movies) it does not tell the buyer anything about how large one pixel is and in turn how large the display’s physical size is.
The iPhone, for example, has a resolution of 480 x 320 pixels – that’s pretty many pixels, and one could expect a huge device just by hearing these numbers. Sure enough, if the pixels were as large as those of a standard desktop monitor, the iPhone’s display would have been about 8 x 12 cm in size. Needless to say, that this would have been a pretty clumsy device with small market acceptance. In fact however, the display is just 5 x 7,5 cm in size (which corresponds to a display diagonal of 3.5 inches). The display’s small dimensions can be explained by the iPhone’s pixels being so tiny that 160 of those fit into one inch, which is why we talk of a pixel density of 160 ppi (pixels per inch), in contrast to standard desktop monitors which currently just have a pixel density of 100 ppi.
So what’s the reason for making pixels smaller and this way increasing the pixel density? Why not just offer less of them in order to build smaller displays? The answer is of course a simple one: An increased pixel density results in improved display sharpness. If you ever had the chance to read a crystal clear text on an iPhone display, you will get the point.
The terms pixel density and display resolution are oftentimes confused. However, in the following when I speak of display resolution I think of pixel count. In contrast, when I speak of pixel density I refer to pixels per inch. Similarly, I will not use the term dpi (dots per inch) as this is more fitting for ink-based printing devices rather than for pixel-based screen devices for which ppi is more appropriate.
Shrinking Icons
Now, how does this all relate to icon design? As stated, the smaller the pixels are at a constant pixel count, the less physical space is occupied by them. A 16×16 pixel icon on a standard 100 ppi monitor is about 0,40 cm² of size. On a 160 ppi iPhone display, the same icon would be just 0,25 cm² large. Though displays of 300 ppi aren’t as common as expected by technology geeks, the trend goes towards such high ppi devices. An illustrative table on the development of ppi values in the last 20 years supports this statement. In fact 300 ppi displays do exist (see this press release about a high ppi device from Samsung). The high pixel density of such devices would shrink our 16×16 pixel icon to a physical size of only 0,14 cm² – each pixel of our icon would be as tiny as a human hair is thin. Of course, such an icon would be too small to be easily recognizable.
Obviously a higher pixel density must be compensated through the use of larger icons (e.g. 32×32 pixels instead of 16×16 pixels). And this is where the discussion about resolution-independent icon design starts: How can we effectively create and deliver icons that work on different screen devices from low to high pixel densities? (At the risk of splitting hairs, the discussion should in fact be about “ppi-independent icon design”).
In the next part, I am going to look at resolution independent icon design from a more technical perspective, briefly discussing what tools exist and what are their limitations are.
