In this screencast, Derek walks us through a couple of examples where traditional approaches to responsive content may actually hamper people from achieving their goals online. He proposes some alternative approaches that keep user experience top of mind.
One of the main benefits of responsive content is that it flexes to the browser’s viewport width so it’s easily consumed on different sized screens. But is this always the best approach? In some cases, scaling and flexibility may make the content harder to perceive. As always, it’s important to consider how people actually use the content to achieve a goal or complete a task.
User experience is our gold standard for judging any solution’s effectiveness.
In the following screencast, we take a look at two scenarios where approaching responsive content differently makes it simpler for users. The first example we look at is an image containing a lot of visual detail and information. The second, and our main focus, is tabular data where being able compare different data points or ranges of data is important. While you’re watching these demos, think about the impact that changing the display has on someone’s ability to compare data.
Feel free to download the transcript (txt).
Comparison is key
While we can maintain at least some sense of semantics in a responsive layout for tables, making sure people can still compare data relationships is critical, especially in the following use cases:
- Think of a person using a screen reader to compare a value in a cell to the value directly below in another cell. That might only take one keystroke in a full table, but when that same table is viewed responsively in a stack, that person may need to hunt a lot more to to get the same data.
- For someone with low vision who uses screen magnification, those same two adjacent table cells may now be hundreds or even thousands of pixels apart in a stacked layout.
- Someone who needs that visual two-dimensional grid to make sense of the data from a cognitive standpoint may really struggle trying to understand the data when we turn that table into stacked sets of name value pairs.
In cases where the visual display of something is fundamentally important to completing a task, we need to carefully consider how best to change the display (or perhaps not change the display) of that content. We’re looking forward to testing these approaches on real sites with people with disabilities. In particular, we’re curious about how the pop-out approach works for tasks like getting at details in a content image, or examining data points in a table.
Have you seen situations where a traditional responsive approach doesn’t seem quite right? Or actually makes completing certain tasks more difficult? Share your experiences in the comments below.