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

It’s been almost 2 years 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 know the theoretical answer is “all of them”, but assuming I need to select only 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 to fit the more important models or maybe it’s time to change this design practice and start big? 

3. In the 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 phones 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 define the iPhone 6/7/8 as the smallest supported models? 

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 was (and still 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 assume (take even the biggest phone, increase the zoom level and the font size, and you’ll end up with an extra cluttered UI and lots of layout issues)
3. In a world of “white spaces”, scaling up while adding white spaces comes almost for free, and creates a great looking design

In mobile UI design, scaling down is much harder than scaling up

This approach works well when the size differences between models are relatively minor.
However, scaling up from very small models (such as iPhone 5S/SE) to phablets (such as iPhone XS Max) might involve unplanned 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 4 inch to 4.7 inch (+18%), might not work when scaling up from 4.7 inch to 6.5 inch (+40%). 

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 inches) and iPhone 5/5S/SE (4 inches).

The challenge: 

iPhones models are changing in 2 areas:

1. The size is changing dramatically (form being ridiculously small to being pretty giant) 
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 supporting 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 our own 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. I think it's safe to say that iPhone 4 and his friends are all (finally) dead.





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 phones their parents gave them, nor people who use the cheapest models, but nevertheless, I believe many companies can learn from our numbers.

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.

Takeaways:

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. Having less than 1% of our customers using these ancient devices is a good reason to stop supporting them.  
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 (app store and ads) 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” should be much bigger now. 
2. The smallest device and the baseline to begin our work with is iPhone 6/7/8. 
4. What timeline are we talking about? 
1. Seems like this decision should be valid for the next 6 months. My assumption is that the X models will generate more traction in the upcming months with the introduction of reduces prices.

Happy to hear your opinion about my conclusions and takeaways.