Since Sustainable Virtual Design lacks a formal certification, sustainability databases for site “ingredients”, and agreed-on measurements of sustainability, where do we start? One way is to define roles of various parts of your group with respect to sustainability.
In this post have divided up web design and development into various “green” areas. Each area can define local “sustainable” design choices, perhaps as “green ingredients” similar to those in design of sustainable physical products. A round of Systems Theory thinking would establish the crosstalk/feedback needed between the various groups.
It is important that information flows in both directions. Instead of a business model simply driving down to design, and further down to programming frameworks, for sustainability those levels should “feed up” to adjust the business model for efficiency. Front-end developers need input to design layouts, but front-end development should also “feed up” to affect what kind of layouts are designed. Such a strategy pretty much assumes we’re doing rapid prototyping, even if we’re working with an existing design.
You start with a high-level mission statement. Here’s a great one from ZeroAbove, though it only considers “green office” issues:
http://www.zeroabove.co.uk/sustainability.html
After writing a mission statement for sustainability, the Sustainable Virtual Design group should break down strategies for different areas of design and development. This should happen even for freelancers, who are hybrids doing several different jobs. In big teams, my intuition is that responsibility should like with the UX person, or a hybrid front-end designer/programmer. Specialists who can only do one thing – one trick ponies – should not get this job, even if they score high on “green lifestyle”.
I’ve given a possible breakdown of a web team below:
Branches of Sustainable Virtual Design common to other design fields (e.g. sustainable graphic design)
- Green Business – business models that improve productivity or efficiency without damaging the larger environment providing benefits to only one part of the online community.
- Green IT and Hosting – use of “green webhosts”, adoption of green IT practices in the local office, sourcing “green bits” for projects.
- Green Office – Office practices designed to reduce excess “vampire power” use by devices, and use of sustainable print and office supplies.
- Green Designer – Personal lifestyles and business orientation adapted to promoting sustainability. Bicycling to work, teleconferences over face-to-face (if you can prove that carbon was really saved), and good understanding of the various sustainable design strategies – in other words, well-read. I suspect that, in the future, the “Quantified Self” http://quantifiedself.com/ movement will have an impact on how we define sustainable designers – their model is to self-iterate via personal dashboards.
- Green Content – this is creating a permanent stream of sustainable content, avoiding the “stale web page” problem. Creating a dynamic website with information that is easily maintained. This requires splitting code from data, most often accomplished by a database. Interestingly, this is a server-side sustainability, typically done with something like PHP/MySQL. This was the first definition of sustainable web design out there – witness this blast from the past – http://www.softcoded.com/web_design/designing_sustainable_web_site.php. In moderm terms, this would be a species of Progressive Enhancement, with basic information all dynamically composed at the server-side.
- Green Team and Workflow – Effective use of the iterative/agile design process to incorporate feedback on design sustainability, and increase the sustainability with each iteration of a design prototype.
- Green Code – Programming, mostly on the front-end (the back end typically can only contribute ~15% savings) that minimizes download sizes, minimizes cpu cycles, and is modular and reusable. Support for the “browser-challenged” via (small) polyfills, and awareness of how code decisions feed back and constrain design. The ideal coder understands and does some design – and can discuss sustainability issues in coding efficiency with a dedicated designer.
- Green WPO (Web Performance Optimization) – ensuring your site uses methods which decrease downloads and make pages load faster as well. Currently the province of web site engineers at large companies, it needs to become part of every designer/developer’s toolkit.
- Green Ui (User Interface) – Designs that consume less energy in download and rendering. Here, the issue is that rich media uses bandwidth and CPU time out of proportion to its “bang” on the page. A page with lots of background images, or some huge ones is bad for sustainability. Ditto for one which uses movies or lots of audio for a minor increase in the user experience. At the extreme end of sustainability, “typographic” interfaces where the text IS the design are probably most sustainable. The ideal Ui person “prototypes” in code, rather than misleading “fixed screen size” design tools.
- Green UX (User Experience and Interaction Design) – Interaction design that minimizes time spent by users completing tasks (remember that web pages constantly drain power while visible). UX is one of those areas that is sustainability by another name. The goal of letting users understand and complete tasks quickly, as well as be absorbed by the “story” that good Interaction Design tells, is almost the same as sustainable UX. Keep up the good work! The ideal UX person is right in the middle of early prototyping, and possibly the best person to handle the “sustainability initiative” at your organization. They should do some code and design, and not be restricted to GUI wireframe tools.
- Green SEO (Search Engine Optimization) – Think of the web as a landscape created as a fabric – and that fabric is the “clicktrail” I need to go from one place to another. In the early web, links from one site to another created “footpaths” in cyberspace. Today, SEO builds superhighways between users and the content they’re looking for. Sustainable SEO honestly and transparently links user interest to what the site does. The site should have hooks for Google and other search engines (thereby reducing the energy they need to index your site) and site descriptions to the engines should be true and not designed simply to grab eyeballs. Spam links, gaming search engines, and misleading links between sites is the equivalent of “roads to nowhere”. We can also call it pollution of the Internet – making a clean virtual river toxic. The ideal SEO person knows the current discussions of “SEO sustainability” and can apply them to the current project.
- Green Art (Art Direction) – Art sensitive to the medium of delivery, adjusted to the user’s context, media standards, and effectiveness of communication rather than “look at me” art. This is design that considers the end user and their platform. It’s less sustainable for art to follow a “Graceful Decay” strategy – the users with most expensive hardware see the best art. Instead, art should be designed for the audience and (mobile!) platform first. Depending on the site, it has to work for the “browser-challenged”. Consider if you need a saturated JPEG photo, when a smaller 4-color PNG (or better yet, a HTML5 canvas script) to convey your message. Consider typographic interfaces before iconic ones. Your message doesn’t come first, sustainability does. Remember that what we’re talking about here is the sustainability of YOUR art, not any “green” messages you send using art. The ideal Art Director can code well enough to understand decisions being made by dedicated coders.
In lieu of formal certification, the best place for describing how different parts of your company provide sustainable web design is a separate page, similar to an “About” or “Mission Statement” page.
In my opinion, “sustainbility” should be a menu link at the same level as “contact us” in your design.
Clearly, you don’t have to follow these rules – nobody’s forcing you. But you can’t claim “sustainability” in your design process without including most, if not all of these steps. Stay tuned for a sample mission statement on my site, http://www.plyojump.com
Sustainable Virtual Design 
1 Comment