Pixel perfect design and development on the iPhone 6 and 6 Plus

Apple have introduced support for 3x images on the iPhone 6 Plus, find out what this means for you…


On September 9th Apple announced the bigger iPhone 6, and ‘bigger than bigger’ iPhone 6 Plus. Suddenly, the company who were so focussed on giving designers and developers a small number screen sizes to work on, are now fragmenting their line up. Or are they?

iPhone 6

The iPhone 6, like the iPhone 5s, 5, 4s, and 4, has a pixel density of 326 pixels per inch. They all use the 2× assets to stick to the 163 points per inch viewable size. The iPhone 6, with it’s 1334 × 750 display, renders at 2x to 667 × 375.

In basic terms, nothing has changed. The iPhone 6 will behave in the same way as previous Apple devices, you’ll just have more room to work with. A button will render the same physical size on the iPhone 6 as it does on an iPhone 5 or 4.

iPhone 6 Plus

The iPhone 6 on a software level actually renders at 2208 × 1242, and not the 1920 × 1080 resolution advertised by Apple. But why?

Well, due to the higher PPI of the iPhone 6 Plus (401 vs 326 of the iPhone 6) everything will appear 20.6% smaller if scaled to 2× like it’s smaller sibling. This won’t do, and will cause a load of existing apps to have smaller fonts and CTA’s. For 1080p to work at 401PPI the device would need to use assets at a 2.46x size, a nightmare for all involved.

So instead, apple have introduced 3× images. But they couldn’t just whack 3× onto the 1080p screen, because then the actuall rendering size would be smaller than the iPhone 6. A bigger device, with a smaller viewport (1080 / 3 = 360, where the iPhone 6 is 750 / 2 = 375). Nope.

So how do you solve such a dilemma? Well you tell the software to think the screen is running at a higher resolution that it actually is. Which is why the iPhone 6 Plus runs at a virtual 2208 × 1242, which is then down sampled to 1920 × 1080 by the device.

A virtual resolution of 2208 × 1242 with 3× scaling results in a rendered size of 736 × 414.

Summary

The iPhone 6 renders at the same scale as the iPhone 5 and iPhone 4, there a button on any of those devices will be exactly the same physical size.

The iPhone 6 Plus is very close, buttons and text will be a tiny bit bigger (roughly 6%, due to the scale difference).

So when designing, these are the dimensions you need:

iPhone 5(s) Portrait
Resolution: 640 × 1136
Scale: 2x
Scaled Resolution: 320 × 568

iPhone 5(s) Landscape
Resolution: 1136 × 640
Scale: 2x
Scaled Resolution: 568 × 320

iPhone 6 Portrait
Resolution: 750 × 1334
Scale: 2x
Scaled Resolution: 375 × 667

iPhone 6 Landscape
Resolution: 1334 × 750
Scale: 2x
Scaled Resolution: 667 × 375

iPhone 6 Plus Portrait
Resolution*: 1242 × 2208
Scale: 3x
Scaled Resolution*: 414 × 736
Displayed Scaled Resolution: 363 × 645
(after down sampling)

iPhone 6 Plus Landscape
Resolution*: 2208 × 1242
Scale: 3x
Scaled Resolution: 736 × 414
Displayed Scaled Resolution: 645 × 363
(after down sampling)

*This is then down sampled to fit the 1920 × 1080 screen.

Stop worrying though. The whole point of responsive design is to adapt to the device dimensions. Do responsive properly and you won’t need to care about any of the above, apart from maybe creating 3x assets.
Show your support

Clapping shows how much you appreciated Ian Brennan’s story.