3.13 Ensure layouts work for different devices and requirements
Use a mix of carbon-aware design techniques to adapt to different layouts, different modes of interaction, and also progressively enhance content.
Criteria
- Device-adaptable: Machine-testable
Allow your project to work and adapt seamlessly across a variety of devices and screen sizes, including smartphones, tablets, laptops, desktop computers, smart TVs, and other emerging platforms. This ensures that content and functionality can be easily accessed and are suitably optimized for display on both smaller mobile devices and larger displays without limiting accessibility, usability, or design features on any specific device type. Implement robust fallback strategies to ensure that the digital product or service will not fail if it encounters unsupported technologies.- Front-End Performance Checklist 2021
- Going Responsive
- GPF – General Policy Framework (PDF) – 2.2 – Specifications (Older Device)
- GPF – General Policy Framework (PDF) – 2.4 – Specifications (Older Software)
- Here’s how much it costs to charge a smartphone for a year
- How to Become an Eco Web Designer
- How web bloat impacts users with slow connections
- List of sovereign states by Internet connection speeds
- Media query fundamentals
- Resilient web design
- Responsive design
- Responsive Design and Accessibility
- Responsive Design Mode
- Responsive Design: Patterns & Principles
- Responsive Web Design
- Responsive web design basics
- Responsive Web Design (Book)
- Responsive web design (Wiki)
- Responsive Web Design: What It Is And How To Use It
- Stop resizing your browser
- Taking RWD To The Extreme
- United Nations SDGS – Goal 9 – Infrastructure
- Progressive enhancement: Machine-testable
Use progressive enhancement to enhance overall sustainability. This can involve a single approach or a careful combination, such as adaptive design, mobile-first design, or dynamic serving.- Build for the Web, Build on the Web, Build with the Web
- Building a resilient frontend using progressive enhancement
- Front-End Performance Checklist 2021
- GPF – General Policy Framework (PDF) – 2.5 – Specifications (Adaptive Design)
- Graceful degradation
- Graceful degradation versus progressive enhancement
- Is Progressive Enhancement Dead Yet? (Video)
- It’s about time I tried to explain what progressive enhancement actually is
- Mobile First
- Mobile-First CSS: Is It Time for a Rethink?
- Mobile First Design and Sustainability
- Mobile-First Design Complete Guide 2024
- Mobile Gender Gap Report (PDF)
- Not always mobile first
- Progressive Enhancement
- Progressive enhancement brings everyone in
- Progressive Enhancement: What It Is, And How To Use It?
- Resilient web design
- Smartphone Ownership Is Growing Rapidly Around the World, but Not Always Equally
- The Performance Inequality Gap
- United Nations SDGS – Goal 9 – Infrastructure
- Web Design in 4 minutes
- What is Mobile First Design?
- Carbon-aware design: Machine-testable
Use carbon-aware design techniques to maximize your use of carbon-free energy. This is achieved by adapting the delivery of your project to current electricity availability and user grid load. This should include using situational design to reduce the codebase and disable non-essential functionality during high-intensity periods. Similarly, it should be possible to adapt the user interface to perform better with reduced hardware resources, where this measure can be taken to avoid scaling hardware resources and the resultant increase in emissions. It can also include designing algorithms that can automatically disable features based on set thresholds.- Carbon Aware Computing
- Carbon Aware Computing: Next Green Breakthrough or New Greenwashing?
- Carbon-Aware vs. Carbon-Efficient Applications
- CO2 Emissions
- CO2CoDe: Towards Carbon-Aware Hardware/Software Co-Design for Intermittently-Powered Embedded Systems (PDF)
- Design for Carbon-Aware Digital Experiences
- Electricity 2025
- Electricity Maps
- Optimize for clean energy
- Pause or deactivate services tactically
- Set up ultra eco-mode
- United Nations SDGS – Goal 9 – Infrastructure
- Vampire Energy: Essential Answer
- Alternative browsing: Machine-testable
Support additional indirect methods of interaction, such as voice (speech), code (QR, etc.), reader view (browser, application, or RSS), or connected technologies (watch, appliance, transport, etc.).
Benefits
- Accessibility
Incorporating large, touch-friendly buttons, simplified navigation menus, and clear readable fonts on your mobile websites can make it easier for individuals with visual or motor impairments to interact with your content. A device-adaptable strategy that considers the limitations of each approach helps to maximize accessibility and usability across all devices, enhancing accessibility and optimizing experience. - Conversion
Broadening the compatibility of your products and services can equally broaden their appeal and use, even in scenarios you may not have originally envisaged. - Economic
Ensuring your website or application works well on desktop devices, smartphones, and other resolutions alike can provide a financial benefit by enabling individuals to make purchases wherever and whenever it suits them. - Social Equity
Ensuring content works well on older and low-powered devices is important, as these are more frequently used in developing nations.
GRI
- Materials: Medium
- Energy: Low
- Water: Medium
- Emissions: Low