Responsive web design changed the way that we think about the web by allowing UI components to adjust in response to viewport conditions. While responsive design was a major step forward for the web in general, it has one glaring limitation.
The Problem:
Responsive design depends on global viewport conditions that don’t always reflect the local context.
For example, even though the viewport might be 2000px wide, our shortcodes and widgets could be displayed within a 400px sidebar. The limitation of responsive design prevents developers from targeting their styles to specific contexts like the one described here.
This limitation is even more problematic for WordPress developers who may be designing for contexts that are completely unknown. Our shortcodes and widgets could be placed anywhere within any layout, so how can we possibly base stylistic decisions on the global viewport? We can’t.
The Solution:
Contextual design differs from responsive design by removing the dependency on global conditions. In doing so, the component becomes fully independent and far more capable of adapting to various contexts. Through the use of element queries, contextual UI components become “self-aware” of their own dimensions and can therefore apply the most appropriate styles for any situation.
To revisit our example from above, a contextual UI component would “know” that it exists within a 400px sidebar and apply appropriate styles for that width. These might even be the same styles used for mobile devices. The point is that devices and viewports no longer matter. Only context matters!
In summary, the audience will walk away from this discussion with an understanding of:
– The current state of responsive design and its one glaring limitation.
– How contextual design addresses this limitation.
– Why contextual design is especially important to WordPress.
– Best practices to follow when designing for unknown contexts.
– How to take advantage of element queries and create contextual UI components today.