Design for iPhone 4 or 5

Question

I was looking for every combination I can to try and find an answer for this, since I'm sure I was asked somewhere ... so forgive me if you can just point me in the right direction.

If you are developing a new application for iOS, do you first customize your layout in IB for iPhone 5 or 4? I found many articles on using autorun to move iPhone 4 applications to iPhone 5, but not vice versa .... which makes me think about the desired workflow for applications that will not have a separate interface completely for 2 - create your own interface in IB with screen size of 3.5 inches, and then use the autorun to adapt to the screen of the iPhone 5 4.

Can someone clarify to me the best practice?

Answer 1

Kendall Geln gives very good points. Especially, it is better to build from a smaller screen and resize - mainly because shrink elements can provide a bad and cramped experience for the user. In this note, you should make sure that your graphics (images and videos) have the right size for both screen sizes. When creating graphics, it is best to first create them on a large scale, and then reduce the size if necessary.

Another design consideration would be to create slightly different interfaces for 4-inch and 3.5-inch screens. The 4-inch screen is taller and provides developers with more space and therefore more features. This is almost the same principle as the development of the iPad and iPhone interfaces.

You also mention this in Interface Builder. By default (now in Xcode 4.6+), any new iPhone-based projects will launch your interface in a 4-inch / iPhone 5 layout. You can switch between layouts at any time by pressing the screen size switch button (looks like a rectangle with arrows at both ends) in the lower right corner of the Interface Builder / Editor screen:

If you need completely different interfaces for different screen sizes, you can load your storyboards conditionally into AppDelegate. Here's how you can do it:

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 general, I do not think that there is a correct workflow (for example, from 3.5 to 4 or vice versa), however, you should remember these points:

• Scaling large interfaces can make their work more difficult and cause a bad user interface.
• The same cannot be said for graphics ... if you design graphics with low resolution or small size and scale, they will not look very good (the same principle applies when designing Retina and Non-Retina devices).
• Consider the different screen sizes and what you can do for everyone. Remember that you can create separate storyboards.

EDIT: Starting in early 2013, Apple will not allow apps on the AppStore that don’t support iPhone 5. You must support the screen size of iPhone 5 in order to receive your application or any updates to the repository.

Answer 2

As a general rule, it’s better to target any minimum size of your user interface and adjust the behavior of automatic resizing accordingly - otherwise shrinkage of the elements can lead to an interface that is too cramped.

Also note on iPhone 5 that in viewDidLoad , the user interface elements from nib have not yet been changed or reinstalled (at least with an older linking mechanism).