Quick look: Web Sustainability Guidelines (WSG) 1.0 - updated
Web sustainability grows up
In this issue: the official Web Sustainability Guidelines are here and they’re ready to upend everything about how businesses approach digital. I took a tour and have Thoughts (spoiler: mostly very positive).
Update 11/30/23 - Tim Frick of Mightybytes sent me some updated resources for the WSG, and I’ve included them here.
Sustainable web design.org has updated to reference the WSG
Web sustainability grows up: meet the WSG
The Sustainable Web Design Community Group has published the Web Sustainability Guidelines (WSG) v.1.0. This is a Huge Deal, because it collects and formalizes an entire approach to digital sustainability, for multiple audiences, in a business-acceptable way. For extra legitimacy, it’s hosted by W3C (as a draft report, with aspirations for becoming a standard).
The Web Sustainability Guidelines (WSG) 1.0 explains how to design and implement digital products and services that put people and the planet first. The guidelines are best practices based on measurable, evidence-based research; aimed at end-users, web workers, stakeholders, tool authors, educators, and policymakers. The guidelines are in line with the Sustainable Web Manifesto.
from WSG at a glance
The guidelines are the result of a ton of work by a lot of people. In numbers:
50 volunteers worked on this for 2 years, creating…
93 guidelines, supported by…
232 success criteria.
Aside: 2 things sustainableUX is doing about the WSG
Moderating a live event about the WSG with some of the contributors. Pencil it in for December 14th 2023. Details to come.
Making a my own cheat-sheet version of the WSG - see the end of this newsletter.
What’s in the WSG?
The WSG breaks web sustainability into 4 big pieces:
User Experience Design: “research and ideation, journey design, content and assets, and quality assurance.”
Web Development: “development approach, code minimization, code coherence, and code security.”
Hosting / infrastructure: “environment commissioning, minimizing environment and data, and minimizing human disruption.”
Business strategy / Product management: “reporting, disclosure, strategy, and policies from both an organizational and website / product level.”
Go beyond optimizing jpgs and green hosting
The guidelines are deep and broad. They consider the entire lifespan of a digital product, from ideation to sunsetting. They also consider the wider business context, from the business model, ESG, governance, and culture change. In other words, it’s a lot.
Thankfully, the guidelines are underpinned by supporting success criteria that are both concrete and actionable (well, mostly), making it easier for designers and developers to follow along and create greener products.
Not just about CO2
The guidelines take into account the impact on people (users and non-users and non-humans), as well as workers, the supply chain, accessibility/inclusivity. This is a much broader view of sustainability than just measuring CO2 impact.
In fact, the guidelines are so broad that it doesn’t seem a stretch to see how the WSG could become a complete ethical design standard.
Credible & business-ready
The authors have been smart about aligning the guidelines to recognized standards. This makes it feasible to connect a sustainable digital project to an organization’s wider goals. Specifically, the WSG references Environmental Social Governance standards. These are used by more than 90 percent of S&P 500 companies.
Convinced yet? Let’s dip in:
The WSG for UX designers
UX designers are probably going to want to focus on the 29 guidelines in Section 2 (User Experience Design). For this article I’ve put the guidelines in buckets that roughly correspond to project phases: upfront research & ideation; design philosophy, design principles, interaction design; content & UI design; and governance.
1. Research and ideation
The value of research is demonstrated in at least 5 guidelines. As well as the needs of users and stakeholders (GL 2.2. and 2.5), the guidelines ask the designer to take into account the broader impacts of a service on non-users (2.2) and society & the environment (2.1 - “undertake systemic impact mapping”).
The guidelines spell out the value of good UX process in the context of sustainability - for example GL2.4, reminds audiences of the value of wireframes and prototypes in lowering the risk of poorly-conceived features and rework. With many product teams skimping on good UX research & process, it’s nice to see this reminder.
2. Interaction design & design principles
Ever get tired of sweating out yet another Design Principles statement? The WSG handily pre-supplies several universal principles for you.
2.6 Create a Frictionless Lightweight Experience by Default
2.8 Respect the Visitor's Attention
2.10 Use Recognized Design Patterns
2.11 Avoid Manipulative Patterns
2.13 Use a Design System To Prioritize Interface Consistency
Pithy version: be Fast, Honest and Predictable.
At the next level of specificity, guidelines that help you plan your interaction design:
2.20 Provide Accessible, Usable, Minimal Web Forms
2.21 Support Non-Graphic Ways To Interact With Content (see also: accessibility)
2.22 Give Useful Notifications To Improve The Visitor's Journey
Some of these may seem like a stretch. For example, 2.9 “Respect the Visitor's Attention” rules out tactics that “unnecessarily lengthen the time they spend using the product or service.” This is a good ethical and humane stance to take (Tristan Harris would be proud), but where’s the CO2? The authors have astutely preempted the question:
Economic [benefits]: Organizations that monetize visitor attention strive to keep it as long as possible, therefore increasing their product or service's environmental impact.
Still, this could be tough to implement in an environment where product owners are obsessed with retention, time on page, and other short-sighted KPIs. But worth it.
3. UI specifics: lean = green
7 of the 29 guidelines are aimed at reducing unnecessary assets (so lowering the energy cost of fetching a web page). The image assets section (2.15) is particularly well-supplied with success criteria and methods, but there is plenty to say about other media (2.16), animation (2.17) and documents (2.23). Many of the suggested techniques are already established best practice (optimize your images!); others will probably cause some head-scratching (see Raising the Bar, below).
These guidelines nicely complement the web development guidelines (Section 3), many of which relate to shaving bytes.
4. Governance & process
The WSG has plenty to say about how to implement these strategies and maintain them. 4 Guidelines cover post-release testing (2.25, 2.27, 2.28, 2.2.9) and monitoring, 2.12 gives guidance on documentation.
My Thoughts
Raising the bar… a little too high?
Dig into the various success criteria that underpin the guidelines and you’ll find a mixture of established best practices and more advanced techniques, but also a bit of WTF.
An established best practice:
Optimize Images
Resize, optimize and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions.
Web designers have been taught to do this since the advent of responsive web design or before. Modern site-build toolchains usually include tools that will take care of the optimizing automatically. This criterion should be easy to meet, and you may already be meeting it.
But the next Success Criteria is a different animal:
Sizing And Deactivation
Let the visitor select the display size, and provide the option to deactivate images.
Can you picture mainstream sites offering “image options” control to users? Although I can imagine highly carbon-conscious individuals using browser controls & plugins to block images directly. Borrowing again from WCAG, I’d describe this as a “AAA” criterion - nice to have, unlikely to be implemented outside of specialized sites. Nice segue though:
The WSG isn’t WCAG
The Web Content Accessibility Guidelines have had an incalculable positive effect on the accessibility and inclusivity of the web. I hope that the WSG will have a similar impact on sustainability. But don’t lose sight of the differences.
Difference 1: WCAG is legally-required (by the ADA, DDA, 508, EEA), whereas there aren’t any laws that cover digital sustainability. So far, anyway.
Difference 2: WCAG is pass/fail, WSG isn’t (I think?). With WCAG, a site either conforms to level A, AA or AAA, or it does not (fuzzy requirements aside).
The WSG does not have a matching conformance model. In any case the guidelines are so comprehensive that a 100% pass seems improbable, unless you were designing a personal site specifically with WSG in mind (prove me wrong).
Use what you can, learn from the rest
I’ve mentioned a couple of times that the WSG is, like, super-big. My advice to anyone finding them overwhelming: start with the overview, then skim section 2 (UX design), digging deeper on any new concepts. Getting a grasp of Section 2 will give you a ton of ideas on how to apply sustainable design principles in your own work. With luck you’ll find that you are already following much of section 2 by simply following good process and practicing ethical design.
Once you’ve got a grasp on the design guidelines, take a gander at the product strategy & business sections - these will help you sell sustainable design work to your organization. We’ll take more of a look at these in a future issue.
Three cheers for the WSG Community
Guidelines like these take a long time to come to fruition, and clearly the WSG required a ton of work to come into being. It’s not glamorous work and it’s entirely volunteer. So send them some positive vibes - better yet, start promoting the WSG where you can.
My own WUH-CAG for the WSG
W3C guidelines are often long and technically precise in a way that can be off-putting to the busy designer. For instance the WCAG 2.2 is 21,000 words long and would take over an hour to read. In response, people started publishing their own WCAG cheat-sheets to get straight to the actionable stuff. My favorite: WUH-CAG.
The WSG is almost twice as long as WCAG. Fortunately, the WSG comes complete with a “At A Glance” section that does a nice job of giving a digestible overview.
Update 11/30/23: the WSG has new summary resources: WSG Quick Reference + Checklist PDF
For folks who like checklists, I’ve started my own cheatsheet. Take a look at my draft attempt. I don’t have a name for it yet. How about Wuh-SG, or WTFSG?.
SustainableUX is a reader-supported publication. Add your support by buying a discounted subscription.
Thanks for reading!