Ways to Measure Sustainability

Sustainability is a meta-concept, meaning it provides a high-level rationale for other design and development principles as varied as iterative design, Web Performace Optimization (WPO), Search Engine Optimization (SEO), and other areas. With such a wide net, how do we know we’re doing sustainability? How do we convert a designer to create sustainable projects into something that can be agreed on and measured? Here are some ways:

Measurement #1 – “Future Friendly”

The big idea in sustainability is “future friendly.” Our sites and networks should function in the future as they do today. This is defined in terms of the customer, first, then in terms of clients, designers, developers and stakeholders. So whenever one looks at something, we need to ask “is that future friendly?”

As an example, consider attitudes to supporting a wide variety of web browsers. Normally, these discussions are past-centered, with browsers that are “in the wild” but not actively developed anymore. Much effort goes into supporting old versions of Internet Explorer (currently in version 10 in Windows 8) and there’s lots of debate over when to drop support for old browsers. No support for IE 6? Currently it has very low marketshare (1%) in most places, but in areas of Asia where the Microsoft Trident engine was used to create “alternate” web browsers, IE6 rendering is much more common. Some try to support IE 6 even today, while others advise only supporting IE8 and upwards.

In sustainability thinking we ask ourselves, “is this future-friendly?” In other words, if I load a web page with polyfills for handling old browsers today, what happens to the site in the future? Do the polyfills become excess baggage, or do I need to keep them in place? How will I determine when to remove a particular polyfill?

This immediately gives us a strategy instead of a debate. We can look at browser trends, extrapolate them, and define a cutoff. Along the same lines, we can also imagine future changes in programming languages (e.g. revised versions of ECMAScript for JavaScript, Google’s ‘Dart’) and consider the impact of ancient 1990s JavaScript code in our libraries. We might even devise code that monitors traffic, and “cuts loose” bulky polyfills at an assigned date. It is sort of a browser 2012 – a great change designed into the future after which “nothing will be the same.”

Instead of arguing about “which browser do we support,” a sustainable “big picture strategy lists timelines for support into the future, following expected changes to browsers and the web.

Measurement #2 – the “100 princples of sustainable design” checklist

Another way to apply sustainability involves cribbing off of Jacob Neilsen, usability guru of the web for many years. Neilsen gives two major lists for usability and accessibility:

His 10 “big” principles - http://www.useit.com/papers/heuristic/heuristic_list.html

His 113 “little” principles - http://www.useit.com/homepageusability/guidelines.html

Sites are scored just by putting a check on areas that they implement, or have improved, since the last design iteration. This converts a lot of difficult-to-quantify steps in sustainability into something resembling a “green ingredient” database used in industrial design.

So, let’s do the equivalent for Sustainable Virtual Design. We’ll start with our own “c0re principles”, adapted from the list developed by Nathan Shredoff in his book, Design is the Problem: The Future of Design Must Be Sustainable:

Frameworks used in creating the Sustainabity List:

• The 3Rs (Reduce, Reuse, Recycle)
• Sustainability Helix
• Cradle2Cradle
• Biomimicry
• The Living Principles

General Sustainability Principle	Sustainable Web Design Goals
1. Make meaningful products	Make websites that are have real value, not fashion or tech-tricks
2. Easy design rollback	Iterative or Agile design workflow (“green workflow”)
3. Source Renewable Materials	Switch to a “Green” webhost
4. Design products to work in the future	Implement classic design strategies
5. Design with the user in mind	Create effective User Experience (UX)
6. Ensure democratic access	Build accessible, responsive websites
7. Interchangable Parts	Apply standards-based design
8. Minimize energy and resource consumption	Web Performance Optimization (WPO)
9. Don’t corrupt the virtual system	Organic Search Engine Optimization (SEO)

The way I see it, the total number of “big” principles for web sustainability ends up around 9-10.

Each one of these, in turn would get about 10 smaller principles.

2. Easy design rollback

Iterative or Agile design workflow (“green workflow”)

2a.	Ensure sustainable workflow is more than Web Performance Optimization
2b.	Understand offsets between design, efficiency, and maintainability, and balance for sustainability
2c.	Enable design rollbacks based on benchmarks
2d.	Prototype (almost) everything in code, rather than non-web design tools
2e.	Prototype in paper extensively before jumping to the computer
2f.	Apply web strategies that faciliated design “rollback” (e.g. Progressive Enhancement)
2g.	Apply front-end Web Performance Optimization that helps, not hurts, sustainability
2h.	Make sure that the .htaccess file provides server-side optimization
2i.	Host on a truly “green” web host or cloud service

This example is only for “green workflow.”  To make a really useful measure, we have to create sub-lists for each of the major sustainability points above. After they are created, the designer/developer team scores each individual point,  in a manner similar to Neilsen’s usability testing. You score a + or – for each principle, and give yourself a score.

This approach has the advantage that we don’t need to compute actual carbon footprints. In addition, we are scoring on actions taken, rather than the result, which may help workflow.

Measurement #3 – converting WPO measures into carbon footprints

The final way to apply sustainability measures is via web energy use. We can use Web Performance Optimization (WPO) as a start, but need to convert page speed and download size into the amount of energy needed to deliver and view the web page.

While we don’t have real LCA (Life Cycle Assessment) models for the web, we can make a rough and direct conversion between page views and carbon using the following conversions out there:

From James Christie:

…This whitepaper on GHG footprint of internet adverts (http://evanmills.lbl.gov/commentary/docs/carbonemissions.pdf) claims 9-16 kWH / GB. If true, this gives a very handy way for amateurs like me to think about WPO – 250k saved per page on an average ecommerce site = 195 tons CO2e/year saved. (5 pages x 250kb per page x 12 months x 1million/visitors/month x 1ton CO2e per MWh (dirty coal))…

From Dr. Wissner-Gross

 …viewing a simple web page generates about 20 milligrams of CO2 per second. This rises to about 300mg of CO2 a second when viewing a website with complex images, animations or videos…

From www.wwwaste.fr (probably adapted from Wissner-Gross)

….Viewing a web page costs about 20 mg/carbon per second …

Computing carbon footprints then is simple – we just multiply page views and download times against the conversion constant to get our saved carbon percent (assuming constant time viewing the page).

Carbon footprints, since they are a single number, may be easier to discuss with clients and other stakeholders. Consider the case where a client insists that a website look exactly the same in all browsers, even rare “edge” browser cases. Applying some rule of thumb for the required “bulking up” of a site (e.g. 20% more code), we can calculate a differential carbon footprint for handling edge cases. The result can be presented in language like “this approach will make the site 31% less green.” Ouch.

There will be clients who aren’t worried about making site design harder – but these same clients may be reluctant to “hurt the earth” with their big idea. Another bargaining chip during site development! Also, a way to let everyone consider design in the context of a sustainable web.