What Size Should Your iPhone App Be Optimized For? [Design]

It’s been over a year since Apple introduced the all mighty nothing-but-screen (and notch…) iPhone X.
One year later, with 3 new X-style iPhones, and given that most companies design and showcase their apps on iPhone first - I’m asking myself a few questions:

1. Which iPhone model (and size) should we optimize our UI  for? 

I knot the theoretical answer is “all of them”. But assuming I need to select one - which one should it be?  

2. Should we start small and scale-up or maybe the other way around? 

Assuming the answer to Q1 is iPhone X/XS - should the design process start small and scale up or maybe it’s time to change this practice and start big? 

3. In a case of a conflict - who wins? The big guys or the small ones? 

When a UI design cannot scale up/down naturally, who gets the priority: the big iPhones or the smaller ones?   

4. Now that iPhones are all giants, what’s the smallest model we still need to support?

Is it still the ridiculously tiny iPhone 5S/SE (320x568)? Or maybe it’s time to move on and have the iPhone 6 as the minimum size? 

In this post I will try to answer these questions.
(BTW, if you are still uncertain about the resolution each iPhone model has - check out this guide for iPhone resolutions on Google Analytics).

The common practice: 

For many years, the common design practice is to start with the smallest device and scale up.
There are a few logical reasons for this:
  1. The smallest device presents the biggest challenges (screen real-estate, layout, microcopy)
  2. There’s always a screen out there which is smaller than we think (take even the biggest phone, increase the zoom level and the font size significantly and you’ll end up with an extra cluttered UI and layout issues)
  3. In a world of “white spaces”, scaling up while adding white spaces comes almost for free. 

This approach works well for small/medium size differences. However, scaling up from very small phones (such as iPhone 5S/SE) to phablets (such as iPhone XS Max) might involve design decisions, reorganization of content and layout reshuffles, similarly to what responsive UI in web design used to be 9-10 years ago.

What used to work well when scaling up from iPhone SE to iPhone 8, might not work when scaling up from iPhone SE to iPhone XS Max. 

Apple’s backward compatibility: 

Another reason to begin small is the fact that Apple itself, still continues to support the tiny iPhones:
  1. iOS 12 is still compatible with iPhone 5S and SE
  2. The Media Manager in AppStore Connect still holds dedicated media files for iPhone 4S (3.5 inch) and iPhone 5/5S/SE (4 inch).

The challenge: 

iPhones models are changing in 2 areas:
  1. The size is changing dramatically (form being ridiculously small to being pretty big) 
  2. The design is changing a lot (the new X-style models have much longer proportions and includes “unsafe” areas that require special attention)
These transitions call for design and development actions, and while Apple is (still) committed to support smaller historical models, I’m not sure developers should do the same…

iPhone X UI design pitfalls

To make a data driven decision - I decided to check our Google Analytics stats and see what our customers data shows.
Keep in mind that the below numbers represent Missbeez users only. Different apps with different target audience might experience different numbers.

Checking Missbeez data:

I checked our device resolution stats filtered by geography (UK only) and time (2018 only).
The result: iPhone 4/4S and 5/5S/SE were responsible for 0.25% of the activity, which is less than 1% of our active users.

Once again, this is only relevant to our own product: Missbeez, which is a marketplace for lifestyle services on-demand. Our users are NOT kids using old iPhones their parents gave them, nor people who use the cheapest models, but nevertheless, I believe many companies can learn from our experience.

Next, I wanted to check how iPhone X (or the later models) were doing.
After all, we all know app developers were reluctant to adopt the new UI guidelines until Apple gave them a deadline.
I wanted to check how many of our active customers were using the iPhone X.
I filtered our data to show active users during the second half of October 2018.
The result: a year after the X debut, 16.3% of our active users are using iPhone X or XS.

Just as a comparison, that’s 16.3% vs. 50% using the iPhone 6/6S/7/8 and additional 25% using the different “plus” models.


So to answer my original questions (and this might completely change in 6 months):
  1. Do we still need to support iPhone 4/4S or iPhone 5S/SE? 
    1. No. 
    2. Less than 1% of all customers doesn’t justify the overhead of supporting small devices that might require extra design and development attention. 
  2. What iPhone should we optimize our user interface for? 
    1. I was hoping to say: iPhone X but I don’t think that the adoption rate is fast enough.
    2. So instead, I’m suggesting the following: 
    3. Design using iPhone 6/7/8 (50% of our customers).
    4. Modify (upon need), demonstrate and promote using iPhone X/XS
  3. Should we start small and scale-up or maybe do it the other way around? 
    1. We should continue with the “start small” approach but the initial “small” is much bigger now. 
    2. The smallest device and the baseline to begin our work with is iPhone 6/7/8. 

Happy to hear your opinion about my conclusions and takeaways.


Anonymous said…
Thank you for sharing
I like this article.I was searching over search engines and found your blog and its really helps thank you so much Happy New Year 2019 Wish