Media Queries Level 5: the ability to respond to user needs

Recently, web.dev Blog published a web article (by Una Kravets) presenting an in-depth view of the component-driven world aims in a new responsive era [1]. In what follows I will try to summarise it from my perspective, understanding how it is becoming easier to cover the end-user preferences, all of it with the new responsive approach.

So, Web Components meaning relies on custom, reusable and encapsulated HTML tags. They can be used with any library or framework that works with HTML across modern browsers since they are built on solid standards.

Someone once told me that "when something takes an hour or more to be explained, it certainly cannot be sold easily". Well, it is becoming easier to find short good quality material about Web Components when searching for it. Take as example a video that length is half-hour explaining some specific concept in a hard scenario.

It is important to you to know that those standards and APIs are made of big effort of engineers, responsible for prototyping, speccing, and starting the implementation for the next era of responsive design [1][4]. So, a good tutorial that may takes you half-hour to get completed certainly pays off.

On going changes and updates includes user-preference based media features, container queries, and media queries for new screen types, such as foldable screens [1]. Let's have a little of each topic and the main concepts involved while we understand how important it can be.

The ability to respond to user needs

If you're not familiar with the concept of accessibility and user preferences then I recommend that you read the Stories of Web Users em Accessibility Fundamentals da W3 [2] as a more reliable way of introduction content.

Well, when we talk about accessibility, we are talking about a set of preferences inherent by a group of users that need to be addressed. So, if they meet adherence to their needs then the content or service provided can successfully meet this audience.

To get a little more familiar with who these users are and their needs, you can gather information at the CDC. I've chosen the following topic: "attention deficit hyperactivity disorder" (ADHD) which represents one of User Stories by W3. You can try doing the same with other topics.

So, according to the CDC, at least a total of 3.3 million children aged 12–17 years were diagnosed with ADHD in the US in 2016 [3]. In addition to ADHD, according to the CDC, the diagnosis of ADHD can be followed by other disorders such as anxiety.: about 3 in 10 children with ADHD had anxiety [3].

Now, we can start talking about Preety's User Story as an example, which is somewhat well-aligned with the CDC data on ADHD. Preety is a young person diagnosed with ADHD [2]. Preety's experience varies greatly depending on how well the content or service adheres to accessibility.

(...) Preety’s experience with websites varies greatly from one site to another. Some sites use graphics and illustrations in a way that helps her to focus on the sections and content that she would like to read, while other sites have a lot of advertisements and moving content that is very distracting. - User Stories: Preety - WAI by W3 [3]

If Preety was 17 years old in 2016, being a subject of the CDC research group and positively diagnosed, she would be an adult today (2022). During her school life, technologies were introduced and she somehow managed to overcome the difficulties with the help of appropriate tools.

However, some of these preferences are set at the operating system level and are far from capture capability for some web APIs. In fact, some others preferences had the usage extended to users who do not see themselves in any of the User Stories at all. Do you need more examples? Preferences for light, dark, or auto themes.

Whether to ensure that Preety's future could share of the same excellence as possible as her colleagues does, to save a device's battery or simply adapt the system just for the visual preferences, User Preferences are extremely relevant and are increasingly included in the new responsive era evolution loop.

Media Features

It is common that a developer, frontend engineers in a special case, faces different behaviors implementation requests for elements given an interface depending on the user agent, display device or even the document being rendered.

This is usually done through Media Queries. Developers make usage of Media Queries as a method to access information about aspects related to the user agent that the document is being displayed [4].

The method follows an interpretation path as shown in Figure 1 [5]. The syntax allows us to build modifiers according to the media type and other features, once the media condition is met then the user will be able to experience features developed exclusively for the scenario.

User-preference based media features

Well, now we can start talking about the advances regarding the adoption of certain user preferences that in many ways are available at the operational system level. Consider an option for macOs [6]

Stop or reduce the movement of some elements on the screen—for example, when you open apps, switch between desktops, or open and close Notification Center. This feature is especially useful for people who experience motion sickness or vertigo. - Reduce screen motion on Mac, by macOS User Guide

The example above is a reference to the prefers-reduced-motion option covered in the Media Queries Level 5 specification. The latest specification introduces so-called user preference media features, that is, a way for sites to detect the user's preferred way to display content [4].

Therefore, considering the prefers-reduced-motion preference in page design creates an inclusive environment for people like Preety, allowing your application to be instrumentalized at the level of preferences that come directly from the operational system [7].

Additionally, in their operating system, whether it's on desktop or mobile, users can set a preference for light, dark, or auto themes [8]. According to the new specification you can use prefers-color-scheme to customize your UI to it

See specification for more options[4]:

Detecting the desire for less motion on the page: the prefers-reduced-motion feature
Detecting the desire for reduced transparency on the page: the prefers-reduced-transparency feature
Detecting the desire for increased or decreased color contrast from elements on the page: the prefers-contrast feature
Detecting Forced Colors Mode: the forced-colors feature
Detecting the desire for light or dark color schemes: the prefers-color-scheme feature
Detecting the desire for reduced data usage when loading a page: the prefers-reduced-data feature - Media Queries Level 5, W3C

Conclusion

Think of it as a further move into the new responsive era.
The Component-driven approach from the developer's point of view is becoming the better way you project, build, and deploy a scalable Web application regarding new accessibility preferences.

Additional reading and tutorials

Building Components, Web Fundamentals by developers.google
web.dev prefers-color-scheme: Hello darkness, my old friend by Thomas Steiner
What is Media Query, CSSWG (Draft) - W3C - Click here to learn more
A Complete Guide to CSS Media Queries - CSS Tricks

References

[1] web.dev Blog published a web article (by Una Kravets)
[2] Accessibility Fundamentals - Stories of Web Users by W3
[3] Attention-Deficit / Hyperactivity Disorder (ADHD) - Data and Statistics About ADHD by CDC
[4] Media Queries Level 5 - CSSWG - W3C - Editor’s Draft, 10 February 2022
[5] Figure 1: Taken from CSSWG - W3 Website - Click here for more
[6] Reduce screen motion on Mac - Apple Support
[7] prefers-reduced-motion mdn web docs, Mozilla
[8] web.dev prefers-color-scheme: Hello darkness, my old friend by Thomas Steiner

Cover image was taken from Cavaon - User Experience (UX) – The Importance of Understanding Users’ Needs