10 Principles of Sustainable Web Design – Part I

Taking a break from philosophy of sustainability, and posting some practical material. The following posts will describe a practical process for Sustainable Web Design.

Originally, this material was scheduled for publication elsewhere, but, well, well…so here it is!

The process described here is mostly about workflow. There are lots of articles about Web Performance Optimization, but fewer about the “human factors” affecting sustainability. These articles try to fill the gap, by describing an extension of Agile Web Design. It closely follows principles adopted in Industrial Design some time ago, and was inspired by Nate Shredoff’s recent book on design sustainability.

Without further ado…Part I!

Turn 10 principles of green web design into your competitive edge – Introduction

The Internet needs to become more sustainable. It’s only a matter of time before green design, long important to physical disiplines like architecture and industrial design, come to the web’s doorstep.

To see a what’s coming, try typing the words “sustainable design” into your favorite search engine. You’ll see that web design is just about the last place left in the design world where sustainability isn’t a major factor. Today, most websites arent’ green, and in fact there is a growing epidemic of page bloat taking the web away from sustainability.

01_page_size_increaseIt won’t be long until clients arrive with a set of green goals in their project proposals. By that time, consumers will be looking for the web equivalent of an Energy Star ranking on your site, like that already supplied by CO2stats.com.


Projects like EcoGrader are actively computing web carbon footprints today.

How to prepare for the coming Green Web? The answer is Sustainable Web Design. By incorporating sustainability principles into your projects now, you’ll get a competitive green edge. In the process, you’ll make your site more efficient, and your workflow more agile.

Sustainable Web Design is more of a process than a button that can be pressed. I’ve summarized 10 of the most important principles of web sustainability in the following list:

Principle Link to description
#1 Understand sustainability is more than WPO
#2 Understand offsets, and balance for sustainability
#3 Create a benchmark
#4 Enable design rollbacks based on benchmarks
#5 Prototype (almost) everything in code
#6 Prototype the rest in paper
#7 Apply web strategies that enable rollback
#8 Apply front-end WPO that helps, not hurts, sustainability
#9 Fix that back end
#10 Host in the green cloud

Most of these principles will be easy to incorporate into your current design strategy. I’ve marked the more controversial ones with a warning symbol, like this:


This article is dedicated to reducing the carbon or energy footprint of the web pages on your site by applying the 10 principles listed above. Other areas of sustainability, like developing a green business model, or setting up an energy-efficient office need separate treatment, and will be covered in future articles.

References to the Introduction

Principle #1 Sustainability is more than WPO

Its Green Because: You have to understand sustainability to be sustainable.

Your Competitive Edge: You will build a sustainable sites, rather than narrowly engineer performance.

Sustainability is sometimes confused with Web Performance Optimization (WPO) performed by site engineers or companies. WPO increases site efficiency, and will reduce your site’s footprint. But it’s not the whole story. While WPO forms part of the sustainable web, established frameworks, from industrial design and architecture specify additional requirements, the most important of which are listed below:

  • Design should be future-friendly, and avoid fads.
  • The larger system must be considered. The product or service shouldn’t pollute its environment by being efficient.
  • The efficiency during the entire entire life cycle of a project, must be considered.
  • The product or service should put people first, and maximize usability and accessibility.
  • Design should limit optimization of any one component. Too much optimization of one element usually makes the overall product or service less user-friendly, and more difficult to maintain and update.

How does this affect the web? Straight WPO can’t create sustainability all by itself. If your design starts with bloatware, no amount of downstream engineering can fix it – all you’re doing is streamlining a hippopotamus.

WPO helps with efficiency, but design provides the key to true sustainability.

Existing Sustainability Frameworks

Check for Part II soon…

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.