Mobile App Design: Screen Sizes and Rotation for Better UX

mobile app ux

Since the beginning of smartphones, Android’s open-source approach has produced a staggering number of manufacturers, devices, and accompanying screen sizes. While this fragmentation creates opportunity for countless brands to rapidly innovative and drive hardware prices down through competition, it has always presented unique challenges for developers, who must ensure that their apps work smoothly when running on a wide range of devices.

Until just a couple years ago, Apple completely avoided this issue, right up until releasing the “Plus” version of their flagship iPhone each year, which featured a larger screen and slight variation in hardware.

While their fragmentation will never run nearly as deep as their Android peers, it did mean that even developers who created apps exclusively for iOS devices were no longer exempt from having to make multi-device considerations when coding.

If screen size alone weren’t enough, virtually every phone has the ability to rotate sideways, and when users think that they may be able to squeeze some extra functionality or visibility out of an app by changing screen rotations, they will almost certainly try and do so.

All in all, that adds up to a lot of different ways to view an app that developers have to consider if they want to create an optimal experience for their users. In fact, it quickly becomes too much to tackle on a case-by-case basis. Instead, developers have to work smarter.

So, without having to account for every single phone ever made individually, what general improvements can you make in your user experience (UX) based around screen size and rotation? Here are a few of our suggestions:

Start with knowing your audience.  

Ultimately, it’s hard to know which improvements will have the most impact if you don’t have a good grasp of your audience. Statistics on past projects, research on other apps in the same industry, or your own user testing may be able to help you determine things like which devices most of your users are on (are they using phones, or tablets?), how they’re interacting with apps, etc.  Getting some answers here can help you know which improvements will have the biggest impact.

When in doubt, start with rotation.

Even if you don’t have much user information available yet, a good place to start is to walk through your app by page, and ask yourself if there could be a benefit to altering your default view.

For example, if most of your app functions in portrait mode, but you have one screen that is text-heavy, it might be a good idea to put together a landscape view of that page so that your end-users can get larger, easier to read text without the need for manually zooming in and out.  Conversely, your app might be in landscape mode by default, but have some pages that feature long lists of items; you might want to allow these pages to display in portrait mode so that app users can see more items at once without having to scroll as often.

This is a good starting-off point because every phone can rotate, so screen orientation is a universal consideration, whereas things like OS participation and screen size may be dictated by user habits and demographics that are harder to know in the beginning.

Create rules for different screen sizes.

When a user makes the jump from a standard 4-5 inch phone screen to a 7 inch, 10 inch, or even larger tablet, you’ll want your app to flawlessly resize in order to feel natural to end-users. Take note of how space is used on larger screens (smartphone displays are often a ‘skinnier’ ratio than tablet screens, for example), and consider using anchoring to help keep your various UI components proportionately scaled relative to the edges of the screen, rather than scaling to fixed pixel sizes.

Consider completely hiding or changing some components based on the device running your app.

For example, you might design completely separate buttons to be shown on an iPad vs. an iPhone because they look better at a larger resolution, are a different shape that fits better with other components shown in the layout you’ve specified for tablets, etc.

Now, here’s where it gets really cool: By selectively hiding and displaying components based on screen size, you can completely bypass the need for separate app versions for different devices. No longer does getting a great user experience across a variety of devices require you to create and maintain a separate “<Our App> for iPad!” version in the App Store.

When using a hybrid or cross-platform approach to app development, this line of thinking can also be applied to hiding and showing different components for the Android and iOS versions of your app, which will help them fit with the design conventions each OS’ users are used to. For example, you could use this approach to easily change fonts or colors in each app version before packaging them for the App Store and Google Play submission.

Of course, considering all of these strategies and implementing them in practice are two different things entirely. Your success in doing so will largely depend on the capabilities/limitations of the toolset you’re using, be it direct-from-distributor tools, hybrid frameworks, or an entire pre-packaged development platform. In any event, it’s a good idea to storyboard out how your pages will behave on various devices and screens before locking yourself into a tool, just so you don’t have any unfortunate surprises down the road.

If you want a tool that can quickly and easily help you integrate all of these features into your development process, I would be remiss not to recommend giving our Aquro Platform a try.

About The Author: noeticbrandon

Brandon has worked in startup and mobile tech as a marketer and copywriter for the past two years, and previously worked as a freelance writer for web publications. Now, he heads up customer success and acquisition for the Stockholm-based Aquro, a full-lifecycle mobile app development platform.

If you like this article, you can connect with noeticforce on Twitter or subscribe to noeticforce feed via RSS.