Skip to main content
WES-GBeta
  • Guidelines
  • About
  • Contribute
  • Get The Badge

Filter by topic

Governance

  • 0.1 Documented Policy
  • 0.2 Essential Tracking and Ads

UX / Design

  • 1.2 Rich Content
  • 1.3 Use of Images
  • 1.4 Awareness
  • 1.5 Data Transfer and Emissions
  • 1.6 Carbon Aware Design
  • 1.7 Colour Scheme
  • 1.8 User Retention

Images

  • 2.1 File Formats
  • 2.2 Image Optimisation
  • 2.3 Image Resolution
  • 2.4 Browser Cropping

Video

  • 3.1 Autoplay
  • 3.2 Script Loading
  • 3.3 Streaming Resolution

Content

  • 4.1 Content Audit
  • 4.2 Digital First
  • 4.3 Easy Access
  • 4.4 Descriptive Headings

Fonts

  • 5.1 Font Variations
  • 5.2 File Formats
  • 5.3 Clean Files
  • 5.4 System Fonts

Web Development

  • 6.1 Lazy Loading Images
  • 6.2 Responsive Design
  • 6.3 Modular Design
  • 6.4 Minification
  • 6.5 Templates
  • 6.6 Asset Loading
  • 6.7 Analytics
  • 6.8 Data Minimisation
  • 6.9 Stylesheet
  • 6.10 Text Compression
  • 6.11 Carbon Aware Development

Development Operations

  • 7.1 Bad Robots
  • 7.2 Dev Environments
  • 7.3 Dataset
  • 7.4 Site Architecture
  • 7.5 Caching
  • 7.6 Pipeline Code
  • 7.8 Green Hosting

1.6 Carbon Aware Design

Website uses “carbon aware design”.

Hard to implement

8 High impact score

Examples 

  • Branch Magazine
  • Organic Basics

Both websites know the emissions factor of the grid the person using the site is on, and as a result changes colours, image resolutions, image appearance (consider dithering like Waste Not) and logos, depending on whether the grid is being mainly powered by renewable energy or fossil fuels. 

Lookups such Electricity Maps or the Green Software Foundation SDK can be used. 

By implementing these techniques, you also need to consider what caching strategy you apply and how this will be affected.

 

← Previous Next →

© 2025

Sustainable Website Design by: Kyan, development: Complex Creative & Studio 24

Privacy Policy Cookie Policy