In Web design
The new responsive: Web design in a component-driven world | Session - read the full article about web design 2021, Web design and from Google Chrome Developers on Qualified.One
Youtube Blogger
(upbeat music) Hi, my name is Una Kravets.
I’m a developer relations engineer working on the Chrome team at Google.
I wanna talk to you today about responsive design.
This is what we think of today when we say the term responsive design.
We think of using media queries to change the layout as we resize the design from a mobile size, to a tablet size, to a desktop size.
But soon, this perception of responsive design may be considered as outdated as using something like tables for page layout.
We get a lot of powerful tools with viewport-based media queries, but we also lack a lot of finesse.
We lack the ability to respond to user needs, and we lack the ability to inject responsive styles into components themselves.
And when I say components in this talk, Im referring to elements, including elements that are made up of other elements, like a card or a sidebar. Those components make up our web pages.
We can use global viewport information to style these components, but they still dont own their styles, and that doesn’t work when our design systems are component-based and not page-based. The good news is the ecosystem is changing, and its changing pretty rapidly.
CSS is evolving and a new era of responsive design is right on the horizon.
We see this happen about every 10 years. Ten years ago, around 2010 to 2012, we saw a huge change with mobile and responsive design, and the emergence of CSS3.
So, it works out that yet again, the ecosystem is ready for some pretty big changes to happen to CSS.
The engineers at Chrome and across the entire web platform are prototyping, specking, and starting the implementation for the next era of responsive design.
These updates include user preference-based media queries, container queries, and media queries for new screen types, like foldable screens.
So, lets talk about some of these new technologies and what it means to be responsive to the user, the container, and to the form-factor.
Lets start with being responsive to the user.
New preference media queries give us the ability to style web experiences that align with our user’s own specific preferences and needs.
This means that preference media queries allow you to adapt your user experiences to your user’s experiences.
These preference queries include, prefers reduced motion, prefers contrast, prefers reduced transparency, prefers color scheme, inverted colors and there are a few more experimental preference queries too.
Preference queries help to build a more robust and personalized web experience, especially for those with accessibility needs, and they align with operating system preferences.
For example, users who have set operating system preferences for reduced motion might not appreciate loud animations when using their computer in general, so they also likely wouldnt appreciate a flashy intro screen, card flip animation, intricate loader, or other flashy animations while using the web.
Instead, we can design our pages with reduced motion in mind and create a motion enhanced experience for those who don’t have this preference set.
Here, we have a card with information on both sides.
The baseline reduced motion experience is a crossfade to show that information on the backside, while the motion enhanced experience is a card flip.
Prefers-reduced-motion shouldn’t mean no motion, since motion is so critical to conveying information online.
Instead, make sure to provide some solid baseline experience that guides your user and progressively enhance that user experience for those without accessibility needs or preferences.
Another preference media query is prefers color scheme.
This one allows for you to customize your UI to the theme which your user prefers.
On their operating system, whether it’s on desktop or mobile, users can set a preference for light, dark, or auto themes, which change depending on the time of day.
Prefers color scheme is a really fun media query because you can really get creative in the themes you design.
Its a new access for UI design that lets you represent your brand in another light.
(drums playing) And if you set your page up using CSS custom properties, swapping colored values is incredibly rewarding.
You would simply update your color theme values, such as background color, and text on primary to dynamically adjust to the new theme within the preference query.
To make it easier to test out some of these preference queries, you can use DevTools for emulation instead of opening up your system preferences each time.
But be aware when designing for a dark theme, it’s not just about inverting background and text colors.
There are a few considerations you might not realize.
For example, you might need to desaturation colors on dark background to reduce visual vibration.
Instead of using shadows to create depth and draw the element forward, you may want to use light in the elements background color to draw it forward.
And this is because shadows wont be as effective on a dark background.
Material design provides some great guidance on designing for dark themes on Material.io.
Dark themes not only provide a more customized user experience, but they can also improve battery life significantly in AMOLED screens.
Those are the screens were seeing in newer high-end phones and theyre becoming increasingly popular across mobile devices.
A 2018 Android study on dark themes showed a power draw savings of up to 60%, depending on the screen brightness and overall user interface.
The 60% statistic comes from comparing the YouTube play screen with a paused video at 100% screen brightness using a dark theme for the UI versus a light theme for the app UI.
So you should always provide a dark theme experience for your users whenever possible.
One of the most exciting emerging areas in CSS is container queries, also frequently called element queries.
Its hard to understate what the shift from page-based responsive design to container-based responsive design will do to evolve the design ecosystem.
Here’s an example of the powerful abilities that container queries provide for us.
We can manipulate any of this card’s element styles, including the link list, font sizes, and overall layout based on its parent container.
In this example, we have two identical components with identical markup that have different container sizes.
Both take-up space in this CSS grid layout, but each component fits a unique space allotment and then styles itself accordingly.
This amount of flexibility is something that is just not possible with media queries alone.
Container queries provide a much more dynamic approach to responsive design.
This means that we can now put this card components in a sidebar or a hero section or within the grid inside of the main body of a page, and the component itself owns its responsive information.
We do this using the @container property, similar to using a media query with @media, but instead @container queries the parent container for information, rather than the global viewport and user agent.
First, we need to set containment on the parent element, and then we can write a container query to style any of the elements within the container based on its size, using min-width or max-width.
In this case, we’re using the max-width and setting the links to display none as well as decreasing the time font-size when the container is less than 850 pixels wide.
Lets take this a step further.
Here we have a demo plant website and each of those product cards, including the one on the hero, the sidebar recently viewed items, and the product grid are all the exact same components with the same markup.
There are no media queries used to create this entire layout, just container queries.
This allows for each product to shift to fit the proper layout and fill its space.
In the grid area, for example, we’re using a min-max column layout to let the elements flow into their space and re-layout the grid when that space is too compressed, which means that it hit the minimum size, and that is the product grid of items.
When there is at least 350 pixels of space inside of that grid, the card layout goes horizontal by setting the display to flex, which has a default flex direction of row.
With less space, the product cards stack. Each product card styles itself, which is something that would be impossible if we were only able to rely on global and viewport styles.
Container queries give us true component-based styling.
It;s really, really cool.
Container queries have so many use cases, one of those being a calendar component.
You can use container queries to re-layout the calendar events and other segments based on the available width of their parents.
Here, were using container queries to change the layout and style of the calendars date, and day of the week, as well as to adjust the margins and font size on these scheduled events to help them better fit the space.
Then were using a media query to shift the entire layout for a smaller screen size.
This example shows how powerful it is to combine media queries, adjusting the global or macro styles with container queries, adjusting the container’s children and their micro styles.
So, now we can think of macro and micro layouts within the same UI component to allow for some really nice nuanced design decisions.
These demos are now available to play with behind a flag in Chrome Canary.
Go to Chrome://flags in the Canary URL bar, and turn on the enable container queries flag.
This will enable support for @container, inline size, and block size values for the contained property and the layout NG grid implementation. I’ve been playing around with container queries to build these demos, and it’s honestly really cool to see how powerful they are live in a browser.
And now you can try it out too. Flip on the flag, give @container a try, and let us know what you think.
Keep in mind this is still very much a work in progress, and you may run into some bugs.
And to build on container queries the CSS working group is also actively discussing scope styles to help with proper name spacing and collision avoidance for component styles.
Scope styles allow for pass-through and components specific styling to avoid those naming collisions, something that many frameworks and plugins, like CSS modules, already enable us to do within frameworks.
This spec would now allow us to write encapsulated styles natively for our components with readable CSS, without the need to adjust the markup or use a framework.
This is also something that Chrome will be prioritizing once the spec is finalized.
Scoping would allow us to create donut-shaped selectors, where we can specify where to keep a style encapsulated and where to break out of that scope style to refer back to a more global style.
An example of this would be a tab panel where wed want the tabs to get the scope style and the panel within the tabs to get a global style.
The last point I want to bring up in our conversation about the new era of responsive design is a shift in form-factors and the growing possibilities of what well need to be designing for as a web community.
Keep in mind, this stuff is only just on the horizon and theres still so much to think about in terms of how form-factor will evolve in the future.
What happens to CSS when we bring it into a virtual world, for example? Foldable or flexible screens and designing for screen spanning is one example of where we can see a form-factor shift today.
And screen spanning is yet another spec, which is being worked on to cover these new form-factors and needs.
To play with this for using an experimental media query for screen spanning, which looks like @media, and then in parentheses spanning, we’re setting up a grid layout with two columns.
One has a width of a sidebar with variable, which is 5rems by default, and the other is 1fr.
When we have a dual screen that has a single vertical fold, we’re going to update the variable value of sidebar width by the environment value of the left folds.
This enables us to create a layout where the sidebar, or navigation in this case, fills the space of one of the folds while the app UI fills the other, and this prevents a crease in our UI.
Heres what that looks like.
You can test out foldable screens in Chrome DevTools emulator to help debug and prototype screen spanning directly in the browser today.
Exploring UI design beyond a flat screen is yet another reason why container queries and scope styles are so important.
They give us the opportunity to silo component styles, from page layout, and global styles, and user styles, enabling more resilient responsive design.
This means we can now design macro layouts using page-based media queries, including screen spanning nuances, along with micro layouts, using container queries on our components, along with user preference-based media queries to customize user experiences based on their unique preferences and needs.
This is the new responsive.
It’s combining macro layout with micro layout, and on top of all of that, its taking user customization and form-factor into account.
Now, any of these changes alone would constitute a considerable shift in how we design for the web, but combined, they signify a really big shift in how we even conceptualize responsive design.
Its time to think about responsive design beyond viewport size and start considering all of these new axes for better component-based and customized experiences.
The next era of responsive design really is here, and you can already start to explore it yourself.
And for now, if you want to level up your CSS game and maybe revisit some basics, my team is launching a brand new, completely free CSS course and reference on web.dev.
You can access it via a web.dev/learnCSS.
There you’ll find 24 modules with demos, check-ins, and samples for all sorts of CSS topics like color, layout, Z index scrolling, and so much more.
You can start from the top and go through each of the modules one by one or you can use this page as a reference when you run into a CSS question or bug.
We’re really excited to launch Learn CSS today to help you level up your web styling knowledge.
So, check out Learn CSS on web.dev.
I hope you enjoyed todays overview on the next era of responsive design and some of the primitives that will come along with it.
And I also hope youre as excited as I am about what this means for the future of web design.
It opens up a huge opportunity to us as a UI community, to embrace component-based styles, new form-factors, and create user-responsive experiences.
I can’t wait to see what you build.
(upbeat music)
Google Chrome Developers: The new responsive: Web design in a component-driven world | Session - Web design