About

A discussion of sustainable design aimed at the virtual realm – websites, web design and development, servers, hosting clouds…as well as games, both console and casual online. Ranges from low-level (coding) to midrange (front-end design, Art Direction), to high-level (UX as sustainability in different clothes).

What is Virtual Design?

If it’s on the Internet, it is ‘virtual design’. It includes website and web development, native apps on mobiles, online games, and virtual worlds. It also includes the “mashup” zone of the Internet – the growing cloud of web-based services, often replacing physical things and processes. In order to enhance sustainability and cut costs, more and more of our physical products are services are being moved to virtual ones. Think audio CDs to iTunes. Think real-life counselor to one you get to via a web chat. Think books to e-books. Think owning a fancy car to driving one around in Second Life.

Designers are key players in the ongoing “dematerialization” of design.

What is Sustainable Virtual Design?

How does sustainability enter the picture? Well, a skip over to the factoids page on this site shows that 10% of US power is already ending up on the Internet to power virtual products, websites, games, and services. In time, so much of our resources will be used to power the Internet that the virtual world that sustainable design will become part of everyone’s job (and deliverables). Sustainability, which is currently an issue for Industrial Design, Architecture, and Interior Design, will become part of a web designer’s and web developer’s work as well.

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

To accomplish sustainability, we optimize, but this is not for speed – we do it to reduce our carbon footprint, and by extension, that of the system our site is embedded in – the Internet. If the Internet uses less power, it will be easier to support and maintain more users and services in the future.

Sustainability reaches into the highest levels of design. A designer who uses tools made for print design, and “burns” a web page is less sustainable than one who designs directly for the web. The reason is that the web and print are different media, and the print tool almost certainly will create a fixed-width page suitable for paper. This page will fail to adapt to future changes in the web, for example the current shift to small screen mobile devices over desktops. The more you use “fixed-width” design tools (Photoshop and Illustrator) in design comps, the less sustainable you are. Yes.

Here’s another formulation from Tim Frick of MightyBytes’ TED talk:

Why now?

Before the sour-faced hippies get us. The web, game and virtual world communities of designers and developers should develop their own sustainable design practices.

How is this different from Green Hosting?

Green hosting won’t be enough, any more than creating renewable biofuels gives you an excuse to power a fleet of Hummers. The kind of design we do affects sustainability. It’s about more than where we get our electricity. Green hosting provides Sustainable Virtual Design with better “bit-sourcing”, but doesn’t affect the sustainability of the design itself.

How is the different from having a green office?

Many companies in the design area now take pains to make sure they recycle in the office, reduce “vampire power” sucked by their devices, practice environmentally-friendly sourcing of paper and other supplies. This is good – but Sustainable Virtual Design is concerned with what is going on in the monitors of designers, not their surrounding physical environment.

Why Designers?

As Nathan Shedroff says in his great book, Design is the Problem, the future of design must be sustainable. Industrial Design, Interior Design and Architecture already have serious sustainability frameworks in place, with ways to certify their efforts.

According to Shedroff, if we just try to be efficient, we actually increase our environmental impact. This is due to Jevons’ Paradox, named after the 19th-century industrial engineer who first noticed it. Jevons noted that more efficient coal production caused a drop in its price. Society then responded by using more coal – and it overshot the increased efficiency. Overall consumption rose, rather than fell. On the Internet, we’ve seen a similar story with bandwidth. As bandwidth has gone up, it has stimulated designers to create ever-more-complex “bloatware” web pages. In the last couple of years, page speed has slowed, despite bandwidth increases.

Sustainability frameworks escape Jevons’ Paradox by pushing responsibility back to design, not downstream efficiency engineering. The only way to reduce the Internet’s environmental impact is to re-think our entire design from the beginning. Otherwise, the engineers are just “streamlining a crufty hippo” that you, the designer, crafted.

As the world dematerializes to cyberspace, similar frameworks must appear for web designers and developers, Art Directors (yup). UX specialists, UI designers and front-end developers, back-end web service programmers, cloud hosting companies, virtual world creators, online MMOG users, and the like.

Ask yourself:

  • What is the “carbon footprint” or “embodied energy” or a web page?
  • Are some styles of online art and design less sustainable than others?
  • Is a web service better than the physical product or service it replaces?
  • Are 2D websites better than 3D virtual worlds from a sustainability perspective?
  • Does a “mobile first” approach improve the carbon footprint of your organization?
  • What efficient coding practices can “feed back” to improve visual design and art direction?
  • How to current Web design principles (Responsive Design, Progressive Enhancement) fit into sustainability models?
  • Is the best formal, numbers-based sustainability model for the Internet – Cradle To Cradle, Life Cycle Analysis, or something else?
  • How does the online design community develop a sustainable framework- before someone else does it for us?
Areas of particular focus include:

1. Energy and Resource issues – is a web page really more eco-friendly than print? We’ve assumed it is – but we have to do the numbers to find out, and examine various sustainable models and System Theory to figure out if we are helping or hurting the physical environment that sustains our virtual sphere. Sustainability appears in the hardware and infrastructure side of virtual design. This area of Sustainable Virtual Design is similar to current efforts in Web Performance Optimization, or WPO.

