The Ouroboros Strategy for Sustainability, Part 1: Listing Green Ingredients

I speculate here on the nature of “green ingredients” for a larger “Ouroboros Strategy” leading to the Sustainable Web. This is part of a larger strategy for implementing Sustainable Web Design at your organization:

  • Stage 1 – define high-level sustainability goals
  • Stage 2– define use of “green ingredients”
  • Stage 3 – calculations of sustainability
  • Stage 4 – use “reporter” tools to confirm sustainability gains

Note that this strategy is for the medium, not the message. If you create a site that causes people to recycle more, but uses up more bits to do so, its is not automatically a sustainable move.

The following concerns Stage 2, defining green ingredients. Like the physical world, Sustainable Virtual Design uses design techniques and strategies, as well as some physical ingredients (e.g. office paper and ink). Unlike the physical world, Sustainable Virtual Design also uses ingredients made out of bits.These virtual products (e.g. code libraries) don’t have the problems of toxicity and durability of the physical world. Their main effect is on the energy needed to create and maintain a website, ultimately tied back to energy systems powering the Internet.

Due to these differences, we’ll need to come up with our own definition of a “green ingredient”, so here are some ideas. In my opinion, strategies taken during design (e.g. “mobile first”) should be counted as a green ingredient, as well as code snippets, templates, and libraries that enhance Web Performance Optimization (WPO).

To test out a candidate “green ingredient”, try putting it into the following sentence.

Green Ingredient (your ingredient) helps sustainability goal (high-level goal) for of( give the division of the web design process) for (give the job desicriptions)  by (give your reasons that satisfy sustainability goal here).


Green Ingredient Typographic Design helps sustainability goals of Democratc inclusion and Support for Diversity of Green Art for Art Directors and Artists by creating an interface adapted to a wide variety of cellphones, tablets, and desktops which will not require extensive re-coding to be implemented in the working site.

Here’s a few of my own green ingredients which pass the “sniff test” above that I feel are crucial to long-term sustainability of the web. I apologize for putting “green” on everything, but it will get the point across in the search engines!

Some Green Ingredients

Green Business Model

Dematerialization – converting a real-world product to a service that uses less resources. To really demonstrate this, a comprehensive “Life Cycle Analysis” is required.

Transmaterialization – convert a physical product to use the Internet to “reprogram” its use. This provides durability of the product, and important component of sustainability. Book readers that can browse the web efficiently, e.g. Kindle Fire, provide an example of transmaterialization, as do cellphones that can acquire new features via software “apps”.

Sustainability through Social Networking – High-level sustainability frameworks identify democratic access, plus support for a diverse community, as key goals. Social network sites have the ability to provide this function, linking physically distant groups of people into virtual communities.

Make something more durable by going virtual – The paradox of the virtual world is that, while bits are ephemeral, with the proper (cloud) storage methods, virtual products and services are effectively immortal. A product or service, re-imagined as something stored in the cloud, is likely to be more sustainabile than a physical product which decays or deteriorates, leaving behind waste.

Reduce waste by moving to bits – Unlike physical manufacturing, designing for the web does not release toxic intermediates, outflows, or   damaged goods.

Green Art

Typographic interfaces – replace image-heavy designs with “beautiful type” – information and style combined in the same visual elements. These have the advantage of easily adapting to a wide variety of devices. In addition, type is an “old symbol” that is universally recognized, compared to elaborate visual layouts or web animation. Finally, typographic interfaces are pure “send the recipe” – less bitmap media needs to be sent to the client.

Lose the leaves strategy – this strategy specifically avoids common “green” design images and motifs (e.g. leaves in the background) in search of a truly sustainable design. As an example of the strategy, using blue colors plus ‘construction’ motifs in art direction might effectively convey a sustainability message without invoking the rainforest.

Flexible art strategy – This strategy avoids treating images as something fixed in size and shape, something that most design tools do “under the radar”. Very large canvases are defined, and the art is imagined as changing in ways different from standard resizing. This is the equivalent of Responsive Design, adapted for visual art. Change can occur along dimensions of shape, color, resolution, symbol, or type.

Design for vectors – Conversion of bitmap design to vector art can produce major savings downstream, since the final product can be converted to SVG (Scaleable Vector Graphics) using a tool like Inkscape or the newest version of Adobe Illustrator. Vector graphics can also be converted to Canvas commands using AI2canvas

