15

This question drives me crazy, as well as my dev colleagues.

For which iPhone screen resolution I should begin designing so during development it easier adapts on other devices?

Usually, I start designing for iPhone 6, but afterwards, during development we often encounter some visual issues on iPhone 5 (and 4 as well) and have to manually fix it which can be a tough process.

How do you handle these things? Do you design separate designs for each device? How do you adapt the app to different devices during development?

  • When will the app be complete? For every 2 years, +1 to the model number from the answers below. – Evorlor Apr 3 '16 at 13:43
22

The iPhone 5/5s/se size. There are three key reasons:

  1. More people today still own the smaller 4-inch model than the larger models. That's also not likely to change thanks to the lifespan of the iPhone and the recent release of the iPhone se. So unless you are targeting only people with larger phones, best to stick with smaller and scale up, not the opposite.
  2. Scaling up is easier and more efficient than scaling down. This is true in every way. Asset creation is easier. Resource management is easier. Testing is easier. I've worked on a half dozen apps and except for the last one have focused on ensuring it works perfectly on the 4/4S sizes perfectly because yes people still own a lot of them, and development on the 4S is akin to the iPad 2. Furthermore, in principal scaling up is always a better proposition than scaling down. Plus the scaling between the iPhone 5 to iPhone 6 Plus sizes is direct (2X to 3X), but it's a bit more questionable to the 6 size. Not a direct concern when starting with the 5.
  3. It's more popular in the developing world. If you're only targeting 1st world countries, fine. Most of us aren't, and globally available apps are critical to our business. So if the lower price of the iPhone 5/5s/se means more people outside of the US are now likely to buy and use them, that is a more important target.
  • Also, depending on what the app is, using SVG and fluid layouts based on minimum device sizes can go a long way to minimizing asset development time. – phyrfox Apr 1 '16 at 20:49
  • iOS doesn't support svg unfortunately. For web, absolutely. – Jamezrp Apr 6 '16 at 20:49
9

In general, it's much easier to scale a design up from a smaller screen size to a larger screen size.

So I always start with whichever is going to be the smallest device. When you're scaling up, you can always add whitespace and have a balanced design, but you have no such option when scaling down.

0

As a developer and not a designer, I like to have my design on iPhone6 size.

About the views,they should be scalable in some way. You have to make sure it's either scrollable up&down, so smaller devices can see all the content, or if it's not the case, you should have some kind of scalable view inside that will shrink if needed. Most of the time, my views are scrollable and content doesn't change size. If they contain a scrollable view, then the view itself does not scroll, but I shrink/expand the scrollable view. For example, if I have a list in the middle, on the iphone 6 it will display 4 or 5 cells, while on a 4S only one and a half. Btw, always show the next half to show the user he can scroll. Anyway, the the iphone5 resolution problem is not really a problem.

Concerning the assets, if they are made of vectors then they scale to any size, otherwise I like them in @3x and reduce them myself using the sketch export function. That way, I can have all my assets on the highest resolution and reduce if needed.

And I think that's all there is to it, but again, that's from a developers point of view.

0

Design for your users

What device do the majority of your users access the app with? That's probably the one that will have the biggest impact on your success. So that's what you design for.

If it's a close call, you design for multiple. Maybe one persona tends to be on iPhone 6 while another is on the 4. In that case, it's best to start small and scale up.

Don't get caught in the trap of "design for all the things" if all the things aren't relevant to your success. It's unsustainable and likely unprofitable.

Don't forget the fringes

That doesn't mean you totally ignore other devices. It's a good idea to look at some key components of the app and see how the scale across a broad spectrum of devices. Maybe 80% of your market is on iPhone 5 & 6, but you still see another 6% on the 4 — you don't want to completely ignore 6% of your users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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