10 Principles of Sustainable Web Design – Part II: WPO and Future-Friendliness


In our last post, we listed the 10 Principles of Sustainable Web Design. In this post, we look at the first two of these principles. The first reminds us that energy efficiency alone is not sustainability. The next applies this understanding and sets up a goal of balancing competing forces.

Here are the 10 Principles of Sustainable Web Design

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

More detail below…


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 energy 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. This is because energy efficiency in one area might result in inefficiency in the overall system. A narrow focus on WPO can make this happen.

For example, a development team might write hyper-efficient code – but the time spent might mean little for a site which doesn’t require lots of screentime by its users. The efficiency goal clashes with rising costs of development (“embodied energy”) of the site.

Another example is the clash between using responsive design. While this encourages greater access, many designers optimize layout, while forgetting that the small layouts are still downloading the same images. The net effect of applying responsive design theory has been an increase in the download size of web pages, as shown in this chart from a recent article on Mobify on automating responsive images.

Bar chart comparing 2012 and 2013 page sizes, broken out by a series of larger resolutions. The conclusion is that responsive design has increased the average size of web pages
Responsive Design increased page size

To avoid this, sustainable web designers need to embrace larger principles than narrow WPO scores. Below, I’ve listed some that anc prove effective at guiding WPO while avoiding the “efficiency trap.”

  • 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


Principle #2 Understand offsets, and balance for sustainability

It’s Green because: You’re replacing optimization with sustainable thinking.

Your Competitive Edge: You won’t get stuck in a quest for perfection.

Reducing your site’s carbon footprint requires integrating WPO with the sustainability goals described in Principle #1. To avoid the hippo slimming syndrome, you’ll need to adjust the pull from page speed with the counter-pull from the rest of the project. Your sustainable goal will be “offset” from pure WPO by the larger system, and will lie somewhere between these competing factors:

03_offsetsOffsets imply that the most sustainable designs are not necessarily be the fastest. Instead, they enhance performance without degrading information, access, or user experience. Eye candy, or technology for tech’s sake doesn’t provide a meaningful offset, and is excluded.

More on competing agendas

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s