Cleaner Code, Cleaner Planet

The internet is vast, but it doesn't have to be wasteful. At Overbrowsing, we envision a web that is light, intentional, and mindful of its impact on the planet. To bring this vision to life, we turned inward and built our own website as a living demonstration of this philosophy. By integrating sustainable web design practices with the features and fluidity of a modern website, we've crafted an experience that is both thoughtful and functional. Every decision—from the smallest line of code to the overarching user experience—strikes a careful balance between utility and environmental stewardship.

Design with Purpose

Clean Hosting

Our site and all other dependencies are powered entirely by renewable energy. We also alert you to close this site when you change tabs, helping to conserve energy.

Page Weight Budget

Our site produces up to ten times less carbon per page than the A+ threshold set by Beacon. We achieved this by building a static site with a focus on clean, semantic HTML, using a single CSS and JavaScript file capped at 10KB.

Low-Impact Mode

While our pages are very small in size, Low-Impact Mode automatically disables the largest resource-intensive element on our website—images—during periods of high grid intensity, adapting the layout accordingly.

Nature-Reactive Visuals

The appearance of our site dynamically changes based on air pollution data, shifting to a deeper red as air quality declines. You may also notice floating pixels representing PM2.5 and PM10 particles.

Dark Mode

Dark Mode reduces energy usage on OLED devices. The choice of green as our primary colour is both thematic and practical, as green is the most energy-efficient colour on OLED displays.

Efficient Media

Every image is dithered and compressed to under 30KB. Hovering over images reveals their file size in the header. CSS blend modes are used for colours, simplifying image files and reducing their impact on page size.

Minimal Design

We use no web fonts, instead opting for system fonts like Apple System and Helvetica, and forgo SVG artwork in favour of ASCII symbols. Every decision, from typography to visuals, has been made with sustainability in mind, ensuring that everything remains light, purposeful, and efficient.

Resources that Shaped Our Process

Discover the research, tools, and websites that guided our site's development and informed our approach to sustainable web design.

A Responsible Framework

Every service and API was selected not only for its functionality but also for its alignment with our values of sustainability and efficiency. Each service was evaluated using Beacon or by reviewing each company's sustainability reporting, while each API was assessed using Are My Third Parties Green?.

Overbrowsing on GitHub

Transparency is key to what we do. Explore the project's code on GitHub. Fork it, audit it, or contribute improvements through pull requests.