3.13 Adapt to User Preferences

Sustainability benefits can be generated in numerous ways, by making sure that your website adheres to the requests made by a browser for specific conditions to be taken into account (such as CSS media and preference queries), you can unlock benefits for the visitor, and as a by-product reduce your emissions. It’s worth noting that the introduction of user preferences and APIs has increased the risk of visitor fingerprinting and privacy issues.

Criteria

Media and Preference Queries: Apply the monochrome, prefers-contrast, prefers-color-scheme, prefers-reduced-data, prefers-reduced-transparency, and prefers-reduced-motion CSS preference queries if they will benefit your website or application. Use the print & scripting CSS media queries if they will improve the sustainability of your website.

Impact

Medium

Effort

Low

Benefits

Environmental:
Improving the experience for monochrome devices (using a monochrome preference query) could encourage more visitors to use these energy-efficient eInk devices. For OLED displays dark mode (prefers-color-scheme) will be more energy efficient. Animation and media have a significant impact on CPU and GPU, therefore reducing its usage (prefers-reduced-motion) will reduce energy usage. Finally, having a print-friendly stylesheet will save not only paper but also ink wastage.
Social Equity:
Media queries don’t tell individuals how to experience the web, they follow the preferences of the visitor or a device’s capabilities.
Accessibility:
Having a high contrast (prefers-contrast) version of a site will reduce the barriers to entry and time wasted for visually impaired visitors. Less motion may also assist people with accessibility requirements.
Performance:
Allowing visitors to have a Lo-Fi (prefers-reduced-data) version of a site could significantly reduce the carbon footprint they emit (which for individuals on a data plan would be beneficial). Additionally, by detecting if scripting is disabled and offering alternative content, you could save wasted effort and improve the performance of a product or service.
Economic:
Print media queries (or stylesheets) can save visitors additional ink and paper costs.
Conversion:
User preferences make an interface friendlier, encouraging repeat visitors.

GRI

materials: Medium
energy: Medium
water: Medium
emissions: Medium

Example

Code:

@media (prefers-color-scheme: dark) {
	/* wants dark mode */
}
@media (prefers-color-scheme: light) {
	/* wants light mode */
}

The complete guide to CSS media queries.

Resources

View the Guideline