Principle #3 Create a benchmark
It’s Green because: It provides a public measure for the greening of your site.
Your Competitive Edge: A good benchmark gives your team a common language.
To make our offsets work, we need a way to calculate your site’s footprint. Numerical benchmarks provide a whole-team communication interface, and give designers, coders, and site engineers a common language to communicate in. They also provide a way to describe the greening process to your clients.
Currently, there are no tools that directly calculate the carbon footprint of a website. However, WPO performance tools give very similar information, and are a good substitute. To create your sustainability benchmark, select a group of websites with similar layout, function and/or code complexity to your proposed site. You can analyze any of their individual pages with a performance tool like Yahoo! YSlow, Web Page Test, Google Analytics, or Google Page Speed. For site-wide performance, you can use Google Webmaster Tools, but the results are limited to your site.
Here’s a sample YSlow result for a poorly optimized website (hint: “design without code” is its message)..
You can use the scores output by these tools to define your sustainability benchmark. In the example below, I’ve analyzed several websites with similar green color motif and layout complexity using Google Page Speed. The site scores are normalized by comparing them to the Internet average listed at the HTTP Archive.
|Lipton Green Mint||HostPapa|
|Versions Subversion Client (Mac)||Torri’s Eye|
|Lipton Green Tea||The HTTP Archive|
Put your scores into a table, sort them, and add the current score for your prototype. This is your starting point. Now, define where you want to go, remembering that reaching a good score may require a significant redesign. Congratulations, you’ve created a sustainability deliverable! You might provide it to stakeholders via your competitive analysis deliverable
|Site Scores Sept 2012||Download Size (kb)||Assets (HTTP Requests)||WPO Score||Normalized Score|
|Versions Subversion Client||786||12||90||1.22|
|Lipton Green Tea||1346||49||84||1.13|
|HTTP Archive Average||1098||82||74||1.0|
|Lipton Green Mint||1210||72||68||0.92|
What about designs stuck in Photoshop or InDesign comps? This is the one case where translators like Media Lab SiteGrinder or Adobe Muse are useful in professional development. Translating a Photoshop page comp and scoring it, even in early design stages, gives you a rough benchmark, even before coding starts. It’s also a good way to make stubbornly visual designers part of the benchmark process. However, these tools almost always “burn” a poorly optimized website. It’s necessary to dip into the code layer to do successful sustainable web design.
More tools for establishing a baseline:
- How to use YSlow
- How to use Google Page Speed
- HTTPArchive (especially good for computing footprints)
- W3Techs Survey (especially good for software trends)
Principle #4 Enable design rollback based on benchmarks
It’s Green because: Your design will become more energy-efficient
Your Competitive Edge: You’ll create a more flexible and adaptative workflow.
How can we get from our benchmark score to a sustainable design? We need to implement design rollback. Simply put, if you have a bloated prototype, you need to do more than optimize – instead, you will have to re-think your original design and adjust for efficiency. This re-thinking happens in information design, user experience, layout, even art direction.
Sustainability thinking is different from a typical web development pattern. Most sites are developed via a mostly waterfall development pattern. Even when agile design is applied, it typically restricts iterations to front-end software development. If the site’s design is causing a performance problem, there is no defined way for this information to “feed back” on the original design.
In sustainable design, we can prevent this by integrating WPO with development, and letting both feed back on the upstream design. We maintain our local agile programming loop, but also create a larger set of loops reaching back into UX, information design, and visual identity. The client is also a potential participant in this process.
Most developers already follow an iterative design strategy, and applying rollback just augments this into a full participatory design process. While this might open up trouble in the workflow, rollback models have been been highly effective in industrial design, according to sustainability guru Nathan Shredoff. A rollback policy will also reduce nasty finger-pointing about who is responsible for fixing a slow site. As Shredoff says, design, not engineering, is the problem.
Specific rollback examples are provided in Principle #8.