Responsive, Mobile-First Design Matters Now More Than Ever

By Bennett Garner

Responsive design is the practice of optimizing your web application to display nicely across screens of various sizes. In the late 90s and early 2000s, web design was fairly straightforward. Then, you simply built a site assuming that people would have small, relatively low-definition displays. For example, here’s a post from a web design forum in 2003. In it, the posters talk about the old 800px x 600px standard for web layouts.

Now that smartphones, tablets, and high-def desktop displays have entered the mix, it no longer makes sense to design for one standard size. Instead, application developers must consider how to build modular web apps that display differently on different viewports. As a result, a methodology of designing with the smallest screens in mind has taken hold. Overall, this mobile-first design paradigm prioritizes the user experience on smaller devices.

In 2019, the importance of responsive, mobile-first design hasn’t diminished. In fact, it has only become more important. According to research from SimilarWeb, 63% of website visits in the US come from mobile devices. Consequently, a diminishing share of website visits are on large screens. Moreover, we can expect this trend to continue. An even greater share of views will come from tablets, smartphones, wearables, and even AR/VR applications in the future.

Progressive Advancement & Graceful Degradation

Talk to any web designer or developer, and they’ll agree that responsive design is important for modern applications. However, they may not agree on the methodology for implementing responsive designs. By and large, there are two camps on responsive design. On one hand, you have the “graceful degradation” camp. They believe in full-featured layouts that then pare down for smaller screens. On the other hand are the believers in “progressive advancement.” They claim you should start your design with the smallest screen. Then, add features from there as the viewport grows.

While these may seem like two sides of the same coin, the differences in starting points can lead to very different applications. For example, graceful degradation-designed apps often have a better grasp on the overall features and functionality the app should offer. However, they can fail to provide a seamless experience. The mobile design of the app can feel like a feature-poor afterthought.

In contrast, a progressive advancement approach often results in a rich, intuitive mobile experience. The app’s core features are easily accessible and usable on a small device. Nevertheless, some features and overall cohesiveness might be missing from larger layouts. Moreover, progressive advancement may miss potential features in the brainstorming phase. Dashboard graphics, tables, or clickable components may get left out altogether. Because of the focus on mobile, these great desktop features often don’t occur to mobile-first developers.

Responsive Web Design

Due to the weaknesses of holding one paradigm too tightly, perhaps the best approach is a hybrid. To illustrate, perhaps the application is designed first with no limitations. Then, it’s re-approached with ruthless cutting to meet the constraints of mobile devices. Combining these visions and making them scale is the goal of responsive web design. Of course, there are various screen sizes and interfaces in between a mobile phone and a desktop. Correspondingly, responsive design creates new display rules for each. Your smartphone, tablet, laptop, and widescreen desktop monitor all display differently, depending on how you’re viewing the site.

These layout switches are possible thanks to cascading style sheets (CSS). Specifically, CSS3 introduced media queries in 2012. They made it possible to change the styling and display of a page depending on the output device. Owing to the introduction of media queries, web design changed significantly. As mobile devices gobbled up market share of internet traffic, web developers consequently focused their designs for mobile devices using media query-defined rules for various viewport sizes.

Mobile-First Indexing for Search

The trend toward mobile-first design continues to mature. Recently, Google has chosen to use the mobile version of all websites as the foundation for its indexing. In short, even if there’s more content on your desktop site, Google will only index what you show on the mobile version.

Until now, SEO was not a significant concern for mobile development. However, Google’s decision has changed designers’ and developers’ priorities. In addition to clean, intuitive layouts, web developers also need to provide relevant information and keywords for consumers to find the site via search.

Wearables, IoT, & the Future of Responsive Design

What’s more, the future of responsive design is about to get more complicated. Already, wearable devices like smart watches have hit the marketplace. Increasingly, in-home and in-car internet of things (IoT) devices also need the ability to display web pages. As these devices connect to the web, developers will be asked to decouple content from layout. As a result, web pages could begin to display in dozens of permutations for myriad devices.

In 2019, responsive design is more relevant than ever. Companies would do well to embrace it. Developers would do well to learn it. It’s only likely to become more important.

About Intertech

Founded in 1991, Intertech delivers technology training and software development consulting to Fortune 500, Government and Leading Technology institutions. Learn more about us. Whether you are a developer interested in working for a company that invests in its employees or a company looking to partner with a team of technology leaders who provide solutions, mentor staff and add true business value, we’d like to meet you.

…

Originally published at Intertech blog.