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:
Use responsive and adaptive design techniques to ensure your project supports an wide range of devices and screen sizes, including smartphones, tablets, laptops, desktop computers, smart TVs, and other emerging platforms. Implement robust fallback strategies to ensure that the digital product or service will not fail if it encounters unsupported technologies.- Building a resilient frontend using progressive enhancement
- Carbon footprint of unwanted data-use by smartphones (PDF)
- Climate-friendly software: don’t fight the wrong battle
- Front-End Performance Checklist 2021
- GPF – General Policy Framework (PDF) – 1.4 – Strategy (Regular Reviews)
- GPF – General Policy Framework (PDF) – 2.1 – Specifications (Hardware Profiles)
- GPF – General Policy Framework (PDF) – 2.2 – Specifications (Older Device)
- GPF – General Policy Framework (PDF) – 2.4 – Specifications (Older Software)
- GPF – General Policy Framework (PDF) – 2.5 – Specifications (Adaptive Design)
- GR491 – 3-3018 – Electronicism
- GR491 – 3-3019 – The Digital Gap
- GR491 – 4-5028 – Compatibility Range
- GreenIT – 006 – Use the mobile first strategy
- Going Responsive
- 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
- Low- and Mid-Tier Mobile for the Real World (2025)
- Media query fundamentals
- Mobile First
- Mobile-specific Best Practices
- Mobile Web Best Practices
- Prioritize a mobile-first approach
- Progressive enhancement brings everyone in
- Quel design pour un navigateur low-tech? (PDF)
- 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
- The Performance Inequality Gap
- The State Of Mobile And Why Mobile Web Testing Matters
- The state of the art in measurement-based experiments on the mobile web
- United Nations SDGS – Goal 1 – Poverty
- United Nations SDGS – Goal 3 – Health & Well-being
- United Nations SDGS – Goal 4 – Education
- United Nations SDGS – Goal 9 – Infrastructure
- United Nations SDGS – Goal 10 – Inequality
- United Nations SDGS – Goal 16 – Sustainable Society
- Web Almanac: Sustainability
- Progressive enhancement:
Use progressive enhancement to enhance overall sustainability. This starts with baseline HTML, and increases the user experience without reliance on style and interaction to ensure a robust project.- Build for the Web, Build on the Web, Build with the Web
- Building a resilient frontend using progressive enhancement
- Frontend complexity and the HTML renaissance
- 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
- Low- and Mid-Tier Mobile for the Real World (2025)
- 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?
- Why I’m Writing Pure HTML & CSS in 2025
- Carbon-aware design:
Use carbon-aware design techniques to maximize your use of low-carbon 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.- A Carbon-Aware Internet
- Carbon Aware Computing
- Carbon Aware Computing: Next Green Breakthrough or New Greenwashing?
- Carbon-aware Resource Management for Latency-Sensitive Cloud Computing Environments (PDF)
- Carbon-Aware vs. Carbon-Efficient Applications
- CO2 Emissions
- CO2CoDe: Towards Carbon-Aware Hardware/Software Co-Design for Intermittently-Powered Embedded Systems (PDF)
- Design Constraints in Grid-Aware Web Development
- Design for Carbon-Aware Digital Experiences
- Electricity 2025
- Electricity Maps
- Optimize for clean energy
- Pause: Building Awareness and Agency into the Grid-Aware Web
- Pause or deactivate services tactically
- Set up ultra eco-mode
- United Nations SDGS – Goal 9 – Infrastructure
- Vampire Energy: Essential Answer
- Alternative browsing:
Support non-visual/indirect methods of interaction. This includes assistive technologies, voice agents, scanned input (QR, etc.), reader view (browser, application, or RSS), or connected devices.- CSS Speech Module Level 1
- Everything You Want To Know About Creating Voice User Interfaces
- GPF – General Policy Framework (PDF) – 2.5 – Specifications (Adaptive Design)
- GPF – General Policy Framework (PDF) – 4.7 – UX and UI (Media Choices)
- GR491 – 6-3042 – Interface Free Solutions
- IBM Design For Sustainability (PDF)
- Let’s Talk About Speech CSS
- Optimize Your Content for Save for Later Reading
- RSS Specification
- Sustainable Web Design
- United Nations SDGS – Goal 1 – Poverty
- United Nations SDGS – Goal 9 – Infrastructure
- Web Almanac: Sustainability
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. - Environment
Allowing non-visual browsers to interact with your content can help to reduce overall emissions. Non-visual browsers may lack a display, which reduces the environmental impact of browsing. - 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