I am helping my team to update our iOS app to support retina display and iPhone 5.

I've read little bit of Cocoa Auto Layout, and other pages from developer.apple.com. But my question is, if I reformat the pages to be optimized on iPhone 5, will the pages look odd on iPhone 4S or below? (shrunk or have a scroll?)

Does anyone have an experience in this regard?

To add to my original question, Here is what I am struggling with. The first screen, I get that it doesn't effect any screen format or any additional wireframe updates needed. enter image description here

However, the other screen, where the screen was formatted to fit perfectly on below iPhone 5 screen. It's not scroll enabled. So in effort to maximize the screen property, let's say, I made the two bottom items to include more info on each container. enter image description here

So then, now I have two versions of the same app that will need to be maintained? Or is the right one only one that we need to maintain? How would this screen be shown on shorter iPhones? What if, I want to redesign the page completely different and the older screen does not match page to page anymore?

It sounds to me, that I have to design a new interface which is optimized for iPhone 5, then do (conceptually) a responsive version for the shorter iPhones.

Can anyone verify? Thanks in advance!

closed as off topic by Charles Wesley, ChrisF, Matt Obee, msanford, Matt Rockwell Apr 29 '13 at 17:55

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Hi Jade. Welcome to the UX Stack Exchange. As written, your question doesn't really have much to do with the user experience. Because you're asking about specific implementation and display details, it would probably be a better fit for graphicdesign.stackexchange.com. I've flagged it for moderator attention, so there's a pretty good chance it'll get migrated there soon. – Graham Herrli Apr 26 '13 at 16:26
  • 1
    It is possible to have your application work properly on both, however the answer to your question is in the implementation. See this StackOverflow question for more information. – Charles Wesley Apr 26 '13 at 21:27

For most apps, your portrait view will be fine as you simply have more space. However, your landscape view may need significant changes.

The reason for this is that the width of a screen is usually a constraining factor on a design more than the height is. Especially on touch devices, the vertical height is in effect much longer than the screen shown, and people are used to scrolling vertically to see more. So when the screen gets longer, you simply can have more of the same content as previously on the same screen.

When the width of the screen changes though, the layout is heavily affected. A design that works well on one width may not work well at all on another. In many cases it will still be fine, but this is the most critical consideration.

  • Thanks, John for the details. The app only supports portrait view, so it's out of the issue. But all the pages in portrait format, there is no scroll enabled- all screens were designed to fit perfectly on 320 x 480 format. I guess that's a more or less the same issue. – Jade Apr 29 '13 at 17:28

A couple easy ways for dealing/ignoring the longer iphone are:

  • Use a scrolling/long page interface (facebook, twitter, etc.) so the longer screen gives you more room. That's it!

  • Depending on the type of application, you can think of locking your app in a particular orientation. OR Have some different interaction depending on the mode. eg: Yahoo weather app works as a long page weather app in portrait mode and in landscape mode it is just a single image with the temperature in the corner. Simple and elegant.

Another thing you might want to consider:

  • Using the extra screen space to implement a tab-navigation on the new phone.

Not the answer you're looking for? Browse other questions tagged or ask your own question.