Solving the Issue of Context in Responsive Web Design

5 Shares

A while ago I wrote an article titled Responsive Web Design vs Separate Mobile Site – Which is right for you? As the title suggests, it compared responsive web design to building a separate mobile site, and the reasons you might choose one over the other. I highlighted three core considerations when deciding which path to take: context, content, and your current situation. Of these, the most important consideration in most cases, is context.

Bonus: Download the 33 free templates from Web Marketing That Works by Adam Franklin & Toby Jenkins

“Context” as a consideration in responsive web design has been discussed and debated at length since Ethan Marcotte introduced RWD to the world in 2010. The issue can be phrased as a simple question:

Does a user on a mobile device have different goals than a user on a desktop computer?

As an example, let’s imagine a user on a desktop computer arrives at the website of a local web design business. It’s likely this user has some fairly simple goals – learn about the company, view some of their work and decide if they’re worth contacting or not for their next web project. Now imagine a different user arrives at that same website, but on a mobile device. In many cases, their goals may be exactly the same as a desktop user, however there are some informed predictions we can make about what they might hoping to achieve. If the user is accessing the company’s site via a mobile, it’s possible that they’re on their way to visit the company’s office, and need to quickly find the address. Or they’re after some articles to read on their way to work.

In many cases, you can predict what the intentions of a mobile user are likely to be. For this reason some people argue that creating a separate mobile website is a better option than a responsive website as it can serve content based on the user’s predicted goals. In the example above, the web design company might opt to create a separate mobile site for mobile users that brings their contact information and blog to the forefront, as this is the information they predict mobile users are here to see.

Supporters of responsive web design, however, argue that you can’t predict a user’s goals with any great accuracy. Many people browse the web on their phones while watching TV, just because their computer is in the next room, so their goals would likely be the same as any desktop user. And with smart phones constantly getting better and cheaper, a growing number of people are using their smart phones as their primary device for accessing the internet.

So while you can make some predictions about what a user’s goals might be based on their device, you can’t make assumptions, and you definitely shouldn’t limit users’ options based on those assumptions.

The Best of Both Worlds

At Bluewire Media, we’ve been trialling a solution that we believe achieves the best of both worlds.

The idea is to take a mobile-first, fully responsive approach to planning, designing and building the website, just as you would for any responsive web design project. However, we also want to incorporate the predictions we can make about a mobile user’s potential goals. To do this, we incorporate a “Mobile Menu”, only visible on mobile screen sizes, that highlights the pages or sections that we think mobile users might be looking for. We then include a menu icon (or “Hamburger” icon as I recently heard it called), or “More” menu item, that expands the full, desktop menu, but in a mobile format.

Let’s look at the Bluewire Media website as an example. When planning our website, we knew we couldn’t make assumptions about what a mobile user’s goals would be, but we could try to predict them, and highlight the menu items that will help them achieve those goals. The specific goals we thought mobile users were likely to have were to 1) find our contact information, and 2) read our blog. Based on these predictions, we created a mobile menu that included “Home”, “Blog”, “Contact Us”, and “More”. Go ahead and resize your window down to the size of a mobile screen. You’ll see that at the 768px breakpoint, the main menu collapses down to a menu icon on the right, and the much simpler mobile menu takes the place of the main menu. Clicking the menu icon on the right simply expands the full main menu in a mobile-friendly format.

With this technique, we haven’t limited mobile users to only accessing the content we assume they’re here for, but we have brought it to the front, to make their lives easier if that is indeed what they’re here for.