Preparing for the new iPhone 6 and iPhone 6 Plus screen sizes

For iOS app developers and designers, one of the most significant changes is to the screen sizes of the new iPhones, which differ significantly from what came before.

The first iPhones, up to the 3GS, had a 320×480 screen. When the iPhone 4 was launched, it came with a Retina display, doubling the number of physical pixels in the horizontal and vertical directions, while keeping the screen and UI elements the same size. Developers rushed to add @2x assets to their apps for the320×480@2x screen.

The iPhone 5 was the first iPhone which changed the aspect ratio, and increased the usable screen area to 320×568@2x. Since only the height changed, it was relatively easy for developers to add additional height to certain elements, and fit the new screen.

Now we have two new screen sizes to contend with. The iPhone 6 is an effective 375×667@2x, both wider and taller than the iPhone 5 family.

The iPhone 6 Plus's screen is a weird beast. Assets will need to be provided @3x for a 414×736@3x screen, meaning for example a full screen image would be 1242× 2208. However the physical iPhone 6 Plus's display panel is only 1080× 1920, therefore software downsampling will be used to scale down the assets to the physical display panel.

Note the aspect ratio of the two new screen sizes is identical to the iPhone 5/5C/5S. iOS8 will take advantage of this, running apps which have not yet been updated to be optimized for iPhone 6 in a special scaled mode, avoiding the black "letterbox" we saw with the iPhone 4 to 5 transition.

Here's a handy reference to summarize the new screen sizes side-by-side:

What does this mean for developers and designers:

• 1. If you don't update your apps immediately, you can benefit from the auto-scaling to get a reasonable temporary solution for the two new devices
• 2. When you update your app to properly support the new resolution, you'll need to deal with more available width and height
• 3. Designs will need to be more flexible, using features like the new Adaptive Layout introduced by Apple. Instead of being at fixed pixel positions and sizes, buttons and UI elements will have to stretch and scale to fit various screen sizes - not unlike designing an Android app!
• 4. Icons and UI elements will need to be provided in @1x, @2x and @3xversions
• 5. It's unclear how some elements will render on the iPhone 6 Plus, for example 1px hairline lines may become antialiased due to the software downsampling.
• 6. Additionally, Apple showed off the iPhone 6 Plus running in landscape mode, which used a two-pane UI similar to the iPad. The iPhone 6 Plus even has a landscape version of the home screen, so we can expect more pressure to get your apps working in landscape mode.