Updated iOS Device Summary

Here’s an updated version of the iOS Device Summary that includes the newly announced iPad mini and 4th Generation iPad.  Read more about the summary in the original article. Downloadable PDFs are at the bottom of the post. •

Summary of iOS Devices Chart - Processor, Screen Resolution, iOS5+ Support

PDF Downloads:

iOS Device Summary

One challenge as a small independent iOS developer is keeping up with evolving hardware. Some testing can be done in the iOS Simulator, but to see how an app truly behaves, it is important to develop and test on actual devices.

I created this summary chart as a way to visualize a few key iOS device properties.  This has helped me decide which mix of devices I use to get reasonable coverage for development and testing. I’ve found it useful and hope others will also.

Summary of iOS Devices Chart - Processor, Screen Resolution, iOS5+ Support

The key device properties represented are processor, screen resolution and supported iOS versions.

Chart closeup showing using an indicator for a device being used for testing.

I have two workhorse iPod touch devices.  One runs iOS 5, the other iOS 6.

On my copy of the chart, I use a star to indicate that I have a particular device running a particular iOS version.  This makes it easy to see at a glance what coverage I have across all three properties.

The devices are organized primarily by processor.  Each processor represents a system on chip containing both CPU and GPU, making it a reasonable indicator of system performance.  I tend to develop on devices with slower processors, to ensure code performs well across all devices.

The rectangle for each device is a scaled version of its screen resolution, preserving aspect ratio and relative size to other devices.  Note that this represents the number of pixels, not the physical screen size.  This is why the rectangle for an iPhone 4 with a retina display (960 x 640) is just a little smaller than rectangle for the iPad (1024 x 768).

Supported iOS versions are indicated by color inside the rectangle for each device.  This summary only includes iOS 5 and later.  Since system changes that impact your app can happen between releases, it is important to test on all the OS versions you support.  Additionally, because reverting a device to a previous iOS version is not officially supported, it is also important to track which of your devices are running which iOS version.  You want to avoid, for example, accidentally upgrading your only iOS 5 device.

This summary is designed with general iOS development in mind.  Apps that depend on particular hardware features obviously have different criteria for choosing devices for development and testing.  Feel free to download a copy of the summary below.  I hope you find it useful and welcome your feedback. •

Update: I’ve gotten a number of requests for a printer-ready version of the chart with a white background. I’ve added versions for color and black & white printers below.

Update 2: Updated links below.  You can download the most recent version of the summary, or the version that originally appeared with this post.

Latest PDF Downloads:

Original PDF Downloads (Oct 8, 2012):

 

Getting an app ready for iPhone 5

I was traveling the week between the iPhone 5 announcement and release. I returned from my trip champing at the bit to update my app WALT to use the entire 4-inch display, instead of being stuck in the letterbox ghetto. Updating turned out to be simple and straightforward.  Here’s how it went.

Out of the letterbox

The first step was getting out of the letterbox.  To do this, I upgraded the project to use the iOS 6 SDK and added a new 640 × 1136 launch image for the new screen size. Like all launch images, it needed to have a particular name: Default-568h@2x.png. There’s a lot of information encoded in that file name—the default launch image name, the screen height, the high-resolution size and the image format.

Enabling a feature by adding a specially-named image is a clever and compact approach, but it is not very obvious or discoverable on its own.  Xcode 4.5 helps by displaying a project warning and offering to create the new launch image for you.  (Although I see the warning now in a test project, I don’t remember seeing it when I updated WALT.)

Xcode 4.5 adds a few other features to support development for Retina 4 displays. The iOS Simulator has a new hardware device setting so you can test your app with the new size, even if you haven’t been able to get your hands on an iPhone 5.

When viewing storyboards, Interface Builder makes it very easy to toggle between Retina 3.5 and Retina 4 sizes using a newly-added resize button.

Resize button in Interface Builder

New resize button toggles storyboards between 3.5 and 4-inch views

If you are not using storyboards, Interface Builder still has you covered.  You can change the screen size for a top-level view in the Simulated Metrics section of the attributes inspector. This setting is also available with storyboards, but I have found the single toggle to be much more convenient to use.

Screenshot of simulated metrics options in Interface Builder

Choose which size to work with in a xib

Mostly done already

Since WALT uses standard tab, navigation and table views, there was nothing additional required to effectively use the additional screen space. Each table view became taller and now displays more content. I could have released the app as-is, but wanted to do a few tweaks.

On a Retina 3.5 screen, the film detail view in my app adjusts row heights in certain cases to improve the layout.  I needed to make different adjustments for Retina 4 screens, so I needed to tell the two screen sizes apart.  The new screen size is not a different user interface idiom—just a taller iPhone. For screen size, the highest level API available is to use UIScreen to get the height of the main screen:

 CGFloat mainScreenHeight = [UIScreen mainScreen].bounds.size.height;

I‘ve already seen a number of online examples that use the screen size to add convenience category methods to UIScreen or UIDevice.  In my case, I checked the screen size inline in the one place where it was needed.

Screenshot of the film detail of 'Partysaurus Rex' in the app WALT.

What Up, Fishes?!
The newly added ‘Partysaurus Rex’ looks nice and comfy, all stretched out on a beautiful iPhone 5 in the new version of WALT.

Although my experience was quick and painless, the amount of work needed to adapt an app for 4-inch screens varies greatly depending on its contents.  The iOS Human Interface Guidelines document suggests different approaches for various situations. It also makes a very important point that applies to all apps.  An app should remain the same app, with the same features and interaction, regardless of which screen size it is being displayed on.  But, when displayed on a 4-inch screen, it should reveal more of its content.

In summary, getting your app to stretch out to the full iPhone 5 screen is as easy as updating to the latest SDK and adding a new launch image.  Getting your app to look great, however, will depend on how customized your views are.

For me, I found that getting the app ready for iPhone 5 took less time than preparing the new set of taller screenshots required for the App Store. •

WALT 1.0.1 is available now in the App Store with iPhone 5 and iOS 6 support.