Goodbye Responsive Design
A lot is changed in the last 15 years, in terms of 'digital' it's like an era has gone: devices, experiences, technical possibilities. New paradigms exist, new definitions are needed.
Today it’s possible to create interfaces that until a few years ago would have been unthinkable.
Look back at how Cascading Style Sheets (CSS) evolved: when the world wide web was released in 1996, the CSS was responsible to support HTML as a content-delivery-vehicle, having semantic meaning. Also it was the only CSS available, of course.
But, later in 1997, when the first draft of CSS2 was released, with many new things, and it became a W3C recommendation (officially in May 1998). Only one year more and, in 1999, the first version of CSS3 was already ‘under development’, but it tooks a while to become the version most of us are familiar with, nowadays1.
So, after more than 20 years, is it time to redefine the baseline?
Everything started with one screen-ratio
At the beginning, when the word ‘UX’ was still unknown, interfaces has to deal with only one kind of screen, the famous 640x480px. Soon, with the release of CSS3 we got the media queries and also the term ‘Responsive Design’2.
Interfaces become more complex and, as a designers, we went from a single interface (static and sometimes without scrolling) to a multitude of screen sizes, aspect-ratio, navigations patterns and so on.
For over a decade we have built layouts for the web with responsive web design approach, in order to design assets that adapts the UI on a variety of devices and screens. Anyway, only few years later the concepts of mobile-first and progressive enhancement became popular. So the responsive-way to design stayed, but in ‘kind of’ reverse.
What’s going on?
As you already know (or may have heard), the tech ecosystem is changing rapidly and requires a bit of a mind-shift in the way we think about designing and styling components, but also on how we adapt them to different contexts.
Let's see what we can expect and how it might change our approach and how we view our interface design process.
1. New CSS media queries
Let's consider for a moment only the 'traditional' devices that we use every day, such as laptops (or desktops) and smartphones. Modern HTML and CSS allow you to get a very powerful tool with viewport-based media queries. The fifth level of CSS media queries brings a big focus on personalization. It introduces five types of media queries (color-scheme, contrast, reduces-motion, transparency and reduced-data) that lets you tweak your website to whatever the user prefers!
Anyway, it also lacks a lot of sophistication because it's a versatile solution and the same for all users. There is no ability to meet the needs of the user or inject a reaction style into the component itself.
2. Foldable devices
As things change and expand the form factor, like the new types of flexible screens, we need media queries to embrace and fit our design to all these scenarios. It’ a never ending ‘test and learn’ process that is just started, considering how form-factor might evolve in the future.
Considering the foldable screen example, new media queries can play a role in prototyping, allowing you to target screen-spanning and define better how the content need to change, according to its new ‘screen surroundings’. For example, you can place a sidebar (or menu) on the left screen and scroll through content on the right screen.
3. Mixed and Virtual reality
Putting UX in VR (virtual reality) and MR (mixed reality) seems a very vague and complex topic, but it's important to build on strong guidelines that (could be) applied in all situations, regardless of the context, hardware, or location in the XR environments.
Headsets like Microsoft’s HoloLens and Meta’s Oculus are already making big moves into the broader applications of mixed reality.
More and more, we will asked to consider new elements in our design process, like arms length, body movement and legibility horizon3 just to list few of them. UX has a crucial role in supporting organisations and users to successfully adopt AR and VR experiences as part of their digital lifes.
Responsive is no more a ‘thing’
The word ‘Responsive Design’ is going to disappear. The web goes way beyond computer browsers and we find ourselves in a world with more and more devices. Nowadays, web design certainly means responsiveness. Below that, it's not well designed and ignores the modern web world concepts that users think and you know. On the other side, the focus of the design is no more about responsiveness but about a good balance between form and function, on every device.
For instance, thinking only about VR, designing a good balance doesn't just mean placing the CTA in the right position. Even something as simple as buttons need to be placed at the right distance from each other, because they only work best if they are ‘big targets’ placed far apart and easy to aim for. Also, when you consider interactions, you need to design interfaces that fit the human body, because no one will use a VR UI that requires excessive head movements, giving back some motion sickness.
Since web design is constantly evolving, technology advances and web standards grow, what we call ‘best practices’ also change. So, as of today, providing a good design means meeting the needs of the users anywhere they are and on the device they want to use (someone said Hololens?).
Conclusion
Today, it’s no more just trying to fit the things to different screen sizes. Instead, today we need to build digital assets in a module-driven way, designing them in order to make them suit for a wider scenario.
It’s still OK to call this ‘responsive design’ (the term still makes sense) but it’s important to educate your public (colleagues, co-workers and clients) about what it means today.
Ask for and provide something that is called responsive is no more a comprehensive definition, cause ‘responsiveness’ has changed and new and amazing things are already on the way.
Thanks for reading! 🙏
If you feel like talking, connecting or just want to see what we’re up to, you can visit italianswho.design or contact us on info@italianswho.design
W3C started to formally recommend CSS3 only in June 2011
Ethan Marcotte coined the term in 2009
The distance at which we are comfortably able to focus and read