by Tim Van Damme

Follow me on Twitter

iOS Sketchpad

I was wondering what the delta was between the screen sizes of the different iPhones you need to support as an iOS designer. Did some math and realized that, even though not perfect because of rounding errors, going from an iPhone 5 to a 6, you gain about 1 (44×44 point) column and 2 rows. Same happens going from an iPhone 6 to a 6 Plus.

Sketching on squared paper, I was curious to know how many rows and columns of tappable targets you could fit on the different iPhones. Some more math and I came up with these numbers, which I turned into a handy grid.

Here’s how I got to these numbers:

iPhone 4 iPhone 5 iPhone 6 iPhone 6 Plus
Width (points) 320 320 375 414
Width/44 7.2 7.2 8.5 9.4
Width rounded 7 7 8 9
Height (points) 480 568 667 736
Height/44 10.9 12.9 15.2 16.7
Height rounded 11 13 15 17

If you follow this grid, you get a good idea how much content you can fit on any iPhone screen. Again, it’s not perfect (rounding, status bar not included), but hopefully it’ll help you save some time sketching your next app.