Managing Multiple Screen Sizes


There are a range of screen sizes.
Because manufacturers buy components from suppliers, some pixel dimensions appear with great regularity. This table summarizes the screen characteristics of some commonly-found devices.

Popular Screen Resolutions: Designing for All

Tablet & Smartphone Resolutions and Screen Sizes

The Pixels/Inch value may help you find the right settings in PhotoShop for creating mockups of visual assets. Also keep in mind that these devices represent a fairly broad range of pixel densities and aspect ratios.

The area on the screen needed for any distinct item the user is to touch with their fingertip is about a quarter-inch square. On a low-density screen, it's roughly 40 pixels square, but it obviously increases as the pixel density goes up. It's shown in the column marked “Min Touchpoint” in this chart. What's important to consider is that just because you can draw a lot of small controls in a mockup doesn't mean the design will be usable. Putting controls too close together can easily result in a frustrating user experience. Consider that space is an important part of any good design.

Pixels vs Points

While hardware designers generally measure things in pixels, as you can see from the chart above, doing this can lead to a great deal of confusion.

For example, the iPhone 4 hardware has 4 times as many pixels as the previous generations of iPhones. If we were to measure in pixels, a distance of 10 pixels would be twice as far on an iPhone 3Gs than it is in on an iPhone 4, yet what we want is to draw things at about the same physical size.

Link between Pixels and Points


Points are a unit of measure that comes from the typography space. In traditional print, there are 72 points per inch. Apple subverted this concept a bit and uses points as a unit of measure. So, you can't use that old-fashioned concept here. What you can focus on is that when you measure in points, everything will draw at about the same size on each of the devices your app runs on, and that's what we care about when designing an app. Things need to be big enough for fingers to touch, for layout to be consistent across devices, etc.

Like developers, EachScape Studio also uses Point for coordinates or element sizes.
For example, if you were to just consider the minimum touch point in points (minimum size of a button for example), the answer is always a box 40 points square, much simpler than trying to worry about varying dimension on different devices.


The takeaway

The initial iPhone screen measured 320 points by 480 points, then it moved to 320x586 for iPhone 5, iPhone 6/7 is 375 x 667 while iPhone 6 Plus and 7 Plus are 414 x 736 regardless of whether it's an original iPhone or the latest model. If you work in points, you can stop worry about anything else. Read Working with Images to learn how EachScape deals with varying screen resolutions.