Develop for iPhone 4 or 5 First [closed]

Question

I've searched every combination I can to try and find an answer for this, as I'm sure it's been asked somewhere....so forgive me if you can just point me in the right direction.

If you're developing a new iOS app, do you setup your layout in IB for the iPhone 5 or 4 screen size first? I've found plenty of articles on using autolayout to move your iPhone 4 apps to the iPhone 5, but not vice versa....which makes me think the desired workflow for apps that aren't going to have a separate interface completely for the 2 is to create your interface in IB with the 3.5" screen size and then use autolayout to adapt to the iPhone 5's 4" screen.

Can somebody clarify best practice for me?

Answer 1

Kendall Geln makes some very good points. Especially that it is better to build from a smaller screen up and resize - mainly because shrinking elements could provide a bad and cramped experience for the user. On that note you need to make sure that your graphics (images and videos) are properly sized for both screen sizes. When creating your graphics, it may be best to create them at a large scale first and then size them down as needed.

Another design consideration would be creating slightly different interfaces for the 4-inch and 3.5-inch screens. The 4-inch screen is taller and provides developers with more space, and therefore more possibilities. This is almost the same principal as designing iPad and iPhone interfaces.

You also mention doing this in Interface Builder. By default (now in Xcode 4.6+) any new iPhone-based projects will start your interface at the 4-inch / iPhone 5 layout. You can toggle between layouts at any time by clicking the screen-size toggle button (looks like a rectangle with arrows on either end) in the lower right corner of the Interface Builder / Editor Screen:

If you need completely different interfaces for the different screen size, than you could load your Storyboards conditionally in your AppDelegate. Here's how you might go about doing that:

if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
    // Check if the user is on a newer iPhone / iPod with a 4-inch screen
    if ([[UIScreen mainScreen] bounds].size.height == 568) {
        // The user is on a newer device with a 4-inch screen - load your custom iPhone 5 storyboard
        UIStoryBoard *storyBoard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone5" bundle:nil];
        UIViewController *initViewController = [storyBoard instantiateInitialViewController];
        [self.window setRootViewController:initViewController];
    } else {
        // The user is on an older device with a 3.5-inch screen - load the regular storyboard
        UIStoryBoard *storyBoard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone" bundle:nil];
        UIViewController *initViewController = [storyBoard instantiateInitialViewController];
        [self.window setRootViewController:initViewController];
    }
}

In summary, I don't think there is a correct workflow (ex. from 3.5 to 4, or vice versa), however you should keep these points in mind:

• Scaling down large interfaces can make them cramped and cause a bad user experience
• The same cannot be said for graphics... if you design graphics at a low resolution or small size and scale up they won't look very good (same principle applied when designing for Retina and Non-Retina devices).
• Consider the different screen sizes and what can be done on each. Remember that it is possible to create separate storyboards.

EDIT: Starting at the beginning of 2013 Apple will not allow apps onto the AppStore that do not support iPhone 5. You must support the iPhone 5 screen size to get your app or any updates onto the store.