• Pitfalls of Responsive Design: Context and Devices

Pitfalls of Responsive Design: Context and Devices

Posted by Matt Bulfair | Rare Thinking |

This post is the second installment of a two part series in which we're diving into the Pitfalls of Responsive Design. Previously, we went over some of the concerns around speed and content in responsive design. So what is our focus for this post? Don't ignore the devices and context! 

Ignoring Contextual Conventions

Each device provides its own unique form factor, interface conventions, constraints and opportunities. We need to be considerate of all these variables in order to create experiences that feel natural to the user. This doesn’t mean we have to design and style a different UI for each device to match the native UI, but we do need to be mindful of how people hold their devices, what icons they’re used to seeing, and so on. A good responsive experience reaches outside of the browser and is created with sympathetic and realistic mindset for the user and the device context.

It’s really important to understand that responsive web design by definition is not exactly the same as mobile design, so it’s up to us as the specialists to introduce contextually-considerate elements to designs. That means handling responsive navigation in a way that makes sense to visitors across contexts and designing for touch and to avoid forcing mobile users to sift through ridiculously long amounts of disparate content just to find what they’re looking for on any device.

Who, What, Where am I?

allwebcafe Responsive Blog on Mobile

The infamous fold. Most of us remember how important the fold is/was on desktop, pushing all the most important content to the top in order to make sure it’s seen by those low resolution screens. However, when it comes to mobile, we can’t control what our visitors’ browser size is, nor what dimensions manufacturers decide to make their devices. Believe me, they’re trying every size in the book. At least when we had desktop we knew the average resolution size and thus 960px was born.

Yet, mobile is much more than just various small screens, and these emerging contexts unlock entirely new use cases, patterns and possibilities. We shouldn’t sell ourselves short by only creating responsive layouts. As we sometimes forget that mobile phones can get user location, initiate phone calls, and much more. Hopefully soon all browsers on all these gadgets will have access to even more device APIs, further pushing the boundaries of what’s possible on the web.

In the end, we should do all we can to make the entire digital experience respond to what the device is capable of for each user and their individual browsing needs. Addressing constraints first gives us a solid foundation to stand on, so we can then utilize progressive enhancement and feature detection to take the experience to the next level.

While there are a ton of other known pitfalls of responsive design; some of which I will cover in future posts, these are some of the few that stood out to me the most, and ones that I have had to deal with more frequently in recent time. There are no rock solid rules written on do’s and don'ts we do have years of experience on desktop development, and a lot can be used in the responsive world. With more connected devices of all shapes and sizes come onto the scene every day, and users interacting with brands in more ways then ever, we as web experience creators have an opportunity and a privilege to be there when they arrive. Even though it’s admittedly a bit daunting, we should accept the challenge and embrace the opportunity to reach people wherever they may be.