Sustainable Web Design: Why Good UX Uses Less Power

Sustainable Web Design Starts With IBM's 3 Questions

The internet now has a bigger emissions footprint than aviation, according to the W3C's Web Sustainability Guidelines, a draft for a more sustainable web. Every website adds its share.

IBM offers a practical way in. Its Design for Sustainability principles frame the topic as three guiding questions. We think they make a good entry point to digital sustainability, because they need zero jargon.

Inclusive for all living things

For IBM, human-centered design no longer goes far enough. The first question asks how an experience affects people and other living things, including the finite resources everyone depends on.

Easy for everyone

An interface should work on the first visit and on every visit after. It should do so whatever a person's abilities or means.

Efficient for users and for power consumption

According to IBM, simpler experiences are more inclusive, more efficient and lighter on resources. Chris Hammond, Distinguished Designer at IBM, sums it up: "Good design is good business. Good design is also more sustainable."

Less Data, More Impact: Sustainable UX Is Faster and More Accessible

Sustainable UX grows out of the same choices that make a site faster, clearer and more accessible.

Picture a backpack packed with only what you need. It is lighter to carry, and you find things in it faster.

Lighter pages load faster

Every image, video and extra feature has to travel over the network and be processed by the device. The W3C recommends optimizing media and cutting the amount of data transferred. Start with the heaviest elements on your highest-traffic pages.

For a quick health check, try Lighthouse, Google's free auditing tool built right into Chrome. It scores your page on performance and accessibility, among other things, which are exactly the levers covered here.

Clarity saves clicks

In our view, clarity does most of the work here. When people find what they need straight away, they load fewer pages. Cut content nobody uses instead of burying it in subpages.

Accessibility is part of the deal

The W3C counts accessibility as part of sustainability, because it shapes how long a project stays viable. In our view, a site that excludes no one is less likely to need rebuilding later.

So plan for accessibility from day one.

Green Brand, Heavy Website? Where the Brand Promise Breaks

For sustainable companies and cultural brands, the stakes go beyond efficiency. A brand that champions climate action yet runs a data-heavy website? In our view, those two don't fit together.

That is why sustainable website design starts with an honest audit.

Website carbon: establish your baseline first

Before you optimize, you need a starting value for your key pages. Free online calculators give you a first estimate. The before-and-after comparison tells you more than any single number.

Hosting as a lever

Low carbon website design also happens below the surface. According to the W3C, a sustainable website runs on servers powered by low-carbon or renewable energy. Ask your provider directly what electricity powers their data centers.

Design honestly

The W3C counts this as sustainability too: no manipulation and no deceptive design patterns. Review your forms, cookie banners and newsletter sign-ups for pressure tactics or pre-ticked boxes.

How We Build Sustainable Web Design Practices Into Every Site

For us, sustainable web design is not an add-on package. It is part of how we design websites and build them.

One design system for every site

We work with our own design system, which we use across all our clients. It scales websites mathematically across every screen size while leaving room for brand-specific adjustments. The result is fewer special rules, less code and leaner pages.

Motion with a purpose

Motion is one of our favorite tools, especially in 3D & Motion. We use it where it helps people find their way or tells a story.

Technically, we build animations so the browser can render them without costly recalculations. That is also what the MDN performance guide recommends. Anyone who has turned on "reduce motion" on their device gets a calmer version.

Keeping performance in check

Websites rarely get lighter after launch, as new images and tools creep in over time. That is why we keep an eye on performance well after go-live.

Curious how heavy your website is today? We're happy to take a look together.

Sources: IBM Design, ibm.com; W3C, Web Sustainability Guidelines, w3.org; Chrome for Developers, developer.chrome.com; MDN Web Docs, developer.mozilla.org.