 Hi, I'm Adam Argyle and I am stoked to talk about how to create personalized web experiences. I'll be presenting seven moments of tailored UX with the new responsive, because it's all about that user. And there are tons of ways to tailor a web page to a user with the three main categories of the user's preferences, the device capabilities, and the interface they're working with. Each packed with unique micro-interaction opportunities and we'll be discussing many in this talk. The first moment is that moment where the page loads and is using all your font preferences. The result is a unique user-tailored reading experience. This is supported by features like Chrome settings for user-preferred font size, CSS relative units for working with the user's font size, and even a brand new reader mode in case the site ignored their preference. In browser settings, users can set their preferred font size. This is just like setting it in the operating system, like my parents have theirs at the largest that it goes. This preference sets what font size 100% means to a web page. This is not a new feature, but it's often forgotten, so I wanted to point it out here. It also rolls nicely into relative units. This video demonstrates how the user's browser font size preference and relative CSS units work together. See how the preference for larger makes to REM larger and smaller makes it smaller. Also notice how the 32 pixel example doesn't work with the user's preference at all. Pixel font sizes are not tailored to the user. This year we have more than just the REM available for working with the user's preference. Heat, Rick, Rex, and RLH. It doesn't have such a cool name. Three new relative units. The R stands for root, a signal to you that these units build upon the root font size preference, like we showed earlier with REM for root M. RLH is root line height, a unit that represents the document's line height. Rex is the root X height. Watch as the red line zooms in right over the lowercase X in the Google I.O. title. And Rick is the root IC unit. The IC unit is based off the water symbol in Japanese called Mizu. It's an inline fluid character size. Get it? Water? Fluid? Yeah, let's move on. And also meet Read Anything, a new sidebar page view mode. It distills a web page into a cruft-free document and adds levers for the user to customize the font, the colors, and more, very much like an eReader do. Users consuming content their way, it's perfect. Our next tailored web moment is that moment where the page loads and matches the operating system colors. To result, a user tailored theme experience. This is supported by CSS accent color features, which represent the user's system color preference, the prefers color scheme media query, for knowing if a user prefers light or dark, and the forced colors media query, for knowing if a user has activated a forced colors mode. Surprise and delight a user with accent color. Tailor the UI to their favorite color. See in this video as I change the color in my system settings and the UI elements update. There's also a new addition to this CSS feature. Two new color keywords, accent color and accent color text. Again, I'm changing my system color, but this time the UI is updating a custom-styled button. I'm using accent color as the button background and accent color text as the text color. This extends the integrated theming to more elements, and users will feel more familiar with these colors and you'll be totally disguised as a built-in app. Next up for tailoring to the OS is the prefers color scheme media query. It's super popular now to offer light and dark color schemes, which I'm super stoked about, and this media query allows CSS authors to check which preference a user has and adapt the page to it. As a user who often browsers the internet at night, I really appreciate when a page loads in dark mode so that I don't get flashed with a bright white page like it's, you know, Dracula getting hit with the sign. That's me in my bed sometimes. And some users have much stronger preferences. Neither light or dark themes contrast enough for their vision. So they'll set the OS to a forced colors hide contrast mode. And here's what the Google homepage looks like without enabled. It's kind of retro and sweet, if you ask me. And sometimes I do this to a page that doesn't support dark themes because it'll force one. Now, my site does support a dark theme, but for example, let's force my website. I'm using the Chrome DevTools rendering panel to simulate the operating system changing between light and dark plus forced colors OS preference combinations. You can see it does indeed force a higher contrast light theme or a forced high contrast dark theme. The only adjustments I made are when I used shadows, I used the forced colors media query to swap to a border instead. This leads us well into the next tailored web moment. That moment when the page respected your preference for reduced motion. The result is an operating system settings tailored user experience. This tailored experience is supported by the prefers reduced motion media query for reducing distractions or discomfort around animation. Turns out classrooms use this to keep students from being too distracted too. And the prefers contrast media query, which can be enabled by users with low vision or just someone with situational low contrast vision, like being on a sunblasted beach with a washed out display. The prefers reduced motion media query is fun to tailor user experience with. In this video demo, I show how a swirling and whirling colorful effect can be easily reduced to a colorful staggered crossfade effect. Now they're very similar effects, but one won't make someone sick. Reduced motion doesn't mean no motion. Prevent eye strain, assist users in bright environments, and more with the prefers contrast media query. Here I demonstrate a light and a dark adapting theme that also accommodates high contrast preferences. Imagine really quick that your site is the first to users ever had where their motion or contrast preference was respected. You'll be remembered. Pivoting from user preferences, now let's talk about device capabilities. That moment when you notice that page has new vivid colors on your new device. As a result, a user device tailored experience. Tailoring experience to the wide gamut color capabilities of a device or its ability or inability to hover on elements. HDR, UHD and 4K UHD are all features of displays these days. The tech is getting better and better and a lot of it has to do with color. sRGB has served us well, but it's looking desaturated next to newer, wider gamuts. This demo shows sRGB on the left and display P3 on the right. You may not see a difference, but on device, in your hand, and not through the compression of video, it can be stunningly different. And it's not just about more vibrant colors either. Here I use the new OKLCH color space to generate a set of palettes based on just a hue. Since the color space has reliable lightness, it generates consistent palettes. OKLCH is uniquely positioned for both high vibrancy and consistency, ideal for design systems. And also, here's an example of the color quality differences between standard definition versus the high definition colors used with gradients. Notice how newer color spaces are more vibrant and smooth. You can also specify which color space the gradient is created within. New color spaces can be more reliable and offer nifty features to help you tackle various color use cases. Also, don't forget, the Dynamic Range Media Query can assist you in upgrading your colors to HD if the user's device is capable. Tailor to that user to that user's device. You can also detect if the user's device has the ability to hover. Here I use the Hover capability query to put labels underneath icon buttons if the user can't hover. If they can hover, the UI then shows the same label prompt as a passive tooltip. Inclusive UX, tailored to a user's device features a lovely moment. Next moment, number five, is that moment when a page automatically loads in the language you use every day. The result is a user-tailored language and content experience. This is supported by the browser setting for a preferred language sent with each request to a server, logical properties which allow specifying sides of a box in a universal way and container queries, a size query that extends to any element in the page and not just the viewport. Just like setting a preferred font size for reading, users can specify their preferred language or languages. They can even prioritize their preference. This preference travels with the user everywhere they visit on the web and websites can make server-side decisions about it. On my website nerdy.dev, the dates and times are adjusted to each visitor, making it feel like the post was local to them. This is done by reading their language preference from the request headers on the server and adjusting the strings rendered in the HTML. Just another cool layer for a visiting user to feel like the site is tailoring to them, this time server-side. Another moment for tailoring a design to a user is with logical properties and adaptive alternative to physical properties like left, right or top. Write them once, care less and reach more users all with one change to your CSS. Here's my site translated and adapted to AirBake. I didn't have to adjust any styles for it. I just wrote using logical properties. Container queries can also be used like logical properties by querying inline size instead of width. While media queries allow checking the viewport width and height, container queries can check the inline and block sizes. In this demo, I show how container queries appear to adapt to the window, but they're actually adapting to the available inline size. This is why changes to the height of the document do the same layout adapting that width did when we were in Latin left to right mode. Look at container queries helping out in more ways than maybe you initially anticipated adapting layouts to users' preferences. Another moment is that moment when a web page's keyboard accessibility allows you to complete a task with the results and accommodating user experience for a user's input type. This is supported by media queries like this one for the user's pointer type, the accessibility tree dev tool providing a summarized glance at what a screen reader may be seeing and semantic markup helping your content stay fresh like being findable by AI. The pointer media query allows detecting if the user has a high precision, fine pointer or a low precision pointer course like a finger. This can easily be used to increase the hit area of checkboxes and other UI elements while the user is using a finger and not a mouse. Users will appreciate larger hit areas for their decently inaccurate fingers when using your UI. And also, while you're tailoring UI for touch, tailor to the user's assistive technology too. You can preview how your UI will interact with assistive technology via the dev tools accessibility tree view. This changes the elements panel into a view of what assistive technology has gathered from your HTML. Check it out, verify information, or add some if it's missing. This can take a lot of the guessing work out of what screen readers will be providing users. Also, add another reason to the stack for why semantic HTML is great, findable by AI. Here's Google's Bard. I've asked it to summarize the latest content from my site Nerdy Dev, and it did a great job in like one second. It's pretty hot, and this is because my HTML made it clear enough for even robots to understand and discover. Users will appreciate being able to consume your content their way with their tools and their preferences. And next, our last web tailored UX moment, that moment when page elements adapt, not just the page. The result is a micro-tailored user-centric experience. So far, much of the tailored experience has been window-based, or like globally known information to the page. This is micro-tailored UX moments, additional tailoring opportunities for users' specific content they got, the layout they got on the device that they have. Tailoring it after many of the other tailoring moments have happened. This is the new responsive. And this is made possible by container queries, which allow adapting to smaller sections of a page, style queries, which enable adapting colors and layout to the style of a parent element, and the Has selector, which can adapt containers to the type of content that they have. So here's an e-commerce card component built by my colleague, Unicravitz, that has multiple elements using container queries to adapt the card itself, the Add to Cart button, and the Shopping Cart icon. There's more room than go landscape with a super detailed cart icon. There's less room, go portrait, and reduce the detail. Lots of great micro-interaction opportunities here to tailor a component to a user and their unique layout. With container queries also comes style queries. Here in this demo, each card adapts to a custom property set on it. If the CSS variable says, any is true, then change the gradient and the icon to match being sunny. So we're not just tailoring a component to the space available, but the styles that it's been given. That's so cool. And then there's the Has selector, which has many superpowers, but in the context of micro tailoring UI to a user, it allows adapting styles to the type and number of HTML elements found in the document. So here I show a component that changes its layout. If it's featured, if it's got a header image, or if it has a product image, each change to the content results in a different style and layout. Content adaptive design. CSS is so powerful and capable right now, it's very exciting for creating these adaptive and tailored user experiences. This helps us author experiences with one code base, but deliver many unique experiences. The web adapts to you, where you are, and what device you're rocking. I hope you feel empowered and excited to design with all these UX and UI tailoring opportunities. And for more talks on CSS, check out Yuna's talk on What's New in Web UI, Jesslyn's talk on State of Testing and Debugging on the Browser, and Bramess' talk on What's New in Web Animations. Thank you.