BrandPerfect is built to conform to current web standards. These standards are not supported by your browser, so some aspects of the service may not work as intended. Please upgrade your browser to fix any site problems you experience.

Developing for multiple screen sizes

It’s a brave new multi-screen, multi-platform world

It doesn’t take a marketing guru to work out that we’re consuming content on all kinds of different devices now, principally mobile ones. At the end of 2013, mobile browser usage hit 20 per cent of the whole market for the first time, and it’s only going to go upwards from here on in. For every five visitors to a website, one of them is using a mobile browser, and that’s something that every Web manager, app developer and advertiser needs to think about.

The statistics are eye-catching even before we take apps into the equation. In an investor call announcing Facebook’s acquisition of the Oculus VR virtual reality company, CEO Mark Zuckerberg said that the company had hit the one billion active user milestone on mobile. It’s no coincidence that Instagram and WhatsApp, Facebook’s other big purchases of recent years, are all about the mobile experience, and we’ve already written about the company’s attempts to try to reinvent itself for the mobile age.

It’s obvious then that mobile is where the customers are, in ever greater numbers, whether it’s browsing the Web or using a standalone app. Yet the term “mobile” covers a wide range of devices, from the iPad Air to the Nexus 5 — how can brands and advertisers go about making an impact with so much fragmentation to contend with?

iOS, Android and the platform wars

Android devices accounted for around 80 per cent of smartphone sales in 2013, yet you’ll find many fledging apps (like Facebook’s Paper) launching on iOS first. Why? The devil is in the detail: Apple’s current mobile hardware line up covers just two screen resolutions (the iPad Air and iPad mini share the same number of pixels), and 90 per cent of devices are running the most recent version of iOS. In contrast, less than 10 per cent of Android devices use the latest Android 4.4 KitKat software, and a huge range of manufacturers and screen sizes have to be taken into account.

iOS is therefore much easier for developers to work on and test their products with. When you consider the amount of testing and coding that’s required to bring apps to Windows Phone and BlackBerry as well, and compare it with the likely return in terms of app downloads and purchases, it’s no surprise to find the niche operating systems are left out in the cold.

We spoke to Mark Wheeler, CTO of music discovery app Rormix, currently available on both iOS and Android. “The first decision is what your customers are using,” he says. “iOS and Android dominate the market and are the two easiest platforms to target. With a product like PhoneGap you can write one app and deploy it on both platforms, minimising the time and developers needed to make an app.”

“The main challenges for cross platform development are screen size, pixel densities and design guidelines — each platform has a list of design guidelines for apps, and while they are usually very simple, you need to bear them in mind as customers get used to how apps should look on a particular platform.”

You will find the biggest and most pervasive apps available on all platforms, though in some cases Microsoft and BlackBerry have taken it upon themselves to code the apps: Facebook, Twitter, Amazon Kindle and Evernote are a few of the limited number of services you’ll find present and correct across iOS, Android, Windows Phone and BlackBerry. 

Windows Phone is perhaps the best example of a ‘design language’ that all apps must abide by: a glance at the Windows Phone apps for Spotify, Facebook and Evernote show a consistent approach that isn’t always evident on iOS or Android. While chunks of the underlying code might remain the same, these design languages mean extensive retooling of an app’s interface often becomes necessary. Each platform has a different set of menu buttons, a different notifications system, and so on.

Even after the obstacle of multiple platforms has been overcome, there are still a plethora of screen sizes to think about — as phones get bigger and tablets get smaller, the distinction between the two is beginning to blur, but if an app or a website is to succeed it has to look as good at four inches as it does at 10 inches. Turn a smartphone or tablet on its side, and there’s another screen size and aspect ratio to think about. Developers will often make use of ‘breakpoints’, lines in the interface sand at which the UI shifts to accommodate a larger or smaller screen — a particular menu might be hidden, for example, once the display width goes below 440 pixels.

The trend for “responsive” websites is part of the attempt to craft uniform messages that are the same wherever they’re encountered. Try opening the websites of Grain & Mortar, Visit London or Brand Aid Design on a desktop computer and resize your browser window to watch the pages flex before your eyes. Other companies will serve up an alternative batch of website code if you’re viewing on a mobile device. Apps don’t have shifting browser windows to deal with, but they do have to adapt to the screen size they find themselves on and will often have to switch between portrait and landscape modes in the blink of an eye.

“If you are writing native apps, screen sizes need to be examined properly,” says Rormix’s Mark Wheeler. “Something as straightforward as ‘put a button in the top right’ becomes less simple to implement. Other simple things like ‘if the screen is too small, the text might need to go on a new line’ can cause a lot of problems. Generally speaking, apps that are designed for both tablets and phones have two different designs built into the same app. Some design features such as menus might stay the same for both, but a new design is normally needed.”

The BBC’s Nick Haley has written extensively about the corporation’s efforts to serve news for the 2012 Olympics effectively across all platforms and screen devices, and the challenge he faced is the same for many others. “It was important that the experience across each [device] was joined up and consistent,” he says. “So whether you’re checking the latest Team GB news in the morning on your phone or looking at rowing results on your computer at lunch, we wanted a sense that they all form part of the same overall experience.” 

Our mobiles have come on leaps and bounds in recent years, but they’re still less powerful than the average laptop, and — more importantly — they’ll often be running from a slower, more limited connection to the internet. The available processing power and level of connectivity is yet another factor to consider when building consumer-facing apps and websites.

A smartphone screen is not the same as a road-side billboard: brands and app developers have a limited number of pixels to work with, and simply crushing everything in more closely can lead to a cluttered and unenjoyable experience for the end user. Respond and adapt to the mobile framework though, and the message can get through clearer than ever.

SHARE THIS ARTICLE

COMMENTS

Please log in to comment
Loading...
Please log in to comment

POPULAR CASE STUDIES