For this strategy to be effective, the artist needs to use the conversion tools to check their work, rather than relying on a front-end developer to do it for them.

Staying in “vector” also allows many motifs, e.g. gradients, to be simply replicated in CSS, eliminating the need to create large CSS background images. Ideally, the artist should learn enough about CSS to implement these patterns directly, rather than having a graphic tool approximate it. As I always say, we need hybrids to carry out successful sustainability.

Design for CSS3 Transitions and Animation – The same CSS-based strategy can be applied to creating motion graphics on the web. Designing with the capabilities and limitations of CSS3 from the beginning is a more sustainable strategy than making something in Adobe Aftereffects and shoehorning it into an HTML5 animation system.

Green Interaction Design

Evolving Ui elements or “Morphing” – This strategy implements the user interface with elements that react to user interaction by becoming more complex, typically through Ajax interaction. For example, a database readout only shows a few results, and computes and downloads more results only if the user scrolls to the bottom of the results.

Green Design and Front-End Development

Uplift to Markup – In this strategy, images are examined, and those which can be created using CSS techniques (e.g. gradients or simple patterns) replace bitmaps. HTML5 form elements are used instead of equvalent JavaScript libraries. Using these tools requires co-ordination so that art is designed to match the capabilities and limitations of the tools.

Sustainable Enhancement – A variation of Progressive Enhancement, this strategy is more sustainable since we only send the media and code needed for each user’s device. It is a little different from Standard Progressive Enhancement, which starts with universal support for all users, but starts with a “barebones” site that is enhanced as the sophistication of the user’s device increases. This requires integration with Art Direction, since they will need to define designs for different levels of Sustainable Enhancement.

Sustainable Responsive Design – A variation of Responsive Design emphasizing support for the wide variety of screen sizes in the modern world, this method uses CSS media queries to define device groups with a specific layout, then implements a flexible grid for the screen size variation within the device group. In the sustainable version, additional complexity is only added if it improves user experience. This requires integration with Art Direction, since they will need to define styles and transitions for the various device groups.

Mobile First strategy – This is the most important of the strategies, and implicitly includes a bias in UX and business model. In the Mobile First strategy, the focus of design is shifted from energy-hungry desktops to energy-efficient cellphones and tablets. The desktop version is then designed from the mobile version, rather than the other way around.

The resulting sites feature sharp focus on what the user needs, rather than throwing everything at them the way that many desktop interfaces do. In addition, the mere presence of a good mobile design will cause users to shift to using it, reducing use of desktops and thereby reducing electricity consumption. The Mobile First strategy is a good example of how we can use design to avoid Jevons’ Paradox – we increase efficiency, but we do NOT increase consumption by users. As a result, gains are much greater, and more long-lasting than simply increasing efficiency on the code or site engineering level.

No-Print Prototypes – No, this isn’t instructions to the printer. Instead, this is design which explicitly does not start from a print perspective, or originate in design tools created for the printed page. In the strategy, designers and developers explicitly do not use tools with fixed-width document sizes, or those that employ rigid grid structure. Instead, the design proceeds from a basic interactive process, which is elaborated into a specific visual display facilitating task completion.

Following this strategy avoids “shoehorning” design for one medium for another. Instead, design leaps directly from a “paper prototype” to a minimal HTML and CSS page, preferably following the Mobile First and Sustainable Enhancement strategies.

Green Code & Green Server

  • Replace expensive client-side JavaScript, with more efficient server-side methods when possible. For example, implement the Apache Server mods like modpagespeed for auto-concatenation of JavaScript and CSS files, along with many other optimizations. If you have control of your web server, this provides a very simple way to reduce HTTP requests, without disrupting the current design workflow. It also fits nicely into the Sustainable Enhancement strategy, which puts more of the “decision” code on the server for serving out appropriate pages for each user.
  • Use micro-JavaScript libraries, instead of large, “one size fits all” mega systems, like those found at
  • If mainstream libraries like JQuery are used, source them from a CDN network like Google Libraries API If a web user goes to several sites using libraries on this CDN, the first download of the library can serve all the sites they visit.

Green ISP

Green Office

  • Source paper, ink and office supplies by checking sustainable databases and calculators like those at Re-Nourish developed for the print design industry.
  • Include lifestyle changes undertaken by employees, e.g. telecommuting instead of driving to work.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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