Responsive Design: Is it the Future Yet?
It’s been 10 years since people started talking about Responsive Design as the best way to achieve good web experience on mobile devices. Are we there yet?
In 2011, Jeremy Keith gave a talk entitled “There is No Mobile Web”. Since I had been spending the last 5 years chairing a W3C working group that created the Mobile Web Best Practices, this caught my eye.
Jeremy is always keen for a controversial title. What he was talking about was the nascent movement away from building bespoke UI for different screen sizes and capabilities and towards a unified web design approach that could respond to the needs of these differing devices: responsive design. The loose collective that formed at that time to promote these ideas was dubbed “Future Friendly” by designer Luke Wroblewski. Some of the voices in that group, particularly Lyza Danger Gardner and Stephanie Rieger helped to inform my views about where the future of the web on mobile lay. This movement was revolutionary because it was about abandoning the notion that a web “page” could be designed in a static way. For that to be true, the nature of web design itself — and what it meant to be a “web designer” — had to change.
In the last 10 years we have seen a broad adoption of the responsive approach. Go to any mainstream web site now and you will most likely see a page that is tailored to the size and shape of your screen. Change that size (for example, by resizing your window on desktop, or by changing your resolution or device orientation on mobile) and the content will reflow appropriately according to design decisions that are implemented in HTML, CSS and JavaScript on the client.
Responsive design is about to face a major test with the rise of new form factors of devices: folding displays are starting to make it clear that the rectangular slabs we currently carry around in our pockets are not the only viable industrial design for mobile phones. I think we are at the beginning of a (badly needed) revolution in device form factors — and folding displays are probably just the tip of the iceberg. Responsive design can be one important tool that developers can use to adapt their content to work on a device whose display folds, or where someone may be switching between an outward facing portrait-orientation screen and an unfolded landscape-orientation screen. That person will expect the content they were viewing on the portrait screen to be automatically reflowed, in a way that makes sense, for the landscape screen.
And being responsive to future devices isn’t just about the size and shape of your screen. It’s also about being responsive to device capabilities. Web apps that make use of your phone or laptop’s camera to capture images are now ubiquitous. Likewise for web apps that we allow to use our location. The rise of additional APIs such as Web Bluetooth, WebHID and Web Serial provide even more possibilities for the ways a web app can respond to the device and its environment. The growing popularity of dark mode is also part of this story – the web page can and should adapt the way content is displayed (which goes beyond background and colours) on devices that have dark mode enabled. Ensuring web pages are accessible is also an important part of the responsive design story.
This month, in connection with the work we’re we’re doing both in the Browser and in the Web Standards space around foldables, we’re going to be releasing a series of blog posts on the state of Responsive Design now. It’s clear to me that Responsive isn’t a goal that can be achieved so much as it is an approach and a set of tools that support that approach. What it means to be “responsive” will continue to evolve as the web and devices evolve — into the future.
