Mobile Best Practices
A Mobile-First Mindset
This post was originally published for the Agencyport Developer Zone on March 31, 2015. Edits have been made from the original post.
Why is mobile important?
More and more people visit websites on their phones or use mobile apps, which are modified websites specific to mobile devices that a user can download. As of early 2014, mobile usage surpassed traditional desktop usage for accessing the internet, regardless of whether it was by viewing an app or mobile website. Mobile apps alone made up 47% of Internet traffic in January 2014. Keep in mind that these statistics are specific to the US; mobile still has a ways to go worldwide. In any case, as mobile devices, such as the iPhone and Android phones, become more and more popular, fewer people are relying on their computers to experience what the Internet has to offer. The introduction of wearable devices further complicates virtual experiences, since there will be more and more screens to design for. Regardless of what the future has in store, responsive design allows ways to accommodate a spectrum of screen sizes.
What is responsive design?
Ethan Marcotte coined the term “Responsive Design” in an article for the web design/development blog A List Apart. It is a term inspired by the concept of “responsive architecture,” or physical spaces that adapt their design to accommodate the number of people inside them. The same idea is applicable to web design, the content and structure of a website should be able to change depending on the size of the screen. This can be done in a number of ways, such as using media queries to specify changes in CSS depending on pixel widths. However, even this technique isn’t perfect, as screen-sizes are not always predicted by pixels alone. No matter the technique, there are certain universal aspects of responsive design to keep in mind when designing for a range of experiences.
The layout will ultimately depend on the content of the website. It’s important to prioritize content and ease of experience. It’s also important to keep in mind the user and the tasks they will need to accomplish. Websites have to be condensed in a way for important information to be accessible and easy to navigate. Experiences that rely on pages of complicated workflows or interrupting elements, such as pop-ups, will be abandoned due to their lack of accessibility. Complicating the experience impacts a website in numerous ways, such as increased loading times. According to a study conducted by the Nielsan Norman Group, the average user will leave a website in 10 seconds if they find it unusable for any reason. This can mean anything from slow loading times, inability to find what they are looking for, or so-called “minor” details, such as lack of punctuality that can impact credibility.
This quote from Apple explains it well:
“People care about whether an app delivers the functionality it promises, but they’re also affected by the app’s appearance and behavior in strong — sometimes subliminal — ways. For example, an app that helps people perform a serious task can put the focus on the task by keeping decorative elements subtle and unobtrusive and by using standard controls and predictable behaviors. This app sends a clear, unified message about its purpose and its identity that helps people trust it. But if the app sends mixed signals by presenting the task in a UI that’s intrusive, frivolous, or arbitrary, people might question the app’s reliability or trustworthiness.”
A three column layout with a header and footer containing various images and groups of text will have to be re-envisioned for such a small allotment of space. This is where responsive design comes in. Using a flexible grid system, columns of information change to accommodate the screen. A website on a phone, when laid out from top to bottom, looks more like a scroll of paper. That same website on an iPad had more room to accommodate a sidebar, thus shortening the length while widening the scroll of paper. The widest and shortest scroll of paper would be for a traditional desktop screen.
In this example, information that is normally displayed horizontally is stacked vertically to make better use of the screen-size.
Using Established UI Patterns
A popular established UI pattern is keeping the navigation bar at top with a “hamburger button” (displays as three horizontal lines) to imply that there are more pages. This is a solution to pare down lengthy menus with numerous drop-downs. Certain UI patterns such as this have been reused time and time again. As people rely on mobile more and more, they become more familiar with these patterns.
Another UI pattern we use is cards. Our work items naturally lend themselves to a card-like format, where easily digestible information is grouped together. Simplifying the experience further, we allow the user to easily search, add a new work item, or click on an existing work item. Having a functional search is even more important on a small screen, as the infinite scroll can display an endless amount of data. The user needs to be able to easily filter that data to find the information they need.
However, there are two sides to consider. Brendon Cornwell of UX Booth points out:
“There are obvious benefits to using an established design pattern. Patterns distill the collective wisdom and testing of past products, while providing a common language for teams. Design patterns reduce product development time and cost, and provide a consistent user experience. Having access to interaction design patterns makes the process of designing an interface easier. However, we can’t always take design patterns at face value. To quote entrepreneur and design specialist Jeffrey Zeldman, “design considerations beat design patterns. Test and decide, don’t just copy things like the hamburger icon.” It’s often worth a little extra research to find out if there is science to validate the design, and if not, if there is an opportunity to conduct a usability study of the pattern.”
The need to design for different screens is only going to increase as more devices are invented. The idea of responsive design is not going to go anywhere, but will continue to change as needed. Because the world of technology evolves so rapidly, it’s important to keep up with best practices. Always keep in mind what your user uses and how to make the most of their experience.
Please recommend if you liked this article!