Grid-aware Websites - Overview

We’re creating a toolkit to enable developers and designers to understand more about the electricity a visitor is consuming when on their website and adjust the design accordingly. We call websites that respond to the electricity grid in this way grid-aware.

What's in the toolkit?

The toolkit, which is currently under development, will consist of:

An open-source code library.
Technical documentation including explainer guides, tutorials and case studies.
A UX/UI catalogue of design ideas.

What's a grid-aware website? How impactful are they?

We've got answers to these questions, and many more, in the FAQ section of this project's homepage on our website.

Case studies

Below are some public case studies from people who've used the Grid-aware Websites code and UI/UX toolkit in real world projects. If you've done the same, and would like to share your experience, please contact us via our website.

Designing a Grid-Aware Branch
Issue 9 of Branch arrives with a fresh site redesign. This new design builds on valuable feedback we’ve received from you, our community, and some brand-new ideas we’ve been exploring as part of Green Web Foundation’s Grid-aware Websites project.
Read more
Making this website respond to your local energy grid
Fershad Irani covers the technical steps I've taken to make this website respond to a visitor's energy grid. It also touches on the design changes that happen as a result, and the performance and energy impacts of those changes.
Read more
Exploring grid-aware websites
Nic Chan explores the ideas of grid-aware websites and demonstrates examples with both Astro and Eleventy.
Read more
A web component for grid-aware websites
This post introduces the Grid-aware Status Bar web component which we built to complement a recent redesign of our Branch magazine website.
Read more
Adapting WordPress to Grid-Aware Web Experiences
Nahuai Badiola and Nora Ferreirós introduce a grid-aware websites plugin for WordPress which they have been developing as part of their time with on the project's advisory group.
Read more