There is a version of your website running right now on a phone at 4% battery, on a slow connection, in a city where the local power grid is running almost entirely on coal.

Your website does not know this. It does not care. It is serving the same high-resolution video background, the same animated scroll effects, and the same three simultaneous tracking scripts it serves to everyone else.

That indifference is becoming a design problem.

What Energy-Aware Design Actually Is.

Energy-Aware Design is the practice of building digital products that respond to the real-world energy context of the person using them.

Not just performance optimisation. Not just dark mode. A genuine, dynamic response to conditions the user is experiencing in the physical world.

This means a website that detects a low battery state and switches to a reduced-motion, lower-resolution layout automatically. A product that reads the carbon intensity of the user's local power grid via an API and serves a lighter version of itself when that intensity is high. An application that defers non-essential background processes until the device is charging, or until the grid is running on renewable energy.

The technology to do most of this exists right now and is being used by almost nobody.

The Scale of What We Are Ignoring.

The internet accounts for approximately 3.7% of global carbon emissions. A figure comparable to the aviation industry, and growing considerably faster.

A single webpage load is not a meaningful number. Billions of them daily, each one serving assets that were never designed with energy consumption in mind, each one running scripts that persist long after the visible content has loaded, accumulate into something significant.

"We optimised websites for speed. We never optimised them for cost to the planet."

The two are related but not identical. A fast website can still be an energy-intensive one. A lightweight website is almost always both fast and efficient. The discipline of building lean has environmental consequences that the industry has been slow to acknowledge.

What Adaptive Design Looks Like in Practice.

The implementations range from straightforward to genuinely sophisticated.

Battery-State Adaptation.

The Battery Status API, available in most modern browsers, allows a site to detect charge level and charging state. A site using this thoughtfully might:

• Disable autoplay video when battery drops below 20%

• Switch from animated to static illustrations below 15%

• Reduce image resolution and defer non-critical scripts below 10%

• Display a simple text-first layout in genuine low-power emergency states

None of these degrade the core experience meaningfully. A user reading content does not need a parallax scroll effect. They need the content.

Grid Carbon Intensity Adaptation.

This is the more ambitious application, and the one with the most interesting design implications.

APIs from services like Electricity Maps provide real-time data on the carbon intensity of power grids by region. A genuinely energy-aware product could read this data and serve a lighter version of itself when a user's local grid is running dirty, defaulting to the full experience when renewables dominate.

The practical implementation involves serving different asset bundles based on carbon intensity thresholds. High intensity triggers a reduced asset set. Low intensity serves the full experience.

The user sees a site that performs consistently. The planet receives a site that behaves responsibly.

The prefers-reduced-data Media Query.

Already supported in modern browsers, this allows users to signal that they want a reduced-data experience, and allows sites to respond with compressed images, deferred scripts, and simplified layouts. Most sites ignore it entirely.

Honouring this signal is the minimum viable act of energy-aware design. It requires almost no additional development and communicates something important about the brand using it.

The Brand Argument.

Energy-Aware Design is not purely an environmental act. It is a positioning decision.

A brand that builds an energy-aware digital product is communicating that its values extend to the parts of the experience users cannot see. That it thought about the person with 8% battery on a train. That it considered the carbon cost of serving a hero video to a million users daily.

This is increasingly visible to the people who matter. Developers who benchmark sites against tools like Website Carbon Calculator are sharing those results. Sustainability-focused clients are asking questions about digital carbon footprint that agencies are not yet equipped to answer.

The studios that develop fluency in energy-aware design now will not be scrambling to understand it when clients start requiring it.

The Honest Assessment.

Most digital products in 2026 are built as though energy is infinite, connections are fast, and batteries never die.

None of these assumptions are true for a significant portion of real users on any given day.

Energy-Aware Design does not ask for a complete rebuild. It asks for a set of progressive decisions: honour the signals devices are already sending, serve the lightest version of an experience that still delivers its value, and treat energy consumption as a design constraint with the same seriousness as visual quality.

The grid knows what your website is costing.

The question is whether your design team does.