Responsive design is failing mobile UX

Default avatar.
June 24, 2015
Responsive design is failing mobile UX.

It’s no longer enough to simply make sure your web content fits on a small screen. Google reinforced this precedent by updating its algorithm to emphasize the importance of carefully planned and well-executed responsive designs on mobile phones. And it makes sense: Your viewers don’t need all the functionality of a desktop on a mobile device. In fact, they may want to remove some content and functionality when they’re on a smaller screen. After all, nobody wants to sort through pages of content just to find your company’s phone number. That’s the missing building block in a lot of companies’ web design foundations: true adaptivity. Simply jamming your site into a version that fits on a mobile device is not enough. You need to take a close look at the complete user experience and how it should be changed to adapt to the different environments in which it’s being viewed.

The problem with responsive design

57% of mobile device users

won’t recommend businesses with poor mobile site designs, and 48% say that businesses with mobile sites that don’t function properly have the appearance of not caring. There are several problem areas that most companies run into with their responsive websites:

Image placement

Past design processes have dictated that the client approves static images and screenshots before the development phase. Today, design is more focused on the rearrangement of elements for different device dimensions and much less focused on the placement of static images.

Screen squeeze

Showcasing data on a small screen often makes it difficult to see or read content, especially tables of information. The W3C actually encourages brands to choose a method other than tables and tabs to present data; complicated user interfaces simply contain too much information for mobile devices to handle.

Perspective shift

Above all, the problem with responsive design is simply a matter of the customers’ perspectives vs. the companies’ perspectives. Unfortunately, most businesses tend to ask themselves what they want to tell their customers rather than how their customers want to view and interact with that information. For example, while registration workflows are generally the most important aspect of web design, they’re often a low priority. That’s because businesses think more about the functionality they want customers to see than the logical point of entry and primary workflow the customers are looking for. Simply put, responsive design isn’t the ultimate solution for giving users what they need from a website; it still leaves much to be desired.

Update responsive or upgrade to adaptive?

When it comes to web design, the key conversation brands need to have boils down to the concept of responsive vs. adaptive websites. The responsive approach takes the current site and fits it to varying screen sizes, while the adaptive approach actually changes content and how it functions based on the screen size. [pullquote]Responsive web design assumes that your content and functionality should be the same across all devices — but that’s not necessarily true[/pullquote] I generally advocate for more of an adaptive web design method, as opposed to simply stacking content, for one important reason: Responsive web design assumes that your content and functionality should be the same across all devices — but that’s not necessarily true. The key is to match the nature of the content with the use-case and the context in which users are looking at your website. For example, let’s say you’re designing a responsive site for a brand in the consumer packaged goods or consumer gift industries. The promotions and offers pages for these types of sites generally receive the most online traffic. People rarely look at product details, but when they do, a great way to highlight those details is to show how they compare to other items. With that in mind, you should put product visualization and educational content on product pages so you can help consumers understand how to use and engage with your product. For the consumer packaged goods industry, you want to get to know your customers and determine whether they’re pre‑, in‑, or post-store. You’ll need to create a different experience depending on where the customer is in the path to purchase. Here’s a short breakdown of each path: 

  1. Pre-store: People who are pre-store are probably going to get to the site through social media or an ad, and they’ll probably be looking for coupons, offers, or recipes (in the case of food).
  2. In-store: Once they’re in-store, they’re probably looking for coupons, reviews, or price comparisons with other sellers.
  3. Post-store: When they’re post-store, they’re probably looking for branded content.

Knowing where customers are in the path to purchase allows you to design the site in a way that meets these needs and more. [pullquote]Adaptive design enables the customer to have a customized experience…based on the device he or she is using[/pullquote] Above all, you must put yourself in your customers’ shoes. For example, I shop at Trader Joe’s every week. It would be nice if I could plan out my meals in advance from my laptop and connect that plan to my shopping experience. In other words, I could tell the site what I would like to make for breakfast, lunch, or dinner. The site would then tell me all the products I would need to make those meals and create a mapped-out list for me so I would know which aisles to hit when I got to the store. All I would have to do is pull out my phone. Adaptive design enables the customer to have a customized experience, such as this, based on the device he or she is using. Optimize the customer experience by tailoring the design and information to the device. For example, if your customer is looking you up on a smartphone, make your phone number prominent and interactive so he or she can easily call. Is the consumer on a laptop? Perhaps it’s more important to present product information upfront. Figure out what it is that your customer needs based on the device being used, and deliver that experience. You need to look at your site from users’ perspectives — no matter which device they’re experiencing it on. If your customers pull out their phones to look up your business, you’d better be ready to help them find what they need with the best possible design and functionality. If you don’t make it simple and seamless, they’ll just take their business somewhere else. Featured image, mobile UX image via Shutterstock.

Kevin Rice

Hathway CSMO¬†Kevin RiceÄôs entrepreneurial spirit and deep understanding of the digital landscape across industries allow him to not only help brands dominate their markets in Äúthe now,‚Äù but also prepare them to pioneer at Äúwhat‚Äôs next.‚Äù It‚Äôs this skill that has helped Kevin grow Hathway, the agency he co-founded with CEO Jesse Dundon in 2008, to 50 employees, three offices, and No. 601 on the 2014 Inc. 5000 list.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…