The goal is to design the site, considering not just for marketing or user goals, also including new goals which minimize the energy and resource utilization of the system it will be embedded in. The design should reduce energy consumption at the site, server, network, and user’s local computer. It should also reduce energy use by the user (efficient UX) and provide services that improve, rather than reduce sustainability of the larger world the Internet is embedded in.

People have already made a start – but there’s a lot to be done. Here’s an analysis that spends much time on energy minimization in creating a website:
http://www.onextrapixel.com/2010/09/17/how-to-become-an-eco-web-designer/

2. Design and Development – How do we chose the most sustainable programming frameworks and design patterns? Sustainability comes from behavior on the company/designer/developer side.

Designers need to be part of the whole process of creation, and should be ready to “roll back” their design ideas in the face of performance issues.

Under this definition, design decisions should include a justification for energy use (do we really need all that high-CPU animation?).  The designer needs to demonstrate to the client that building a website has less impact on the environment than providing information by other means (e.g. print). It also implies that direct coding to reduce cpu cycles is better than making an authoring tool (read Adobe) that tries to abstract away from code into a visual metaphor – but cranks out verbose, redundant, bad code (i.e., old Dreamweaver “behaviors”, which tried to emulate the Flash timeline).

In other words, designers need to by “hybrid” designer-developers to implement sustainability. Many current frameworks friendly to sustainability like Responsive Design, Progressive Enhancement, and Mobile First, all need a hybrid, or a team of hybrid designer-developers to implement them. This doesn’t mean that an artist has to spend 50% of the day writing code, but it does mean that they have to understand code well enough so they don’t create difficult-to-implement design, or a design adapted to their favorite software instead of the web. A hybrid can think outside the box to create completely new, more efficient design.

By the way, you need to “lose the leaves”. Sustainable messages are NOT sustainable media.

You don’t make sustainable websites by putting in lots of green CSS background images. In fact, most “green” sites today are poorly optimized compared to the Internet average. Green is not automatically sustainability – for example, “blue” stands for systems that actually improve, rather than maintain a system. The first step to modern sustainable web design is trying a new color palette.

Once again, this is YOUR responsibility, not a codebeast or site engineer.

The energy aspect implies standards-based HTML/CSS/JavaScript development, as well as strategies like local caching, mimnifying code – lots of things that are made easier by HTML 5. It implies replacing bulky bitmap images with vector standards like SVG and Canvas drawing. These design goals often match those for mobile sites, which run on slow (cellphone) computers which have low levels of available power.

Here’s an article which explores some of these issues:

http://knol.google.com/k/sustainable-web-design#

Here’s another:

http://www.biperusa.org/what-is-sustainable-web-design.html

The ideal designer has no fear of code. The ideal coder has no fear of design. Both can sit down, early in the design process, to “roll back” a unsustainable design to a sustainable one.

3. UX/UI, usability and accessiblity – how can we make the user experience sustainable? One way is to think of bad User Experience as accumulating virtual garbage. Think of the legions of abandoned shopping carts commercial sites with bad UX).

UX developers already think Systems Theory, so they are natural candidates for spearheading sustainability initiatives in their organizations. They also emphasize lots of work at early stages (paper prototypes and wireframes). This gets us away from the computer, which is good at “polishing a turd” with fancy visual motifs.

Designs that increase efficiency, and reduce the amount of searching needed to complete a task are sustainable. By this definition, UX maps almost perfectly to increasing user sustainability.

In other words, create sites that are usable and accessible, increasing user efficiency. Sustainability comes from the audience side – “don’t make me think” results in less use of time, money, energy resources by site visitors.

Accessibility and usability, which help ensure that the largest number of people have full access to virtual services, implement part of the “social justice” element found in physical sustainable design frameworks.

4. Search Engine Optimization (SEO) – It may seem strange to include optimizing for search engines in sustainability until you think what it does.

Sustainable SEO makes virtual footpaths through the Internet ecosystem to our site, while not compromising access to our site in the future.

So, nasty page-slamming SEO is unsustainable, since we’re likely to be shut down by Google.

If we think of the Internet’s ecosystem as a fabric of links, good SEO enhances the environment, and bad SEO “pollutes” it with lousy links leading to customer delays and mis-spent resources.

5. Production Team – how can we create companies that are sustainable in sourcing, and teams?

To be sustainable we have to avoid is “siloing”.

Siloed design strategies are common at larger companies, especially those that also create traditional media. This includes large entertainment companies, and creative agencies that do mostly print design. Each person creates part of the whole, without understanding the rest of the process.

A purely visual designer that’s never written a line of HTML will tend to create pages that are difficult to implement in code. They’ll make pages that look great in Illustrator. Unfortunately, the web is not a collection of Illustrator files.

A coder with no design experience won’t see how their optimization could allow “re-thinking” a design into a more sustainable layout. They’ll implement stuff that compromises the design, and the team will fight for months over their implementation, a few pixels off from the Photoshop comp. We waste energy in these fights, and therfore raise the “embodied energy” of our website before it ever goes live.

