A New Era of Responsive Web Design is Coming into Focus – It’s Called Component-driven Design
If you’re a web design professional, when you hear the term “responsive web design” thrown around today the first thing that likely crosses your mind is related to responsive images, the screen spanning nuances of fluid grids and CSS media queries. Soon, this perception of responsive web design may be considered just outdated as using traditional HTML tables to construct the user interface and other elements within web pages.
Viewport-based CSS media queries do offer some powerful tools for web designers, but they lack a lot of finesse when it comes to creating a truly flexible and responsive web design. Media queries cannot respond to individual user needs and lack the ability to inject responsive styles into components themselves.
After two decades in the web design industry, there is one common trend I can always count on – change is always just around the corner. Every decade or so there is a fundamental change in design thinking or our web development approach that dictates how websites are designed and built. When these changes occur web developers rethink their approach and develop new best practices and CSS tricks while designers find new ways to evolve the modern responsive design concept and explore new ideas and aesthetics.
Where We Started – Fixed-screen Web Design
When the internet made its way into people’s homes en mass around the turn of the millennium websites were incredibly basic. The needs put on websites and early developers were understandably simple and long before the CSS grid or responsive images were invented all sites were created relatively equal to fit a single viewport of about 640 by 480 pixels.
Funny to think that this viewport is now smaller than the average mobile phone screen size – but high-resolution displays are mostly responsible for that.
In the early days, web design experts didn’t need to worry about variable viewports, devices or technologies and early browsers didn’t even have integrated scrollbars. This required all sites to feature scrollable content within tables embedded in the tiny user interfaces.
Web design evolved slowly at first, gradually growing into the common 800 by 600-pixel format where we stayed comfortable for quite a while. Then something happened that turned the web design industry on its head. Internet-connected mobile devices were invented and opened the doors to an entirely new flexible web design approach and thought process.
Responsive websites quickly evolved from a concept to reality in a few short years as technology began to grow exponentially. With the launch of the first iPhone responsive web design became a necessity as the market exploded and businesses began to take advantage of offering a mobile version of their website. The catch was initially mobile users had to request the mobile version by clicking a link on the desktop version of the site. This essentially loaded a separate website that wasn’t entirely responsive or flexible but was at least designed strictly for use on mobile devices.
With the rapid success of mobile web design, everyone adopted this new design thinking voluntarily – web designers, developers, business owners and even search engines. Today, Google prioritizes mobile responsiveness in its ranking algorithm.
By 201o designers were finally given the tools to craft truly responsive web designs with the invention of web fonts and the evolution of CSS3. Two years later in 2012 media queries and the CSS flexbox layout landed in the web designer’s toolbox and really fueled the engine of creative invention by allowing designers to create responsive design assets, such as flexible images and layout elements that did not just respond to fixed breakpoints, but actually adapt to virtually all of the various screen sizes we consume content on today.
A History of CSS Styles
Where We Are Now – Responsive Website Design
As soon as media queries were made available to CSS3 the term “Responsive Design” was coined by Ethan Marcotte in 2009. Since then, web designers and developers have been creating layouts for the web using the responsive web design approach to create an immersive website design that adapts in real-time to the seemingly bottomless pit of mobile devices and endless screen sizes available to users today. The catch with responsive design is that the whole screen responds at the same time.
Before the invention of fluid layouts when mobile phones didn’t yet understand media queries or JavaScript the design concepts of mobile-first and progressive enhancement became popular approaches for smaller screens as there was simply a lot of CSS that just wasn’t supported.
Today, when we refer to responsive web design, we think of a web page or fluid layout that adapts to the browser dimensions, screen size and the limitations dictated by the max device width. We use media queries to change the entire page layout together and resize the design, top to bottom, for the desktop and mobile version.
This approach works, and it works very well, but it does have some significant user experience implications that designers and UX experts are now beginning to challenge with a new approach to responsive web design aptly named component-driven design.
Where We Are Going – Component Driven-Web Design
The responsive web design approach we use today could very soon be considered outdated, much the same way we felt about transitioning from the original tabled-based HTML development of the 90’s.
The challenge that web designers are trying to overcome right now is that the current responsive web design methodology is essentially a one-size-fits-all approach that treats the entire page and user experience as a whole without any personalization.
We are provided many powerful tools with viewport-based media queries, but we are missing the ability to add finesse to our page designs and create an experience that is unique to the user, their environment and the actions they take on the page. We are also lacking the option to inject responsive styles into design components themselves.
Components are the elements on the web page that could be made up of a collection or grouping of other design elements. If we think about components as being made of building blocks and apply that concept to the construction of common UI elements like carousels, cards or content blocks, it’s easier to understand how it may be possible sometime soon to inject responsive design styles into individual components or building blocks to customize and tailor the experience to a user’s needs rather than applying a fixed set of styles and rules to the entire layout of the page.
We can use global viewport information to control style elements like font size and max-width parameters or adjust the background image and the grid layout of these components, but they are still not in control of owning their own styles. This limitation makes it even more difficult when our responsive design systems are component-based, and not page-based.
The good news is that web designers and developers around the world are working hard to change the responsive web design ecosystem. The way responsive design professionals are approaching responsive web design is changing fast despite the fundamental design thought process alterations required to change how we think about responsive design and how components adapt to their surroundings.
What’s fueling the fire of innovation right now is the rapid evolution of CSS styles and flexible layouts. The advances made here are quickly ushering in a new era of responsive web design that is just beyond the horizon. Now, right on queue, just over a decade after we were introduced to the radical new concept of responsive web design we are witnessing the evolution of the responsive design ecosystem once again.
To understand this paradigm shift and prepare for the wave of changes coming down the pipe let’s look at the types of changes we can expect within the responsive web design movement and how that might change how we approach the concept of responsive design.
Users could set preference-based media queries
It’s entirely possible that we could see preference-based media queries that would allow users across any desktop or mobile device to choose their own experience essentially allowing the interface design to be responsive to the user as well as various screen sizes. Preference-based media queries will give a web designer the ability to style web experiences that align with our user’s specific preferences or needs within the web platform. This would allow us to adapt our UX design to be specific to each unique user’s experience.
These preference-based media queries could include:
@prefers-contrast
@prefers-reduced-transparency
@prefers-color-scheme
@inverted-colors
These preference-based queries would allow web developers to build a more robust and personalized website experience that is carefully tailored to each user’s needs, especially for those with accessibility needs. The advent of preference-based media queries could help advance accessibility compliance exponentially in the next few years.
Preference-based media queries would allow designers to adapt the user experience to be specific to each and every user’s preferences.
It is quite possible that this media query could respect preference settings a user has set in their operating system or web browser settings. For example, if a visitor indicated in the operating system on their mobile device that they prefer reduced motion, they likely would not appreciate excessive page transitions or animations within a website. This media query could allow the web page to respect the user’s preferences while still allowing other visitors to experience the transitions and animations intended by the designer.
Another popular media query is @prefers-color-scheme which allows both desktop and mobile users to experience the interface design in either light or dark mode, based on the preference setting in their operating system. This feature would not have to rely on a user-initiated UI switch to use to change to dark mode as it would just happen automatically.
Container queries could reduce the limitations of the design system
One of the most exciting emerging features in CSS3 is called “container queries” also referred to as “element queries.” It may be impossible to understate what the fundamental change from page-based responsive design to container-based responsive design will do to help the responsive design ecosystem evolve and container queries are at the core.
Container queries provide a dynamic approach to how we plan, design and develop specific components as the component itself would own its responsive information.
Container queries would allow the web community to set rules based on the parent container or parent element, rather than the entire user interface. What these new media features would do within a responsive website is allow containers or modules to become plug-and-play elements that could be interchangeable throughout the entire website without having to reconsider other environmental aspects like screen size or adapting for mobile devices or desktop browsing.
This means that any design component or module would become a self-contained asset free to use throughout the entire website.
Why Do We Need Component-driven Design?
Responsive website design has brought the web to just about every connected screen that people engage with today. Website designers and creative developers have pushed the design approach forward with creative thinking, bold ideas and a certain fearlessness to explore, test and iterate upon their ideas to make online experiences more engaging, more accessible and more intelligent.
We’ve reached the limit of what the current responsive design methodology can offer us and many businesses are now relying on integrating third-party applications or software into their digital marketing products and websites to bring personalization features that simply are not available through the web technology we have today. These makeshift solutions work to a degree, but they’re not ideal. Most are slow or clunky and interfere with other performance metrics that impact the search engine optimization of the website with Google’s focus on speed and performance.
The New Responsive Web Design
If we incorporate these component-driven features into the design system and change the way we approach website design as a whole, we can use these features and many more to improve the user experience for each and every visitor that lands on your website. We can provide them with truly personalized experience that increases engagement, conversions and ultimately enhances that person’s perception of your brand.
No longer would we be designing for groups of users. Our understanding of the term “audience” would change as content and experience would become hyper-focused for an audience of one – not many.
Component-driven responsive web design would make the web truly portable and adaptable for devices that are not even invented yet. Rather than playing catch up and designing within the confines and limitations of today’s technology, we would be designing solely for the user – the audience of one.
