Learn from leading developers how you'll have to change your native and web app designs for Apple's new iPhone 6 and 6 Plus.
For a time, iOS design was relatively simple. Developers only had a single digital canvas to target, sometimes also enabling their app to switch between portrait and landscape orientations. Then the iPad arrived, doubling their workload; but still fixed layouts persisted, with Universal apps (single binaries that run on both iPhones and iPads) using what PCalc developer James Thomson refers to as “a big ‘am I running on an iPad?’ global switch“. Even the arrival of the iPhone 5 barely shook things up, merely increasing one dimension of the screen.
At WWDC 2014, everything changed. “It was made very clear in iOS 8’s changes that different sizes of iPhones were coming — and possibly iPads, too — and that the whole notion of separate iPhones and iPads was going to get a bit blurry,“ recalls James. Although Apple hinted at what was to come, and developers could guess when new hardware would appear, no specifics were provided. “The press was full of speculation, but you can’t design against that. So if we wanted to support iOS 8 and the new devices at launch, we knew we’d have to make responsive apps that would work well at _any_ screen size.“
Responsive app design
Today, there’s the iPhone 6 Plus (1242×2208 pixels, downsampled to 1080×1920), iPhone 6 (750×1334), and the iPhone 5s/5c (640×1136); in some countries, the iPhone 4s (640×960) also remains on sale. And all that’s before you take into account the iPad.
Developer and designer Neven Mrgan says all these screen sizes now mean it’s no longer sustainable to design pixel-perfect iOS interfaces, in the sense of “carefully balancing each individual view“. Instead, he recommends app developers recognise the “simpler, function-driven aesthetic“ introduced in iOS 7 and continued in iOS 8, and “adopt the mindset of a web designer“. He suggests considering certain design elements as ‘locked’ (sidebars; toolbars; centred images) and others as ‘stretchable’ in one or more dimensions (lists; tables; rivers of text), which has “always been a good way to think about the design of ‘functional’ apps—anything that can be represented as a list or grid of items“.
AgileBits lead designer Dan Peterson reasons similarly, believing while “there may still be some situations where a fixed design can work well,“ the majority of views should be created with responsive design — “or, as Apple calls it, Adaptive UI“ — in mind. Dan adds that this ensures an app will work well across the new iPhones, can speed up creating Universal/iPad versions, and should make future design changes simpler to implement. (Said ease of changes can be scuppered somewhat with extensive customisation, though, so Dan says to minimise such things across all portrait views, saving major changes for when switching from portrait to landscape.)
Fifth Star Labs co-founder Nick Risinger reckons the trend towards adaptive layouts and ever-increasing pixel densities will also mean “the idea of pixel-perfect will have a nice place in history alongside vinyl records“, but Bjango director Marc Edwards believes designers “should not give up on ensuring they create pixel-snapped artwork for all display density targets“. In other words, designs should be responsive, but with “iOS, Android and the web all having units systems that allow pixel boundaries to be hit at all popular UI densities“, there’s no need for apps to not be visually sharp.
The human touch
Depending on the app you’re creating, this new approach to iOS design might be relatively simple or could cause headaches. Neven says games and ‘toy’ apps can often just scale and stretch their views to fill the screen. For designers, this means creating and exporting art at very large sizes, to cover increasing screen sizes and pixel densities — relatively straightforward for new projects, although a potential snag when updating old apps if source art is not available beyond a certain size.
But for apps that combine stock UI with custom art, Neven thinks things could be tougher: “A fashion app, for example, may have originally been designed for careful balance of all elements — the photo, the title text, the smaller footer. Scaling it would make the UI elements look silly, and re-flowing it would upset the balance.“ He likens this to the task of adopting ad campaigns to various media. To make everything look great, a human would have to target each size, but doing so isn’t practical. “App design has never quite matched the classical beauty of print design, though, so this isn’t a new problem,“ he suggests.
There are other complications, though, for most app designers wanting to create something great that works seamlessly across Apple’s hardware. Two surround Apple’s positioning of the iPhone 6 Plus as a kind of ‘mini’ iPad mini. “App creators are being forced to address longstanding aversions to our most dreaded of iPhone orientations: landscape,“ explains Nick. With smaller iPhone screens, landscape was often avoided entirely; this meant you wouldn’t end up with what Nick refers to as “layout atrocities,“ such as tiny content ‘letterboxes’ being left once the on-screen keyboard and toolbars were taken into account. “But now there’s an expectation apps will utilise iPad-like layouts on the iPhone 6 Plus in landscape.“
Additionally, the iPhone 6 Plus is a whole lot bigger than any previous iPhone. Apple’s response was ‘Reachability’, a feature where the entire UI slides down on double-tapping the Home button. Developers are sceptical about whether that will work well across all apps, and if these devices can ever truly be operated with one hand. “One thing Reachability doesn’t solve is access to the tabbed bottom navigation of many apps,“ says Nick. “I challenge anyone with medium-sized paws to navigate the full width of an iPhone 6 Plus without it nearly falling from their hand.“ How developers will respond to giant iPhones remains to be seen, as does whether Apple’s conventions regarding app design will remain relatively ubiquitous or give way to interface paradigms more suited to larger devices.
Such complications aside, Marc notes that the new iPhones at least don’t make the going quite as arduous for iOS designers as it is for web designers. While websites must display on the tiniest mobile devices through to whopping full-HD displays, the differences between iPhone sizes is comparatively minor: when working with iOS points (rather than device pixels), the variance is only 94 for width and 256 for height.
Additionally, Apple has assisted developers through Auto Layout providing the tools needed to execute adaptive app designs. Marc explains this is a constraints-based system, with you positioning and sizing items in relation to the screen size. Developers and designers aiming to refresh their designs should particularly familiarise themselves with the ‘regular’ and ‘compact’ class sizes and how they affect everything. “Apple considers the iPhone 6’s width to be ‘compact’ in landscape, but the iPhone 6 Plus is ‘regular’,“ says Marc, noting this makes it simple to adjust the UI based solely on class sizes. (See the Transmit iOS images for an example of how this works.) “But developers can also use other techniques to achieve a similar result, if we want to show a different UI for different screen sizes. Apple’s just made it a bit easier in one very specific instance — the iPhone 6 Plus’s width in landscape mode.“
If a design is targeting a range of devices, Marc adds that it nonetheless still makes sense to first work out how your design will look and work at common sizes and aspect ratios: “So, yes, we typically mock up designs for iPhone and iPad separately, even if they’d be expressed as a single layout with Auto Layout constraints controlling where the elements move and expand.“
On the future of iOS design, speculation abounds regarding Apple hardware, not least the iPhone 6 Plus’s odd display, which renders at 1242×2208 before downsampling to 1080×1920, potentially causing problems with the precision of line rendering, due to any sharp edges being blurred. “The iPhone 6 Plus system has some negative repercussions, but I think it’s best to ignore it and resign yourself to not having pixel-level control on that one device,“ argues Marc. “It’s likely Apple will ship true @3x density displays at some point, and the iPhone 6 Plus will be remembered as a transitional device.“
James, on looking at the APIs he’s been immersed in for months, sees far more change on the horizon. “Already, the iPhone 6 Plus reports itself as being more like an iPad than an iPhone, but I think we’ll in the future see split-screen iPad multitasking. You might start running your app on an iPad, but the OS could tell you that you should now use an iPhone-style layout that’ll go in a thin strip on the side, and you’d be able to change that strip’s width while the app’s still running,“ he says. “So the time for fixed app layouts is over!“
iPhone 6 app design case study: PCalc
James Thomson says that after WWDC 2014, he realised iOS apps would soon require responsive designs that worked with any screen size. For his calculator app, PCalc, he spent months removing assumptions about screen size from the code, and making the design adapt naturally.
1. On iPhone 4, the app uses the same basic design that it’s had since it was released.
2. On iPhone 5s, the calculator keyboard is intelligently ‘stretched’, and some extra information is added at the left of the LCD.
3. On iPhone 6, the extra screen space enables PCalc to default to showing two lines of information, and the tape in a sidebar.
4. On the iPhone 6 Plus, PCalc defaults to a possible four lines of information, and makes the sidebar wider.
5. On iPad, PCalc has a bigger display font, adds a toolbar of shortcuts at the top, and expands the tape to the device’s entire screen height. A separate key layout enables direct access to more functions.