When using the term responsive design, we think of using media queries to the change the layout from a mobile size, to tablet, to a desktop size. However, with anything these designs soon might be considered as outdated; similarly, just as using clip art in Microsoft word.
Google has a lot of powerful tools with the viewport-based media queries, yet these tend to lack a lot of finesse. They lack the ability to respond to user needs, and they lack the ability to inject responsive styles into elements themselves. These types of elements are what make up web pages. Using a global viewport information can help design these components or elements, but they still won’t own their styles and because of that it won’t work due to the design systems being component-based rather than page-based. With that said, there is good news that our ecosystem in the digital world is always changing.
CSS is rapidly evolving, and the new era for responsive design is right around the corner, if we review the timeline these changes happen about every 10 years. In 2010 to 2012 the emergence of CSS3 was a huge change in a mobile and responsive design and now ten years later our world is ready for the next big thing. Engineers at Chrome and the entire Google team are starting their next steps in trying to begin the “new era” by prototyping, specking, and implementation in responsive design. Some of the updates Google is working on include, user preference-based media queries, media queries for new screen types such as foldable screens.
With new preference media queries on the horizon, the hope for that is to provide the ability to style web experiences to correlate with user’s specific wants and needs. This would allow for media queries to adapt to the user allowing for a personalized experience that matches the user. Some of these preferences include reduced motion, contrast, transparency, color scheme, and inverted colors. These new features are being designed to help people with accessibility needs and will even align with the operating system preferences.
One of the most anticipated addition to CSS is container queries, or sometimes better known as element queries. For those unaware of what container queries, they are queries that help us style content based on its individual properties such as height and width, rather media queries help us style based on web pages. Container queries provide a much more thorough and dynamic approach to responsive design.
The final part of this “new era of responsive design” that is key to touch base on is the shift in form-factors and the endless possibilities that the web design community will need. With so many parts of the responsive design forever changing, the options keep expanding and then some. Some questions people raise are ‘What will happen to CSS if brought into the virtual world?’ One example many have, are foldable and or flexible screens that are being designed for screen spanning.
With these all-in minds, the combination of all these factors is leading to a really large change for the web design world as we know it. However, Google wants us as consumers to think bigger than just viewing responsive design in a viewport size. Rather all of these new shifts that are coming our way is creating for a better component-based and customized experience. The next era of design is here and all of us have the ability to start exploring into the future of web design.
Try out this completely free CSS Course with 24 different modules with in-depth demos, samples, and more on topics of CSS at, https://web.dev/learn/css
