Responsive is not the only option

Responsive is not the only option: blog post

So you checked Google Analytics and discovered that last week more users accessed your site on their smartphones than on their desktops and a few people even stopped by on their watches.

It’s safe to say, you’re not alone! In 2015, Comscore cited that “engagement on desktop [in Canada] has flattened” (though it’s not yet declining and is still crucial for many products) and mobile usage is not only growing rapidly but continually expanding and evolving in the role it plays in users’ day-to-day interactions with digital products.

So, what does this mean for you and your site? Do you need a responsive website?

With mobile becoming increasingly important and brands releasing the latest and greatest devices every five minutes, somehow, your site needs to keep up. Perhaps this does mean you need a responsive solution, but I’m going to suggest something a little controversial: maybe you don’t.

You’ve probably heard from numerous sources that responsive is the way to go. Heck, even the mighty Google is recommending one source code to rule them all. But before you choose a direction there are some things you should consider.

There are alternatives

There are other mobile solutions available such as dynamic serving and separate urls (the infamous m.*), both with their own advantages and shortcomings. Before setting responsive as your goal it is important to consider not only the the pros and cons of all approaches but also to step back and ask, “why do I need a mobile site?” If the answer is, because Google said so, it’s time to do some more research.

Responsive design. Image via Google Developers

Responsive design example via Google Developers

 

Dynamic serving example via Google Developers

Dynamic serving example via Google Developers

 

Separate URLs example via Google Developers

Separate URLs example via Google Developers

What responsive design is (and isn’t)

A responsive url, in its most basic form, is one that uses media queries to scale html to any device. But this alone is not enough. Simply scaling the code does not optimize content, it doesn’t create a quality user experience or ensure a site is accessible, and it could potentially hinder a website’s overall speed and performance.

Optimized Content

From a technical perspective, responsive design can often be a product team’s dream, but it does nothing to address content strategy or user needs. When a user goes to a website they have a goal in mind, but that goal often varies across platforms and in different circumstances. Take for example the vastly different web traffic statistics between mobile, tablet, and desktop published by Comscore in 2015. Canadian users were spending up to 68% of their desktop time on sports, retail, and news/information while they spent 52% to 79% of their mobile time on radio, social networking, and photos. In the US, mobile trends were similar to Canada but desktop use was trending towards business/finance and entertainment news while sports and news/information had an even 50/50 split.

Share of content category: time spent by device via ComScore

Share of content category in the USA: time spent by device via ComScore

 

Share of time spent by device in Canada: selected categories via ComScore

Share of time spent by device in Canada: selected categories via ComScore

Comscore also noted that Canadian users are spending 88% of their mobile time within apps, not browsers. These stats beg the question, “should you develop a mobile website or should you develop an app?”. Once you decide what to develop, what do your users need from it and will that be affected by their geographic location? The answers lie within your users’ behaviour patterns, and content should be optimized accordingly. If you’re unsure which content will perform best in which environment, a combination of usability testing and A/B testing will be great tools to demonstrate your user’s needs.

An Optimized Experience

Not only do users require different content in different scenarios, they also need different experiences to match those situations.

Consider for instance someone who needs to book a gym class. If they’re at work, with access to a large screen browser, it’s safe to assume that they are in a calm and static environment. They can navigate to the website with few distractions, book their class and pay close attention to a large amount of content.

Now consider a second user who wants to book the same class but after work. This user is on their mobile phone, on a 3G connection, running across a school parking lot to pick up their kids and they have T-2 minutes to book a class before their kids are done school. They have the gym app on their phone but they already have their browser open so they choose to navigate to the gym website instead. On the website they’re met with all the same content from the desktop, but resized, and after scrolling through all of information that they don’t have time to read, they do find a bookings button. When they click it, they find that they can’t actually book a class on the mobile website and they instead have to go to the app; but they aren’t automatically redirected. By this point, the kids are out of school and have taken away the phone to play Angry Birds!

In this customer journey, a mobile optimized experience would have gone a long way to helping this second user successfully book their class. Considering different users’ situations, and optimizing for a better mobile experience instead of making responsive the goal, creates smarter experiences that increase conversions and keep users interested, happy, and on task.

Responsive does not equal accessible but it can be accessible

Digital accessibility is important, so important we made a poster about it (check it out) and another common myth is that making something responsive will automatically make it accessible. It’s important to understand that this is not the case and that designing responsive and designing for accessibility are very different things. In fact, responsive designs can often create more unique accessibility issues.

I experienced this recently while testing a new site for a client. What happened was the desktop site adapted to the mobile layout when zoomed to 200%. This created a whole series of new issues that the development team did not foresee. Suddenly, many elements were not accessible via the keyboard, some key content had fallen off-screen and was no longer visible, and the colors on CTA buttons changed to inaccessible color combinations. These issues were all fixable, but they became important additional items to keep in mind for the next round of development.

Performance is key

Performance and responsive design are hotly debated topics on the internet these days, so let me be clear, responsive design can be bad for performance (as can any approach), but it does not have to be.

Users have expectations of the websites they visit. Whether they’re browsing from downtown Toronto or from a hiking trail deep in the forest, performance can make or break a website – no matter how much they want or need to accomplish the task at hand. However, if it is a main consideration from the beginning and implemented properly, there should be no reason for a responsive site to load any slower than another mobile-optimized site.

In the case of responsive design and performance, there are many things that can be done to speed things up. Much of the content that is beneficial on desktop is not necessary on mobile and will actually hinder the experience and performance. There are also many solutions now for handling images efficiently. The main thing, however, that will ensure a site performs well is setting aside time and resources from day one for the developer to plan and test for performance related issues.

So don’t just “go responsive”

I’m not saying that you shouldn’t design responsively or that you should favor dynamic serving or an m.* approach. I’m saying that if “go responsive” is set as the main project goal, priorities need to be looked at carefully. If a project is approached first with the question, “why do I need a mobile site”, and followed up with an appropriately optimized solution, you’ll be heading down a much smoother path toward higher conversions and happy users.

So no, you don’t need a responsive website, you need a website optimized for your unique users and their very unique needs – which may or may not be responsive.

Kristen Stackhouse, UX designer

This post was written by Kristen Stackhouse, UX designer currently at Usability Matters

Download the infographic