What have we learned about Sustainable Web Design? – A summary of what to do…


This post is a summary of the various topics this blog has covered since inception, with some short, “take-home” conclusions about sustainability theory as applied to the web, games, and other interactive systems.

Sustainable Virtual Design Principles

Core Concept: Sustainable web design meets the current needs of its users, without compromising the ability of those needs to be met in the future.

Take-home: Nathan Shredoff’s Version of Sustainable Design Seems to work best, adapted in his book, Design is the Problem: The Future of Design Must Be Sustainable:

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

 When Green is NOT Green

Take-home: The web is not necessarily greener than print. In fact, in some cases going virtual may cause a bigger hit to the system than old-school dead trees.

Take-home: Jevons’ Law is writ large on the web. Increases in efficiency via Web Performance Optimization (WPO) lead to increased usage of Internet resources, with a net rise, rather than fall, of consumption. So, sustainability is more than Web Performance Optimization (WPO).

Take-home: Many, if not most, so-called “green” web hosts are not actually green. At best, these hosts trade carbon credits for their own energy-intensive and “dirty” infrastructure. This is especially true when “cloud” services run near peak capacity, and add local generators to supplement their power supply.

Greenwash
There is A LOT of greenwash among web hosts and designers.

Take-home: Green Design” (often practiced by graphic designers migrating to the web) implies that visual layout and visual content somehow makes your green. But many, if not most, of the “greenest” websites by content and philosophy are big energy and network hogs. It is a case of designers feeling they need to preach, but that sustainability does not apply to them.

Take-home: Sustainability is a design problem, not a matter of holier than thou designers telling other people to be green.

Sustainability is Design, not WPO

Take-home: WPO (Web Performance Optimization) by itself is not sustainable. Designers cannot just do what they wan and expect WPO or site engineers to “fix” their wasteful design choices.

Take-home: Web optimization needs to move into the pure design layer as well as code. The modern “iterative design” model includes frequent testing and “rollback” to earlier designs if problems occur with the prototype website or app. However, to really implement sustainability, “rollback” needs to go all the way back to the design layer. For example, if WPO discovers that there are a lot of bulky images, rollback needs to go back to design – do we really need a layout that incorporates these images?

Take-home: Hybrid Designers and Agile Design Teams are more sustainable. If you have “T” shaped designers who understand each other’s jobs, the overall designs tend to be more sustainable. The anti-pattern is “waterfall” workflow, where an early-stage cool-looking graphic design can lead to an energy-hog final web page. In a waterfall, the WPO specialist or site engineers can’t influence the design. In agile design, in theory, late-stage sustainability issues can loop back and cause a site re-design.

Take-home: Standards-based design, Mobile First, and Progressive Enhancement are all more sustainable than the alternatives. Inclusive Design gives virtual design a major element of traditional sustainability frameworks. Future-friendly design captures the essence of all sustainability frameworks.

Take-home: Some popular ideas, e.g. “invisible design,” are not necessarily sustainable.

Take-home: Sustainability can be a tool for resolving design strategy debates.

Sustainability and User Experience (Ux)
Take-home: There’s a possible law here: UX sustainability DOES NOT EQUAL energy sustainability.

Take-home: However, “lean UX” – as a design principle within a development team (e.g. using paper prototypes in agile development instead of a waterfall development path cranking out fully realized prototypes) could easily result in greater sustainability of the process of web design – this should be independent of Jevons’ Paradox.

What Everyone Can Do

Take-home: You don’t need a high-power WPO company or Site Engineers to make your site more sustainable. Optimizing sites follows an 80/20 rule. You can get 80% of the benefit by taking a few basic steps to sustainability:

  • Optimizing images
  • Reducing HTTP requests
  • Standards-based code
  • Progressive enhancement strategy
  • Avoiding excessive reliance on plugins for interface
  • Responsive layout
  • Responsive Logo and Responsive Image design

Similar to industrial design and architecture, a “swapping green ingredient” strategy may be appropriate for developing sustainability in games and on the web.

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

All-in-One Visual Web Editors are Less Sustainable

Take-home: A purely visual “web page editor” encourages less sustainable design. This is due to two reasons

  • Designers don’t know when a design decisions has resulted in wasteful code and markup
  • Designers are encouraged to think of web design as traditional (read print) design layout, instead of interactive design

Take-home: For this reason, tools like Adobe Muse typically “damage the earth.”

Properly used, a tool like Muse would be fine, but the interface encourages wasteful design – typically trying to shoehorn the web into a print design book. It also allows designers to disconnect themselves from the Internet ecosystem and pretend it is just a matter of Creative Suite style layout.

Online Editors and CMS

Online editors (e.g. Wix, SquareSpace) are better than visual web editors. This is due to the templates in these online tools being optimized by human designers, and their commitment to a web-centric (as opposed to design tool-centric) model for building web pages. Compared to web editors, they are more standards-based (more inclusive design) and efficient (less drag on the Internet). They exploit efficiency systems like Content Delivery Networks (CDN) which are the equivalent of “local sourcing” in web design.

Take-home: So, if you are going to develop a site without doing your own code, Wix is a much better option than Muse or SiteGrinder (now imitated in Dreamweaver CS6, which promises to convert Photoshop comps to web pages).

Take-home: The only thing worse than a visual web editor is a Content Management System (e.g. WordPress) loaded with a huge number of plugins by “web designers” who don’t understand their medium. Such sites are typically the Hummer sites of the Internet.

Game Design is Anti-Green

Take-home: Whatever the sins, of web design, game design and development are aggressively anti-green.

Not only do games ignore various efficiency measures in favor of maximum CPU/GPU burn, but the culture of gaming itself encourages (in the name of entertainment) pleasures of uninhibited excess. If you can constantly be “reborn” after dying, what is the take-home message? If you avatar has incredible power, what does that imply about real power. If a “power cell” is just a magic amulet your game character uses, do you imagine that real power can be generated that way? In games, everything will last forever and you can have it all, if you perform the right tricks.

So, game design is unsustainable at the technical, and user content level.

Computing Virtual Sustainability

There are no good standards for computing the sustainability or even the true “carbon footprint” of websites and apps. We need better ideas of how to compute the cost of adding a page to a site, and app to a phone, or a site to the Internet.

Green Boilerplates

A few “green” templates exist, (iSkeleton) but are not widely used. I’ve been working on ideas for a “green boilerplate” (see http://greenboilerplate.com) but as yet they are not ready for prime time.

Take-home: We need a Green Boilerplate!

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