Adaptive Mobile Patterns: The Silk Route to Apps for Phone and Tablet
“The world of smartphones in 2016 is highly fragmented in terms of both screen sizes and screen resolutions used by the most popular phone makers. The screen resolutions vary from as little as 240×320, up to a massive 2160×3840 (4K) used in the Sony Xperia Z5 Premium.” — Pawel Piejko, DeviceAtlas
The world has been witnessing an increasing number of device types and screen sizes. And, this is not going to change any time soon. So, creating impeccable responsive user interfaces that properly fit and adapt to those devices is becoming one of the biggest challenges of mobile development. Add the need for a single codebase for the large variety of devices, and you can see the problem — one that will not get any better in the future.
Solving this problem out of the box, or at least providing tools to do it fast without having to learn new skills, is key for modern IT. So, developers should follow a few guidelines to make the most out of the available viewport for different devices and screen sizes.
Therefore, let’s see what these guidelines are all about, and you can see how using our patterns will make your life easier.
Different Devices, Screen Sizes and Orientation
Mobile devices include everything that’s mobile: from smartwatches to tablets. These devices have different resolutions, pixel density and aspect ratio. In this example, we focused on mobile phones and tablets.
One of the most basic UI development principles is to use a mobile-first approach. We start developing for phone and build up to larger form factors, ensuring that the most vital information is displayed even in small screens.
Let’s see how can we deal with the available screen space.
Horizontal Space: Go Full Width
Ideally, most UI elements should occupy the full width of the screen by default, unless limited by their parent elements, such as a column system or a fixed width. When the UI fills the screen, we can make sure all elements are properly aligned, creating a pleasant look. But in bigger devices, these UI elements will stretch and look awful.
We can use this extra horizontal space to add something useful to the application, or adjust the view to display the content better.
Vertical Space: Screen Height vs. Scroll
There are two main scenarios for vertical space.
Content is displayed from top to bottom with scroll
This one is easy. Bigger devices will still display the content in the available viewport, and the scroll adapts to the height of the device.
Content does not fill the screen height
Here, most of the time, the content should be centered on the screen or adjusted to the viewport height. This will require some tricks to make sure things stay in place.
Orientation Change: Switching Things Up
Rotating a phone or a tablet triggers an orientation change event, and the width and height values are switched.
If the rotation added horizontal space, there’s an opportunity to change the UI to better display the content or even show extra content.
If the rotation reduced the horizontal space, we may want to make a few adjustments to the column system or hide a few elements.
How to Handle Responsive: Screen Space and Form Factors
When building user interfaces for different devices, and taking orientation changes into consideration, there are a couple of actions you can take to display the content better.
My team and I recently researched the most popular apps in the world. We tested them, particularly how they looked on a phone and tablet. We were able to identify three main behaviors that also apply to orientation changes when apps allow it.
Here’s the result of our research:
Since we could observe these three behaviors in every single application, we figured we should create some kind of component that could help us deal with the problem automatically, or at least reduce the development effort.
Silk UI Mobile Patterns to Accelerate Development
With the research data and conclusions in hand, it was time for us to address the issue of supporting many screen sizes. When we broke down the major behaviors into patterns, we set out to create drag-and-drop components — thank you, visual programming. With these components, developers could easily handle orientation changes and different device sizes. And guess what? We had the UI framework just for that.
So, let’s see how we went from identifying behaviors to implementing them.
Displaying Lists and Details
This is something that we find in almost every email or chat application.
On a tablet, we have a list of items on the left side, and the right displays the detail. On a phone, we can only see the list. When we select one of the items, the phone displays the detail, taking up the entire screen. iOS phones will display a back button at the top left, while Android phones allow you to see the list again using the back button.
For this, we created the Master Detail pattern, which is the fastest way to achieve this behavior. To have it work in all devices, you simply assign a list and configure an event that reacts to a click. All the work to detect the device, open and close the detail screen on the phone is already built in the Master Detail pattern.
The Split Screen pattern is the core of the Master Detail pattern and allows customization, such as changing the way the list is displayed and configuring what happens when opening and closing the detail on a phone.
Using Responsive Columns
Many responsive apps rely on a column/grid system to adapt content to the screen. Some of them use a simple fluid layout, and the most effective ones allow you to configure the number of columns displayed for each device. The very best ones will also allow you to configure for different orientations, too!
On the tablet, we have a lot more horizontal space; therefore, we can easily use four to six columns.
On the phone, our screen is limited, so using one or two columns is good enough.
We started with Columns and created Blocks with 2 to 6 columns that can be configured for all possible variations of mobile screens: Phone Landscape, Phone Portrait, Tablet Landscape, Tablet Portrait.
Additionally, the Gallery pattern displays items using the same configuration as the columns.
Spicing Things up with Custom Layouts
This is where things get a bit tricky. Custom layouts don’t really have a predefined setup. They often require hiding several elements on certain devices or changing the screen position. In some cases, even the loaded data is completely different.
There are two main approaches: display or hide certain elements, depending on the device, or have two completely separate screens for each device, and control only the navigation. This way, the tablet opens that specific screen, and the phone displays a totally different layout and data.
The Display on Device pattern is one of the most simple Silk UI patterns for enabling applications to take advantage of different devices; yet it is also one of the most important. It has two placeholders, one for phone content and another for tablet content. The framework will automatically display the correct content when needed.
Ease Your Way Into Responsive Adaptation
A UI framework will make your life easier. You will be able to deliver the best possible experience quickly and using a single codebase — remember when we mentioned that? Given users’ expectations, delivering anything that’s not beautiful and responsive for all screen sizes can be a deal-breaker. By using the most common mobile patterns, you are sure to be riding the wave.
But really, don’t take our word for it. Download the free version of this platform, and try out the Silk UI framework for yourself!
The ideas shared in this post resulted partially from the research project RADicalize, which was supported by the EU and PT2020.
