10 Principles of Sustainable Web Design – Part III: Benchmarks and Rollback


Principle #3 Create a benchmark

warning sign

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)..

YSlow result for a poorly-optimized website
YSlow result for a poorly-optimized website

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 Website home page
Lipton green Mint Website

Hostpapa Home Page
Hostpapa Home Page
Lipton Green Mint HostPapa

Versions SVN
Versions SVN (old home page)

Torri's Eye Page animated
Torri’s Eye Page (animated)
Versions Subversion Client (Mac) Torri’s Eye

Lipton Green Tea homepage
Lipton Green Tea homepage

HTTP Archive logo
HTTP Archive
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 10_arrow_benchmark
Versions Subversion Client 786 12 90 1.22
Our GOAL 1000 40 85 1.15
Lipton Green Tea 1346 49 84 1.13
HTTP Archive Average 1098 82 74 1.0
Torri’s Eye 946 41 73 0.99
Lipton Green Mint 1210 72 68 0.92
HostPapa 1221 66 66 0.89
Our PROTOTYPE 2344 120 61 0.82

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:

Principle #4 Enable design rollback based on benchmarks

warning sign

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.

design workflow, shown as a series of arrows from business model to programming, with a feedback loop in the design stage
Design workflow with a testing loop

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.

iterative design workflow, which additional "rollback" loops from late-stages (programming) to early design stages.
Iterative design workflow, adapted for sustainable web design

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.

More on rollback in workflow:

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