Web Sustainability Guidelines (WSG) 1.0 covers a wide range of recommendations for making websites and products more sustainable. Following these guidelines which utilize environment, social, and governance (ESG) principles throughout the decision-making processes, you can minimize your environmental impact through a mixture of user-centered design, performant web development, renewable infrastructure, sustainable business strategy, and (with metrics) various combinations of those mentioned. It should be noted that these guidelines will not address every possible mechanism or strategy to become sustainable, as such, these guidelines (which are notably Web orientated and focused) should be seen as a starting point in a sustainability journey (coverage does not extend for example to manufacturing or shipping of physical products). Following these guidelines will often make Web content more accessible, usable, and performant as a by-product.
To use these guidelines, it is highly recommended that you take a methodical approach. Rather than working through the entire document and broadly attempting to apply everything held within to your project or service, scroll through the table of contents to find a guideline that appeals to either your skill set or that you (based upon the impact / effort rating) feel comfortable in attempting to tackle. Sustainable change is measured in progress over perfection and by breaking down the specification into achievable goals based upon guidelines or even success criteria, you can more easily progress toward long-term targets. Guideline examples and resources may also provide implementation guidance while benefits can help justify their usage to management.
This document has been reviewed by Community Group members and interested parties. This is a draft document which may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to cite this document as other than a work in progress. The Community Group's role in publishing is to draw attention to the specification and to promote its widespread deployment.
By publishing these guidelines, the Community Group does not expect that the work produced in this specification will affect the work undertaken by other W3C sustainability, accessibility, or performance groups. The Community Group will continue to track these Working Groups and Community Groups as appropriate. This specification closely aligns itself with the principles laid down for Web Platform Design [[design-principles]], Privacy [[privacy-principles]], the Ethical Web [[ethical-web-principles]], and Human Rights [[HR-Spec]].
To provide feedback regarding this specification, the preferred method is using GitHub. It is free to create a GitHub account to file issues. Comments received on the specification cannot result in changes to this version of the guidelines but may be addressed in errata or future versions of WSG. A list of issues filed as well as archives of previous mailing list public-sustyweb@w3.org (archive) discussions are publicly available. There is currently no preliminary interoperability or implementation report, however potential implementation strategies alongside filtering and categorization of guidelines are showcased within the Sustainable Web Design website.
In 1999, Web Content Accessibility Guidelines [[WCAG22]] defined a set of baseline guidance for Web content developers and creators of authoring tools, with the primary goal of promoting Web accessibility through the adoption of inclusive strategies. Through a similar methodology, the Web Sustainability Guidelines promote environmental, social, and economic best practices based on measurable, evidence-based research; aimed at end-users, website or application creators, product owners, stakeholders, tool authors, educators, and policymakers, with the primary goal of reducing harm to the wider ecosystem (regarding people and the planet) through sustainable strategy adoption.
For those unfamiliar with sustainability issues relating to the Web, consider that many variables [[VARIABLES]] may contribute to waste or emissions being produced online.
Web Sustainability Guidelines (WSG) 1.0 is developed in cooperation with individuals and organizations around the world. It does so intending to provide a shared strategy for Web sustainability that meets the needs of individuals, organizations, and governments internationally. WSG 1.0 is designed to apply broadly to different existing Web technologies and to be testable with a combination of automated testing and human evaluation.
Web sustainability depends not only on sustainable websites and products but also on sustainable Web browsers and other user agents, examples include the performance of rendering and the accurate measuring of website energy use through developer tooling. Authoring tools also have an important role in Web sustainability, by ensuring performant code, reducing waste, and the results are served in the most sustainable way possible.
Significant challenges were encountered in finding existing research data to both identify and establish guidance for all the variables that affect Web sustainability, which came as no surprise with the subject being such an emerging and rapidly evolving field. Work will continue in this area in future versions of WSG.
The individuals and organizations that use WSG 1.0 vary widely and include Web designers and developers, policymakers, purchasing agents, teachers, and students. To meet the varying needs of this audience, several layers of guidance are provided including general guidelines, testable success criteria, impact and effort ratings, advisory potential benefits, documented examples, Global Reporting Initiative (GRI) ratings, evidence-based links, and category tags.
All of these layers of guidance (guidelines, success criteria, impact, effort, benefits, reporting, examples, resources, and tags) work together to provide guidance on how to make content more sustainable. Authors are encouraged to view and apply all layers that they can (relevance, time, or budget permitting), including the advisory techniques, to best make their product or service the most sustainable it can become. It should be considered that while great care has been taken to make these guidelines as well-rounded and feature-complete as possible, there will likely be additional tasks authors can perform to improve sustainability which this specification failed to address due to (for example) new techniques becoming available.
At the top are six principles that provide the foundation for Web Sustainability: clean, efficient, open, honest, regenerative, and resilient.
These guiding principles were chosen to act as the foundation of the WSGs on the basis that they opened the conversation as to what Web sustainability could and should mean for website or application creators and product owners attempting to make a change to benefit people and the planet.
While the primary focus of our guidelines is sustainability in the environmental impact sense, to avoid narrowing our definition, as with many frameworks this specification takes an ESG approach to sustainability. The benefit of this methodology is that while we do recognize the importance of energy / carbon accounting and reduction, we avoid carbon tunnel vision and seek to approach digital sustainability reductions through additional measures such as through the reduction of water waste and raw material conservation such as paper. We also are mindful of the social aspects of sustainability and the importance of people as well as the planet, thereby including important criteria, notes, and cross-links where appropriate to W3C work in accessibility, privacy, and other groups and including mentions of Corporate Digital Responsibility (CDR), ethical behavior, and other important disciplines.
Of course, principles on their own do not make for good testable guidelines, which is why our guidelines are as heavily evidence-weighted as possible, aligning with existing sustainability reporting frameworks and standards (such as GRI). We also have made every effort possible to map our work to comply with existing and upcoming worldwide regulatory frameworks to assist with compliance.
Under the principles are guidelines. These guidelines provide the basic goals that authors should work toward to make content more sustainable. The guidelines provide the framework and overall objectives to help authors understand the success criteria, which are testable against, to implement better digital solutions. This specification groups guidelines within four categories (User-Experience Design, Web Development, Infrastructure, Product and Business) that overarches Web worker specialisms. It should, however, be noted that while many of these guidelines are curated into categories for simplicity, often they are not limited to a single group and can be utilized within other specialisms for a sustainability benefit. They also come equipped with tags that can be utilized by third-party user-agent tools to filter the criteria on journeys, categories, preferences, or additional variables to benefit the author during the implementation process.
These guidelines also come with both an impact and effort rating system. Whereas Web Content Accessibility Guidelines (WCAG) uses A to AAA (or in the future, Bronze to Gold) as a measure of conformance against the entire specification, WSG 1.0 uses a simpler system of Low, Medium, or High ratings against each individual guideline to reduce the burden for individuals to identify quick wins or minimal implementations, from long-term benefits or heavy refactoring while encouraging a policy of progress over perfection.
Impact:
Effort:
It should be noted that the coverage of impact and effort may be left open to interpretation, due to the broad and varying nature of how variables can benefit the wider ecosystem. For example, a guideline may have a low impact on preserving water but a high impact on preserving electricity. As such, the nature of benefits is nuanced and may require more in-depth analysis if authors wish to target specific environmental concerns such as water, paper, or mineral waste. This is partially addressed by GRI reporting methodologies, however, impact and effort ratings may be something the community group could address in a future version of the specification to give more targeted advice toward special interest groups wishing to reduce a type of emission.
For each guideline, testable success criteria are provided. WSG 1.0 success criteria are written as testable statements that are not technology-specific. Guidance about satisfying the success criteria in specific technologies, as well as general information about interpreting the success criteria is provided in separate documents or within third-party sources as cited evidence. Details regarding machine testability and whether human testing or intervention is required in order to meet a success criteria are indicated against each success criteria.
For each of the guidelines and success criteria in the WSG 1.0 document itself, the community group has also documented a wide variety of potential benefits. The benefits are informative and may potentially justify the scope for compliance with the specification. Examples (where possible) and Resources (third-party evidence-based links) are provided to allow authors to better address the guidelines through implementation and specific techniques.
Furthermore, for those requiring guidelines to be linked to a standardized methodology that can be used in reporting the digital sustainability conformance levels of a business, a section on GRI compliance is provided.
GRI Impact:
As with impact and effort ratings, a similar scoring methodology has been used within each rating section.
For this specification, an open source Jupyter Notebook was created. As an input, it takes a spreadsheet containing all the guidelines and (using low, medium, or high) their indicators of impact on the reduction of server resource usage, network transfer, and end-user device usage. Then it takes data from a GreenIT Report [[FOOTPRINT]] which estimates the environmental impact of the mentioned categories across material use, water use, energy use, and GHG emissions. It then combines these datasets and estimates the comparative impact of a given recommendation on different sections of GRI taxonomy.
As well as sections marked as non-normative, all authoring diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative. The main normative content of WSG 1.0 is composed of guidelines and success criteria, which define requirements that impact conformance claims. Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.
This section lists requirements for conformance to WSG 1.0. It also provides information about how to make optional conformance claims.
The WSGs approach to conformance differs from WCAG in that in preference to having conformance levels, these guidelines are robustly built so that they can be implemented over time, in a non-specific order, and each will provide some measurable sustainability benefit. As such, conformance is measured upon the implementation of each guideline (and all of its success criteria being met) across the whole website or product.
Total conformance is achieved by meeting every Success Criteria for every guideline within the specification. As a general policy, most websites or products will not likely be able to satisfy all Success Criteria. This could be as a result of time commitments for refactoring code, or because certain guidelines and Success Criteria simply do not apply to your work. In these situations, it is not recommended that authors prioritize conformance over other important website features such as security updates. Pragmatism and progress over perfection should be considered paramount when implementing and conforming to these guidelines.
Conformance claims are not required. Authors can conform to WSG 1.0 without making a claim. If a conformance claim is made, then the conformance claim must include the following information:
Recording conformance claims may be helpful for utilization within a sustainability statement or a method of proving that you are meeting sustainability reduction targets (such as for internal scope accounting).
The WSG 1.0 document is designed to meet the needs of those who need a stable, referenceable technical specification. Other documents, called supporting documents, are based on this document and address other important purposes, including providing further techniques regarding implementation strategies, guiding authors through the guidelines that apply to their use case, and how WSG 1.0 would be applied to new technologies.
WSG 1.0 meets a set of requirements for WSG 1.0 which, in turn, inherit requirements from any prior versions. Requirements structure the overall framework of guidelines and ensure backward compatibility. The Community Group also used a less formal set of acceptance criteria for success criteria which is based on evidence-supported practices grouped by their impact and implementation upon the Web ecosystem. This allows for further expansion in future versions while maintaining a strict grouping of related (and overlapping) guidelines.
WSG 1.0 was initiated to improve Web Sustainability guidance. As no prior version exists, the initial draft was created through initial Community Group meetings, proposals (laid out in meeting minutes), and early draft guidelines were drawn up and refined, leading to the guidelines included in this version. The Community Group considers that WSG 1.0 incrementally advances Web Sustainability in numerous areas, but underscores that not all potential environmental improvements are met by these guidelines.
Product and user-experience designers are in a unique position. Not only do they often have the ability to dictate the visual aesthetic of a website or application, but they are often the champions of interfaces and the visitor experience.
Having this power gives those working in user-experience the ability to:
By adhering to the below guidelines, individuals can make a significant difference in the reduction of front-end sustainability impacts.
Many variables can impact the user-experience, and a bunch of these can impact how sustainable your website will be. Attempting to identify where you can make a difference to the visitor and give them a more sustainable experience will be beneficial.
List the negative external variables and identify where your product's sustainable impact can be diminished (systemic design).
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A Systemic Design Toolkit (PDF).
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, Ideation, Research, Compatibility, Performance, Hardware, Software, Networking, Reporting
When creating a product or service, identifying your target audience through user-research, analytics, data collected using ethical anonymous methods, or feedback from and with visitors is important in being able to create a customized service for and with them that is tailor-made for their specific preferences, adapted for any needs they may have, and particularly useful in helping a website or application evolve its service to meet sustainability targets.
Primary and secondary target visitors are identified, and their needs are defined through quantitative or qualitative research, testing, or analytics, ensuring your visitors and affected communities remain a close part of the research and testing process.
Potential visitor constraints like the device age, operating system version, browser, and connection speeds are considered when designing user-experiences.
The team has researched and identified whether a technical, material, or human constraint might require an adapted version of the product or service that reduces barriers or improves access to content.
In the user-research, identify with your visitors if some barriers should be removed (pain points or dark / deceptive design patterns).
When undertaking research, identifying needs, or conducting iterative design work, ensure that all stakeholders including your visitors have an equitable role in the decision-making process.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A User-research plan with a template. Plus some additional interview templates. Also a user-experience return-on-investment calculator.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, UI, Patterns, Ideation, Research, Usability, Compatibility, Reporting, KPIs
If you provide physical goods or services, you may also have to account for the sustainability impact of delivery services. This can often be tricky, but courier companies may provide useful tooling to help you identify emissions data for routing.
Consider and work with non-users and other stakeholders who might be passively impacted by a digital product or service, such as neighbors accepting parcels, traffic jams due to deliveries, etc. Research their needs and understand how they might be affected.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Physical goods carbon footprint and emissions calculator.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Ideation, Research, Usability, Hardware, E-Waste, Reporting, KPIs, Marketing
While some things require the use of electricity, during the early ideation phase you could consider wireframing or rapid prototyping (using paper) among other offline tools to reduce energy consumption. Even the electronic versions of these may have a lower carbon cost than committing to building a full-blown experience for each idea.
Utilize wireframes, and rapid prototyping to quickly build consensus, reduce risk, and lower the number of resources needed to build features.
Involve your users within the iteration and design process using participatory design, and when conducting user-testing reach out to your community to help improve your product by allowing them to apply their knowledge and experience to your product or service.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A website wireframe example from SlickPlan.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Ideation, Research, Software, Strategy
Brainstorming allows you to flush out ideas before you commit to pursuing a path. Being considerate of not just your visitors but other individuals who may be affected by your product or service (including non-humans, like the environment!) is a useful practical exercise as it may influence your decisions in how you scope your project.
In the brainstorming process, consider all stakeholders using a human-centered approach.
In the brainstorming process, take the planetary needs and ecological boundaries into account.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A product brainstorming guide / framework.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, Ideation, Research, Strategy, KPIs
When providing the option to download, save, print, or access anything online, defaulting to the most lightweight, least featureful version will reduce emissions through passive browsing; with non-essential information removed from the screen either to be shown when it's required or eliminated.
The path taken to access the service (the initial contact with the website or service) should be as efficient and as simple as possible (time required to complete an action displayed, reducing too much choice, ensuring visitors know what's required at the start of a complex set of steps, etc).
Make your user-journey (when browsing an accessed website or service) as smooth as possible. User-research is key, as is building on established design patterns that people already understand.
Visitors can complete tasks without distractions or non-essential features getting in the way.
Visitors see only information that is relevant to their experience, without non-essential information being displayed on the screen.
Ensure that actionable information such as pop-up or modal windows can only be initiated by the visitor.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
The example shown for this airline check-in page shows how performance by default can benefit visitors.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Content, UI, Patterns, Usability, Performance
It's great to have a pretty-looking website or application but to ensure a sustainable design, it's important to avoid cluttering up the interface with too many visuals (which aren't necessary to the content). Keeping a clean design will reduce website rendering, and thereby emissions.
Decorative design is used only when it improves the user-experience, and unnecessary assets or ones that fail to benefit the visitor or sustainability are removed (or rendered optional and disabled by default).
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
This is an example of an external web asset (a custom typeface). Too many of these can be detrimental to the performance of a website or application due to their need to be rendered (through CPU cycles) to the screen on every element in which they are used, which is bad news for sustainability!
@font-face { font-family: "Trickster"; src: local("Trickster"), url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf") format("opentype"), url("trickster-outline.woff") format("woff"); }
Source: @font-face.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Usability, Assets, Performance
Information architecture is a central part of the Web development process, and how you structure a website ensures that people can way-find your content easily. Having appropriately marked-up links within your product or service allows visitors, search engines, and social networks to identify key information quickly.
Provide an accessible, easy-to-use navigation menu with search features that help visitors easily find what they need.
Implementing an efficient (human-readable) sitemap that is organized and regularly updated helps search engines better index website content, which helps visitors more quickly find what they are looking for.
Provide a way for visitors to find out about new content and services.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Information Architecture of a Website Sitemap.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, UI, Usability, HTML, Marketing
Time is precious, wasting a visitor's will cause frustration and lead to abandonment or resentment. Additionally, the more time a visitor spends in front of a screen, the more energy they utilize. As such, throwing stuff in front of the visitor vying for their attention might sound like good business (even though we know due to banner blindness it rarely works), but it mostly damages the environment and dissuades the visitor.
Respect a visitor's attention by allowing them to easily control how (and when) they receive information.
Prioritize features that don't distract people or unnecessarily lengthen the time they spend using the product or service.
Avoid using infinite scroll or related attention-keeping tactics.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Community guidelines can help foster a safe, conflict-free environment. Here is also an example of an attention manipulation tactic to be avoided.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Patterns, Usability, Assets
Visitors can identify patterns fairly easily, and they like browsing websites and apps and feeling as if they know what they are dealing with. As such, focusing your efforts on producing a product or service that is clean and has key components in easy-to-recognize locations (and visuals) will allow faster user-experiences and fewer emissions.
Provide only essential components visible at the time they are needed. Where appropriate, interfaces should deploy visual styles (patterns) that are easily recognized and used.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Clean, simple, honest website layout examples.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Patterns, Usability, Assets, CSS
Manipulating the visitor into doing things you want them to is a short-term gain, long-term loss tactic tool. It's ethically bad, unsustainable, and should be avoided at all costs.
Avoid what are commonly known as dark patterns, deceptive design, or unethical coding techniques, which manipulate visitors into taking actions not necessarily in their best interest (anti-right click, no-copy, requiring an account to purchase, etc).
Advertisements and sponsorships are both ethical and clearly identified with the product or service, only presenting them when they provide real economic and ethical value and don't diminish a visitor's experience.
Remove unused and unconsented page tracking.
Optimization for search engines, social networks, and third-party services should be organically led with good coding practices and user-experience being the focus, not manipulating the services to gain greater priority through obfuscating content, pages, websites, or applications with redundancy or non-useful and optimized (to the visitor) material.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Examples of dark patterns to be avoided.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, UI, Patterns, Usability, Compatibility, Assets, JavaScript, Security, JavaScript, Privacy
Everything produced by designers, developers, writers, and those involved with a project should be in an open format, well maintained, and curated in a common format (so everyone is working from the same model).
The deliverables output, including documentation, are used upstream of the project and produced in ways that will allow it to be reused in subsequent projects.
Design functionality and technical specifications are documented so that deliverables are comprehensible by the project team and transferable to the development team.
Ensure that developers have access to code comments and other View Source affordances which can reduce the burden to access, understand, maintain, and utilize production-ready code as this will reduce redundancy and foster an open source culture.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
System Design of a Website functional structure.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, Patterns, Education, Assets, Software
Design systems allow common components and patterns to be formalized and managed within a website or application. By using such a tool, designers and developers can avoid reinventing existing tooling and thereby reduce wasted time (and emissions).
Employ a design system based on web standards and recognizable patterns to mutualize interface components and provide a consistent experience for visitors.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Polaris Design System.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Patterns, Education, Usability, Assets, Strategy
Everyone should be able to understand what you've written without wasting time staring at a screen or jumping from page to page looking for answers, whether they have accessibility requirements or not. This also means avoiding using technical language (without explanations) and including enough information to help direct people (and search engines) from page to page.
Write clearly, using plain, inclusive language delivered at an easy-to-understand reading level considering accessibility and internationalization inclusions as required (for example, dyslexia).
Deliver content formatted in ways that support how people read online, including a clear document structure, visual hierarchy, headings, bulleted lists, line spacing, and so on.
Prioritize SEO at early design stages and throughout a product or service's lifecycle to improve content findability.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
CodePen's plain English terms of service agreement are easy to read.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, Content, UI, Usability
Of all the data that comprises the largest over-the-wire transfer rates within the average website or application, images are usually those that are responsible due to their quantity and usefulness. As such, doing all you can to reduce their size and unnecessary loading will be beneficial for sustainability.
Assess the need for images considering the quantity, format, and size necessary for implementation.
Resize, optimize, and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions.
Provide Lazy Loading to ensure image assets only load when they are required.
Let the visitor select the display size, and provide the option to deactivate images.
Set up a media management and use policy to reduce the overall impact of images, with criteria for media compression and file formats.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<img src="image.jpg" alt="..." loading="lazy"/> <iframe src="video-player.html" title="..." loading="lazy"></iframe>
Source: Lazy loading.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, UI, Usability, Assets, HTML, Performance, Software
Video and audio-heavy websites are often those that can have significant sustainability costs in terms of storage and carbon intensity for viewers who have to process the media with their devices to watch them (draining batteries). Optimizing such assets as much as possible is critical for a sustainable product or service.
Assess the need for video or sound usage (including only when they add visitor value), and ban non-informative media (background media) including autoplaying functionality.
Choose the right media to display by compressing according to the visitor's requirements, selecting the appropriate format, ensuring it works across browsers, and avoiding embedded player plugins.
Media requiring a lot of data to be downloaded on the client side (including the media itself) must be loaded via a facade (a non-functional, static, representational element).
Increase visitor awareness and control by informing them of the length, format, and weight of the media; allowing media deactivation, and giving a choice of resolutions; all while providing alternative resolutions and formats.
Set up a media management and use policy to reduce the overall impact of audio and video, with criteria for media compression and file formats.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
WEBVTT 00:01.000 --> 00:04.000 - Never drink liquid nitrogen. 00:05.000 --> 00:09.000 - It will perforate your stomach. - You could die.
Source: Web Video Text Tracks Format.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, UI, Usability, Assets, HTML, Performance, Software
Animation can be both CPU and GPU-intensive and have implications for accessibility. While visually appealing and useful in certain situations, care and attention should be taken when considering the use of a high emissions technology.
Use animation only when it adds value to a visitor's experience, and not for decorative elements.
Progressively display an appropriate quantity of animation so as not to overburden the visitor or diminish expected device behavior.
Allow visitors to start, stop, pause, or otherwise control animated content.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
@media (prefers-reduced-motion: reduce) { body *, body *::before, body *::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; transition-duration: 1ms !important; transition-delay: -1ms !important; scroll-behavior: auto !important; } }
Source: Prefers-reduced-motion: Sometimes less movement is more.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, UI, Usability, CSS, JavaScript, Performance
Since the advent of the modern web, the ability to include embedded fonts and provide a more customized experience has seen their use explode. They aren't always the most performant option (which poses emissions hazards) and come with a few issues such as Flash Of Unstyled Content (FOUC) / Flash Of Unstyled Text (FOUT) which should be addressed.
Use standard system-level (web-safe / pre-installed) fonts as much as possible.
Ensure the number of fonts, and the variants within typefaces (such as weight and characters) are limited within a project, using the most performant file format available.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
Source: System Font Stack.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Usability, CSS, Performance
Media, images, fonts, and documents enrich the Internet. The problem is that people may not want to watch a video, listen to an audio file, look at an image, or use a specific application. By providing alternative formats to anything you embed, you ensure the widest possible audience can benefit from it (and reduced carbon output will occur as the alternative text will induce less consumer hardware thrashing than its rich media alternative).
All proprietary file formats (such as PDF) should also be offered in HTML for accessibility and to ensure future availability.
All custom typefaces (using font-display) should be subsetted and offered as part of a font stack with a system font as a backup.
All images should provide meaningful alternative text for screen reader users (or when images fail to load) accessibility.
Audio should provide text transcripts of conversations as an alternative to playing the media.
Video should provide text transcripts (at minimum), subtitles (using WebVTT), and for accessibility best practice, offer closed captions and sign language options.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
Source: System Font Stack.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, Content, UI, Usability, Compatibility, Assets, HTML, Performance
Understandably, businesses want to know more about their customers, but a key part of sustainability is being ethical towards visitors and as such, the right to privacy is considered paramount. Don't demand information when it's not required and not only will this help visitors complete transactions quicker (reducing emissions), it will help with legal compliance such as GDPR.
Assess the need for forms and reduce form content to the bare minimum necessary to meet the visitor's needs and the organization's business goals. Clearly communicate why a form is necessary, what its value proposition is, how many steps it will take to complete, and what an organization will do with collected data (informed consent).
Avoid auto-completion / auto-suggest if it would prove unhelpful (to conserve bandwidth) whilst allowing autofill for ease of repeat entry (including the use of helpful tooling such as password managers).
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Guide to creating easy-to-use web forms and a guide to form design for complex applications.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, UI, Usability, HTML, Privacy
Certain visitors such as those with visual disabilities or speech agents (like Amazon Alexa) may rely on an experience without the graphical part of an interface. As such, they potentially may use less data or may have a different carbon impact on the Web.
Support speech browsing and other non-graphical ways to interact with content that provide alternatives to a visual interface.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
code { background-color: #292a2b; color: #e6e6e6; font-family: monospace; speak: literal-punctuation; /* Reads all punctuation out loud in iOS VoiceOver */ }
Source: Let's Talk About Speech CSS.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, Content, UI, Usability, Compatibility, HTML, Performance, Software
Notifications whether through the browser or messaging can be potentially useful, but only used in moderation. Spam and the lack of control are contributing sources of Internet emissions and as such, businesses should aim to reduce such actions.
Remove non-essential notifications while justifying and reducing the practice of e-mailing or text messaging to what is strictly necessary. Useful notifications (such as alerts for new content) should be used with care and restraint.
Let the visitor control notifications (for example through the browser, SMS, or by email) and adjust messaging preferences, and the option to unsubscribe, logout, and close an account should be available and visible.
Help visitors manage expectations by clearly explaining the result of a potential input through helpful prompts and messages that explain errors, next steps, and so on.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<form> <label for="choose">Would you prefer a banana or cherry? (required)</label> <input id="choose" name="i-like" required /> <button>Submit</button> </form>
Source: Client-side form validation.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Usability, JavaScript, Privacy
Printing or downloading documents can both be a net benefit and a net cost in terms of sustainability as it can reduce repeat requests to websites, but the act of printing (especially when unoptimized) wastes valuable ink and paper.
Design documents to limit the printing impact. If the production of paper documents is essential, it should be designed to limit its impact to the lowest possible. Create a CSS Print stylesheet and test it with different types of content. Ensure PDF printing is encouraged over paper-based storage.
Offer optimized, compressed documents in a variety of accessible file formats.
If a document is likely to be re-used, generate the document once on the server-side (preferably on a cookie-free domain) rather than forcing the effort to be duplicated.
Clearly display the document name, a summary, the file size, and the format, allowing the visitor a choice if possible of both the format, and the language (if not the same as the web page). Furthermore, be sure to avoid embedding the document within Web pages (provide a direct link to download or view within the browser instead).
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Embeddable Print CSS Stylesheet Library.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, UI, Usability, Compatibility, Assets, Performance, Hardware, Software, E-Waste
The organization has policies and practices in place to incorporate stakeholder-focused testing and prototyping into its product development cycles.
The organization has outlined processes it uses to prototype and test new features, product ideas, and user-interface components when applicable with real users who represent various stakeholder perspectives, including people with slow connection, with disabilities, with difficulties using digital services, and so on.
The organization has appropriately resourced these processes to support its long-term product viability.
The organization has training materials to onboard new product team members to these practices.
The organization regularly conducts extensive testing and user interviews to validate whether the released features are meeting both business goals and visitor needs.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A comprehensive usability testing toolkit.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, UI, Ideation, Research, Education, Usability, Governance
Products and services at any stage of a project can suffer bugs or issues that need to be resolved. Fixing these regressions also generates additional development and environmental costs. By resolving such issues, you can reduce the chances of a visitor giving up on a session and thereby reduce the amount of wasted energy your website emits overall.
Check your codebase for bugs, identify any performance issues, and account for accessibility or security problems at either monthly or quarterly timeframes (depending on your scheduling allowance).
Non-regression tests are implemented for all important functionality.
Incorporate regression testing into each release cycle to ensure that new features don't introduce bugs or otherwise conflict with existing software functionality.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
It is important to automate measurements of page speed, time-to-first-byte, and page score to verify recent changes didn't increase these metrics. Automatic threshold alerts or anomalies on metrics help indicate regression. Identify target "page weight budgets" to help establish a baseline. Popular performance tools like Google Lighthouse can help too. Similarly, environmental metrics can be measured or assessed and evaluated against thresholds defined in a sustainability budget. Here is a checklist for auditing a web design.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, UI, Research, Usability, Compatibility, Performance, Security, Privacy, Reporting, KPIs
Try to ethically measure how efficient a visitor's experience is by analyzing the performance of the website or application and how it has been constructed, by doing so you might be able to reduce any issues they may have encountered previously, decrease loading times, and reduce the burden of loading unnecessary pages.
Regularly measure with each release-cycle (using tooling or through research and auditing) the performance of a website or application to identify and resolve bottlenecks or issues in the underlying code or infrastructure which could ultimately impact the sustainability of a website or application.
Only collect the data required to provide a streamlined and effective user-journey, put policies in place to ensure strict adherence, and comply with relevant accessibility policies and privacy laws, such as the General Data Protection Regulation (GDPR).
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<link rel="prefetch" href="/articles/" as="document">
Source: Prefetch resources to speed up future navigations.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, Research, Usability, Performance, Networking, Strategy, KPIs
Occasionally, you may find that features you have developed for a product or service have little to no active users or could be better implemented to bring better value. Undertaking research to identify redundancy allows you to optimize your codebase (and reduce emissions).
Consider visitor feedback and monitor adoption and churn rates of product or service features, incorporating insights into future releases.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Qualitative usability testing will help authors gain critical feedback about in-use features.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Research, Usability, Strategy, KPIs
Researching a product or service and how it is used over time allows you to iterate and ensure the features and functionality being offered match how user-needs change over time. Doing so will help you reduce code redundancy further and reduce emissions through optimization.
Incorporate usability testing into product cycles and measure the impact of these tests for future releases.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Here is a great usability testing starter kit that includes templates.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, UI, Research, Usability, Strategy, KPIs
Compatibility is a critical part of the sustainability mindset and should be prioritized through all products and services. If individuals wish to use older devices (or cannot upgrade due to cost) or do not wish to upgrade as frequently, it will reduce the amount of e-waste that enters the system. If something doesn't work, it's also likely to result in visitors suffering a wasted effort, potentially leading to refused access to your service (and thereby emitting further emissions).
Establish a policy for compatibility with obsolete devices and software versions, listing the supported devices brands, operating systems, and browsers (including versions).
Avoid planned obsolescence in software updates, striving to maintain compatibility for as long as possible and clearly communicating whether an update is evolutionary (large updates that can significantly reduce performance) or corrective (smaller updates that fix bugs or improve security).
Regularly test the product or service with weak connections, old browsers, and devices older than five years to ensure compatibility.
Prototype your interfaces using mobile-first methods to ensure progressive enhancement, content prioritization, and improved accessibility.
Consider whether a PWA will be more sustainable and compatible over a native mobile application.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Progressive Web Application Builder.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, UI, Research, Usability, Compatibility, Software, Security, Strategy, KPIs
Web developers are typically the implementors of ideas and concepts. With the ability to dictate code practices at the front-end and back-end, the ability to impact the visitor and sustainability of a product or service is unquestionable.
With the ability to implement code-based solutions, developers can:
By adhering to the below guidelines, individuals can make a significant difference in the reduction of front-end and back-end sustainability impacts.
Performance is a key part of the sustainability mindset as reductions in loading times can have a considerable impact on energy loads within CPU, GPU, RAM, and hard drive caching (among other variables), as such ensuring a performant product is essential.
Set goals that impact the environment and performance of the service, for example, HTTP requests, or the amount of DOM elements that need to be rendered.
Because the payload being delivered may not always be equal in terms of energy intensity, operators of websites and applications must ensure that consideration is given for the energy intensity (or unit being evaluated) of each component. For example, non-rendering text is less computational than CSS, which in turn is less process-heavy than JavaScript, which is less resource-heavy than WebGL.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A large list of ways to speed up your website within the front-end performance checklist.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Research, Performance, Networking, Strategy, KPIs
Whitespace holds no value when it's being presented to the visitor (unless they view the source code), by using minification, valuable data savings can be made which will reduce loading times.
All source code is minified upon compilation (including inline code).
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(g,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,v=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf
Source: jQuery Slim.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
HTML, CSS, JavaScript, Performance
When dealing with heavy components (such as JavaScript), the ability to modularize them into smaller pieces that can be loaded as and when required reduces the amount of redundancy and serves as a great way to make your scripts more sustainable.
Breakdown bandwidth-heavy components into segments that can be loaded as required.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
link.addEventListener("click", (e) => { e.preventDefault(); import("/modules/my-module.js") .then((module) => { /* Do something */ }) .catch((err) => { console.error(err.message); }); });
Source: Dynamic Imports.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
CSS, JavaScript, Performance
Often when coding, projects can accumulate clutter and functions that are no longer used (due to newer, more effective features being developed). By utilizing tree shaking techniques, all the "dead wood" will be automatically dropped upon compilation, reducing a file's size.
Identify and eliminate unused and dead code within CSS and JavaScript.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
export function read(props) { return props.book } import { read } from 'utilities'; eventHandler = (e) => { read({ book: e.target.value })}
Source: Tree Shaking.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
CSS, JavaScript, Performance
Not everyone can access services equally, being sustainable is also about being accessible, fair, ethical, and ensuring that your product or service doesn't discriminate. As such, ensuring your website complies with best practices and relevant laws whilst meeting the needs of your visitors is critical as well as good business.
Your website or application must conform to WCAG (at the necessary level), plus extend beyond to obey relevant laws and meet additional visitor accessibility requirements. Building inclusively means that people with permanent, temporary, or situational disabilities will be able to more quickly find what they are looking for, and not have to spend extra time searching for a way to use your product or service.
Enhance your website or application with Accessible Rich Internet Applications (ARIA) ONLY if applicable or necessary, and accessibility enhancing features when useful or beneficial.
Deploy solutions that fight against electronic inequalities in products and services.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<img src="/image.jpg" alt="Christmas cards all lined up on a shelf.">
Source: Resources on Alternative Text for Images.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, Content, UI, Research, Usability, Compatibility, Software, KPIs
Redundancy is the enemy of sustainability. Having systems in place to ensure that everyone can work from established patterns, the website or application remains clean and easy to use, and iteration over redesign is firmly in the mindset that will help promote sustainable practices. It's also worth being wary of abstracting code too early (see AHA methodology) or incorrectly, as while good abstractions can be more efficient, poor ones can waste effort and introduce complexity, bloat, and bugs to your codebase which can lead to emissions.
Don't be afraid to remove or simplify (through rewriting for performance) your code to focus on essential features and have a cleaner, less redundant product (and codebase).
Improve (iterate) an existing creation rather than constantly redeveloping and redesigning products from scratch (duplication of coding effort) if possible to reduce visitor learning burden and developer impact.
Within CSS and JavaScript, use methodologies (like BEM) and systems like DRY and WET to optimize the arrangement and output of your source code.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
.opinions_box { margin: 0 0 8px 0; text-align: center; &__view-more { text-decoration: underline; } &__text-input { border: 1px solid #ccc; } &--is-inactive { color: gray; } }
Source: Block, Element, Modifier.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Patterns, CSS, JavaScript, Performance
Whether advertising, chatbots, maps, or other tooling; outsourcing your service to a third-party provider may be potentially useful in certain scenarios in reducing design or development time and redundancy (which can be a win for sustainability). Third-party services, however, come with issues, such as the lack of control over emissions, and they often can potentially suffer from latency and large file sizes which may not exist if you self-hosted or created the material.
Assess third-party services (including plugins, widgets, feeds, maps, carousels, etc) as early in the ideation or creation process as possible and use as few as possible to reduce the product or service's overall ecological impact, including Scope 3 emissions.
Third-party content (including plugins, widgets, feeds, maps, carousels, etc) should be placed behind a click-to-load delay screen (using the "import on interaction" pattern), while alternatives to automated solutions such as chatbots should be offered.
Large CSS libraries and JavaScript frameworks should only be used if a more performant alternative that achieves the same goal cannot be used instead.
Prioritize self-hosted content over embedded content from third-party services.
Create your own clickable icons and widgets, rather than relying on third-party services to host or allow embedding within your product or service.
Third-party products, services, libraries, and frameworks are often a source of sustainability issues that cannot be controlled or managed by the first-party provider of a service. While many do provide benefits to a website, the need to justify their inclusion should be made not only by those creating the product or service but also be able to be controlled by the consumer. As showcased with cookies, websites or applications should provide a similar mechanism of disabling or refusing non-first-party features (with explanations of their purpose) - unless such features can be proven as critical for functionality.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>
Source: It's time to lazy-load offscreen iframes.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Usability, JavaScript, Performance, Software, Security, Privacy
HTML semantics are important. They don't just play a key role in making the Web look the way it does, they have a function in accessibility, SEO, and even in sustainability. Ensuring that you markup your content correctly and avoid cluttering your markup wastefully will reduce emissions.
Ensure content is marked up semantically using the right HTML element for the right job.
Consider removing optional HTML tags (which aren't required for rendering), attribute quotes, or attributes that are set to their default value.
Avoid using non-standard elements or attributes.
Only use custom elements or Web Components if you cannot utilize native HTML elements or if you need tightly regulated control over the implementation of design system components.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<header></header> <section> <article> <figure> <img> <figcaption></figcaption> </figure> </article> </section> <footer></footer>
Source: Semantic HTML5 Elements Explained.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, Content, Usability, Compatibility, HTML
The ability to work around render-blocking issues is a great addition to the web. From deferring code, to lazy loading, to asynchronous loading, each has its use case and each can have the potential to reduce or give performance benefits to a website or application.
All external assets should be deferred or set to async (unless required) to avoid Flash Of Unstyled Content (FOUC).
If external resources are required on load, ensure their priorities (delivery route) are set correctly.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
Source: Browser-level image lazy loading for the web.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Assets, CSS, JavaScript, Performance
Helping visitors avoid wasting their time can reduce the number of emissions from time spent in front of a screen. As such, by using existing technologies like metadata, robots files, and accessibility-friendly aids within the page, improvements to the experience can be made.
Optimize your metadata and microdata for search engines and social media.
Assist search engines, while blocking any ill-intentioned robots and scripts.
Offer accessibility and usability aids to find content, such as skip links and signposts.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://www.example.com/foo.html</loc> <lastmod>2022-06-04</lastmod> </url> </urlset>
Source: Build and submit a sitemap.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, UI, Usability, HTML, Marketing
Entering information on a page can lead to problems. If a visitor makes a mistake along the way, it makes good sense to have systems in place to guide them through resolving the typos, confusion, and glitches that can occur which lead to abandonment and extra emissions through wasted device usage.
Errors should be identified through live validation as well as upon submission.
Required elements should be clearly identified and labeled (for the benefit of voice tools such as screen readers and virtual assistants), and optional elements (if unnecessary) removed.
Always allow the pasting of content (including passwords) from external sources.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<label for="username">Username: (3-16 characters)</label> <input name="username" type="text" value="Sasha" pattern="\w{3,16}" required> <label for="pin">PIN: (4 digits)</label> <input name="pin" type="password" pattern="\d{4,4}" required>
Source: HTML attribute: pattern.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, UI, Usability, Compatibility, HTML, Security
Search engines and social networks make use of the content within a website, by ensuring that your metadata is correctly marked up, you can reduce emissions by improving way-finding.
Include the required title element, plus any optional HTML head elements (such as link).
Include necessary meta tag references that search engines and social networks recognize, using a recognized name scheme such as Dublin Core Metadata Initiative (DCMI), Friend Of A Friend (FOAF), or RDFa.
Embed Microdata, Structured Data (Schema), or Microformats within your pages.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<html> <head> <title>Example: A website about Examples</title> <script type="application/ld+json"> { "@context" : "https://schema.org", "@type" : "WebSite", "name" : "Example", "url" : "https://example.com/" } </script> </head> <body> </body> </html>
Source: Provide a website name to Google Search.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, Usability, HTML, Marketing
Sustainability benefits can be generated in numerous ways, by making sure that your website adheres to the requests made by a browser for specific conditions to be taken into account (such as CSS media and preference queries), you can unlock benefits for the visitor, and as a by-product reduce your emissions. It's worth noting that the introduction of user preferences and APIs has increased the risk of visitor fingerprinting and privacy issues.
Apply the monochrome, prefers-contrast, prefers-color-scheme, prefers-reduced-data, prefers-reduced-transparency, and prefers-reduced-motion CSS preference queries if they will benefit your website or application. Also, consider the print & scripting CSS media queries if they will improve the sustainability of your website.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
@media (prefers-color-scheme: dark) { /* wants dark mode */ } @media (prefers-color-scheme: light) { /* wants light mode */ }
Source: The complete guide to CSS media queries.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, UI, Usability, Assets, CSS
Visitors approach our products and services on a wide variety of devices these days. Ensuring that your device works on the widest range of devices and differing screen resolutions ensures that you will have a compatible website or application. As such, visitors can actively choose to browse on devices that emit less carbon if they wish.
Allow a website or app to work on mobile devices primarily (testing with various connection speeds), expanding to accommodate larger displays thereafter (mobile-first). It is much more effective to do the hard work to ensure that it works well on a mobile device and then scale it up to larger interfaces.
Utilize progressive enhancement and responsive web design to ensure that your work accommodates a device's capabilities, different screen sizes, and will not fail if it meets an unsupported technology.
To maximize the use of renewable energy, adapt your website or service to electricity availability using carbon-aware design techniques. This should include using situational design to reduce the codebase or functionality during high-intensity periods or adapting the user-interface to perform better in situations where scaling hardware resources can be avoided to reduce emissions.
Consider supporting other indirect methods of interaction such as voice (speech), code (QR, etc), reader view (browser, application, or RSS), or connected technology (watch, appliance, transport, etc).
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
@media screen and (min-width: 600px) { body { color: red; } }
Source: Beginner's guide to media queries.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Usability, Compatibility, CSS, Performance
When new best practices or if beneficial scripting guidance exists that will improve the visitor experience, following it should be of the highest priority (only using scripts ethically should be promoted).
Improve sustainability through accessible and performant code implementations.
When using an API, make sure you only call it when necessary. On the other side, make sure no unrequired data is sent by the API.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
const audio = document.querySelector("audio"); // Handle page visibility change: // - If the page is hidden, pause the video // - If the page is shown, play the video document.addEventListener("visibilitychange", () => { if (document.hidden) { audio.pause(); } else { audio.play(); } });
Source: Page Visibility API.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, JavaScript, Security
The dangers of scripting are well known, and vulnerabilities are discovered with increasing regularity. As such, it's of ethical benefit for authors to ensure all code used regularly passes security processes.
Check the code for vulnerabilities, exploits, header issues, and code injection.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
This article has information and examples of XSS security issues to avoid.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, JavaScript, Security, Privacy
While JavaScript may not cause the most website bloat, it can cause very high emissions in terms of CPU load due to the rendering process, thereby it makes sense to consider the use of dependencies and third-party code carefully.
Prevent developers from downloading and installing JavaScript libraries to run locally (client-side) when they are not needed by checking for unused dependencies and uninstalling those that aren't needed and removing them from your package.json file.
Reduce the amount of JavaScript that has to be downloaded and parsed by the browser by only using libraries where necessary. Consider whether you can use a native JavaScript API instead. Check the package size, and whether individual modules can be installed and imported rather than the whole library.
Regularly check dependencies and keep them up-to-date.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
npm uninstall lodash
Source: Uninstalling packages and dependencies.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Patterns, JavaScript, Performance, Software, Security
Search engines and browsers regularly examine websites, requesting specific files by default (they expect them to exist). If the files don't exist, this will lead to potential errors and emissions being caused when they could be created, especially as the files offer SEO, user-experience, and other benefits to visitors.
Take advantage of the favicon.ico, robots.txt, opensearch.xml, site.webmanifest, and sitemap.xml documents.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
User-agent: * Disallow: /cgi-bin/
Source: About /robots.txt.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Patterns, Compatibility, Assets, Marketing
Several small assets can be included within a website, conferring a range of benefits upon the website or application that utilizes them. They each have a low carbon footprint, so while they do create emissions, it's worth including them for the benefits they provide.
Utilize standards such as ads.txt, carbon.txt, humans.txt, security.txt and robots.txt.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
/* TEAM */ Your title: Your name. Site: email, link to a contact form, etc. Twitter: your Twitter username. Location: City, Country. /* THANKS */ Name: name or url /* website */ Last update: YYYY/MM/DD Standards: HTML5, CSS3,.. Components: Modernizr, jQuery, etc. Software: Software used for the development
Source: Humans.txt Quick start.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Patterns, Security
The Web is full of dead, often proprietary code, created using standards that have been superseded or by groups that aren't recognized. By following recognized coding standards, you ensure that your code will be rendered properly by browsers (and reduce the potential for added emissions occurring from unmaintained rendering processes).
Upgrading or avoiding deprecated formats is important, the only exception being if consumer support demands maintaining older standards to provide a functional product.
Don't use an older standard if a newer recommendation will do the same job as / or more effectively.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <site-control permitted-cross-domain-policies="none"/> </cross-domain-policy>
Source: Avoid using the now deprecated Cross Domain format unless you have an explicit requirement for it, as Flash is deprecated.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, Compatibility, HTML, CSS, JavaScript, Performance
Every product or service is different, and each will require a different set of tooling to accomplish the most sustainable result. Deciding whether to go with a bulky framework, Static Site Generator (SSG), or a Content Management System (CMS) takes careful planning based on client or service requirements.
List (and choose carefully) the requirements of the product or service. A simpler technological implementation may use more human resources but could have a smaller footprint. A prebuilt solution may use more system resources (and thereby produce more emissions upon render) but have a faster build-time (emitting less carbon during development).
As a general rule, coding from scratch is the best-performing methodology (though if an existing solution is actively maintained, it may be better optimized than what you could produce). Therefore, prefer native components and file systems to a WYSIWYG editor or heavy framework, and be considerate of the impact of third-party solutions.
If you do decide to use a code generation tool, consider using a Static Site Generator in preference to a bulky content management system. Because SSGs often start using a minimalist content entry format (like markdown) and all of the compilation is done before the website is uploaded, the emissions benefit comes from the server not having to place as much effort into serving pages (as they are static) for each visitor. In the case of a CMS, the dynamic nature of a site will involve additional computation (server-side processing) and bulkier libraries.
Plugins, extensions, and themes have been carefully reviewed and selected to maximize interoperability, accessibility, and performance. They are regularly audited over time to ensure continued compatibility.
Make sure all the components of the user-interface are the subject of special attention in terms of its sustainability impact while respecting accessibility and the performance of such components.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
You can view a comparison of more performant (headless) content management systems or download the sustainability Figma Kit.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Ideation, Compatibility, Performance, Strategy
Languages evolve regularly, and it's important for security and performance reasons to keep on top of the technology stack you are using. It's also important to consider whether the language you are using is appropriate or optimized for the task you wish to use it for.
Use the latest build of your chosen syntax language and its coupled framework.
Many tools and programming languages are optimized for performing particular tasks, and utilizing those most appropriate to the problem, especially if there is a reasonable visitor base involved justifies the time and effort, as long as it doesn't impact ESG factors such as the well-being of those involved or become too cost prohibitive.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Use benchmarks to identify the efficiency of languages.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Compatibility, Performance, Security
Ensuring that your code is free of redundancy by using pre-existing functionality provided by the web browser is important as it will help you to reduce the amount of time wasted, re-creating the same components, this offers obvious sustainability benefits in terms of time in front of the screen.
Use native functions, APIs, and features over writing your own.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
<button onclick="window.dialog.showModal();">open dialog</button> <dialog id="dialog"> <p>I'm a dialog.</p> <form method="dialog"> <button>Close</button> </form> </dialog>
PHP example.
<?php $ar1 = array(10, 100, 100, 0); $ar2 = array(1, 3, 2, 4); array_multisort($ar1, $ar2); var_dump($ar1); var_dump($ar2); ?>
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Patterns, Compatibility, HTML, CSS, JavaScript
Making multiple requests whether HTTP or within a database has a carbon cost as infrastructure has to send that information back and forth. As such, managing how you store and use data locally for a visitor will help reduce wasted cycles.
If you need information that is stored in a database, and you require it (or it's likely to be requested) more than once in your code, access the database only once, and store the data locally for subsequent processing. Also, avoid reliance on framework helpers that might defer filtering to later on in the process.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
$value = get_post_meta( int $post_id, string $key = '', bool $single = false ): mixed
Source: get_post_meta Function.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Performance, Networking
DevOps (Developer Operations) and hosting providers work to ensure that the infrastructure for a product or service meets its demands. Having the ability to decide where content will be housed along with managing its interaction with browsers provides numerous sustainability-related decisions of benefit to all.
Being able to manage infrastructure allows individuals to:
By adhering to the below guidelines, individuals can make a significant difference in the reduction of back-end sustainability impacts.
In addition to reducing the environmental impacts of a website, choose a hosting service that mitigates the remaining impacts. To make sure of this, there are many criteria to look for.
To assess the environmental impacts of hosting and detect overconsumption, some indicators should be monitored: energy / water usage, CPU / Memory usage, allocation of servers and CPU cores, etc. These indicators could be used to calculate metrics directly related to environmental impacts, such as Power Usage Effectiveness (PUE), Water Usage Effectiveness (WUE), and Carbon Usage Effectiveness (CUE). They could be displayed to visitors for transparency and monitoring reasons.
Manage equipment responsibly by keeping them as long as possible, using them as efficiently as possible, making sure they are certified, and purchasing long-lifespan products.
Recover, recycle, and upcycle waste including equipment.
Electricity comes entirely from sources with the lowest possible carbon intensity (ideally generated by wind or solar rather than from non-renewable sources). For example, Renewable Energy Credits (RECs) can help verify the source, or, ideally, prove that electricity comes directly from renewable sources.
Compensate remaining emissions, keeping in mind that the priority should be to avoid then reduce them and only compensate for them if they cannot be avoided. Carbon credits may not be sustainable, therefore the effectiveness of an offset solution must be verified, shown to be both environmentally viable and sustainable, and part of a longer-term strategy to eliminate emissions entirely from a chain, benefitting the wider ecosystem.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Some hosting companies display their PUE / WUE. In addition to being a good way for users and possible customers to get insight into this, it is also a good lever to incite competitors to do the same. The Green Hosting Directory from the Green Web Foundation offers a list of hosting companies that claim to use only renewable energies.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Hardware, Networking
Browser caching reduces the requirement for files to need to be constantly reloaded from the server, and in certain situations, it can even allow for files to be viewed offline (or in the case of a reverse proxy, send immediate recurring requests without additional calculation or computation from the server). As such, this will have sustainability and performance benefits (for instance by greatly reducing Time-To-First-Byte).
If using a CMS, install an applicable plugin to enable on-the-fly server-side caching. Otherwise, use the provided server configuration files to include and tweak the file-type cache expiration using expires, bfcache, or cache-control HTTP header. If using a language or framework that generates pages on request, cache responses for static pages so that they can be reused for future visitors.
Client-side JavaScript uses a combination of ServiceWorkers, WebWorkers, storage Application Programming Interfaces (APIs), or cookies (if necessary) to streamline the user-journey. For example, through the use of a PWA (Progressive Web Application) to ensure that an offline version is available and accessible at all times to reduce inequality and improve accessibility.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
HTTP expires headers can be used to control the response.
Expires: Wed, 01 Jun 2023 08:00:00 GMT
Apache and NGINX boilerplates are available.
<IfModule mod_expires.c> ExpiresActive on # Default: Fallback ExpiresDefault "access plus 1 year" # Specific: Assets ExpiresByType image/x-icon "access plus 1 week" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/json "access" </IfModule>
Source: htaccess Server MIME Type Control.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Assets, HTML, JavaScript, Performance, Networking
Every file will take up a certain amount of room on a server's hard drive, and this data will need to be sent across the wire to each visitor. Doing so will consume resources, but by using compression algorithms you can shrink each file to make its journey less impactful.
If using a CMS, install an applicable plugin to enable on-the-fly server-side compression, such as Brotli or GZIP. Otherwise, use the provided server configuration files to include and tweak the performance-related features to the requirements.
Compress your various images, fonts, audio, and video; by reducing the quality and offering different resolutions / dimensions (sizes) before uploading to a server or content management system.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
HTTP compression headers can be used to control the response.
Accept-Encoding: zstd, gzip, br, deflate
Apache and NGINX boilerplates are available.
<IfModule mod_deflate.c> <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE "application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/schema+json application/geo+json application/vnd.ms-fontobject application/wasm application/x-font-ttf application/x-javascript application/x-web-app-manifest+json application/xhtml+xml application/xml font/eot font/opentype font/otf font/ttf image/bmp image/svg+xml image/vnd.microsoft.icon image/x-icon text/cache-manifest text/calendar text/css text/html text/javascript text/plain text/markdown text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy text/xml" </IfModule> <IfModule mod_mime.c> AddEncoding gzip svgz </IfModule> </IfModule>
Source: htaccess GZIP Settings.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Assets, Performance, Networking
Navigation errors lead to mistakes, which lead to visitors wasting time trying to resolve them, or abandoning a website altogether. Anything that can be done to interject, predict, and way-find around potential problems will reduce emissions over time.
Maintain sites by ensuring links are correct, and if errors occur, provide suitable way-finding within optimized pages for each error type to ensure resources can be identified to help visitors complete the task they started.
Redirect websites, subdomains, and pages only when necessary. Proactively seek broken or outdated links and fix them. A redirect or search will often help reduce the number of pages a visitor needs to load.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Apache and NGINX boilerplates are available.
ErrorDocument 404 /404.html
Source: htaccess Error Documents.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, UI, Usability, Compatibility, Networking, Marketing
Decommission or switch off additional environments, such as testing / QA (Quality Assurance) / re-production and other such environments when they are not useful.
Ensure no unused environment is available, balancing the cost of deploying an environment with the cost of keeping it online while unused.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Website testing environments should not be automated but run on command.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Performance, Hardware, Software, Networking
Any tasks, especially repetitive, that can be automated should be automated (compilation, deployment, tests, etc.) to reduce time at the computer being wasted by people.
Every recurring task, such as deployment, testing, or compilation, can be run automatically, as recommended by continuous integration / continuous delivery best practices.
To reduce wasted processing cycles, every automated task is only run when needed.
Use automated scaling infrastructure to automatically increase the capacity of the web server and implement buffering / throttling to respond to visitor demand.
Web browsing from bots has been steadily increasing in recent years. As such, it is a growing concern for security, performance, and sustainability. Use security tools that automatically block bad actors and minimize bad behavior. This results in substantially less load on the server, fewer logs, less data, less effect due to compromise, and more. The result of compromised websites is a large increase in HTTP, email, and other traffic as malicious code attempts to infiltrate other resources and exfiltrate data. Compromised websites are typically identified by anomalous patterned behavior.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Cleaning up bad bots can improve sustainability.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Performance, Software
Only send data from the server when the visitor needs it. As much as possible, you can rely on client-side or server-side cache and client-side / local storage. Rather than refreshing data on a given frequency, it might be up to the visitor to manually ask for a refresh.
The frequency for refresh (of both the cache, locally stored data, and the page) is defined depending on visitor needs.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
When displaying an estimated time of arrival for a bus, it should be refreshed no more than once per minute.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Usability, JavaScript, Performance, Networking
For security reasons and in accordance with a Service-Level Agreement (SLA), it is often recommended to duplicate data to make sure it remains available if a problem occurs. This should be balanced with the cost of such duplication. Not all data is critical and, rather than overcompensating with multiple saves, duplication should be designed with efficiency in mind.
Backups of system and user data are both incremental and secure.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Incremental backups contain only files that have been modified or changed since the last backup. Furthermore, backups older than a specified amount of time are removed. A classic example of a backup maintenance strategy is the 3-2-1 technique.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Performance, Hardware
Depending on carbon intensity, some processes and communications should be delayed and sometimes batched. This could also be a way to reduce the workload on a server or Virtual Machine (VM). In such cases, visitors should be warned that the process is asynchronous and notified when it is over.
By default, non-critical processes and communications are batched and launched only when carbon intensity is under a given threshold.
Ensure the communication protocols are relevant to the visitor's needs and data transferred. Avoid using insecure protocols (HTTP, FTP), and prioritize more efficient and privacy-aware data routes for visitors (HTTPS, SSH).
When creating products or services that utilize state changes (without triggering a complete refresh), consider if the utilization of Event-Driven Architecture and Microservices will be more environmentally friendly (based on the ESG variables involved) than traditional APIs in handling the server-side workload of your solution.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
When the visitor asks for the generation of a downloadable file, the visitor is informed that the request will be handled asynchronously and given an estimation of the maximum time it will take. When the file is available, the visitor receives a communication in the most sustainable manner, such as an SMS. As such, it is better if the file is made available online and then deleted after a given amount of time. Ideally, the visitor should be given the option to cancel the request.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
JavaScript, Performance, Networking
Edge caching and CDN delivery can help optimize the sustainable delivery of digital services by optimizing how your website's traffic is transferred over the internet.
When building for a globally distributed audience, use a CDN to store and serve simple read-only, pre-generated resources in a fast and efficient manner. Although they definitely can increase performance, it is also another layer of infrastructure that needs to be considered for sustainability.
Check the CDN to verify that it provides a commitment to sustainability.
Choose a hosting provider with servers located close to the visitor.
Avoid using the service to host dynamic resources or JavaScript (unless through a first-party host) as due to cache partitioning, cross-origin resource sharing (CORS), and other browser mechanics, any benefits are negated by weaker performance, the inability to cache or interact, and the potential introduction of security and privacy issues to be introduced. This doesn't affect JSON or other static assets.
All information passed between the layers of an application incurs a cost, both in terms of data transferred, and CPU cycles for (de)serialization. Wherever possible, data transformations should be performed close to the source to reduce these costs and avoid processing data that will later be discarded.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A hosting provider speed and performance statistics tool.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, Performance, Hardware, Networking
Select infrastructure with minimal specifications meeting business requirements of performance, availability, etc.
Select infrastructure elements with the lowest requirements tier, meeting your service-level agreements. Avoid over-provisioning multi-datacenter, multi-zone, or distributed deployments if standalone instances meet the requirements. Also avoid provisioning infrastructure that will be under-utilized by provisioning for established average loads, ensuring reasonable resource utilization and autoscaling occurs as needed. Avoid provisioning for peak loads.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Have scheduled automatic scale-up during business hours, and scale-down afterward. Alternatively, have autoscaling (up and down) in direct response to traffic.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Performance, Hardware, E-Waste
Optimize storage of data according to what is most important, relevant, and required in service to visitors. This will help to avoid unnecessary storage of data that may not be useful or valuable, which will reduce required infrastructure, power, and data transfer.
Remove unnecessary and redundant data from your servers, whether it is single-use (dark data) or abandoned.
Create data with an expiration date. Excess data is a form of technical debt, and routinely cleaning up old data needs to be normalized.
Use a data classification / tagging policy to make it easier to find, handle, and remove.
Store data only when it is difficult to recreate.
Optimize log collection, storage (off-site), and rotation; scheduling during low-activity hours and using carbon-neutral backup providers.
Ensure long-term assets, especially those of a large size, are made available for download.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
HTTP compression headers can be used to control the response.
Accept-Encoding: zstd, gzip, br, deflate
Apache and NGINX boilerplates are available.
<IfModule mod_deflate.c> <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE "application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/schema+json application/geo+json application/vnd.ms-fontobject application/wasm application/x-font-ttf application/x-javascript application/x-web-app-manifest+json application/xhtml+xml application/xml font/eot font/opentype font/otf font/ttf image/bmp image/svg+xml image/vnd.microsoft.icon image/x-icon text/cache-manifest text/calendar text/css text/html text/javascript text/plain text/markdown text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy text/xml" </IfModule> <IfModule mod_mime.c> AddEncoding gzip svgz </IfModule> </IfModule>
Source: htaccess GZIP Settings.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, Performance, Hardware, E-Waste, Privacy
For anyone who owns or operates a website or application, there are practical considerations behind such decisions, and these can have sustainable impacts. While business owners are likely to be those involved in higher-level decisions, benefits can still be found for individuals working on the Internet.
Being involved in the management of a product or service gives you certain abilities:
By adhering to the below guidelines, individuals can make a significant difference in the reduction of non-technical sustainability impacts.
Create a publicly available statement in an easy-to-find location on your website that outlines a clear commitment to prioritize ethics and sustainability ESG standards that align with the organization's mission, vision, and values and include statements specific to digital products, services, policies, and programs. This should be done while actively promoting such efforts (with evidence) using social channels.
The organization has published a publicly available Code of Ethics, Product Guidelines, Sustainability, or ESG Statement that includes language specific to digital products, services, policies, and programs.
List achievements, features, compliance, and anything beyond the scope of these guidelines and publish it in a sustainability section of your product or service.
The organization can show how it effectively governs implemented digital sustainability, climate policies, and related ESG practices over time.
The organization has training decks and workshops it uses to onboard new team members on how it implements more sustainable product strategies.
Raise awareness with your visitors by documenting your methodology, through impact storytelling, documentation, and helping individuals make more informed decisions.
The organization can show how it powers digital products and services with renewable energy.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Here are some great examples of a Code of Ethics, an Ethical Policy, a corporate digital responsibility document, a sustainability template, a sustainability policy, a code of conduct, and in Italian, a range of useful policy examples (PDF): A code of Conduct, Ethics, Environment, and Marketing.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Ideation, Research, Education, Strategy, KPIs
Having someone within an organization who represents sustainability as a core agenda makes good sense due to the accessibility, performance, financial, and other benefits that can occur from following best practices.
Choose and assign an ecological referee (with specific digital expertise) for the product or service within your organization.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Microsoft's sustainability team and journey.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Ideation, Education, Marketing
Businesses should not only reference their own materials showcasing how they are working towards becoming sustainable but cite existing sustainability best practices to help others looking to make similar changes within their own work or personal environments.
Make sure that all project stakeholders, including product teams, colleagues, and organizational decision-makers (managers and clients) are informed about and trained in your business's use of sustainable technology.
Encourages stakeholders to actively reduce their environmental impact by providing resources on sustainable design, practices, and concepts.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Advice and examples on marketing sustainability.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, Education, Reporting, Marketing
Allowing the visitor to take action to reduce their emissions is key to helping them play a part in becoming more sustainable. By helping them identify when choices they make could have an environmental impact (and by how much) and then providing them with the tooling choices to reduce their footprint, you can empower them to make a lasting difference.
Clearly communicate the ecological implications of visitor choices and allow visitors to configure settings based on those choices.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Using CSS media queries, you can adjust the layout of a website based on ecological preferences such as color, data, animation, and more.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, Education, Reporting
Being able to identify key issues with your website or application is essential, and while not a foolproof method, using tooling can help you achieve an overall idea about the state of your product or service's environmental state (as such tools can do for accessibility).
Conduct a full life-cycle Analysis based on the functional unit defined in Guideline 5.15.
Estimate the environmental impact of your or your competitor's current service to inform decision-making (as a potential target goal).
When identifying the environmental impact of your product or service, be sure to include the impact (or estimates of) of any tooling used to create the product or service along with any third-party solutions utilized in the pipeline. While not created by you, the emissions they generate from production to maintenance are considered integral to your overall solution.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Use an online carbon website footprint-checking tool such as EcoGrader, EcoPing, FootSprint, Sitigreen, or Website Carbon.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Ideation, Research, Strategy, KPIs
Define sustainability goals for the organization to meet and incorporate into its business model. Pair each goal with at least one clear, achievable metric or Key Performance Indicator (KPI).
The organization has defined and published a clear set of sustainability goals. It publicly communicates how it will meet these goals, including which performance metrics are important to help the organization and its various stakeholders thrive.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Here is a list of sustainability goals in the form of a checklist.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Ideation, Research, Governance, KPIs
Business certifications can fill the gaps left by incomplete sustainability legislation. Ensuring a business complies with third-party certifications will help verify and apply an objective level of rigor to an organization's sustainability efforts.
The organization has achieved one or more business sustainability certifications and incorporated operational policies and practices to support them.
The organization maintains its certification through evolving policies and practices over time.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A common form of certification in the Web development field for individuals valuing inclusive design is the Certified Professional in Web Accessibility.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Governance, KPIs
The organization has clear onboarding and training processes that include ESG policies and practices with explicit references to digital sustainability and responsibility. Ensure that onboarding utilizes a "green by default" process and avoids being an opt-in procedure. This applies equally at an organizational level and to visitors and consumers of your products and services.
The organization has dedicated training manuals, workshops, and materials that outline the ESG policies and practices it follows and how to implement them. While managing and maintaining these materials over time, adapting them as new policies and practices arise.
The organization incentivizes leadership, teams, and stakeholders to make progress toward the goals outlined in their training, including time for sustainability activities, recognition for completion, and so on.
The organization anticipates and maps potential negative external variables on the service, and acts to minimize their overall impact.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
An academic organization providing staff sustainability opportunities and resources.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Education, Strategy
The organization discloses and reports its ESG impact on at least an annual basis.
The organization has created and published policies and practices for disclosing the social and environmental impacts of its products, services, policies, and programs in line with existing reporting standards such as GRI Performance, SASB, etc.
The organization produces a publicly available impact report outlining its progress against previous reports on social and environmental goals at least once per year.
The organization publicly and transparently follows existing or emerging environmental standards and legislative policy that promotes mandatory disclosures and reporting for emissions. This is done alongside other social and environmental criteria in its impact reporting, maintaining these practices over time for future reports.
The organization clearly identifies how it reduces its environmental impact, avoiding double accounting, greenwashing, excluded data, or other manipulative techniques.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Kinaxis (PDF) and Pinterest (PDF) have published their global impact reports.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, Reporting, KPIs
An Impact Business Model enables an organization to incorporate specific impact initiatives into one or more business models for generating revenue, often making them "green by default" and folding impact initiatives into the organization's operating system. Moreover, being able to calculate the return on investment in terms of sustainability your product or service will bring is important to identifying whether it poses a net-positive or net-negative effect on the environment.
The organization has completed (and operationalized) a Theory of Change process with requisite documentation to identify the impact it hopes to create, how it will generate revenue, shared, or added value from these activities, how it will measure results based on desired outcomes; or in the case of launched projects, is generating revenue, actively tracking and measuring progress against any desired outcomes.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Mightybytes published a Theory for Change template.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, Ideation, Research, Strategy
The organization has clearly defined governance policies around how it manages and maintains digital products and services over time.
The organization has documented policies outlining how it approaches product management and maintenance.
The organization has maintenance / security plans in place for all the digital products and services it manages.
The organization appropriately resources products over time via staffing and budgeting to support refactoring code, addressing technical debt, new product features, ongoing testing, and product or service maintenance plans to continue supporting its customers, visitors, and other stakeholders.
The organization incorporates carbon and resource measurement into maintenance programs and can show measurable improvement over time.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
An example of a website maintenance checklist.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Compatibility, Strategy
The organization has policies and practices in place to embrace experimentation, foster a growth mindset, support organizational agility, and provide continuous improvement. Product creators should iterate, regularly, though never at the cost of getting things done (such as working on larger, long-term features).
The organization has created policies and practices to enable continuous improvement and has resourced the organization appropriately to support these efforts over time.
Agile sprints and update frequency must go through a review process to ensure project teams have enough time to conduct user-research, identify technical debt, and produce quality output.
Use (and show a track record of) continuous improvement (iteration) to analyze your website or application while also addressing the by-products and potential consequences of ongoing experimentation, such as technical debt, product performance, emissions, and related issues. Limiting analytics to only necessary features to aid with decision-making, encouraging visitor feedback, and comparing performance against business goals and visitor needs.
Justify and prioritize the retention of existing features, the creation of new functionality, and the decommission or elimination of unused functionality and unvisited pages through the product's life cycle.
Provide corrective security and policy updates during the product or service lifecycle, while distinguishing these updates from more extensive evolutionary updates.
Develop sustainable product and data strategies along with appropriate training techniques that help your team (managers, colleagues, etc) build capacity and learn new skills to manage and maintain products and services over time.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A showcase of how a website layers content, structure, and style. The Sustainable Web Design toolkit provides you with information relating to optimizing your product or service for the environment. The continuous improvement toolkit also has numerous business templates to work from.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
UI, Compatibility, Performance, Security, Strategy, KPIs
Products or services are updated regularly. Ensure that additions, changes, deprecations, removals, fixes, or security patches are documented in an easy-to-read document with details that showcase how such changes affect the visitor (or how they can take advantage of new features).
The user-experience considers possible changes to the product or service such as adding, updating, or removing features.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
# Changelog - Website ## [Unreleased] - N/A ## 1.0.0 - YYYY-MM-DD ### Added - Content. ## [Guide] - Added: New features. - Changed: Altered functionality. - Deprecated: Disappearing features. - Removed: Eliminated features. - Fixed: Bugs patched. - Security: Solved vulnerabilities.
Source: Keep A Changelog.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Content, Education, Usability, Compatibility
Ensure that the product or service you are creating offers value to visitors and doesn't duplicate existing functionality (without bringing something new to the table) as this redundancy wastes digital and physical resources.
Review and identify whether your product or service aligns with one of the U.N. (SDGs).
Evaluate the desirability, feasibility, and viability of the digital product or service they wish to create to ascertain whether it is necessary.
Determine that no existing digital product or service offers the same value. They have conducted an analysis to understand whether a new product or service is necessary.
Consider any obstacles to using a product or service, such as accessibility, equality, technical, or territorial.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Competitor analysis template to determine the viability of a project.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Ideation, Software, E-Waste, Reporting
The functional unit of a product is a quantified description of the performance requirements that the product fulfills. Ensure you identify the requirements of your product before development.
Consider and conduct a life-cycle Assessment (LCA) to define the requirements of your product's function throughout its lifecycle.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Recycled Bicycles functional unit (can be adapted for the Web).
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Ideation, Research, Reporting
The organization collaborates with suppliers, authors, clients, and other partners on initiatives that are both mutually beneficial and create positive social and environmental outcomes.
The organization has created specific policies to vet potential partners in its supply chain based on ESG principles.
The organization has partnered with suppliers to create, track, and measure collective impact on issues that impact their stakeholders.
The organization promotes its partnerships in a publicly available place, along with information on how the partnership creates a collective impact.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
How one business goes through a project selection process.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Content, Ideation, Hardware, Governance
The organization shares the economic benefits of its digital products, services, policies, and programs.
The organization publicly commits to paying employees, contractors, and other stakeholders a living wage.
The organization has policies and practices in place to incentivize stakeholders, such as workers and contractors, to meet its impact goals.
The organization provides benefits to employees in accordance with its resources, including, where relevant, healthcare, retirement planning, flex time, profit sharing, and so on.
The organization advocates for responsible legislation that supports employment rights, transparency, and accountability related to sharing economic benefits.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
This article contains 50 different employee perks a business could offer to cultivate a better working environment.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Governance
Ensuring that everyone has a seat at the table is important to promoting voices who may not otherwise have their voices heard, and potentially getting useful ideas from fresh sources.
Ensure that the project team's goals are aligned with key business objectives, and project stakeholders (for example, project managers) have the power and autonomy to make key decisions on the organization's behalf.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Proposal software can help authors, clients, and co-workers validate "baked-in" components.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Ideation, Strategy
The organization has public policies and practices supporting racial justice, inclusion, equity, and diversity in hiring and operations.
The organization has documented its commitment to JEDI practices with clear policies on how it prioritizes marginalized or otherwise underserved communities, including Black, Indigenous, People of Color, LGBTQIA+, Women, Disabled, Veterans, Seniors, and so on.
The organization has an accessibility policy for digital products and services and can show this via a verified accessible website, application, product, or service.
The organization has JEDI-related training materials and schedules ongoing workshops related to how this topic manifests itself in digital products and services (algorithmic bias, digital divide, gig economy work, mis / disinformation, etc).
The organization can show measurable JEDI improvement over time in its hiring, leadership, and operations.
The organization advocates for responsible legislation relating to JEDI practices, especially as related to digital products and services.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
These websites have some good examples of accessibility statements, equality and inclusion, diversity, and, general accessibility.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Accessibility, Ideation, Strategy
The organization has devised and implemented a responsible data strategy that prioritizes data privacy and promotes more ethical uses of data, including disposal and data sustainability practices.
The organization has a public-facing privacy policy in place and supports existing privacy laws such as the General Data Protection Regulation (GDPR), California Consumer Privacy Act (CCPA), and so on. This policy must be accessible for all visitors, including those with accessibility and reading comprehension needs, and abide by plain English best practices to avoid jargon, technical language, and legalese.
The organization can show measurable progress over time on how it respects data privacy and ownership, including a visitor's "right to be forgotten" and provides the ability to export data.
The organization supports new and emerging legislation related to data privacy, data sustainability, and responsible data practices.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
The Airbnb Privacy Policy includes compliance with emerging legislation, data ownership, and measurable progress through previous versions. The Telegram Privacy Policy includes detailed data practices, references to local legislation, and shows change over time. The Slack Trust section is inclusive of privacy, security, compliance, ownership, and more; including a description of how data informs search, Machine Language (ML), and Artificial Intelligence (AI). Finally, CodePen has a beautifully structured terms of service agreement, written in plain English, and is easy to understand.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Content, Privacy, Governance
Expired or unused data has a cost, takes up space, and requires maintenance. As such, the ability for customers to manage their own data and for service providers to manage older website material which no longer applies but might still have use will be a carbon benefit.
Outdated or otherwise expired product content and data are archived and deleted via automated expiration dates and scheduled product audits. Create an archiving schedule with a lighter version of the old searchable content available.
Enable users to control, manage, and delete their data, subscriptions, and accounts.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Ensuring data is archived can prove useful if it's later deleted.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Security, Privacy, Strategy
The organization has devised and implemented responsible policies related to artificial intelligence, the Internet of Things (IoT), Web3 (Decentralized Web, blockchain, etc), and related emerging technologies.
The organization has public-facing policies in place for emerging technologies, and all such technologies are ethically sourced, screened, validated, and implemented in a non-discriminatory, responsible manner.
The organization can show how it up-skills workers as new technologies and practices potentially disrupt its business model.
The organization supports responsible legislation related to automation and emerging technologies.
Organizations must consider, audit, and account for any environmental considerations that may derive from the use of emerging technologies they wish to either promote or implement within a chosen setting. Also note that this should include third-party choices, the "expense" (in terms of waste or emissions) of the utilization of the technology to create a desired result and consequential issues to the environment that may arise from its deployment.
Don't roll out post-quantum encryption for high-traffic services that don't need resilience against harvest now, decrypt later.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
How one business encourages innovation by setting aside 10% of time for learning.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Content, Governance
The organization implements responsible finance strategies, including divesting from fossil fuels and appropriately resourcing digital products and services to account for long-term care and maintenance.
The organization has divested from fossil fuels and moved its banking, sponsorship, and other affiliations to more responsible partners.
The organization engages in flexible financing and responsible budgeting for its digital products and services to accommodate long-term care and maintenance.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
A tool that can help you identify a green bank worldwide.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Ideation, Governance
For-profit organizations have clear philanthropy policies and practices in place to help non-profit organizations build digital capacity and acumen while also engaging their own teams in meaningful work that promotes shared learning and stretch goals.
The organization has a clear corporate giving policy and creates philanthropic partnerships with strategically aligned organizations.
The organization engages in free or volunteer projects, which help its team learn new tools and tactics, while also helping charities and non-profit organizations build capacity.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
The corporate philanthropy practices of Mightybytes.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Content, Governance
Everything ends at some point, planning for if and when a product or service is finalized makes good ethical sense to ensure customers can be transitioned toward a replacement rather than losing access to their data.
Establish clear, documented end-of-life guidelines that include data disposal, archiving, file deletion, and so on.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
This is a checklist for product end-of-life care.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Research, Compatibility, Software, E-Waste, Strategy
The organization addresses e-waste, right-to-repair, recycling, and related practices in its operations.
The organization has specific policies in place to recycle e-waste and repair owned technology products whenever possible.
The organization has formed relationships with local partners for e-waste recycling and repair.
The organization buys refurbished equipment whenever possible.
The organization should allow consumers to repair (to the best of their ability) the consumables they purchase, offering (if possible at cost) replacement components and clear instructions to resolve faults that occur.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, Content, Ideation, Hardware, E-Waste, Governance
Setting targets and limits regarding your product or service is important for keeping a sustainable mindset. Using budgets, you can declare the remits of which you will work within to ensure your emissions do not fall outside (and monitor your progress through development).
The product team has defined, baselined, and documented clear sustainability and environmental budget criteria that cover the page, user-journey, and digital service levels and metrics (such as a CO2.js score) that are approved by relevant product stakeholders.
Use tools such as a performance budget to determine the maximum size (goals) your app or website can weigh to reduce the data transfer and HTTP request impact (using metrics like Google Lighthouse).
Define KPIs around engineering hours, development time, or sprints keeping the health and wellbeing of your workers paramount. Consideration should be taken around optimizing your workflow sustainably to allow all tasks to be performed with care.
The product team can measurably show how much the budgeting process improved performance and reduced emissions.
The product team invests in resources to build capacity and maintain the budgets over time.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
[ { "resourceSizes": [], "timings": [ { "metric": "largest-contentful-paint", "budget": 2500 }, { "metric": "max-potential-fid", "budget": 100 }, { "metric": "cumulative-layout-shift", "budget": 0.1 } ] } ]
Source: Performance Budget.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Accessibility, Ideation, Research, Usability, Performance, KPIs
The organization has clear policies about using open source tools, including how it gives back to the community and responsibly manages code repositories to reduce waste.
The organization has a clear open source policy in place that outlines how it uses open source tools and the practices it supports surrounding open source development.
The organization has a track record of collaboration and community-building around open source principles.
The organization regularly contributes to open source community-based projects.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
GitLab discloses its open source policy publicly.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Social Equity, UI, Ideation, Assets, Software
Resilience of the product or service in case of a disaster or emergency should be ensured to restore and maintain operations in case of disruptions.
The organization has created a plan of action that is regularly reviewed and occasionally tested to determine readiness in case of an incident and has procedures to quickly recover from such issues.
The organization regularly maintains transparent communication with its audience regarding issues that may affect service delivery or user data.
Impact & Effort
Benefits
You can find details about complying with [[GRI]] through the body behind the standard.
Example
IBM provides some great examples of disaster recovery planning for a range of different situations.
Resources
Resources are for information purposes only, no endorsement is implied.
Tags
Security, Governance, Strategy
Web accessibility (within the context of Inclusive Design) means that websites, tools, and technologies are designed and developed so that people with disabilities (and those without) can use them, free of barriers.
Types of accessibility barriers can include auditory, cognitive, neurological, physical, speech, and visual. They can also be permanent, temporary, or situational (depending on the situation).
Environmental, social, and (corporate) governance (ESG), is a set of principles that recommends taking each of these factors (alongside economic variables) into account during the sustainability process.
This work is grounded within the three pillars of sustainability:
For information purposes and not required for compliance.
Content identified as "informative" or "non-normative" is never required for compliance.
Required for compliance.
An approach to designing digital products and services that puts people and the planet first.
Aiming for a clean (hosted using renewables), efficient (using the fewest resources possible), open (accessible and user-controlled data), honest (avoiding misleading or exploiting visitors), regenerative (support people and the planet), and resilient (function under any circumstances) service or product.
Within the context of this specification:
In many cases, visitor and user on the web are used interchangeably (and this is perfectly acceptable), but we have chosen to make this distinction to provide context that in certain cases, individuals (for privacy reasons or simply because certain users just glancing or certain websites having static content) may not be classified as a user (in the sense of a customer) as they are a window shopper (visitor).
Additional information about participation in the Sustainable Web Design Community Group (SWD-CG) can be found within the wiki of the community group.
Alexander Dawson, Andy Blum, Anne Faubry, Arnaud Levy, Ben Clifford, Berwyn Powell, Brett Tackaberry, Brian Louis Ramirez, Chris Adams, Chris Needham, Chris Sater, Chris Wilson, Claire Thornewill, Dennis Lemm, Diogo Abrantes Da Silva, Dom Robinson, Emily Trotter, Fershad Irani, Francesco Fullone, Iain McClenaghan, Ian Jacobs, Ines Akrap, Ismael Velasco, Iulia Raluca Ionita, James Christie, Jeanmonod David, Jennifer Strickland, Jens Oliver Meiert, Jim McCool, Josh Kim, Julien Wilhelm, Laurent Devernay, Leon Brocard, Loren Velasquez, Łukasz Mastalerz, Marie Ototoi, Michelle Barker, Mike Gifford, Morgan Murrah, Nahuai Badiola, Neil Clark, Nick Doty, Nicola Bonotto, Orie Steele, Owen Barton, Romuald Priol, Sandy Dähnert, Shane Herath, Simon Perdrisat, Tantek Çelik, Thibaud Colas, Thorsten Jonas, Tim Frick, Tzviya Siegman, Youen Chéné, Yuna Orsini, Zoe Lopez-Latorre
Aiste Rugeviciute, Andrew Wright, Anthony Vallée-Dubois, Antoine Abélard, Bee Flaherty, Boris Schapira, Carine Bournez, Christophe Clouzeau, Christos Baharakis, Crystal Preston-Watson, Dominique Hazael-Massieux, Elise West, Florence Maurice, François Burra, Gaël Duez, Gerry McGovern, Greg McDonald, Ignacio Rondini, Ivano Malavolta, James Cannings, James Gallagher, Jan Henckens, Jean Rigotti, Jon Gibbins, Juan Sotés, Julien Robitaille, Kate Mroczkowski, Kimi Wei, Leah Goldfarb, Len Dierickx, Louise Towler, Luciene Bulhões Mattos, Luis Tiago, Marie Koesnodihardjo, Mert Antinoz, Michelle Sanver, Moritz Guth, Nick Olive, Nicolas Oren, Patrick Hypscher, Pietro Jarre, Radu Micu, Rafael Lebre, Rebecca Brocton, Rick Butterfield, Rick Viscomi, Robin Whittleton, Seb Solere, Sylvain Tenier, Thierry Leboucq, Tom Greenwood, Tom Howells, Torsten Beyer, Yelle Lieder.