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

Using Grid-aware Websites

This toolkit is open-source and free for you to use. The code library and plugins are licensed Apache 2.0 (What does this mean?).

We welcome contributions and info on how this tool helped you solve a problem.

We work as a non-profit entity to further the mission of a fossil-free internet, using a small amount of funding carefully for the public benefit. Our work is made possible by the generous donations of grant funders, and also those that use our tools. If you find our work helpful, either as an individual or an organisation, please consider a donation to help us maintain and progress our work.

You can also enquire about retainers for accessing technical advice or funding specific features via our services page.

Keep updated

To follow the Grid-aware Websites project, you can:

Licenses

The code for Grid-aware Websites core library and plugins are licensed Apache 2.0. (What does this mean?)

View the Grid-aware Websites changelog
Do you see a bug? Open an issue on GitHub
Do you like Grid-aware Websites? Star it on GitHub!