Responsive Web design has been evolving rapidly ever since Ethan Marcotte coined the term two years ago. Since then, techniques have emerged, become best practices and formed part of our ever-changing methodology. A few obvious examples are the multitude of responsive image techniques, conditional loading, and responsive design and server-side components (RESS), among many other existing and emerging strands stemming from the core concept of responsive Web design.
I’m going to discuss a few of the lesser practiced elements that are quietly becoming part of the responsive Web design ecosystem under the umbrella of responsible Web design. Responsible Web design practices are mainly concerned with responding to the user’s context by providing the ideal scenario in which they can experience your product.
Like responsive Web design, the responsible practices detailed in this article are open to interpretation and modification. I have covered what I feel are the most important elements: context-sensitive interactions, performance and progressive enhancement.
(Smashing's note: Our brand new Smashing eBook Library is the place where good Web design eBooks live. All of the eBooks contain edited, curated, ad-free articles written by our well-respected authors. Subscribe today!)
Context-Sensitive Interactions
PATTERN TRANSLATIONS
In a responsive Web design project, each breakpoint defines the experience within a certain range of viewports: between the minimum amount of space and a maximum within the boundaries of that breakpoint. Some interactions that suit a breakpoint range over a large space — for example, a carousel with image thumbnails and pagination — might not suit the viewport boundaries defined by your breakpoints for smaller screens. The lack of available real estate could reduce the effectiveness of these superfluous navigation items if they end up obscuring the content or adversely affecting the user experience.
This is where the art of pattern translation comes into play. Pattern translation is the practice of taking the essence of a design pattern (whether it’s the content itself, the components or perhaps both) and ensuring that it applies across different breakpoint ranges and contexts.
One of the difficulties that browser vendors are experiencing with the Network Information API is that measuring bandwidth is a difficult task, in fact as Yoav Weiss writes – it may even not be worthwhile exercise.
Bandwidth, by its very nature, is variable over time… This variability is the major reason why making predictions about future bandwidth is likely to be highly inaccurate and error prone.
Additionally we need to consider the effect that latency can have on how a user experiences a product. Latency is the time between when the browser requests a resource from the server and when it starts to receive the server’s response. As you can imagine, as the number of requests grows, the latency increases. It’s a similar scenario to those awkward pauses in conversation that you see in television interviews between people in remote locations. Smashing Magazine’s own Vitaly Friedman has some excellent notes on this subject from his recent talk “Responsive Web Design: Clever Tips and Techniques.”
In Summary
We can never guess who our next visitor will be or what their context, device or accessibility requirements will be. It’s impossible. We can, however, be ready for and responsive to them. By not anticipating for the device and by embracing and preparing for the unknown, we can provide true, honest responsive products that autonomously provide a “best fit” experience to the end user.
Responsive Web design is an ever-changing methodology that helps us address the unknown. Responsible Web design practices are merely one of many strands of this methodology — old practices being adapted to new ones. Our work is never done. We make, we adapt, we learn, and we make again. To me, that is the most comforting thought about what we do.
