The new responsive design

Key Takeaways

[Music] a few years ago a group of engineers set about rethinking chromium support for html css and graphics which led to an effort called rendering ng an ambitious refactoring of chromium's rendering engine this work has now largely landed and it's enabling a major evolution in web user experience design to tell us more i'll hand things over to youna thank you everything we've talked about today comes back to the user experience privacy measurement next gen web capabilities they all work together to create better experiences that align with our vision for the web while giving developers the tools and capabilities they need to build them so today i'm excited to share a ton of updates and changes coming down the pipeline for ui styling and devtools first let's talk about responsive design and how it's evolving responsive design is no longer just about making sure an interface looks good on both desktop mobile devices developers now have the tools to really create customized user experiences based on personalized user preferences in a component driven architecture model we're calling this the new responsive and it includes being responsive to the user with user preference queries and modalities like dark mode and prefers reduced motion being responsive to new form factors like foldable devices which allow for multi-display functionality and being responsive to other components on the page with container queries this is a feature that's been highly requested by developers we've been working with the css working group to spec this feature and have been able to unlock the implementation through recent changes in the chrome rendering engine the new container query spec lets you access a parent element's width to make styling decisions for its children you can even nest container queries and create named queries for easier access and organization let's take a look at an example here i have a responsive add to cart button that i can place anywhere in the container then when i put it inside of this product card which is also a container i can query the product card itself to restyle the already responsive button and shift it from being center aligned to left aligned this might look simple on the surface but it's something that wasn't previously possible without a lot of heavy scripting which would significantly slow down your page we're working with the open source community to provide a polyfill for container queries as we build the feature into the platform using container queries makes your interfaces much more flexible components own all of their individual responsive styles right where they are and don't rely on the global viewport to adjust styles this is a huge paradigm shift for component-based development and we're excited to see how you make the most of this new feature if you want to try it out container queries are now available for testing behind a flag in chrome canary and because of this big shift we've been working hard to support you by providing dev tools that allow you to debug and style with container queries as the feature launches here you can see that devtools is pointing out where the container for the child is and highlighting the styles that are being applied by it speaking of responsive dev tools we released several new tools this year for better layout debugging layout tooling for grid now allows you to add names to specific grid lines and also shows you the size of your grid areas i also love the dynamic new tools for flexbox and grid these let you actually see what different property values do on the page and give you the ability to easily change layout rules with the click of a button these new dev tools are designed to make css layout easier to visualize and understand which frees up more time to build new features for your users and less time looking up the differences between justify and align another way we're helping simplify the process is by launching web.dev patterns a collection of off-the-shelf ui patterns you can use in your web projects to help you quickly get started with building the base of your ui we've added layout patterns for everything from large full page spreads and card sets to smaller layouts that can live within those larger layouts such as the cards themselves all of these patterns use css grid flexbox or container queries to showcase how quickly you can pick up these tools and build interfaces from the ground up we're also partnering with jeremy keith of clear left to launch learn responsive design on web.dev this is a free online course with everything you need to know about designing for the new responsive web of today you'll learn about theming art direction logical properties for internationalization utilizing preference queries and so much more today we're launching the first few course modules at web.dev learn slash design with more to come in the following weeks we're also updating our learn css course with six new modules learn css is another free evergreen course and reference on web.dev where you can level up your css knowledge and test your skills we launched the first 24 modules at google i o this year and now we're introducing lists backgrounds transitions text and typography media queries and more be sure to check out those new modules and dive in whenever you're ready we're also working on rolling out some new features in css in addition to container queries our team has been thinking about how to introduce scope styles and cascade layers they're not ready just yet and we look forward to working with you and the web community over the next few months to push them forward we do have a particularly fun new api that's ready for exploration and that's scroll timeline previously you could create css animations that had a time basis and moved over a length of time scroll timeline lets you set scroll based offsets and timings for animations instead that means you can set an element to animate as you scroll down or across a page pretty neat you can explore scroll timeline using the experimental web platform features flag in canary we have another exciting addition that recently reached its first public working draft and that's css nesting nesting is a syntactic sugar that brings one of the most popular features of css preprocessors to the web stacking your styles for a cleaner developer experience while the nesting spec will let you keep your styles tidier and more encapsulated we recommend that you don't go more than three layers deep to ensure the best performance we've also launched the size adjust property for typography this is particularly useful for preventing cumulative layout shift for core web vitals as you can adjust the default font to better match your web font this causes less jank as the web font loads in and last but not least accent color just landed in chromium and firefox stable accent color is a one-line css superpower that gives your form controls like checkboxes and radios a theme color to match your brand we get a lot of feature requests from developers and users alike but one is a clear favorite especially for those of you who love to browse the web at night dark mode is a popular feature we're really excited to build on and not just because you asked for it but because its impact extends beyond the user interface dark themes have shown measurable battery life savings over their light themed counterparts on oled devices in our lab study with a single pixel 6 device we found an indication that at 60 brightness dark theme used 11 percent less power than light themes for led screens and it's a feature that users love too when twitter released the first preview version of their new twitter progressive web app everyone said wow it's new and fast but where's dark mode so they surveyed users on what they needed to add and user said three things dark mode an emoji picker and more dark mode so it's kind of a big deal to a lot of very vocal users to create a dark theme we recommend using css custom properties and the prefers color scheme media feature which is supported in all evergreen browsers this lets you swap theme colors in and out based on what your users prefer a core part of our new responsive framework and set of goals if you need help getting dark mode set up the way you like it there's some excellent new guidance from the material design team by their research on building beautiful dark themes this includes how to adjust depth by using lightness instead of shadows how to adjust color vibrancy to reduce visual vibration and more but to make it even easier for your team chrome is working on a machine learning aided auto dark algorithm feature this feature will include auto darkened websites along with a few affordances to opt out of the auto dark functionality on a more granular level we're still in the early stages of future developments and we need your help to get it right to try it out now you can open the devtools rendering panel in chrome canary and enable auto dark mode emulation check out the link to learn more and to give us your thoughts now i'll pass back to ben one last time thanks yuna you know we've seen a lot of change in the web over the past year and we're still more optimistic than ever about the future of the platform across the areas we just talked about and more in the years ahead you can expect to see us continue to push hard to make the web more private and powerful and to provide developers with better tools and guidance to create top quality experiences for people all over the world [Music] you