Building a more unified Twitter for iOS

Previously, Twitter for iPhone and iPad offered very different experiences. Now, Twitter apps on these devices will be more consistent regardless of which one you’re using. Starting today, iPad users will be able to create and see revamped quote Tweets, explore trending topics in search, visit product and place pages, and more. We’d like to tell you how we made this happen.

Although they shared some code, Twitter for iPad and Twitter for iPhone were originally developed and designed separately. Each app was tailored to its platform — but required a lot of extra effort to develop. All too often, this meant that Twitter for iPad features lagged behind other updates. To fix this, we had to rethink our approach.

The ecosystem

Today, there are many sizes and classes of devices, each with varying features and use cases. Web designers have been handling this challenge for years using responsive web design. The idea is to design and build fluidly, to allow the interface to adapt to different conditions so that it can always provide an optimized experience for a particular device. Apple began to introduce flexible layouts in iOS 6 with auto layout, and adopted true responsiveness in iOS 8 with size classes.

We used these methodologies as our model. Our development of a new iPad experience reflects a responsive philosophy, which led us to develop a framework accommodating a multi-device ecosystem. We call this framework “adaptive UI.”

Adaptive UI
Reading your Timeline should be a great experience on any iOS device, no matter the screen size or orientation. For this reason, we must consider different devices and their characteristics. So we built our own responsive system, starting with the typographic elements that make a great reading experience, and built from there.

Characteristics we look at include:

• kind of device (phone or tablet)
• orientation
• canvas (size of the current view)
• size class (whether the canvas is small and compact or broad and expansive)
• typographic settings and constraints

By examining each of these characteristics, we can determine an optimum line length that makes reading comfortable and easy, regardless of the text size you’ve chosen. We can adjust the baseline type size so the content feels right relative to the size of the view. We can adjust image presentation for the orientation of your screen, giving you a better photo browsing experience. We can change the presentation of information: views that use push navigation on a phone may live side-by-side on a wide enough screen. We can optimize behaviors: what’s easily accessible to your thumb on your phone may be hard to reach on a tablet if we don’t adapt to the environment.

By responding to the characteristics and modifying the presentation where it makes sense, we are able to support Twitter for all iOS devices and rethink the experience only when necessary. We think of it as a pyramid: most things simply respond automatically, like content width responding to text size changes; some things need to be modified like the Profile header, which would take up half the screen on a large device if we didn’t modify the layout; only a few things need to be rethought, like Direct Messages, where the list of conversations can sit side-by-side with the conversations when you have a wide enough screen. This means that when we develop a new Twitter feature from now on, we can more easily ship it across multiple devices at once with an experience suitable to each device.

Also, this approach lets us design beyond the present. When new devices or features come along — like multitasking in iOS 9 (which allows two apps to run side-by-side), or the iPhone 6 and 6 Plus — thanks to this system, we can support them with almost no additional effort immediately upon their release.

Adaptive UI encourages us to be strategic and invest where it matters most.

Brand new foundation

Adaptive UI is the result of a deep and long-standing collaboration between our design and engineering teams. We created adaptive UI as Twitter’s next-generation engine to drive the user interface, and we’ve incorporated it into every aspect of Twitter for iOS. We’ve also instilled a way of thinking about environment rather than device, and designing for all possible environments.

What we’ve got so far is a baseline to make everything work well. It’s been a huge effort to rewrite the system in place as seamlessly as possible. One of our first steps was building landscape support, which we shipped for the iPhone 6 Plus earlier this summer. From this effort, we learned a lot about how and when to adapt to changing conditions. This was the foundation on which we built our updated iPad support. Now, we have new tools that are more robust and allow faster iteration. Adaptive UI gives us the ability to support new devices and bring new Twitter features to people faster. But as you might expect, from time to time there are going to be some differences in features and functionality between devices. In the future, we aim to get Twitter for iPad and iPhone to complete feature parity.

Ultimately, it’s no longer Twitter for iPhone and Twitter for iPad: it’s Twitter for iOS, and it will now be optimized for different contexts. That’s a freedom which helps us to make Twitter the best experience it can be for everyone, regardless of device.

This new experience is currently rolling out.

Designed in collaboration with Dave Bedingfield, Sean Thompson, Jason Sofonia, Jason Harris, and Abe White.