With Apple leading the movement, phones, tablets, laptops, and desktop displays are rapidly increasing in resolution.
This is wonderful for everyday mobile users, as the quality of their device screens become sharper and allow them to better experience the finer details of an application. But this creates an interesting challenge — designing for multiple mobile densities.
Understanding densities
The sharpness of your phone or tablet’s display is referred to as density. iOS devices measure density in PPI (pixels per inch) and Android in DPI (dots per inch). The more pixels or dots you fit in one square inch on a screen, the higher the density and resolution of it.
As mobile hardware evolves, so does the quality of screens. The original iPhones and iPads had a screen density that was classified as non-retina. The current generation of iOS devices sport higher density displays referred to as retina. Android devices have evolved from low density, ldpi, all the way to extra high density, xhdpi. The graphic below illustrates the groups of densities, devices that make use of each of them, and how they relate to one another in size.
As illustrated above, there are five widely used densities across iOS and Android devices, which fall into four progressively larger groups:
– non-retina (iOS) and mdpi (Android)
– hdpi (Android)
– retina (iOS)
– xhdpi (Android)
The lower densities will grow old over the next few years, eventually removing themselves from mobile design and build requirements.
Converting from one density to another
Collectively on track for 1 billion activated devices, iOS and Android are the two major players in the mobile app space. And chances are you’ll be designing for both platforms with most mobile projects nowadays.
Scaling the UI elements of your design and understanding how an asset at one density would scale to another can be confusing at times.
We created this conversion graphic to show how you would scale between each of the four density groups.
Let’s make this easier
That graphic is handy, but still requires constant switching between it and a calculator (F4, F4, F4). To save a few keystrokes and grey hairs, we built a tool for this.
The Teehan+Lax Density Converter allows you to input the width and height for any density, and instantly see the dimensions you would have to scale the graphic to for each of the other densities. You can even toggle between decimal and rounded numbers.
This is a tool I wish we had throughout the design and build of Readability for iOS and Readability for Android, and something I hope will shave a good chunk of time off of the tedious process of converting hundreds or thousands of graphics from one density to another.
You can follow Travis, Brendan (co-builder of density tool), and Teehan+Lax on Twitter.