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.
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
- Nathan Shredoff’s Summary Framework
- AIGA’s The Living Principles for Design
- The 3Rs (Reduce, Reuse, Recycle)
- Cradle2Cradle
- Biomimicry
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:
Offsets 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
Sustainable Virtual Design 
1 Comment