Kilian Valkhof, creator of the web-developer-focused Polypane browser, presented at the HalfStack conference new ways that web developers and designers can provide better user experience by going a step beyond responsive design. Using recent additions to browsers that are on the web standard track, developers and designers can also respond to user preferences, the user environment, the network condition, and device capabilities.
Decade-old responsive web design integrates the idea of adapting a layout to viewport size, thus reflowing and repositioning contents to fill the available space. Responsive web design allows designers and developers to adapt to an ever-greater number of devices form factors, input modes – and browsers. As a result of the paradigm, CSS media queries were added in 2012 as a web standard. CSS media queries included 13 media features mostly revolving around resolution, sizes, orientation, and ratios of screens and devices.
Valkhof introduced a concept that he tentatively termed responsive websites that encompasses customizing the user experience according to user preferences, the user environment, the network condition, and the user’s device capabilities. Valkhof explained:
Responsive websites don’t just respond to viewport sizes but they also actively adapt to user preferences.
[…]
We usually reason about what a device can do but we really want to be responsive to the users, their environment, and their preferences. The device is just a proxy.
The latest CSS Media Queries (level 5) specification adds user preference media features to the existing standard (level 3) and its upcoming candidate recommendation (level 4). CSS Media Queries level 5 is still at the working draft stage in the W3C standardization process. As a result, some of the defined media features are not yet implemented in all browsers.
Valkhof focused in his talk on the prefers-color-scheme, prefers-reduced-motion, -prefers-reduced-transparency, prefers-contrast, inverted-colors, and force-colors media features, providing a rationale for the usage of each feature.
For instance, the prefers-color-scheme media feature can be used to implement a simple dark mode as follows:
@media (prefers-color-scheme: dark) {
:root {
background: #111;
filter: invert(1) hue-rotate(180deg)
}
img, video {
filter: invert(1) hue-rotate(180deg)
}
}
@media (prefers-color-scheme: light) {...}
@media (prefers-color-scheme: no-preference) {...}
Dark mode can be used as an accessibility tool for users with low vision, or as a power-saving feature on AMOLED screens (up to 60% power savings).
prefers-reduced-motion indicates that the user notifies the system that he prefers an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders. Or, Valkhof said, users may just indicate they do not want to wait for all the nice animations to finish.
Valkhof provided the following example of configuration:
@media (prefers-reduced-motion: reduce) {
body *,
body *::before,
body*::after {
animation: none !important;
transition: none !important;
transition-duration: none !important;
}
}
The automatic playing of videos can similarly be activated according to the user preference as follows:
const autoPlayVideo = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
Developers and designers will be able to customize a website according to the environment of the user by using the light-level media feature, which can be set to dim, normal, or washed. This feature is included in CSS Media Queries Level 5, but not implemented yet in any browser.
prefers-reduced-data and navigator.connection (not implemented on Safari) do not enjoy broad browser support as of yet. They strive to enable developers to adjust the user experience to the network conditions.
Finally, user experience can be adapted to the device capabilities. Valkhof discussed CSS Interaction Media Queries (widely supported in evergreen browsers) that allow developers to customize a website according to the input devices available:
The mouse of course still exists but we also have touch controllers like styluses, external controllers like Wii remotes, and even things like AR hand detection. Some things that are easy to do with the mouse are harder or impossible to do with touch devices, like hitting small targets or even hovering. With the interaction media features, you can adapt to these input devices in clever ways.
On touch devices without hovering capabilities, features that would appear on hovering will need to be visible or behind an explicit toggle. On devices with coarse pointers, the tap targets may need to be larger.
The interaction media queries can for instance be configured as follows:
/* smartphones, touch screens */
@media (hover: none) and (pointers: coarse) {...}
/* devices with stylus */
@media (hover: none) and (pointers: fine) {...}
/* wii/kinect */
@media (hover: hover) and (pointers: coarse) {...}
/* mouse */
@media (hover: hover) and (pointers: fine) {...}
Browser compatibility with the media features added in the level 5 specifications can be found online.
The full talk is available online and contains many additional remarks and technical examples. HalfStack is a UI-centric, one-day, single-track conference focused on the possibilities of the JavaScript and web ecosystems. Due to Covid-19, HalfStack took place online in May 2020.