As you can’t fail to have heard, Apple’s latest contribution to the smartphone market, the iPhone 5 sports, among other upgrades, a longer screen than its predecessors. While this is a lovely addition for users, it brings with it some extra challenges for designers and developers. If you’re building native iOS apps, here’s one tip for making them as pretty as possible on both the new iPhone and the old ones.
This week I have mainly been making some design updates to our super new Christmas present app ready for its App Store launch on the 28th November. While this has been a delight of a project, the iPhone 5 has thrown in some last minute panics both at submission and now before I add these updates. Having spent the last hour or two furiously googling and trial-and-error fixing, I thought I’d share my findings here for any other devs and designers who, like me, were initially excited about the shiny new hardware but are now exasperated by the new screen dimensions!
When Apple brought out the iPhone 4 with its lovely retina display (4x the res of the iPhone 3S), they built the capability to handle which images to use according to device resolution. To build for both screens, dev’s simply have to include two versions of each image, one for 320×460 screen and one for 640×920. The former can be called whatever you like, backgroundimage.png for example, the latter must have the same name as the former with “@2x”appended, eg. firstname.lastname@example.org. So far, so lovely. Thank you Apple.
As a leftover from the 320×460 days, when coding sizes and locations in relation to a full-screen, we still use coordinates up to 320 on the x-axis and 460 on the y-axis. The “@2x” image-handling prevents complications in code by using the appropriate versions for the device.
Since Apple’s released the iPhone 5, no such support exists for longer in-app images. If you include a loading image with dimensions 640×1136 called Defaultemail@example.com this will be automatically selected as your iPhone 5 loading image, but no such naming convention luck with any other images in your build.
The alternative of course is to code image selection for yourself, i.e. if iPhone 5 then use image-x otherwise use image-y.
WARNING: NERDY BIT…
One warning fellow devs, the “@2x” still applies if you’re using it on your iPhone 5 images, in spite of the fact there’s no low-res 4″ screen. If you follow the loading image naming convention and add “-568h@2x” to the end of your image names (as I have), when you come to code your image selection don’t add the “@2x” to your appending string. Because you’re referring to a full-screen as being 320×568 in your code if you prevent the iOS from recognising the “@2x” flag and therefore appreciating your image is a retina display version, then your image will be stretched as below:
In conclusion fellow developers, in your code refer to your 3.5″ screen images as imagename.png, your 4″ screen images as imagename-568h.png and include images called imagename.png, firstname.lastname@example.org and email@example.com and you’re golden!