Ideally, the first step to Sustainable Virtual Design is sending the artists to HTML class…AND sending the coders to art class. Most sustainability frameworks emphasize flexible design and development strategies, and a team of hybrids is the best way to get it on the web.

While the Project Manager is the natural person to articulate and monitor sustainable goals, the “UX person” and the “Front End Designer/Developer” are natural hybrids in most teams. Their job sits at the center of the process, integrating from many sources. They are the team members most likely to understand sustainability, and may be the ideal sustainability advocates for your organization.

6. Business models –  Business models include the concept for how the site works – the value flows between the ‘players’ using the site. It’s a higher level than, say, visual design, and we apply Systems Theory to build the relationship between the two levels.

Business models are where the “social capital” element of sustainable frameworks impacts the web. They also provide the “social justice” component of sustainable design.

Certain business models can facilitate sustainability of the web – and others degrade it. An unsustainable business model might grow and grow, but mess up the Internet over time. Think video downloads, lifelogging, or the set of ever more bit-hungry applications predicted for the web’s future.

The typical business diagram of customers, partners, and money flows needs to be expanded to include the entire “Internet Ecosystem”. For example, a business model that shifts a website’s audience from desktop to mobile use should increase sustainablity, since in the future more people will use low-power devices. A model that reduced the time needed to complete a real-world could also be sustainabile, especially if it replaces a “long form” physical product or service that creates lots of physical waste.

In contrast, “free” web apps that constantly monitor users and serve up ads can zap a mobile’s battery in an hour, and should be viewed as less sustainable.

In following a sustainable virtual design paradigm, we should create business models which maximize the (positive) social impact of a site in the virtual ecosystem of sites and people.  

7. Client Corner – clients increasingly want a design solution that meets standards and expectations for sustainability. Standards and certification exist in the ‘physical’ design disciplines. Certifications will become more important in the future for virtual web design. Websites like CO2Stats (http://www.co2stats.com) are a step in this direction. In the long run, there will be something like an “Energy Star” for websites, games and apps, based on more than fast-running code. Certifications like LEED will appear for the web.

Generational shifts will also affect sustainable virtual design. The rising Millennial generation (see my friends at Lifecourse Associates) shows a decided “eco” bent in their external behavior (if not in their internal attitudes). Compared to Boomers and Gen-X, they tend to trust “outside” authority and look less to their personal “inner compass” for the big “what should I do”  thinking. They will tend to go with what authority, and their social networks say should be done. Millennials should be the target of sustainability marketing by your company  – they’ll tend to promote it to their organization.

Designers and developers also need to educate. Most clients, like many designers today, tout the Internet as a “weightless” green alternative to dirty physical products. They also see the web as a place to “greenwash” their products. Making something physical into a web page is not always green – in fact, in many cases, it results in more energy and resources being used than before. You’re not green because you use bits instead of paper!

Since customer/audience preception are so important for web-based marketing and promotion, sustainability arguments will find their way into personas and design documents.

An selling point for students looking for work – the demand for web, game, and virtual world developers has been strong in the last few years, despite the near-recession conditions in the US and Europe. However, anything that helps students get jobs is of interest – and a “sustainability” bullet on their resumes will help make them unique among growing poll of new designers out there. Here again, standards will help.

It should be practical to develop a “sustainability minor” in many design/technical programs.

Communication with stakeholders via sustainability language – many of the decisions made by designers and developers can be re-worded into sustainability frameworks like Cradle to Cradle. This type of remapping allows everyone on a large project to have some understanding of decisions made in specific areas. It may also provide a way for the low end (coders, developers) to feed forward and influence decisions at higher levels.

 Sustainable Virtual Design is NOT Green Propoganda – it is not simply Art Direction, or working for clients who want a greenwash! Right now, it’s hard to tell who is greenwashing and who really cares. Future development of a Sustainable Virtual Design model will convert “sustainability” on the Internet from political affectation to practical description.

We are also skeptical of “green” being defined as primarily an attitude with social/political features, e.g. this definition:

“…Coop America: Green businesses operate in ways that solve, rather than cause, both environmental and social problems. These businesses adopt principles, policies, and practices that improve the quality of life for their customers, their employees, communities, and the environment…”

While this might supply the motivation for sustainable virtual design, by itself it is just a cool belief system. Buy a green T-Shirt and go to a poser party.

You have to solve your own green problems to become the high priest of green for everyone else.

My Related sites:

Plyojump – my teaching, biography, other materials.

http://www.plyojump.com

Green Boilerplate – a project to develop sustainable starting points for web/interactive designers and developers (hopefully the same person!)

http://www.greenboilerplate.com

Other sites to check out:

Nathan Shedroff’s “Design is the Problem” Blog

http://www.rosenfeldmedia.com/books/sustainable-design/

Robots that Jump – historical stuff from our team’s bid in the 2005 DARPA Grand Challenge, plus rantings on the unpleasant similarity of belief in artificial intelligence to religion. Related to my background as a molecular biologist at UCLA and U Chicago.

http://robotsthatjump.wordpress.com


2 Comments

  1. “Certain business models can facilitate sustainability of the web – and others degrade it” is interesting. Sustainable design should be considered during the construction process. Great blog

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