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], and the Ethical Web [ethical-web-principles].
There are two methods of providing feedback regarding this specification. The first is using GitHub. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, email our open discussion group public-sustyweb@w3.org (comment archive). 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 the mailing list discussions are publicly available. There is currently no preliminary interoperability or implementation report, however potential implementation strategies alongside filtering and categorization of guidelines will be showcased within the Sustainable Web Design website.
GitHub Issues are preferred for
discussion of this specification.
1. Introduction
This section is non-normative.
1.1 Background on WSG
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 pertaining to the Web, consider that many variables [VARIABLES] may contribute to waste or emissions being produced online.
The way data is sent or received between client and server.
Hosting, environments, arrays, and infrastructure.
Consumer devices, components, and variability in conditions.
Software like Web browsers (rendering engines and code), operating systems, assistive tools and apps.
Human-centered design features include legislation, accessibility, and the vast field of usability.
Development workflows, business operations, and tooling.
The visitor's equipment, environment, and behavior.
Web Sustainability Guidelines (WSG) 1.0 is developed in cooperation with individuals and organizations around the world. It does so with a goal 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 finding existing research data to both identify and establish guidance for all the variables which 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.
1.2 WSG Layers of Guidance
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.
1.2.1 Principles
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.
1.2.2 Guidelines
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 which 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. Unlike Web Content Accessibility Guidelines (WCAG) which uses A to AAA (or in the future, Bronze to Gold) against each guideline as a method of testing levels of conformance; WSG 1.0 uses a system of Low, Medium, or High ratings to reduce the burden for individuals to identify quick wins or minimal implementations from long-term benefits or heavy refactoring encouraging a policy of progress over perfection.
Impact:
Low
Quick sustainability wins.
Medium
Noticeable sustainable impact.
High
Significant long-term benefit.
Effort:
Low
Minimal implementation.
Medium
Some changes needed.
High
Heavy refactoring required.
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.
1.2.3 Success Criteria
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.
1.2.4 Advisory Techniques
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 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 which 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.
Low
This will have a minimal impact within a particular category.
Medium
This will have an impact worthy of consideration within a particular category.
High
This will have a considerable impact within a particular category.
Note
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 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.
1.3 Conformance
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.
1.3.1 Conformance Requirements
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.
Note
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.
1.3.2 Conformance Claims
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:
Conformance: A concise description of Sustainability commitments and list of the guidelines adhered to.
Other: In addition to the required components of a conformance claim above, provide additional information to assist visitor's such as additional steps taken (beyond the specification) to improve sustainability or statistics (metrics) that show the effect of changes which have already been made.
Note
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).
1.4 WSG Supporting Documents
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 which apply to their use-case, and how WSG 1.0 would be applied to new technologies.
1.5 Requirements for WSG
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 backwards 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.
1.6 Versions of Guidance
WSG 1.0 was initiated with the goal of improving 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.
2. User-Experience Design
2.1 Undertake Systemic Impacts Mapping
There are many variables which 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.
Success Criterion - External Variables
List the negative external variables and identify where your product's sustainable impact can be diminished (systemic design).
Environmental: Clearly understanding a systems components can help a product team construct a plan to reduce emissions, especially from third-party services in an organization's supply chain.
Privacy: Teams can better prioritize data privacy when they clearly understand a systems components, especially if they can identify potential risks to data protection.
Social Equity: Teams can better prioritize social equity when they clearly understand a systems components. They must pay special attention to considerations from underrepresented groups, as these variables may not be well understood or covered in existing best practices.
Accessibility: Teams can better prioritize accessibility when they clearly understand a systems components. This is because they will understand their target audience and can identify improvements to make beyond basic inclusive design practices which could provide a well-rounded experience.
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 which 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.
Success Criterion - Identify And Define
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.
Success Criterion - Visitor Constraints
Potential visitor constraints like the device age, operating system version, browser, and connection speeds are considered when designing user-experiences.
Success Criterion - Barriers And Access
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.
Success Criterion - Barrier Removal
In the user-research, identify with your visitors if some barriers should be removed (pain points or dark / deceptive design patterns).
Success Criterion - Seat At The Table
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.
Environmental: Undertaking analytics or research allows you to customize your product or service based on the needs of your visitor. The benefits of this are that emissions will be reduced due to an experience not making assumptions or developing unnecessary features (wasting resources), and being more specific about how you might reduce a product or service's environmental impact.
Privacy: Assessing the needs of visitors will help you comply with privacy laws like GDPR, and anonymous analytics alongside test data can also be used to improve privacy.
Social Equity: Improved user-experience often means products or services work better for visitors on older devices, in low-bandwidth environments, those with older devices, those in restrictive countries, those who speak different languages, and those with other potential barriers to accessing content. This reduces emissions as less e-waste will be produced if the need for newer equipment becomes less of a priority.
Accessibility: Understanding the needs of your visitors through accessibility and trauma-informed research will help you prioritize which inclusive design extra features need to be implemented to enhance an already accessible product or service.
Performance: Identifying what visitors require through research and analytics will reduce the potential for technical debt along the product's lifespan, which will help reduce emissions as developers will spend less time building a product with unnecessary features. It can also be used to identify bottlenecks in the user-experience which are causing visitor abandonment. Fixes can be measured and tested against each other, and the benefits of improvements can result in fewer emissions.
Economic: Knowing your audience has financial benefits, as they are more likely to purchase your product or service if it meets their requirements. Quantitative data analysis can identify potential cost savings by reducing data payload sizes where optimizations can be made.
Conversion: If a product matches an audience's requirements, they will be likely to use it regularly and this will increase its popularity and gain trust, word of mouth, and social standing.
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.
Success Criterion - Non-Human Impact
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.
Environmental: To the extent that they can be planned for up-front through verifiable research practices, interventions such as planning with suppliers can potentially significantly reduce the environmental impact of a digital product or service.
Social Equity: By including other potentially marginalized groups as part of the research process, product teams can potentially head off unintended consequences or requirements these groups may have before they occur.
Accessibility: By including people who might not be primary or secondary users, such as people with disabilities who may be specifically impacted by the need for such services; as key stakeholders in research, this community's specific needs can be better addressed.
Economic: Up-front research on a product or service's entire ecosystem, including the wider aspects like indirect services will help organizations more effectively manage project budgets.
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.
Success Criterion - Wireframes And Prototypes
Utilize wireframes, and rapid prototyping to quickly build consensus, reduce risk, and lower the number of resources needed to build features.
Success Criterion - Participation And Testing
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.
Environmental: Incorporating wireframes, prototypes, and user-testing into early product design cycles improves environmental impact by helping product teams build only the features visitors want. This reduces resource use and lowers emissions.
Economic: Early rough ideation can improve financial performance, since organizations won't waste time and money building features people don't use.
Conversion: Tested user-interfaces often improve conversion rates as they have been optimized to remove confusing aspects of the layout which cause friction and arrange content to optimize the fastest user-flow (which can help emissions).
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.
Success Criterion - Human-Centered Brainstorming
In the brainstorming process, consider all stakeholders using a human-centered approach.
Success Criterion - Ecological Brainstorming
In the brainstorming process, take the planetary needs and ecological boundaries into account.
Environmental: By helping key project stakeholders better understand the ecological impact of a potential digital product or service, its environmental impact can be identified and reduced throughout its life-cycle.
Social Equity: For other potentially marginalized groups, such as those who speak different languages, live in low-bandwidth areas, use older devices, have other barriers to accessing information, and so on, accounting for their needs early in the process will reduce the need for costly redesigns to accompany their requirements later on due to demand (or producing specialist alternative sites to cope with their functionality).
Accessibility: By understanding the accessibility communities' requirements in the early stages of a digital project, inclusive design can be prioritized throughout the product or service life-cycle, which will lead to efficiency savings in developer time (due to not having to retrofit accessibility) and fewer emissions from the patching process.
Tags: Social Equity, Accessibility, Ideation, Research, Strategy, KPIs
2.6 Create a Frictionless Lightweight Experience by Default
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.
Success Criterion - Performance By Default
Prioritize performance optimization as a product or service's default approach.
Success Criterion - Efficient Paths
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).
Success Criterion - Patterns For Efficiency
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 which people already understand.
Success Criterion - Distraction-Free Design
Visitors can complete tasks without distractions or non-essential features getting in the way.
Success Criterion - Eliminate The Non-Essential
Visitors see only information that is relevant to their experience, without non-essential information being displayed on the screen.
Environmental: Streamlining a user-experience to remove barriers and non-essential items (which eliminates waste from code and content) reduces the amount of time visitors spend on their devices trying to complete tasks or find information. This reduces the amount of energy used and lowers emissions.
Privacy: Collecting less information by hiding non-essential features will be beneficial for data protection as you can reduce how much information is presented to the visitor and, in turn, how much is exposed to a minimum (if any is needed during the experience).
Social Equity: Lightweight experiences work better for people with older devices, those who live in low-bandwidth environments, and so on. The benefits for lower-powered devices are that fewer emissions will be generated, as the device's reduced capabilities will often have lower energy requirements.
Accessibility: Intuitive, lightweight user-experiences that are easy to understand improve accessibility, especially for people with cognitive disabilities, and will benefit sustainability in terms of less confusion which could impact the time spent on websites trying to find content.
Performance: Displaying less information on the screen by reducing the amount of content until it is necessary will naturally reduce bandwidth consumption over a lifecycle of a product or service, and may make an experience feel faster.
Economic: Lower data payloads resulting from reducing visitor choices and simplifying an interface by reducing the amount of information can help reduce the burden of choice and convince visitors during the decision-to-purchase process.
Conversion: Busy websites with too much information laid out haphazardly will lead to confusion and abandonment. Following conventions and patterns with a clean, distraction-free layout will reduce churn, page abandonment and the barriers to entry.
Tags: Social Equity, Content, UI, Patterns, Usability, Performance
2.7 Avoid Unnecessary or an Overabundance of Assets
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.
Success Criterion - Decorative Design
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).
Environmental: Using fewer typefaces will reduce the page size and use less resources rendering the new font on the visitor's machine for that page's instance (saving DOM rendering cycles).
Social Equity: Bloat costs bandwidth, slimming down the web matters to remain inclusive.
Accessibility: Decorative design can be intrusive (if marked up incorrectly) or distracting.
Performance: HTTP requests can be reduced both with fewer fonts and by creating CSS / SVG sprites if the images are unlikely to change.
Conversion: A page with fewer heavy elements is more likely to load within 3 seconds.
2.8 Ensure Navigation and Way-Finding Are Well-Structured
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.
Success Criterion - Navigation And Search
Provide an accessible, easy-to-use navigation menu with search features that help visitors easily find what they need.
Success Criterion - Navigable Sitemaps
Implement 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.
Success Criterion - New Content
Provide a way for visitors to find out about new content and services.
Environmental: Efficient navigation with intuitive search features means visitors spend less time and energy finding what they require and accomplishing tasks. This also lowers emissions.
Accessibility: Accessible navigation improves the user-experience for people with disabilities. Being able to find the correct pages quickly also helps to reduce data wastage.
Performance: Efficient website structure has an impact on performance in that people can more quickly find what they require. This doesn't necessarily mean pages or assets load faster, but if appropriate way-finding mechanisms are in place, less time on-screen can result, which is beneficial for emissions.
Economic: If visitors more quickly find what they need, this could potentially reduce hosting costs if those are based on data transfer.
Conversion: Good website structure and navigation can also improve conversion rates if more people find what they require. This could also be true if visitors are alerted to new content they have expressed interest in.
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.
Success Criterion - Respecting Attention
Respect a visitor's attention by allowing them to easily control how (and when) they receive information.
Success Criterion - Avoid Distraction
Prioritize features that don't distract people or unnecessarily lengthen the time they spend using the product or service.
Success Criterion - Avoid Attention-keeping
Avoid using infinite scroll or related attention-keeping tactics.
Environmental: Using pagination rather than infinite scrolling allows individuals to request data on demand rather than encouraging overconsumption, thereby reducing their carbon impact by way of using psychology to encourage healthy (and sustainable) browsing habits.
Transparency: Being open and honest with visitors about their experience and avoiding moving their attention in negative ways will lead to greater trust and the potential for repeat custom.
Social Equity: By avoiding dark and deceptive patterns and ensuring that the visitor's attention is focused on achieving their aims, you reduce the potential for confusion, mistakes, and lapses in judgement which could lead to consequences for them and the trust they have in your business down the road.
Accessibility: Understanding your visitors requires that you respect their needs and accommodate for the various tools and platforms they use to access your information. This improves accessibility by providing a method for them to engage with your product or service and prevents unnecessary data emissions and screen time which drains consumer's device batteries.
Performance: Certain attention-seeking features like notification requests or cookie banners can detract from visitor performance, as time is spent by consumers navigating through methods to close or hide the annoyances. Finding better ways of presenting the information will make an experience feel faster and reduce the barriers to access which trigger a block in the user-flow.
Economic: Organizations that monetize visitor attention strive to keep it as long as possible, therefore increasing their product or service's environmental impact. Conversely, organizations that strive to streamline interactions while still meeting visitor's needs (and their own business goals) measurably reduce their product or service's environmental impact, and potentially reach new audiences.
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.
Success Criterion - Design Patterns
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.
Environmental: Using easily recognized design components will reduce the amount of time visitors spend browsing between pages, trying to identify the information they came to your resource to locate. As such, the less time visitors spend on your site, the greater the efficiency savings in terms of emissions.
Accessibility: Recognizable design patterns can help people with cognitive disabilities easily understand how to perform a task. Similarly, simple layouts often improve access to information as well.
Performance: Using recognized patterns which appear where visitors expect, and only when they require them may increase the perceived speed of the website or application as navigation from point-to-point will increase due to the ease of use.
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.
Success Criterion - Dark and Deceptive Design Patterns
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).
Success Criterion - Using Advertisements
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.
Environmental: Many deceptive design patterns have visitors wasting time and energy trying to undo choices they never intended to make. Avoiding them therefore reduces energy use.
Privacy: Many deceptive patterns are intentionally designed to undermine data privacy. Ensuring you comply with ethical privacy practices and avoiding such patterns will avoid potential legal conflicts. You also reduce additional data being sent among the providers of tracking and advertising data.
Accessibility: Dark and deceptive design patterns often intentionally block or hide access to information, which especially undermines the experience of people with disabilities who use assistive technologies. By avoiding them, you will give those with accessibility needs justification to trust your brand. Furthermore, avoiding poor implementations such as overlays will prevent making any existing situations worse.
Performance: Interference with the user-interface (such as removing the ability to copy text) causes friction and forces the visitor to spend more time on the page to work around the barrier put in place. This uses additional energy as they try to find a solution onsite, elsewhere, or give up entirely. Using ethical, non-disruptive coding practices will speed up interactions within your website.
Economic: Ethical websites incentivize customers to whitelist your website on ad-blockers.
Conversion: Avoiding dark and deceptive patterns will likely result in fewer complaints. A classic example of this is the use of CAPTCHAs which can disrupt the visitor, cause accessibility issues, and reduce the legitimate use of your product or service.
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).
Success Criterion - Deliverables Reusability
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.
Success Criterion - Deliverables Documentation
Design functionality and technical specifications are documented so that deliverables are comprehensible by the project team and transferable to the development team.
Environmental: Deliverables that are used in common, easy-to-understand formats will take less computer time to learn and adapt to the environment. As such, less energy will be spent trying to manage a project with emissions savings as a consequence.
Economic: Well-documented projects that can be implemented with ease are likely to have fewer ongoing costs due to a lower need for maintenance.
Conversion: Using an open format, to which anyone can contribute, will have a lower barrier to entry as there will likely be no cost involved in participation. Therefore it will encourage more individuals to play an active role in your project's future.
2.13 Use a Design System To Prioritize Interface Consistency
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).
Success Criterion - Design System
Employ a design system based on web standards and recognizable patterns to mutualize interface components and provide a consistent experience for visitors.
Environmental: Consistent interfaces that employ web standards require less energy and resources across the product ecosystem, as they are usually tightly optimized. Also, design systems that incorporate environmental criteria can help to scale digital sustainability across the enterprise and reduce redundancy within code, resulting in collectively reduced energy use and impact.
Social Equity: A design system with standardized, lightweight components will improve access to information for people in low-bandwidth areas, on older devices, and so on. Also, design systems will reduce the chance of biases that could affect such groups being introduced.
Accessibility: A design system with accessible components will improve access to information for people with disabilities. Building design features with accessibility baked in by default reduces the time for implementation and decreases the potential that your audience will have issues while browsing.
Performance: Design Systems are built using standardized components that reduce the churn of repeat coding, thereby reducing developer coding turnarounds and, as a byproduct, improve performance and reduce emissions during the process. This will inherently reduce emissions considerably through the building of sustainable patterns.
Economic: Because of their use of standardized components and their avoidance of redundancy, design systems reduce costs as the development time may be reduced (even accounting for the maintenance time involved in having one). Also, familiar-looking websites that can be browsed with ease are likely to suffer lower bounce rates (where visitors just give up) due to the ease of transition (unlike a unique-looking website which can make navigation increasingly complex).
Conversion: Design Systems encourage using recognizable components throughout a design, which will help visitors identify and utilize the product or service successfully. As such, this will reduce complaints and annoyance, which can help increase customer retention. Also, user-interface consistency improves visitor trust as individuals will recognize familiar components within your design and know how to utilize them, and this can improve conversion rates as it will lower the rates of abandonment.
2.14 Write With Purpose, in an Accessible, Easy To Understand Format
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.
Success Criterion - Write Clearly
Write clearly using plain, inclusive language delivered at an easy-to-understand reading level considering accessibility and internationalization inclusions as required (for example, dyslexia).
Success Criterion - Content Formatting
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.
Environmental: When people can quickly find and comprehend the content they need to make informed decisions, they use less time and resources, which reduces energy use and lowers emissions.
Social Equity: Inclusive language that avoids jargon, gendered terms, and so on can improve the user-experience for a broader audience.
Accessibility: Plain-language content that can be quickly skimmed is easier to understand, especially for people with cognitive disabilities. Moreover, good document structure works better for assistive technologies such as screen readers.
Performance: Good document structure improves search performance as the content will likely rank higher in search engines, which can help people more quickly find the content they need.
Economic: Being an authoritative source on a subject can have a positive financial impact on your business, as it can bring income through multiple streams.
Conversion: Content which is well-written and authoritative will be cited by third parties and can lead to an increase in traffic.
Tags: Social Equity, Accessibility, Content, UI, Usability
2.15 Take a More Sustainable Approach to Image Assets
Of all the data which comprises the largest over-the-wire transfer rates within the average website or application, images are usually those which 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.
Success Criterion - Need For Images
Assess the need for images considering the quantity, format, and size necessary for implementation.
Success Criterion - Optimize Images
Resize, optimize and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions.
Success Criterion - Lazy Loading
Provide Lazy Loading to ensure image assets only loads when they are required.
Success Criterion - Sizing And Deactivation
Let the visitor select the display size, and provide the option to deactivate images.
Success Criterion - Management And Usage
Set up a media management and use policy to reduce the overall impact of images, with criteria for media compression and file formats.
Environmental: Image assets often make up the largest part of a web page's overall size. Compressing and delivering them in lightweight formats that improve the user-experience can often reduce the hardware burden on older devices. This in turn can reduce overall consumer e-waste in reducing forced upgrade cycles.
Social Equity: Lightweight images work better for visitors in low-bandwidth areas and on older devices, as long as the device can support the formats used.
Accessibility: Delivering images in ways that are meaningful to visitors improves access to information.
Performance: By optimizing your images, you can significantly speed up your website in terms of HTTP requests, data transfer, and even in some cases the physical rendering effort - all of which have an impact on a visitor's user-experience and speed of access.
Economic: Visitor's with data caps will benefit from optimized resources as they will be able to consume more content, and hosts of content will endure smaller bills due to a lower overhead.
2.16 Take a More Sustainable Approach to Media Assets
Video and audio-heavy websites are often those which 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.
Success Criterion - Need For Media
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.
Success Criterion - Optimize Media
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.
Success Criterion - Lazy Loading
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).
Success Criterion - Labels And Choice
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.
Success Criterion - Management And Usage
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.
Environmental: Media assets like audio and video can be very resource-hungry. Reducing battery draining events such as loading high-effort content until the moment it is required can have savings in terms of pure processing and displaying of the media.
Social Equity: Providing alternatives to bandwidth-hungry media will assist those unable to benefit due to their environment.
Accessibility: Delivering media assets in ways that convey information in an easy-to-read manner both visually and contextually (even if people are unable to for example see), will allow a wider audience to gain from your content.
Performance: Catering your experience to the device, situation, and environment of the visitor will reduce wasted bandwidth (for example, sending a lower resolution for less capable devices). As such, the data savings will translate into a performance boost for those taking advantage of the reduced capabilities.
Economic: Being able to avoid media entirely and rely on options such as transcripts will provide huge financial rewards for those who pay for the bandwidth they consume or serve.
2.17 Take a More Sustainable Approach to Animation
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.
Success Criterion - Need For Animation
Use animation only when it adds value to a visitor's experience, and not for decorative elements.
Success Criterion - Avoid Overburdening
Progressively display an appropriate quantity of animation so as not to overburden the visitor or diminish expected device behavior.
Success Criterion - Control Animation
Allow visitors to start, stop, pause or otherwise control animated content.
Environmental: Animation can be resource intensive. It can utilize both the CPU and GPU, consume a vast amount of RAM, and take a while to render. This is without considering the accessibility and usability issues it contains. By taking all of this into account, allowing the disabling or reduction of animation can be environmentally beneficial.
Social Equity: Individuals from different nations and backgrounds may have differing views on the use of animation, and different devices may support different levels of technology. As such, catering to many viewpoints will ensure the widest possible audience.
Accessibility: Animation which flashes can potentially trigger seizure conditions such as epilepsy; therefore it is critically important that you avoid any hazards within your designs.
Performance: Compressing, removing, or otherwise reducing animation files improves performance as less syntax will exist within your product or service codebase.
Economic: Subtle animation can draw the visitor's eye to useful information which could assist you to financial success, but this must be done ethically, and without overdoing it.
2.18 Take a More Sustainable Approach to Typefaces
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.
Success Criterion - Default Typefaces
Use standard system-level (web-safe / pre-installed) fonts as much as possible.
Success Criterion - Font Optimization
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.
Environmental: Reducing the number of fonts being loaded will reduce the amount of rendering that occurs, all of which have a carbon impact (as the physical rendering of non-system typefaces graphically onto every element of the DOM will have an energy commitment).
Social Equity: System-level (Web Safe) fonts work across the widest range of devices and platforms, which improves access to information for those who may have tightly regulated browsing habits or limited availability.
Performance: By providing Web fonts which are optimized but optional, visitors can experience the product or service with a level of speed versus aesthetic they feel comfortable with.
Economic: While pretty, custom typefaces are entirely optional on the Web and, as such, the bandwidth they consume (and the emissions this produces) are unnecessary. This added cost can be eliminated, but the benefit such fonts give in readability or personality for a website or application is worth considering.
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 alternative text will induce less consumer hardware thrashing than its rich media alternative).
Success Criterion - Open Formats
All proprietary file formats (such as PDF) should also be offered in HTML for accessibility and to ensure future availability.
Success Criterion - Font Subsetting
All custom typefaces (using font-display) should be subsetted and offered as part of a font stack with a system font as a backup.
Success Criterion - Alternative Text
All images should provide meaningful alternative text for screen reader users (or when images fail to load) accessibility.
Success Criterion - Audio Alternatives
Audio should provide text transcripts of conversations as an alternative to playing the media.
Success Criterion - Video Alternatives
Video should provide text transcripts (at minimum), subtitles (using WebVTT), and for accessibility best practice, offer closed captions and sign language options.
Environmental: Offering low-impact alternatives to media formats reduces the amount of battery draining hardware processing required for visitors to find the information they require.
Social Equity: Not every visitor will be in a situation where they can watch a video or listen to audio; therefore it makes sense to have a plaintext alternative.
Accessibility: Certain accessibility issues can prevent media from being consumed, as such it's important to offer different ways of viewing a site's content.
Performance: Reducing the interactivity of a website doesn't mean a lesser experience, it can help visitors access what they need quicker.
Economic: Media is costly to produce and host, text is cheap and takes little data to download, it can help reduce your hosting costs to serve a media-free setting within pages.
Conversion: Text alternatives (like transcripts) to media can be indexed by search engines, this can allow your project to be found easier.
2.20 Provide Accessible, Usable, Minimal Web Forms
It's understandable that 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.
Success Criterion - Form Simplicity
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).
Success Criterion - Form Functionality
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).
Environmental: Optimizing forms reduces the resources necessary for visitors to complete them and products or services to process them, and in doing so, will reduce the emissions as a byproduct of avoiding using unnecessary hardware at the server or client-side.
Privacy: Forms that include informed consent and helpful prompts about cookies, data collection, and so on improve data privacy.
Accessibility: Ensuring your forms are well labelled, and accessible not only for those with disabilities but those using a range of different devices and inputs will allow form processing to occur with higher success rates and thereby avoid wasted attempts that potentially cost you business and cost your visitor's their time (as wasted screen time has an emissions cost as well).
Economic: If visitors can complete forms more successfully, they will suffer less frustration and website owners will get fewer complaints, which will be beneficial in a potential reduction in support costs and result in more visitors likely to continue with purchases on a website.
Conversion: Forms that are standards-based and well constructed which consider accessibility will improve conversion rates due to visitors being able to complete forms error-free more regularly.
Tags: Social Equity, Accessibility, UI, Usability, HTML, Privacy
2.21 Support Non-Graphic Ways To Interact With Content
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.
Success Criterion - Alternative Interactions
Support speech browsing and other non-graphical ways to interact with content that provide alternatives to a visual interface.
Environmental: Aural (speech) browsers have no visual component, which reduces the environmental impact they suffer when browsing pages (as a screen is often one of the biggest drainers of a consumers' battery). Being able to look up information through such mechanisms through your product or service thereby will help reduce your overall emissions greatly.
Accessibility: People who have accessibility needs and browse the Web using specialist equipment, hardware, or software will benefit from the assistance aids you have built into your product or service.
Conversion: Increasing compatibility by supporting a wider range of device types, outside the most popular or well-known sort of hardware and software, will encourage new audiences to visit and potentially become customers.
2.22 Provide Useful Notifications To Improve The Visitor's Journey
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.
Success Criterion - Notification Justification
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.
Success Criterion - Notification Control
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.
Success Criterion - Prompts And Responses
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.
Environmental: Notifications which can inform visitors about important events can help them avoid having to constantly refresh pages, as such they act as a shortcut to only loading information when the information becomes available, leading to emission savings.
Privacy: If used appropriately, notifications can provide personalized content to specific devices, which reduces the risk of information exposure.
Accessibility: Being able to signpost individuals to information through helpful notifications or error messages will have a beneficial effect of avoiding visitor abandonment. It's especially essential to ensure that all information is presented so that such critical information doesn't discriminate based on an individual's abilities, as you could exclude a massive part of your audience.
2.23 Reduce the Impact of Downloadable or Physical Documents
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.
Success Criterion - Printing Documents
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.
Success Criterion - Optimize Documents
Offer optimized, compressed documents in a variety of accessible file formats.
Success Criterion - Optimize Delivery
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.
Success Criterion - Labels And Choice
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).
Environmental: Reducing the need to print documents or by providing a printing StyleSheet will remove the emissions from wasted paper and ink.
Accessibility: Providing a range of inclusively designed downloadable documents in a variety of formats which the visitor can choose between can benefit those with accessibility needs as they can choose the best fitting download for their device.
Performance: Compressing or otherwise optimizing documents will allow them to be downloaded faster by the consumer, which helps visitors avoid having to wait to view uniquely formatted offline files.
2.24 Create a Stakeholder-Focused Testing & Prototyping Policy
The organization has policies and practices in place to incorporate stakeholder-focused testing and prototyping into its product development cycles.
Success Criterion - New Features And Perspectives
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.
Success Criterion - Resourcing And Viability
The organization has appropriately resourced these processes to support its long-term product viability.
Success Criterion - Training And Onboarding
The organization has training materials to onboard new product team members to these practices.
Success Criterion - Testing And Validation
The organization regularly conducts extensive testing and user interviews to validate whether the released features are meeting both business goals and visitor needs.
Environmental: Potentially less energy use and reduced emissions as visitors complete tasks more quickly and efficiently.
Economic: Organizational policies that prioritize user-research help to reduce and mitigate risks associated with building the wrong thing (incurring technical debt), which can increase costs. Additionally, iterative testing and prototyping reduces the resources needed to build new features.
Conversion: Reduced visitor frustration resulting from a well-researched and built interface will likely result in less visitor churn.
Tags: Social Equity, Accessibility, UI, Ideation, Research, Education, Usability, Governance
2.25 Conduct Regular Audits, Regression, and Non-Regression Tests
Products and services at any stage of a project can suffer bugs or issues which 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.
Success Criterion - Regular Issue Testing
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).
Success Criterion - Non-Regression Tests
Non-regression tests are implemented for all important functionality.
Success Criterion - Regression Tests
Incorporate regression testing into each release cycle to ensure that new features don't introduce bugs or otherwise conflict with existing software functionality.
Environmental: Regular service audits reduce technical debt, which improves performance and environmental sustainability. Regression analysis also supports continuous improvement and lowers resource use over time, which also reduces emissions.
Security: Regular auditing of a product or service will not only identify potential sources of breaches, but it will also identify areas of improvement both in security and privacy.
Accessibility: Maintaining inclusivity over time through regular audits and testing reduces outages, improves access to information, and creates a better experience for all users, not just those with accessibility needs.
Economic: Ongoing regression testing improves security, which reduces risk and its associated costs.
2.26 Analyze The Performance Of The Visitor Journey
Try to ethically measure how efficient a visitor's experience is, by doing so you might be able to reduce any issues they may have encountered previously and reduce the burden of loading unnecessary pages.
Success Criterion - Measurement And Compliance
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).
Environmental: Alongside the device longevity which inherently comes with having a performant product or service, it can also help you meet the social aspect of ESG targets.
Performance: Faster pages that load less data improve performance, as there will be less for rendering engines within browsers to process. Additionally, as the pages are smaller, they will reach the visitor quicker based on their connection speed.
Economic: Less data stored and transferred also reduces costs for those hosting content and those who own websites and applications.
Conversion: Page load speed can measurably improve conversion rates, as visitors will be less likely to abandon a product or service if the content appears instantaneously.
2.27 Incorporate Value Testing Into Each Major Release-Cycle
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).
Success Criterion - Usage Changes
Consider visitor feedback and monitor adoption and churn rates of product or service features, incorporating insights into future releases.
Environmental: Feedback can help product teams make choices that improve a product or service's environmental impact, a clear example of this would be ensuring that frequently used features are more visible than lesser used features, thereby reducing the burden of findability. Which helps visitors spend less time attempting to achieve their goals.
Performance: User-testing allows you to focus on your product goals, ensuring that you maintain a minimum viable product and not one overburdened with complexity. In doing so, your product or service will be lightweight and run quickly.
Economic: If you can avoid wasting development time building features which bring little value to the consumer, your precious resources can be better spent where it will provide a better return.
Conversion: Feedback often improves conversion rates because it ensures that your product or service reflects the needs of your audience.
2.28 Incorporate Usability Testing Into Each Minor Release-Cycle
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.
Success Criterion - Usability Testing
Incorporate usability testing into product cycles and measure the impact of these tests for future releases.
Environmental: When visitors can quickly and easily accomplish tasks or access information, this reduces the energy they burn searching for answers.
Accessibility: Visitor feedback from people with disabilities can inform key improvements within the product or service, which will ensure your website or application can be used by the widest possible audience.
Tags: Social Equity, Accessibility, UI, Research, Usability, Strategy, KPIs
2.29 Incorporate Compatibility Testing Into Each Release-Cycle
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 which enters the system. If something doesn't work, it's also likely to result in visitors suffering a wasted effort or are refused access to your service (and thereby emitting further emissions).
Success Criterion - Compatibility Policy
Establish a policy for compatibility with obsolete devices and software versions, listing the supported devices brands, operating systems, and browsers (including versions).
Success Criterion - Maintaining Compatibility
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).
Success Criterion - Frequent Testing
Regularly test the product or service with weak connections, old browsers, and on devices older than five years to ensure compatibility.
Success Criterion - Mobile Friendly
Prototype your interfaces using mobile-first methods to ensure progressive enhancement, content prioritization, and improved accessibility.
Success Criterion - Progressive Web Application's (PWAs)
Consider whether a PWA will be more sustainable and compatible over a native mobile application.
Environmental: Incompatible websites and applications across the Web encourage people to purchase new devices, which has a giant impact upon the environment due to the amount of e-waste it produces. Additionally, planned obsolescence is one of the biggest contributors to e-waste on the planet. By extending the lifespan and improving digital device compatibility within your site's service plan, it can improve sustainability and slow the upgrade cycle which results from sluggish digital experiences.
Social Equity: More compatible products and services that last longer helps to reduce the digital divide, which can be a key issue in cases where income inequality, infrastructure robustness, and other factors play their part (and open your work to new markets). Similarly, because progressive web applications use established web standards, they are available to more people than more cost-prohibitive closed systems (Apple App Store, Google Play, etc).
Accessibility: The fourth pillar of Accessibility is robustness. By incorporating accessibility into early prototypes, it becomes a priority for project teams throughout a product's lifecycle. Broken source code can also impact screen readers and how they can read content to individuals with visual disabilities. Ensuring semantic code can provide an equal, error-free experience to all.
Performance: Incompatible code has an energy cost, when it's non-standard, deprecated or doesn't work on a device it can take additional time to render as it is usually un-optimized for the environment, which will put pressure on the CPU and waste the consumer's battery. Using modern Web standards will help your website run fast in modern browsers.
Economic: Product teams benefit from time savings and improved quality, organizations see cost reductions as less refactoring is required due to increased stability, and users benefit from greater trust and potentially lower product costs and maintenance fees as upgrades may not be required as frequently.
Conversion: More compatible products and services that last longer can potentially increase conversion rates due to the lower rates of abandonment and a wider market audience which can use a friction-free version of the product or service.
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.
Success Criterion - Performance Goals
Set performance goals which impact the environment and performance of the service, for example HTTP requests, or the amount of DOM elements which need to be rendered.
Environmental: Limiting the number of server requests and the size of the DOM decreases a product or service's environmental impact by reducing CPU and GPU cycles, and RAM usage which benefits energy consumption, reducing the need to recharge devices as frequently.
Performance: Reducing the hardware utilization as denoted above will also improve performance metrics, as a device will suffer less consumption and thrashing of limited resources.
Conversion: Search engines consider web performance in their ranking data, as such a faster website may lead to a higher rank and potentially better conversion rates.
Tags: Social Equity, Research, Performance, Networking, Strategy, KPIs
3.2 Minify Your HTML, CSS, and JavaScript
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.
Success Criterion - Minify Code
All source code is minified upon compilation (including inline code).
Performance: Reduced loading times as a result of less data being transferred. Though this does not inherently have an ecological benefit as whitespace is ignored by rendering engines, it does help meet sustainability targets with visitor-based improvements in terms of loading times.
Conversion: When a page loads quickly, visitors are less likely to abandon their journey or search for their information elsewhere.
When dealing with heavy components (such as JavaScript), the ability to modularize them into smaller pieces which can be loaded as and when required reduces the amount of redundancy and serves as a great way to make your scripts more sustainable.
Success Criterion - Code Splitting
Breakdown bandwidth-heavy components into segments that can be loaded as required.
Performance: Having smaller (modular) components allows for more optimized caching and loading only what code functions are required (which reduces the payload). Unused portions of a resource remain un-downloaded (potentially huge savings).
Economic: Reducing the size of large files will result in lower bandwidth bills for service providers.
Conversion: A faster website reduces the chance of abandonment (which is especially of concern for visitors of handheld devices).
Often when coding, projects can accumulate clutter and functions which 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.
Success Criterion - Remove Redundancy
Identify and eliminate unused and dead code within CSS and JavaScript.
Environmental: Removal of unused code eliminates wasted bytes from the rendering tree, which means less wasted download and potential processing time (which can be a battery draining process).
Performance: Unused code will not impact visitors, yet it takes up space in the cache, RAM, and takes extra time to download and render. Clearing wasted space frees' visitor resources.
Economic: Unused code has a maintenance cost as it might affect other code, additionally, it's something else for developers to have to deal with unnecessarily.
Who Killed My Battery: Analyzing Mobile Browser Energy Consumption [WKMB]
Tags: CSS, JavaScript, Performance
3.5 Ensure Your Solutions Are Accessible
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.
Success Criterion - Accessibility Compliance
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.
Success Criterion - Enhancing For Accessibility
Enhance your website or application with Accessible Rich Internet Applications (ARIA) ONLY if applicable or necessary, and accessibility enhancing features when useful or beneficial.
Success Criterion - Electronic Inequalities
Deploy solutions which fight against electronic inequalities in products and services.
Environmental: Inclusive websites are often more sustainable due to the effort put into improving code quality, user-experience and limiting issues such as barriers to access that trigger waste in the service or product.
Social Equity: There is a legal obligation to be accessible, and beyond this, turning away millions of potential visitors due to a lack of care is wasteful not only in time, but in digital and physical resources (e-waste).
Accessibility: Adapting a digital product or service to be accessible-by-default will improve access to information for people with disabilities. This must be managed and maintained over time, as the sustainability benefits from reduced visitor friction add to the benefits from increasing your audience.
Performance: An accessible website or application will typically be written using semantic, well-written code. While you may have more code to accommodate accessibility tooling (like ARIA), well-coded sites are usually less bloated, so they may have a performance edge which will reduce overall emissions.
Economic: Improving the user-experience through accessibility can also improve financial performance by reducing costs (through lawsuits), building capacity, increasing sales or donations (with new audiences), and making better use of available resources.
Conversion: Better-equipped experiences across devices and platforms signals to visitors that you are making a concentrated effort to meet their specific needs. This increases trust and can improve conversion rates.
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.
Success Criterion - Remove Or Simplify
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).
Success Criterion - Iteration Over Recreation
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.
Success Criterion - Organize Code Arrangement
Within CSS and JavaScript, use methodologies (like BEM) and systems like DRY and WET to optimize the arrangement and output of your source code.
Environmental: While CSS methodologies increasingly add more code to your markup, they improve maintainability (reducing development time at scale), which can reduce energy usage.
Accessibility: Developers with accessibility issues may find the naming conventions used in CSS methodologies easier to work with than generic CSS selector identifiers.
Performance: Avoiding repetitive code reduces waste in markup, which reduces the time sites take to download (and reduces server energy usage).
Economic: An optimized codebase (that's reusable) can improve productivity and code quality.
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.
Success Criterion - Assess Third-Parties
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.
Success Criterion - Third-party Implementation
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.
Success Criterion - Libraries And Frameworks
Large CSS libraries and JavaScript frameworks should only be used if a more performant alternative which achieves the same goal cannot be used instead.
Success Criterion - Self-Hosting
Prioritize self-hosted content over embedded content from third-party services.
Success Criterion - Avoiding Dependency
Create your own clickable icons and widgets, rather than relying on third-party services to host or allow embedding within your product or service.
Environmental: Replacing heavy tooling and third-party services with lightweight tooling reduces visitor bandwidth usage considerably, despite having to learn a new way of doing things or reducing the visibility of such information. It can significantly reduce a page's (and data you have no control over) environmental impact, especially when it comes to Scope 3 emissions.
Privacy: Visitor's not interested in embedded content may identify the lack of third-party tracking (such as embedded pixels and tags) as a privacy benefit, as there are fewer chances that visitor data is exploited.
Accessibility: As part of rigorous quality control efforts, reducing third-party services can potentially improve accessibility by replacing it with accessible by-default alternatives using built-in custom syntax that meets visitor requirements.
Performance: Self-made widgets and controls work much faster than third-party content as you don't have to perform additional server requests, rendering requests, and such. You only include what features you require, and this reduces the overall size of the bandwidth usage (and emissions produced).
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, in SEO, and even in sustainability. Ensuring that you markup your content correctly and avoid cluttering your markup wastefully will reduce emissions.
Success Criterion - Semantic Code
Ensure content is marked up semantically using the right HTML element for the right job.
Success Criterion - Optional Features
Consider removing optional HTML tags (which aren't required for rendering), attribute quotes, or attributes that are set to their default value.
Success Criterion - Avoid Non-standard Code
Avoid using non-standard elements or attributes.
Success Criterion - Custom Code
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.
Environmental: Sites with bloated markup waste data, also sites with broken markup could trigger memory leaks (performance issues) in apps, and following standards ensures sites will work the same across devices and platforms (reducing bugs, developer fix time, and resource waste).
Accessibility: Semantic HTML increases readability for those with accessibility needs, reducing the time they waste trying to understand your content.
Performance: Deprecated code isn't optimized within rendering engines, and while Web components do outperform framework components, they won't beat the native HTML elements they build upon.
Economic: Inaccessible sites can lead to lawsuits, avoiding these is beneficial to any website owner.
Conversion: Poorly coded sites may break features for visitors, leading to website abandonment.
Tags: Social Equity, Accessibility, Content, Usability, Compatibility, HTML
3.9 Resolve Render Blocking Content
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 own use-case and each can have the potential to reduce or give performance benefits to a website or application.
Success Criterion - Asynchronous Code
All external assets should be deferred or set to async (unless required) to avoid FOUC (Flash Of Unstyled Content).
Success Criterion - Priority Loading
If external resources are required on load, ensure their priorities (delivery route) are set correctly.
Environmental: Lazy loading videos and images ensures that they are only requested once the visitor needs them (not demanded even if they aren't viewed). This saves processing power which can help older devices or those with less battery capacity access your websites and applications barrier-free.
Performance: Letting text render first makes your website feel like it's loading faster (as the remainder will appear in the background or on-demand).
Economic: Unused content will not contribute to your server's bandwidth bills.
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.
Success Criterion - Metadata And Microdata
Optimize your metadata and microdata for search engines and social media.
Success Criterion - Search Engines
Assist search engines, while blocking any ill-intentioned robots and scripts.
Success Criterion - Accessibility Aids
Offer accessibility and usability aids to find content, such as skip links and signposts.
Environmental: People spend a lot of time searching for the information they want, and helping them get there quicker will reduce the drain on their device battery.
Social Equity: Paradoxically as it may seem, the concept of getting people to spend more time on your website is not often beneficial. Visitors often want to accomplish a task and move on, yet we put great effort into keeping them on-site (time-wasting). This is a dark pattern that has consequences for sustainability (consumption of resources) and potentially the visitor's health and well-being.
Accessibility: Skip links and other aids can accelerate a visitor's journey through your website, reducing the system resources their tooling requires, and assist them finding the content they need.
Performance: Finding information quickly is a perceived performance. It may not physically reduce the data transferred, but it will help reduce the steps required to achieve a goal; thus, the time on-screen is lessened.
Economic: Quick visits may encourage repeat custom when the visitor has limited spare time.
Conversion: A well-mapped website will index properly in search engines, leading to a good page rank.
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.
Success Criterion - Error Validation
Errors should be identified through live validation as well as upon submission.
Success Criterion - Label Elements
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.
Success Criterion - Allow Paste
Always allow the pasting of content (including passwords) from external sources.
Security: Allowing people to correct mistakes (and identifying errors early in the input process) on forms before submission can avoid costly mistakes during financial transactions and spend less time being wasted on tasks.
Accessibility: Assistance through form filling is beneficial as it anticipates and helps correct (rather than blame for) incorrect data entry.
Performance: Being able to fill in a form while addressing issues quickly reduces the barrier to entry and thereby avoids potentially having to refill a form or waste time going back and scrolling.
Economic: Shopping cart abandonment happens when errors occur, fixing issues upfront can reduce such potential issues.
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.
Success Criterion - Required Elements
Include the required title element, plus any optional HTML head elements (such as link).
Success Criterion - Meta Tags
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.
Success Criterion - Structured Data
Embed Microdata, Structured Data (Schema), or Microformats within your pages.
Environmental: Adding rich metadata allows your website to be indexed correctly within search engines and social networks, allowing visitors to find content from your website or product quicker (often without even requiring a visit), saving clicks and energy.
Transparency: Used correctly, metadata can ensure clients find the correct site, and if they are just after contact details, potentially not have to even visit the page (wasting bandwidth).
Performance: Visitors spend less time jumping through pages, as they will likely land on the page they wish to browse through searching (if they came via a third-party tool).
Economic: Increased awareness within a search engine or social network may lead to more visitors or customers.
Conversion: Recognized microdata usage can lead to a better search engine position.
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.
Success Criterion - Media and Preference Queries
Apply the monochrome, prefers-contrast, prefers-color-scheme, prefers-reduced-data, 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.
Environmental: Improving the experience for monochrome devices (using a monchrome preference query) could encourage more visitors to use these energy efficient eInk devices. For OLED displays dark mode (prefers-color-scheme) will be more energy efficient. Animation and media have a significant impact on CPU and GPU, therefore reducing it's usage (prefers-reduced-motion) will reduce energy usage. Finally, having a print friendly stylesheet will save not only paper but ink wastage.
Social Equity: Media queries don't tell individuals how to experience the web, they follow the preferences of the visitor or a devices capabilities.
Accessibility: Having a high contrast (prefers-contrast) version of a site will reduce the barriers to entry and time wasted for visually impaired visitors. Less motion may also assist people with accessibility issues.
Performance: Allowing visitors to have a Lo-Fi (prefers-reduced-data) version of a site could significantly reduce the carbon footprint they emit (which for individuals on a data plan would be beneficial). Additionally, by detecting if scripting is disabled and offering alternative content, you could save wasted effort and improve the performance of a product or service.
Economic: Print media queries (or stylesheets) can save visitors additional ink and paper costs.
Conversion: User preferences make an interface friendlier, encouraging repeat visitors.
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 which emit less carbon if they wish.
Success Criterion - Mobile-First
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.
Success Criterion - Responsive Design
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.
Success Criterion - Carbon Aware Design
To maximize the use of renewable energy, adapt your website or service to electricity availability using carbon-aware design techniques.
Success Criterion - Alternative Browsing
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).
Environmental: Mobile first and responsive design interfaces reduce energy use by improving performance and providing a streamlined experience for visitors. Additionally, smaller devices are often more underpowered than larger devices. Using less energy to power screens (and potentially other hardware).
Social Equity: Low-powered devices are frequently used in developing nations, but ensuring that content works for older devices is paramount.
Accessibility: Interfaces that work well across devices and platforms, including assistive technologies; improve the visitor experience, lead to fewer support requests, allow your products to be used on more devices, and encourage access while on the move.
Performance: Using lazy-loading and other delayed rendering techniques can boost website speed for small visual capacity devices.
Economic: Ensuring that your website or application works across not only desktop devices but also smartphones and other unique screen resolutions can benefit you financially as it allows for individuals to make purchases while on the move (which can be more convenient), while potentially using little or no screen.
Conversion: Products and services that work well across a wider range of platforms and devices can encourage a wider audience to use your website or application not only in one situation, but in many you might not have envisaged.
When new best practices or if beneficial scripting guidance exists which will improve the visitor experience, following it should be of the highest priority (only using scripts ethically should be promoted).
Success Criterion - Beneficial JavaScript
Improve sustainability through accessible and performant code implementations.
Success Criterion - API Requests
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.
Environmental: Removing unwatched distractions (Page Visibility API), for example, would reduce wasted visual effects such as animation from being processed in the background. This could potentially help visitors conserve battery if they leave multiple tabs open in their browser.
Privacy: Allowing for script-free visitors can protect the privacy of visitors who may live in unsafe nations.
Accessibility: Having fallbacks for unavailable JavaScript allows older or less capable devices to still experience your products.
Performance: Using modern APIs or low-code solutions often reduces heavy codebase usage.
Economic: If a product works in more situations, you can sell it to more people without it failing.
Conversion: Fallbacks for technology that might fail can lead to sales that otherwise wouldn't exist.
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.
Success Criterion - Script Security
Check the code for vulnerabilities, exploits, header issues, and code injection.
Environmental: Websites that have no outstanding security issues are less likely to become a target for individuals who might exploit them (consuming vast amounts of data in the process).
Security: Having a secure website can prevent personal information from being exploited.
Performance: A secure website is less likely to have its infrastructure breached, which could lead to vast amounts of data being stolen, corrupted, or destroyed.
Economic: Preventing security issues will help your project and visitors avoid financial crime.
Tags: Social Equity, JavaScript, Security, Privacy
3.17 Manage Dependencies Appropriately
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.
Success Criterion - Dependency Management
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.
Success Criterion - Dependency Necessity
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 using a tool like Bundlephobia, and whether individual modules can be installed and imported rather than the whole library.
Success Criterion - Dependency Updates
Regularly check dependencies and keep them up-to-date.
Environmental: Developers machines do not need to waste energy installing and / or rendering packages that are not needed.
Security: Third-party code can contain bugs and security issues. Keeping packages up-to-date and using fewer third-party libraries reduces the likelihood of security flaws.
Performance: Reduction in client-side JavaScript normally results in faster websites.
3.18 Include Files That Are Automatically Expected
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.
Success Criterion - Expected File Formats
Take advantage of the favicon.ico, robots.txt, opensearch.xml, site.webmanifest, and sitemap.xml documents.
Environmental: Search engines or browsers request certain files by default, ensuring they are inplace will reduce loading errors, and may provide efficiency enhancements in how visitors find or interact with a site.
Accessibility: OpenSearch enables the browser's default search box rather than a custom solution to be integrated with your website search, which may aid accessibility.
Performance: Files that are expected will produce HTTP requests, ensuring they are met will satisfy the products making them and potentially reduce the requests once they are discovered.
Economic: Robots and Sitemap files can be utilized by search engines to help make your website more findable, this could lead to more visitors and potentially more customers as a result.
Conversion: Robots can be used to target specific search engines, helping to ensure content is correctly indexed to get a good placement so that visitors can find you easily.
There are several small assets which 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.
Success Criterion - Beneficial File Formats
Utilize standards such as ads.txt, carbon.txt, humans.txt, security.txt and robots.txt.
Environmental: Plaintext requires no rendering. If visitors (or search engines) know about these useful files (like carbon.txt) they can load quicker and with less CPU / GPU impact than any HTML website.
Transparency: The humans file provides credit to people involved in a site's creation, and security offers critical points of contact if an issue is discovered. Both are valuable additions to a project.
Performance: Plaintext files contain no links, no markup, and have no imprint. Putting credits (for example) in such a file will reduce data transfer and have a lower rendering footprint.
Economic: The ads.txt file is part of a scheme to reduce advertising fraud, it could be useful.
The Web is full of dead, often proprietary code, created using standards which have been superseded or by groups which 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).
Success Criterion - Deprecated Code
Upgrading or avoiding deprecated formats is important, the only exception being if consumer support demands maintaining older standards to provide a functional product.
Success Criterion - Outdated Code
Don't use an older standard if a newer recommendation will do the same job as or more effectively.
Environmental: Deprecated standards will not be optimized or supported by future browsers, which could lead to broken functionality or a slow experience, wasting time and visitor resources.
Security: Old code can potentially be exploited if security issues arise (and browsers stop supporting the features). Ensuring you maintain standards should be a part of your processes.
Accessibility: Old web standards often have poor accessibility support in screen readers, avoiding them will help to provide a semantic experience that works well for everyone.
Performance: Modern web standards are highly optimized, avoiding deprecated or less efficient standards will increase the longevity of your product and reduce the need for a carbon-intensive redesign.
3.21 Align Technical Requirements With Sustainability Goals
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.
Success Criterion - Identify 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).
Success Criterion - Optimized Methodology
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.
Success Criterion - Static VS Dynamic
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.
Success Criterion - Expandability Considerations
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.
Success Criterion - Interface Impact
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.
Environmental: Carefully considering long-term technology implications and taking the time to ensure they are optimized and efficiently utilized can help a team measurably reduce a product or service's environmental impact over time, which will reduce overall emissions.
Security: Maintaining a software product over time and ensuring that the only third-party products you use are critical, and your service improves security.
Privacy: Prioritizing security and user privacy helps an organization better comply with current and emerging related legislation.
Accessibility: Making assistive technologies a core part of project specifications from the beginning and throughout a product or service's life-cycle improves access to information for people with disabilities.
Performance: Avoiding unnecessary complexity in your infrastructure will increase the speed at which developers can work, but also reduce the overhead load of website performance, increasing the benefits relating to emission reduction.
Economic: Avoiding tooling which may be overburdening the user-experience may have financial savings, especially if certain tooling has maintenance costs or fees for software usage.
Environmental: Using the latest language version may improve efficiency and reduce data center energy consumption. Verify benefits are worthwhile before major build upgrades.
Security: Often, older versions may have security issues which could expose your website or app (and thereby your visitors) to harm. Maintaining an upgrade schedule is good for security.
Accessibility: Using the latest language version may improve the page load speed.
Performance: Language version updates are usually coupled with performance improvements.
Economic: Using the latest and more performant language version could help hosting companies to reduce their costs. That could be beneficial for the company and the visitor.
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.
Success Criterion - Native Over Custom
Use native functions, APIs and features over writing your own.
Environmental: Avoiding repetition of pre-existing features improves efficiency, which ultimately will lead to less redundancy, less development time, and thereby emissions saving for the construction of the product or service.
Performance: Native features will have been well optimized, it's unlikely a custom component will match this, therefore a native function will not only load quicker but will use fewer resources.
Economic: Existing features don't require additional development time, so is a time saver.
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.
Success Criterion - Database Queries
If you need information that is stored in a database, and you require it more than once in your code, access the database only once, and store the data in a variable for subsequent processing.
Performance: By holding the data locally rather than remotely, you can avoid waiting for an additional HTTP request to occur to process the string.
Economic: Rather than pushing multiple additional demands to the server (which could lead to stress failures and lost business), an optimized codebase can reduce bandwidth overheads.
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.
Success Criterion - Monitor Metrics
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.
Success Criterion - Equipment Longevity
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.
Success Criterion - Recycling Waste
Recover, recycle, and upcycle waste including equipment.
Success Criterion - Renewable Electricity
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.
Success Criterion - Remaining Emissions
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.
Environmental: Helps in detecting overconsumption, reduces the environmental impacts of equipment (such as embodied carbon, for instance), and reduces the environmental impacts related to the production of consumed electricity.
Economic: Reduces the quantity of equipment needed to be purchased.
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).
Success Criterion - Server-side Caching
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.
Success Criterion - Offline Access
Client-side JavaScript uses a combination of ServiceWorkers, WebWorkers, storage Application Programming Interfaces (APIs), or cookies (if necessary) to reduce friction in 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.
Social Equity: Allows websites to be functional in regions where no or intermittent Internet connectivity is available.
Performance: Unmodified files don't need to constantly be redownloaded (saving bandwidth, and server-side caching reduces the amount of computing resources required (as fewer HTTP requests will likely be submitted). Also, being selective over cached content balances faster reloads over the need to request new pages, which means that visitors may experience less latency due to data being held for repeat requests.
Economic: Reduced data transfer allows for savings for individuals on a monitored data plan and infrastructure costs for the provider.
Conversion: Caching increases repeat visitor page-load speeds (a customer benefit).
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.
Success Criterion - Server-side Compression
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.
Success Criterion - Media Compression
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.
Social Equity: Reduced reliance on a high-speed connection (which in many locations is unavailable).
Accessibility: People with accessibility needs may be lower income and thereby unable to afford either a high speed or the high cost of data plans found on cellular networks and satellite providers.
Performance: Reduced data consumption (with a slight increase in visitor CPU decompression with server-side techniques).
Economic: Reduced data transfer allows for savings for individuals on a monitored data plan.
Who Killed My Battery: Analyzing Mobile Browser Energy Consumption [WKMB]
Tags: Assets, Performance, Networking
4.4 Use Error Pages and Redirects Carefully
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.
Success Criterion - Error Pages
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 a visitor complete the task they started.
Success Criterion - Redirection
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.
Environmental: While errors and redirects should be avoided, it's not likely possible. Therefore, having the page's visitor's encounter optimized will hopefully reduce their frustration (and thereby their time on screen trying to pick a new route - or worse, giving up).
Transparency: Problems can occur, having failsafe mechanisms in place prevents the visitor from being blamed, and it gives them a direction to move once they encounter an error.
Accessibility: Error pages matter, they can help lost individuals find their path, and providing useful navigation and appropriate signage can reduce the loss of abandonment.
Performance: Redirects used appropriately can help visitors find a resource that has been moved quickly.
Conversion: Visitors are less likely to abandon a website if they can find an instant solution.
Decommission or switch off additional environments, such as testing / Quality Assurance QA) / re-production and other such environments when they are not useful.
Success Criterion - Unused Environments
Ensure no unused environment is available, balancing the cost of deploying an environment with the cost of keeping it online while unused.
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.
Success Criterion - Automate Tasks
Every recurring task, such as deployment, testing, or compilation, can be run automatically, as is recommended by continuous integration / continuous delivery best practices.
Success Criterion - Necessitate Tasks
To reduce wasted processing cycles, every automated task is only run when needed.
Success Criterion - Automated Scaling
Use automated scaling infrastructure to automatically increase the capacity of the web server and implement buffering / throttling to respond to visitor demand.
Success Criterion - Security Tooling
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.
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.
Success Criterion - Refresh Frequency
The frequency for refresh (of both the cache, locally stored data, and the page) is defined depending on visitor needs.
For security reasons and in accordance with an 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.
Success Criterion - Data Backups
Backups of system and user data are both incremental and secure.
4.9 Enable Asynchronous Processing and Communication
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.
Success Criterion - Batch Processing
By default, non-critical processes and communications are batched and launched only when carbon-intensity is under a given threshold.
Success Criterion - Protocol Usage
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).
Environmental: The potential reduction in a workload by running processes in batches could help reduce the intensity of peak hardware thrashing, thereby reducing the energy requirements and potentially even the water requirements for cooling (due to excess heat generation).
Social Equity: Leaving non-critical processes to run during quieter periods may reduce the opportunity for sites or services to experience downtime or slowdown due to being overburdened.
Edge caching and CDN delivery can help optimize sustainable delivery of digital services by optimizing the way in which your websites 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 which needs to be considered for sustainability.
Success Criterion - Sustainability Commitment
Check the CDN to verify that it provides a commitment to sustainability.
Success Criterion - Local Servers
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.
Environmental: Reduces the amount of time spent in front of the device as the delivery of assets can occur quicker (due to servers being closer to the device), which in turn will drain the consumers' device battery less.
Social Equity: Benefits visitors in normally underserved geographies and economies, or from disadvantaged backgrounds, as content may be available in a region closer to their location.
Performance: Visitor's experience less latency due to the distance between them and the server is reduced.
Economic: Content delivery networks work on economies of scale, and their data transfer rates are often cheaper than those of many hosting providers.
4.11 Use the Lowest Infrastructure Tier Meeting Business Requirements
Select infrastructure with minimal specifications meeting business requirements of performance, availability, etc.
Success Criterion - Lowest Requirements
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.
Study on the practical application of the new framework methodology for measuring the environmental impact of your equipment [ICTCA].
Tags: Performance, Hardware, E-Waste
4.12 Store Data According to Visitor Needs
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.
Success Criterion - Reduce Redundancy
Remove unnecessary and redundant data from your servers, whether it is single-use (dark data) or abandoned.
Success Criterion - Expiration Dates
Create data with an expiration date. Excess data is a form of technical debt, and routinely cleaning up old data needs to be normalized.
Success Criterion - Classify And Tag
Use a data classification / tagging policy to make it easier to find, handle, and remove.
Success Criterion - Justify Storage
Store data only when it is difficult to recreate.
Success Criterion - Optimize Logging
Optimize log collection, storage (off-site), and rotation; scheduling during low-activity hours and using carbon-neutral backup providers.
Success Criterion - Compress Storage
Enable storage compression both on the fly (Brotli or GZIP) and with long-term assets made available for download.
5.1 Have an Ethical and Sustainability Product Strategy
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 which align with the organization's mission, vision, and values and includes statements specific to digital products, services, policies, and programs. This should be done while actively promoting such efforts (with evidence) using social channels.
Success Criterion - Statement Availability
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.
Success Criterion - Achievements And Compliance
List achievements, features, compliance, and anything beyond the scope of these guidelines and publish it in a sustainability section of your product or service.
Success Criterion - Governance Over Time
The organization can show how it effectively governs implemented digital sustainability, climate policies, and related ESG practices over time.
Success Criterion - Onboarding New Members
The organization has training decks and workshops it uses to onboard new team members on how it implements more sustainable product strategies.
Success Criterion - Documentation
Raise awareness with your visitor's by documenting your methodology, through impact storytelling, documentation, and helping individuals make more informed decisions.
Success Criterion - Renewable Showcasing
The organization can show how it powers digital products and services with renewable energy.
Environmental: A clear sustainability statement should make it easier to align organizational policies and practices with measurable metrics to support goals. And, if included early in digital product strategy, can benefit from improved efficiency and reduced environmental impact.
Privacy: By trying to reduce your emissions, and explaining to a wider audience how you aim to keep your sustainability promises, you can also highlight other key areas of visitor value as ethically important, such as privacy and security (which will gain visitor trust in your brand).
Transparency: A clear, public-facing set of policies help internal and external stakeholders better understand an organization's commitments.
Social Equity: Highlighting intersectional social issues in documentation, storytelling, and marketing materials raises awareness of both problems and potential solutions.
Accessibility: Prioritizing inclusive design both in user-interfaces and storytelling raises awareness of accessibility issues, improves experience for people with disabilities, and will reduce emissions by reducing barriers to access which may trigger wasted traffic.
Economic: Transparent communication on how an organization shares the economic benefits of its digital work raises awareness of social inequalities. Similarly, helping visitors make more informed decisions can support a more financially sustainable product or service overall. A clear statement of intent will also make it easier for the company to measure and report on its impact efforts.
Operations: Product teams are more engaged in the work they're doing.
Tags: Social Equity, Ideation, Research, Education, Strategy, KPIs
5.2 Assign a Sustainability Representative
Having someone within an organization who represents sustainability as a core agenda makes good sense due to the accessibility, performance, financial, and other benefits which can occur from following best practices.
Success Criterion - Ecological Referee
Choose and assign an ecological referee (with specific digital expertise) for the product or service within your organization.
Environmental: A referee will maintain quality assurance and guide decisions that measurably reduce the environmental impact of the organization's digital products and services.
Privacy: They will maintain intersectional data privacy standards and potentially watch out for legal compliance issues within the organization.
Social Equity: A representative will help to reduce the digital divide and improve access to information for visitors with older devices, in low-bandwidth areas, and so on. This reduces emissions as less e-waste will be produced if the need for newer equipment becomes less of a priority.
Accessibility: The sustainability representative will help the organization improve issues surrounding barriers to access. These inherently could cost bandwidth, have a monetary value, and have potential legal implications.
Economic: A dedicated resource who maintains quality control will ultimately improve the organization's financial standing.
Tags: Social Equity, Ideation, Education, Marketing
5.3 Raise Awareness and Inform
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.
Success Criterion - Inform And Train
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.
Success Criterion - Active Participation
Encourages stakeholders to actively reduce their environmental impact by providing resources on sustainable design, practices, and concepts.
Environmental: An informed and educated team has the potential to reap benefits through systemic changes within the way they build products and services, the way they host or manage their creations, and even the way they do business or carry out their everyday lives (extending to their wider community).
Operations: By clearly stating sustainability goals and sharing resources, you encourage organizational stakeholders to make their own progress.
5.4 Communicate the Ecological Impact of User Choices
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.
Success Criterion - Impact Communication
Clearly communicate the ecological implications of visitor choices and allow visitors to configure settings based on those choices.
Environmental: More ecologically friendly software settings are designed to improve the environmental impact of a product or service. Empowering the visitor will also allow you indirectly to reduce emissions.
Performance: Sustainability is inherently tied into accessibility and web performance, as such the benefits these fields bring can have a positive impact on the way your website or application works.
Conversion: By clearly communicating the impact, allowing the visitor to set preferences can potentially encourage more individuals to make ecologically friendly choices, thereby increasing adoption rates from those who look for sustainable or ethical brands.
5.5 Estimate a Product or Service's Environmental Impact
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).
Success Criterion - Life-cycle Analysis
Conduct a full life-cycle Analysis based on the functional unit defined in Guideline 5.15.
Success Criterion - Competitor Analysis
Estimate the environmental impact of your or your competitor's current service to inform decision-making (as a potential target goal).
Environmental: Given their rigor, LCAs offer the biggest opportunities to reduce a digital product or service's overall environmental impact through the identification and elimination of variables and vectors of digital emissions.
Social Equity: While LCAs are primarily concerned with environmental impacts, they can incorporate intersectional social metrics as well to improve and consider issues like inequality which affect sustainability.
Accessibility: Inclusiveness can be a key part of a digital LCA, as long as parameters are defined upfront and maintained throughout the project to ensure barriers to access are eliminated.
Performance: Because they are so detailed, following LCA recommendations should improve product performance due to optimizations being quickly identified and checked off based upon best practices.
Tags: Social Equity, Ideation, Research, Strategy, KPIs
5.6 Define Clear Organizational Sustainability Goals and Metrics
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).
Success Criterion - Sustainability Goals
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.
Environmental: Setting, measuring, and communicating clear sustainability goals aligns an organization's impact aspirations with ongoing efforts to meet these goals.
Transparency: Helps stakeholders such as employees, clients, and partners better understand how the organization creates shared value in its various sustainability policies and programs.
Economic: Aligning with existing standards or frameworks makes it easier for organizations to include digital in their overall sustainability reporting.
Tags: Social Equity, Ideation, Research, Governance, KPIs
5.7 Verify Your Efforts Using Established Third-Party Business Certifications
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.
Success Criterion - Certification Achievement
The organization has achieved one or more business sustainability certifications and incorporated operational policies and practices to support them.
Success Criterion - Certification Maintenance
The organization maintains its certification through evolving policies and practices over time.
Operations: These types of certifications can make it easier for organizations to align operational practices with their mission, vision, and values and communicate these decisions to organizational stakeholders.
Economic: Business certifications, which are overseen by impartial governing bodies, help organizations operationalize sustainability principles and achieve higher verified levels of social and environmental performance, accountability, and transparency. These certifications can also help an organization differentiate itself from others in its industry. Though, organizations should be sure to vet the certifying entity so no conflicts-of-interest exist.
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.
Success Criterion - Training Materials
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.
Success Criterion - Progress Incentivisation
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.
Success Criterion - Negative Variables
The organization anticipates and maps potential negative external variables on the service, and acts to minimize their overall impact.
Economic: Organizations with sustainability training and onboarding practices in place benefit from higher retention rates, improved performance, and more resilient standards of practice for maintaining business continuity.
The organization discloses and reports its ESG impact on at least an annual basis.
Success Criterion - Policies And Practices
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.
Success Criterion - Impact Report
The organization produces a publicly available impact report outlining its progress against previous reports on social and environmental goals at least once per year.
Success Criterion - Standards And Policies
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.
Success Criterion - Impact Reduction
The organization clearly identifies how it reduces its environmental impact, avoiding double accounting, greenwashing, excluded data, or other manipulative techniques.
Environmental: As reporting standards become more rigorous and commonplace, early adopters find the transition less disruptive due to more resilient business operations. Organizations that commit to these practices long-term will also be ahead of the curve as legislation catches up.
Economic: Organizations that regularly report on their impact, and show measurable improvement over time, are increasingly likely to attract employees, partners, potential customers, investors, and suppliers based on shared values and an aligned mission. Customers are more likely to purchase products from ethical companies with a proven environmental record.
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.
Success Criterion - Theory Of Change
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.
Environmental: Business models based on advertisement, sponsorship, or the selling of products can be contradictory to some guidelines as they tend to increase the time spent using a product or service. Taking decisions not only based on financial indicators but on benefiting the visitor and the wider ecosystem can help prevent this and reduce overall emissions.
Social Equity: Adding social indicators (such as the shared value within digital services) can prevent negative social impacts such as impoverishment or exploitation occurring.
Economic: Organizations that implement these practices create positive social and environmental impacts with every sale of a product or service. These practices also make it easier for the organization to track and measure progress over time. Understanding and incorporating shared value into a digital product or service can also improve trust, which often leads to improved financial considerations.
5.11 Follow a Product Management and Maintenance Strategy
The organization has clearly defined governance policies around how it manages and maintains digital products and services over time.
Success Criterion - Management And Maintenance
The organization has documented policies outlining how it approaches product management and maintenance.
Success Criterion - Planning Strategy
The organization has maintenance / security plans in place for all the digital products and services it manages.
Success Criterion - Resourcing Products
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.
Success Criterion - Resource Measurement
The organization incorporates carbon and resource measurement into maintenance programs and can show measurable improvement over time.
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).
Success Criterion - Continuous Improvement
The organization has created policies and practices to enable continuous improvement and has resourced the organization appropriately to support these efforts over time.
Success Criterion - Agile Reviews
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.
Success Criterion - Iterative Consideration
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.
Success Criterion - Functionality Decisions
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.
Success Criterion - Security Updates
Provide corrective security and policy updates during the product or service lifecycle, while distinguishing these updates from more extensive evolutionary updates.
Success Criterion - Skills And Maintenance
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.
Environmental: Focusing on continuous improvement reduces waste and energy use by iteratively identifying opportunities to improve the product or service.
Operations: A culture of experimentation fosters more innovation. This supports team-building and improves overall organizational resilience and efficiency.
Security: Products or services that are maintained and updated over time reduce risk and improve security.
Privacy: Having a high-quality, regularly kept up-to-date product or service will reduce the chances of a data breach, which will in-turn increase the privacy potential of the website or application.
Accessibility: Iteration is important for inclusive design as different visitors will have different needs, and no two individuals are alike. As such, being agile and adaptable will benefit authors in expanding their accessibility.
Performance: Technical debt is reduced if review processes exist. Focusing on continuous improvement rather than large single-scale releases, bottlenecks in a website or application's speed can be resolved quickly as they become apparent. This is especially useful as new releases of Web browsers can alter the performance of products and services.
Economic: Agility and continuous improvement help an organization be more resilient in the face of disruption and a changing climate. Long-term, these practices save the organization time, money, and resources. They also provide security benefits that decrease risk and can potentially reduce emissions.
Conversion: If a website or application renders correctly, it will naturally encourage more trust with its visitors, and thereby have the potential for repeat custom.
Products or services update 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).
Success Criterion - Feature Changes
The user-experience considers possible changes to the product or service such as adding, updating, or removing features.
Environmental: Maintaining an intuitive, lightweight user-experience while adding new features or updating software reduces frustration, churn, and the energy visitors expend when the interface doesn't perform in ways visitors expect.
Security: Websites and applications that maintain an evergreen status often have fewer issues due to a strong release cycle which not only makes necessary changes, but also keeps visitors informed, maintaining transparency.
Performance: Maintaining an optimized user-experience which is regularly kept current using best practices also implies that pages and assets load quickly in ways visitors expect.
Economic: Products and services which are left to become outdated may have higher costs to restart the project from scratch and resurrect; whereas small regular updates have a lesser overhead in terms of time commitments from development scheduling and the impact on potential lost consumers.
5.14 Establish if a Digital Product or Service Is Necessary
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.
Success Criterion - Sustainable Development Goals
Review and identify whether your product or service aligns with one of the U.N. (SDGs).
Success Criterion - Creation Evaluation
Evaluate the desirability, feasibility, and viability of the digital product or service they wish to create to ascertain whether it is necessary.
Success Criterion - Avoid Duplication
Determine that no existing digital product or service offers the same value. They have conducted analysis to understand whether a new product or service is necessary.
Success Criterion - Obstacle Consideration
Consider any obstacles to using a product or service, such as accessibility, equality, technical, or territorial.
Environmental: By determining that a digital product or service is not necessary, you avoid potential environmental impacts associated with its creation and use.
Operations: Organizations don't waste time or resources creating unnecessary tools that then require ongoing maintenance.
Social Equity: Organizations avoid increasing the digital divide by creating only digital products and services that are meaningful and necessary.
Accessibility: As long as an accessible replacement is available, avoiding an unnecessary digital product or service can improve access to existing information.
Economic: Organizations cut costs by not investing in unnecessary products or services.
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.
Success Criterion - Life-cycle Assessment
Consider and conduct a life-cycle Assessment (LCA) to define the requirements of your product's function throughout its lifecycle.
The organization collaborates with suppliers, authors, clients, and other partners on initiatives that are both mutually beneficial and create positive social and environmental outcomes.
Success Criterion - Vetting Potential Partners
The organization has created specific policies to vet potential partners in its supply chain based on ESG principles.
Success Criterion - Collaborative Measurement
The organization has partnered with suppliers to create, track, and measure collective impact on issues that impact their stakeholders.
Success Criterion - Informative Partner Promotion
The organization promotes its partnerships in a publicly available place, along with information on how the partnership creates a collective impact.
Environmental: Vetting suppliers and partners can help an organization define, track, and reduce its Scope 3 emissions.
Operations: This can increase diversity within the technology sector.
Economic: This will also help an organization better align its business ecosystem with its mission, vision, and values; whilst improving its relationship with stakeholders.
Tags: Social Equity, Content, Ideation, Hardware, Governance
5.17 Share Economic Benefits
The organization shares the economic benefits of its digital products, services, policies, and programs.
Success Criterion - Living Wage
The organization publicly commits to paying employees, contractors, and other stakeholders a living wage.
Success Criterion - Incentivisation
The organization has policies and practices in place to incentivize stakeholders, such as workers and contractors, to meet its impact goals.
Success Criterion - Employee Benefits
The organization provides benefits to employees in accordance with its resources, including, where relevant, healthcare, retirement planning, flex time, profit sharing, and so on.
Success Criterion - Legislation Advocation
The organization advocates for responsible legislation that supports employment rights, transparency, and accountability related to sharing economic benefits.
5.18 Share Decision-Making Power With Appropriate Stakeholders
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.
Success Criterion - Decision-Making
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.
Operations: If project teams are incentivized with key sustainability goals and have the authority to make decisions based on such criteria, they can measurably improve a range of metrics within the business, design, development, and infrastructure categories. In doing so, emissions can be reduced through group action and commitment changes at an organizational level.
5.19 Use Justice, Equity, Diversity, Inclusion (JEDI) Practices
The organization has public policies and practices supporting racial justice, inclusion, equity, and diversity in hiring and operations.
Success Criterion - JEDI Practices
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.
Success Criterion - Accessibility Policy
The organization has an accessibility policy for digital products and services and can show this via a verified accessible website, application, product, or service.
Success Criterion - JEDI Training
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).
Success Criterion - JEDI Improvements
The organization can show measurable JEDI improvement over time in its hiring, leadership, and operations.
Success Criterion - JEDI Legislation
The organization advocates for responsible legislation relating to JEDI practices, especially as related to digital products and services.
Accessibility: Organizations that incorporate more diverse stakeholder perspectives enact more inclusive policies and often create better products, services, and programs. JEDI practices strengthen an organization's resilience and ability to collaborate. Additionally, this improves diversity in the tech sector and the overall accessibility of the Internet.
Economic: Organizations with clear JEDI policies and practices have reduced risks of potential legal issues, lawsuits, etc.
Tags: Social Equity, Accessibility, Ideation, Strategy
5.20 Promote Responsible Data Practices
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.
Success Criterion - Privacy Policy
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 both 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.
Success Criterion - Data Ownership
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.
Success Criterion - Data Protection
The organization supports new and emerging legislation related to data privacy, data sustainability, and responsible data practices.
Economic: Organizations that prioritize data privacy and other responsible data practices benefit from reduced risk and costs, increased resilience, and, often, better relationships with customers and other stakeholders.
5.21 Implement Appropriate Data Management Procedures
Expired or unused data has a cost, it takes up space, and it 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.
Success Criterion - Outdated Content
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.
Success Criterion - Data Controllers
Enable users to control, manage, and delete their data, subscriptions, and accounts.
Environmental: By storing less data, you inherently require less computing power to maintain a service, and this will require less energy within the Internet's infrastructure. This will help to reduce your emissions.
Privacy: Good data management supports better data protection practices.
Performance: Putting older information that is less relevant onto a smaller scaled-down version of your website will reduce your bandwidth usage, and it's likely not going to impact visitors as archived information will have significantly fewer visitors.
Economic: Requiring less data has a potential financial benefit in that the lower storage requirements mean that you can scale down your hosting package or, if on a pay-as-you-go scheme, simply be charged less for your infrastructure costs.
5.22 Promote and Implement Responsible Emerging Technology Practices
The organization has devised and implemented responsible policies related to artificial intelligence, Internet of Things (IoT), blockchain, and related emerging technologies.
Success Criterion - 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.
Success Criterion - Disruptive Technology
The organization can show how it up-skills workers as new technologies and practices potentially disrupt its business model.
Success Criterion - Technology Legislation
The organization supports responsible legislation related to automation and emerging technologies.
Operations: Organizations that prioritize ongoing learning and continuous improvement build stronger teams that can adapt more quickly.
Economic: Organizations with clear policies related to digital disruption are more resilient and can pivot more quickly than those without, and organizations with clear emerging technology policies are at less risk of any number of potential threats, including legal action.
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.
Success Criterion - Fuel Divestment
The organization has divested from fossil fuels and moved its banking, sponsorship, and other affiliations to more responsible partners.
Success Criterion - Responsible Finance
The organization engages in flexible financing and responsible budgeting for its digital products and services to accommodate long-term care and maintenance.
Environmental: Divesting from fossil fuels moves us more quickly to an economy that is powered by renewable energy, which can reduce the catastrophic impacts of climate change.
Economic: Responsibly financing digital products and services improves their resilience and saves the organization time, money, and resources eventually.
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.
Success Criterion - Philanthropy Policy
The organization has a clear corporate giving policy and creates philanthropic partnerships with strategically aligned organizations.
Success Criterion - Voluntary Work
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.
Operations: Organizations with clear philanthropy strategies that include volunteer or free projects with team stretch goals can have higher employee engagement and retention.
Economic: Organizations with clear philanthropic strategies often have a system of checks and balances in place that support better overall financial practices.
5.25 Plan for a Digital Product or Service's Care and End-of-Life
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.
Success Criterion - End-of-life Care
Establish clear, documented end-of-life guidelines that include data disposal, archiving, file deletion, and so on.
Environmental: Many products or services keep unnecessary data and functionalities alive while they are not used or useful anymore. Planning for end-of-life reduces their long-term environmental impact by eliminating waste and allowing the freed-up resources to be utilized for other information.
Security: Regular maintenance, updates, and care on outdated software and data can significantly reduce security risks.
Privacy: Incorporating clear end-of-life policies that include a visitor's right-to-be-forgotten will benefit the visitor by explaining how you enforce data protection and comply with legislation.
Performance: Removing unnecessary features, functions, and data of a service improves performance and resilience as the resources which were utilizing data will be better spent on more popular functionality, and the gains made from their elimination will be felt in terms of emissions through saved development time.
Economic: Removing redundancy in the product or service can generate savings in hosting, security costs, and other third-party subscriptions.
Environmental: Organizations with clear e-waste and recycling policies reduce environmental impact and promote circularity, while also extending the shelf-life of technology hardware. When coupled with clear philanthropic policies, donated hardware can also support resource-constrained charities.
Economic: Extending the shelf-life of hardware and clear e-waste / recycling policies reduces costs.
Tags: Social Equity, Content, Ideation, Hardware, E-Waste, Governance
5.27 Define Performance and Environmental Budgets
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).
Success Criterion - Environmental Budget
The product team has defined, baselined, and documented a clear sustainability and environmental budget criteria that covers the page, user-journey, and digital service levels and metrics (such as a CO2.js score) that are approved by relevant product stakeholders.
Success Criterion - Performance Budget
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).
Success Criterion - Measurable Improvements
The product team can measurably show how much the budgeting process improved performance and reduced emissions.
Success Criterion - Capacity And Maintenance
The product team invests in resources to build capacity and maintain the budgets over time.
Environmental: A strict sustainability or performance budget will reduce the chance of your website getting too large (and causing pollution transfers), which in turn will ensure it has a minimal impact on a visitor's device. This will have a direct impact on emissions' reduction by forcing businesses to choose where to make reductions and efficiency savings.
Performance: Keeping realistic goals regarding delivery size will push developers to optimize resource-heavy projects and reconsider using large tooling in place of lightweight alternatives. Moreover, A lower set target budget for a product or service will decrease the amount of time a browser spends transferring and rendering data.
Economic: Customers will not have to keep upgrading devices to match the needs of a website that grows (unchecked) over time.
Conversion: Reduced churn and page abandonment will occur due to the application or website becoming more performant. Potentially, your search engine ranking may perform better due to performance being a key indicator in PageRank algorithms.
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.
Success Criterion - Open Source Policy
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.
Success Criterion - Collaboration
The organization has a track record of collaboration and community-building around open source principles.
Success Criterion - Contribution
The organization regularly contributes to open source community-based projects.
Tags: Social Equity, UI, Ideation, Assets, Software
6. Glossary
This section is non-normative.
Accessibility
Web accessibility (also referred to as 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.
Note
Types of accessibility issues can include auditory, cognitive, neurological, physical, speech, and visual. They can also be permanent, temporary, or situational (depending on the accessibility issue).
ESG
Environmental, social, and (corporate) governance (ESG), is a set of principles which recommends taking each of these factors (alongside economic variables) into account during the sustainability process.
Note
This work is grounded within the three pillars of sustainability:
Environmental: We prioritize the health of ecosystems and the planet overall.
Social: People should have access to resources, information, and opportunities necessary for their well-being.
Economic: Financial stability and equitable economic development—in this case, through the digital economy—ensures shared prosperity for the planet and its inhabitants.
Informative
For information purposes and not required for compliance.
Note
Content identified as "informative" or "non-normative" is never required for compliance.
Normative
Required for compliance.
Web Sustainability
An approach to designing digital products and services that puts people and the planet first.
Note
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.
A. Acknowledgements
Additional information about participation in the Sustainable Web Design Community Group (SWG-CG) can be found within the wiki of the community group.
A.1 Participants of the SWD-CG Active in the Development of This Document
Alexander Dawson, Andy Blum, Anne Faubry, Arnaud Levy, Ben Clifford, 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, Iain McClenaghan, Ian Jacobs, Ines Akrap, Ismael Velasco, James Christie, Jennifer Strickland, Jens Oliver Meiert, Josh Kim, Julien Wilhelm, Laurent Devernay, Łukasz Mastalerz, Marie Ototoi, Michelle Barker, Mike Gifford, Morgan Murrah, Nahuai Badiola, Nick Doty, Neil Clark, Nicola Bonotto, Owen Barton, Romuald Priol, Sandy Dähnert, Shane Herath, Simon Perdrisat, Thibaud Colas, Thorsten Jonas, Tim Frick, Tzviya Siegman, Yuna Orsini
A.2 Other Active SWD-CG Participants, or Contributors to Supporting Resources
Anthony Vallée-Dubois, Antoine Abélard, Bee Flaherty, Boris Schapira, Christophe Clouzeau, Christos Baharakis, Crystal Preston-Watson, Francesco Fullone, Gaël Duez, Gerry McGovern, Ivano Malavolta, James Cannings, James Gallagher, Jean Rigotti, Jon Gibbins, Juan Sotés, Kate Mroczkowski, Kimi Wei, Leah Goldfarb, Luis Tiago, Marie Koesnodihardjo, Nicolas Oren, Orie Steele, Radu Micu, Rick Butterfield, Rick Viscomi, Robin Whittleton, Seb Solere, Tantek Çelik, Thierry Leboucq, Tom Greenwood, Torsten Beyer, Yelle Lieder, Youen Chéné, Zoe Lopez-Latorre.