Mobile Backend as a Service (MBaaS) Blog

iPhone 5: Bigger Screen, Bigger Problems for App Developers?

Today, Apple announced its release of the new iPhone 5 and iOS 6, a highly anticipated announcement naturally preceded by hundreds of rumors and predictions and followed by a plethora of reactionary posts. We wrote about iOS 6 ourselves post-WWDC, and now the day that Apple enthusiasts have been waiting for has finally come.

So, what can early adopters expect of this new technology? There’s a slew of new features for iOS 6 – updated maps with spoken turn-by-turn navigation, Facebook integration, Passbook, and shared photo streams, to name a few – and the iPhone 5 is, in a nutshell, a slightly bigger, faster, better version of its predecessors. All good – though somewhat unsurprising and anticlimactic – updates for the end-user, but how do these changes affect app developers?

via Tech Crunch

The iPhone 5 screen is about 4 inches larger diagonally, perhaps to compete with Android screens with sizes as big as 4.8”, but also to account for the extra row of apps on the home screen. What this means is that the old pixel resolution of 960 x 640 will expand to 1136 x 640, changing the aspect ratio from 3:2 to 16:9. The change in height but not width was to assure that one can “still comfortably hold it in one hand.” While this size is ideal for viewing movies (many films are shot in this ratio), it’s not good news for existing apps built for the original aspect ratio. Not only is the new screen a different size, but it’s a slightly different shape. Apple has retained the retina display of 326ppi, and added 44% more color saturation than the 4S.

Unfortunately, the increase in screen size of the new iPhone could cause some difficulties for developers. What will likely happen is that existing apps will load with black bars on the sides, or in a “letterbox,” at their native resolutions. Developers will have to recode their apps according to this new aspect ratio, and their users will have to wait for updates in order to see these changes implemented.

Android’s developer guide offers information on how to design apps for different screen sizes of their multiple devices – a best practice that iPhone developers now should follow, seeing as the iOS user population will use apps on both older iPhone models and new. A great bit of advice from this guide: “Optimize your application’s UI by designing alternative layouts for the different size buckets, and provide alternative bitmap images for different density buckets.”

Developer Reactions

How do developers feel about this change? We’ve collected a few reactions from blog comments and Twitter on the iPhone 5 screen resolution change.

One commenter on a TechCrunch article regarding the iPhone 5 display agrees with the Android sentiment discussed above:

This commenter would rather see the letterbox than stretched, distorted images:

If you are converting your existing app to fit the iPhone 5 sizes, here are some preliminary actions to take:

Apple has updated its first-party apps in order to give devs a roadmap for designing and developing for the new phone – it will be useful to test out these apps and get a feel for how they work on the new screen before altering or building yours.

Check out this useful density converter tool from Teehan & Lax that 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.

Mobile devs – what is your reaction to this change? How do you think you’ll change your existing apps – if at all – for the new iPhone 5? Do you know of any tools that help ease the process of converting your apps to fit new aspect ratios? Let us know in the comments!