3.12 Use sustainability beneficial user preference media queries
Use sustainable media queries, such as dark mode and scripting media queries, to customize an interface to suit user preferences and reduce emissions.
Criteria
- Media and preference queries: Machine-testable
Accommodate common user preferences, such as prefers-color-scheme, with corresponding CSS media queries. Consider accounting for additional user preferences, including monochrome, prefers-contrast, prefers-reduced-data, prefers-reduced-transparency, and prefers-reduced-motion preference queries where these will benefit your users. Use print and scripting media queries when they can improve sustainability.- A Guide To The State Of Print Stylesheets In 2018
- Cascading Spy Sheets: Exploiting the Complexity of Modern CSS for Email and Browser Fingerprinting
- Changing Paper Consumption
- Cost of a pixel color (Video)
- CSS-Based Fingerprinting
- CSS Design: Going to Print
- Dark mode & accessibility myth
- Dark mode can save battery, but only if your device has an OLED screen
- Dark Mode Can Improve Text Readability — But Not for Everyone
- Dark mode may not save your phone’s battery life as much as you think, but there are a few silver linings
- Demo: Disabling JavaScript Won’t Save You from Fingerprinting
- Energy efficient color palette ideas
- Fixing web browser history leaks
- GPF – General Policy Framework (PDF) – 2.5 – Specifications (Adaptive Design)
- Google: Here’s why dark mode massively extends your OLED phone’s battery life
- How can we design sustainably?
- How I built a dark mode toggle
- How much battery does dark mode save?: an accurate OLED display power profiler for modern smartphones
- How to Become an Eco Web Designer
- Impact of GPU Acceleration on Browser CPU Usage
- Inclusive Dark Mode
- Making :visited more private
- Mitigating Browser Fingerprinting in Web Specifications
- OLED and dark websites = lower footprint
- prefers-reduced-data
- Save the planet through sustainable web design
- Sustainable UX is more than reducing your website’s footprint
- The complete guide to CSS media queries
- The dark side of green web design
- United Nations SDGS – Goal 1 – Poverty
- User preference media features client hints headers
Benefits
- Accessibility
Having a high contrast version of a site will reduce barriers to entry and time wasted for visually impaired users. Reduced motion can also accommodate other accessibility requirements. - Conversion
Delivering better user experience by meeting their preferences can improve conversion and encourage repeat visits. - Economic
Using print media queries within style sheets can reduce users’ ink use and paper costs. - Environment
Accommodating dark mode when preferred will always be more energy efficient on OLED devices. Similarly, animation and media have a significant impact on CPU and GPU usage, so respecting a prefers reduced motion query will reduce energy consumption. The presence of a monochrome preference query could encourage greater adoption of energy-efficient e-ink devices. A sustainability-optimized print style sheet can save both paper and ink output. - Performance
Allowing users to access a reduced-data version of a site could significantly reduce the data transferred and the resulting carbon footprint. This can improve performance and reduce costs for individuals on a metered data plan. Detecting if scripting is disabled and offering alternative content may save wasted effort and improve the performance of a project. - Social Equity
Meeting user preferences is a positive shift: You are not telling your users how they should ‘experience your content, but following your users’ preferences or a device’ capabilities and the priority of constituencies.
GRI
- Materials: Medium
- Energy: Medium
- Water: Medium
- Emissions: Medium