{ "title": "Web Sustainability Guidelines", "edition": "Group Note Draft", "lastModified": "2026-03-06", "category": [ { "id": "1", "name": "Introduction" }, { "id": "2", "name": "User Experience Design", "shortName": "UX Design", "guidelines": [ { "id": "1", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#examine-and-disclose-any-external-factors-interacting-with-your-project", "guideline": "Examine and disclose any external factors interacting with your project", "subheading": "Identify, track, and publicly disclose negative external factors.", "criteria": [ { "title": "Impact analysis", "description": "Anticipate and identify existing or potential negative external factors. Disclose these in a publicly available resource, identifying areas where digital sustainability can be improved. Perform this audit at the start of your project and at regular intervals.", "resources": [ { "A view of the sustainable computing landscape": "https://www.cell.com/patterns/fulltext/S2666-3899(25)00144-8", "AFNOR Spec 5.1.6 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Anticipate consequences": "https://climateproductleaders.org/playbook/anticipate-consequences", "Are my third parties green?": "https://aremythirdpartiesgreen.com/", "GPF - General Policy Framework (PDF) - 1.1 - Strategy (Assessment & Impact)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 1.5 - Strategy (Impact Goals)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 2.1 - Specifications (Hardware Profiles)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.12 - UX and UI (Impact Flags)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 7-3047 - Systemic Approach": "https://gr491.isit-europe.org/en/crit.php?id=7-3047-uxui-starting-a-project-without-taking-into-account", "IBM Design For Sustainability (PDF)": "https://www.ibm.com/design/practices/design-for-sustainability/", "Learn Performance": "https://web.dev/learn/performance?hl=en", "Nachhaltige Websites? (German)": "https://www.websiteboosting.com/magazin/75/nachhaltige-websites-wie-wir-alle-mehr-fuer-die-umwelt-tun-koennen.html", "Network energy use not directly proportional to data volume": "https://onlinelibrary.wiley.com/doi/10.1111/jiec.13512", "Opquast Web Quality Assurance Checklist (PDF)": "https://checklists.opquast.com/en/digital-quality/download/", "OWASP Top 10 Privacy Risks": "https://owasp.org/www-project-top-10-privacy-risks/", "OWASP Top Ten": "https://owasp.org/www-project-top-ten/", "Reduce the weight of a web page: which elements have the greatest impact?": "https://greenspector.com/en/reduce-the-weight-of-a-web-page-which-elements-have-the-greatest-impact/", "Scope 3 Emissions in Your Digital Supply Chain": "https://www.mightybytes.com/insights/scope-3-emissions-in-your-digital-supply-chain/", "SWOT analysis": "https://www.cipd.org/en/knowledge/factsheets/swot-analysis-factsheet/", "Systemic Design Toolkit (PDF)": "https://oasahk.glueup.com/resources/protected/organization/1649/event/40184/d8b58bf3-c7bb-4662-b3c6-5b6f49318961.pdf", "The Fog of Enactment": "https://www.thegreenwebfoundation.org/publications/report-fog-of-enactment/", "The Impact of Third-Party Scripts on Web Performance": "https://blog.pixelfreestudio.com/the-impact-of-third-party-scripts-on-web-performance/", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 7 - Sustainable Energy": "https://sdgs.un.org/goals/goal7#targets_and_indicators", "United Nations SDGS - Goal 12 - Consumption & Production": "https://sdgs.un.org/goals/goal12#targets_and_indicators", "United Nations SDGS - Goal 13 - Climate Change": "https://sdgs.un.org/goals/goal13#targets_and_indicators", "Variables of Web Sustainability (PDF)": "https://websitesustainability.com/cache/files/variables.pdf", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability", "Why your internet habits are not as clean as you think": "https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think" } ] }, { "title": "External impact", "description": "Establish a plan of action for affected parties who might be indirectly impacted by choices made with your project. Examples include neighbors accepting parcels or traffic jams due to deliveries. Other examples include the local health impacts of infrastructure emissions, or supply chain pressure.", "resources": [ { "2030 Calculator": "https://www.2030calculator.com/", "Digitalisation and Energy": "https://www.iea.org/reports/digitalisation-and-energy", "Foundations of Humane Technology": "https://www.humanetech.com/course", "GPF - General Policy Framework (PDF) - 1.2 - Strategy (Target Users)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "IBM Design For Sustainability (PDF)": "https://www.ibm.com/design/practices/design-for-sustainability/", "Stakeholder Mapping": "https://www.mightybytes.com/insights/stakeholder-mapping/", "Sustainability Guide: Distribution": "https://sustainabilityguide.eu/ecodesign/distribution/", "Sustainability Guide: Manufacturing": "https://sustainabilityguide.eu/ecodesign/manufacturing/", "The power of good design": "https://www.vitsoe.com/rw/about/good-design", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 3 - Health & Well-being": "https://sdgs.un.org/goals/goal3#targets_and_indicators", "United Nations SDGS - Goal 9 - Infrastructure": "https://sdgs.un.org/goals/goal9#targets_and_indicators", "United Nations SDGS - Goal 10 - Inequality": "https://sdgs.un.org/goals/goal10#targets_and_indicators" } ] } ], "benefits": [ { "Accessibility": "Including people who are not primary or secondary users, such as people with disabilities, in research means their specific needs can be addressed more effectively.", "Economic": "Researching the entire ecosystem, including the broader or indirect impact and services, helps organizations to manage budgets more effectively.", "Environment": "Making certain interventions, such as coordinating planning with suppliers, can significantly reduce the environmental impact of a digital product or service.", "Privacy": "Having an overview of components makes it easier to identify potential data protection risks.", "Social Equity": "Auditing factors can reveal factors not commonly understood or covered in established best practices, enabling better support for underrepresented groups." } ], "GRI": [ { "materials": "Medium", "energy": "Medium", "water": "Medium", "emissions": "Medium" } ], "tags": ["Accessibility", "Compatibility", "Hardware", "Ideation", "Networking", "Performance", "Reporting", "Research", "Social Equity", "Software"] }, { "id": "2", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#understand-user-requirements-or-constraints-resolving-barriers-to-access", "guideline": "Understand user requirements or constraints, resolving barriers to access", "subheading": "Understand the audience and their requirements and remove their constraints and barriers.", "criteria": [ { "title": "Audience evaluation", "description": "Identify primary and secondary target users. Evaluate and define their needs through research, testing, or analytics. Ensure your users and affected communities are consistently and closely involved in the research and testing process.", "resources": [ { "6 Powerful User Research Methods to Boost Hypothesis Validation": "https://uxplanet.org/6-powerful-user-research-methods-to-boost-hypothesis-validation-58c491461075", "9 bogus reasons why some designers claim UX Research is a waste": "https://uxdesign.cc/9-bogus-reasons-why-some-designers-claim-ux-research-is-a-waste-5ddf3d030851", "AFNOR Spec 5.1.1 & 5.1.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Complete Guide to User Interviews": "https://savranska.medium.com/the-complete-guide-to-user-interviews-87bd783a4448", "Essential elements of an effective UX research plan": "https://maze.co/guides/ux-research/plan/", "How To Argue Against AI-First Research": "https://www.smashingmagazine.com/2025/03/how-to-argue-against-ai-first-research/", "How To Run UX Research Without Access To Users": "https://www.smashingmagazine.com/2024/05/how-run-ux-research-without-access-users/", "Make the sustainable thing the best thing, by design": "https://medium.com/necdigitalstudio/make-the-sustainable-thing-the-best-thing-by-design-e38da7bd7768", "The UX Cookbook": "https://theuxcookbook.com/", "UX: Best Practices For Developers": "https://blog.openreplay.com/ux-best-practices-for-developers/", "UX/UI Product Design Roadmap": "https://product-design-roadmap.com/" } ] }, { "title": "Barriers and access", "description": "Conduct internal and user research to identify whether a technical, material, or human constraint might require adaptations to reduce barriers or improve access to content.", "resources": [ { "Access Guide": "https://www.accessguide.io/", "Accessibility": "https://developer.mozilla.org/en-US/docs/Web/Accessibility", "Adaptive web design": "https://en.wikipedia.org/wiki/Adaptive_web_design", "AFNOR Spec 5.1.1 & 5.1.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Introduction to Web Accessibility": "https://www.w3.org/WAI/fundamentals/accessibility-intro/", "Keys To An Accessibility Mindset": "https://www.smashingmagazine.com/2023/02/keys-accessibility-mindset/", "Learn Accessibility": "https://web.dev/learn/accessibility?hl=en", "Metrics to measure the ROI of web accessibility": "https://uxdesign.cc/top-10-metrics-to-measure-the-roi-of-web-accessibility-f9ddd697896a", "Supporting Digital Skills and Reducing Social Isolation Amongst Older People": "https://www.governmentevents.co.uk/ge-insights/supporting-digital-skills-and-reducing-social-isolation-amongst-older-people/", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 3 - Health & Well-being": "https://sdgs.un.org/goals/goal3#targets_and_indicators", "United Nations SDGS - Goal 9 - Infrastructure": "https://sdgs.un.org/goals/goal9#targets_and_indicators", "United Nations SDGS - Goal 10 - Inequality": "https://sdgs.un.org/goals/goal10#targets_and_indicators", "United Nations SDGS - Goal 16 - Sustainable Society": "https://sdgs.un.org/goals/goal16#targets_and_indicators", "W3C Web Content Accessibility Guidelines": "https://www.w3.org/TR/WCAG22/", "What are design constraints?": "https://blog.logrocket.com/ux-design/what-are-design-constraints/", "What are the Main Barriers to Digital Inclusion?": "https://www.trueambassadors.org.uk/what-are-the-main-barriers-to-digital-inclusion/" } ] }, { "title": "Barrier removal", "description": "Remove identified barriers to access, provided they do not introduce or increase security or safety risks or exposure. Removable pain points can include deceptive design patterns and accessibility hurdles, but not include user verification or authentication mechanisms.", "resources": [ { "AFNOR Spec 5.1.1 & 5.1.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Dark Design Patterns Catalog": "https://www.uxtigers.com/post/dark-design", "Dark pattern": "https://en.wikipedia.org/wiki/Dark_pattern", "Dark Patterns Detective": "https://games.productartistry.com/games/dark-patterns", "Dark Patterns Hall of Shame": "https://hallofshame.design/", "Dark patterns in UX: how designers should be responsible for their actions": "https://uxdesign.cc/dark-patterns-in-ux-design-7009a83b233c", "Deceptive design vs. the law": "https://clearleft.com/thinking/deceptive-design-vs-the-law", "Deceptive Patterns": "https://www.deceptive.design/", "Europe's Digital Decade": "https://digital-strategy.ec.europa.eu/en/policies/europes-digital-decade", "GPF - General Policy Framework (PDF) - 4.14 - UX and UI (Dark Patterns)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 10-3070 - Dark Patterns": "https://gr491.isit-europe.org/en/crit.php?id=10-3070-uxui-some-services-are-designed-to-create-some", "Harm reduction principles for digital accessibility practitioners": "https://ericwbailey.website/published/harm-reduction-principles-for-digital-accessibility-practitioners/", "How Deceptive Design is Used to Compromise Your Privacy and How to Fight Back": "https://consciousdigital.org/deceptive-design-patterns/", "Ledger of Harms": "https://ledger.humanetech.com/", "Overlay Fact Sheet": "https://overlayfactsheet.com/en/", "Overlay False Claims": "https://overlayfalseclaims.com/", "ROI Calculators": "https://humanfactors.com/thinking-favorite.aspx", "Six Dark Patterns to Avoid On Your Website": "https://www.mightybytes.com/insights/6-dark-patterns-to-avoid-on-your-website/", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 3 - Health & Well-being": "https://sdgs.un.org/goals/goal3#targets_and_indicators", "United Nations SDGS - Goal 9 - Infrastructure": "https://sdgs.un.org/goals/goal9#targets_and_indicators", "United Nations SDGS - Goal 10 - Inequality": "https://sdgs.un.org/goals/goal10#targets_and_indicators", "United Nations SDGS - Goal 16 - Sustainable Society": "https://sdgs.un.org/goals/goal16#targets_and_indicators" } ] } ], "benefits": [ { "Accessibility": "Understanding the needs of your audience through accessibility and trauma-informed research will help you prioritize design improvements to boost accessibility beyond the basics.", "Conversion": "Meeting audience requirements increases the likelihood that they will use it regularly and recommend it to others, improving its adoption rate and reputation.", "Economic": "Responding to the needs of your audience means they are more likely to convert and purchase.", "Environment": "Undertaking research to identify real user needs and behaviour means developers can avoid wasting time, effort, and emissions on building unnecessary features.", "Performance": "Use user research to identify UX bottlenecks that cause user abandonment. Fixes can be measured, tested, and evaluated to further improve performance and reduce emissions through removing those bottlenecks and inefficiencies.", "Privacy": "Assessing user needs and being minimal with further information requests will help you comply with privacy legislation.", "Social Equity": "Improving UX with compatibility in mind means products or services work better for users who might otherwise face various barriers to accessing content - such as older devices, low-bandwidth environments, or restrictive territories, language, while being considerate of localizability and adapting to cultural norms. This reduces e-waste and improves equity if older equipment meets needs for longer." } ], "GRI": [ { "materials": "Medium", "energy": "Medium", "water": "Medium", "emissions": "Medium" } ], "tags": ["Accessibility", "Compatibility", "Ideation", "KPIs", "Patterns", "Reporting", "Research", "Social Equity", "UI", "Usability"] }, { "id": "3", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#integrate-sustainability-into-every-stage-of-the-ideation-process", "guideline": "Integrate sustainability into every stage of the ideation process", "subheading": "Optimize materials created at every stage of the process and consider the needs of and impact on the planet, and other affected parties.", "criteria": [ { "title": "Sustainable brand development", "description": "Optimize all branding materials and assets approved during the ideation process in line with sustainability best practices prior to and on an ongoing basis after deployment. Where provided, brand guidelines must also detail the sustainability impact and best-practice deployment of materials and assets.", "resources": [ { "A Guide to Sustainable Branding": "https://medium.com/@NineBlaess/a-guide-to-sustainable-branding-76d1022eaf01", "A guide to sustainable marketing and branding": "https://www.customplanet.co.uk/pages/a-guide-to-sustainable-marketing-and-branding", "Brand Guidelines": "https://www.brandguidelines.net/", "Branding Style Guides": "https://brandingstyleguides.com/", "Build a More Sustainable Marketing Stack": "https://www.mightybytes.com/insights/sustainable-marketing-stack/", "Quick Guide to Sustainable Design Strategies": "https://medium.com/disruptive-design/quick-guide-to-sustainable-design-strategies-641765a86fb8", "Sustainability branding": "https://brandmasteracademy.com/sustainability-branding/", "Why a Sustainable Digital Marketing Agency Matters": "https://www.51tocarbonzero.com/why-a-sustainable-digital-marketing-agency-matters/" } ] }, { "title": "Wireframes and prototypes", "description": "Use wireframes and rapid prototyping to quickly build consensus, reduce risk, and reduce the number of resources needed to build features.", "resources": [ { "Activating sustainability in the design process": "https://www.degruyterbrill.com/document/doi/10.1515/icom-2024-0037/html?lang=en", "How Wireframes and Rapid Prototypes Improve Digital Projects": "https://www.mightybytes.com/insights/wireframes-and-prototypes-for-websites/", "Importance of Wireframing & Prototyping in Web Design": "https://www.loop-digital.co.uk/marketing-insights-news/the-importance-of-wireframing-prototyping-in-web-design/", "L'idéation au service de l'éco-conception #1 : La méthode C.O.E.U.R. (French)": "https://www.lunaweb.fr/actualites/blog/atelier-ideation-eco-conception/", "Lean UX ❤ Sustainability": "https://medium.com/design-bootcamp/lean-ux-sustainability-designing-for-people-planet-and-profit-4b1406564c81", "The Design Process": "https://sustainabilityguide.eu/methods/the-design-process/" } ] }, { "title": "Participation and testing", "description": "Use the participatory design approach to involve users within the iteration and design process. When conducting user testing, reach out to your community to help improve your product. Provide opportunities for users to apply their knowledge and experience to your product or service.", "resources": [ { "An introduction to radical participatory design": "https://www.cambridge.org/core/journals/design-science/article/an-introduction-to-radical-participatory-design-decolonising-participatory-design-processes/63F70ECC408844D3CD6C1A5AC7D35F4D", "GPF - General Policy Framework (PDF) - 2.6 - Specifications (Design Review)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "How to amplify your sustainability efforts through your user experience": "https://business.google.com/uk/think/future-of-marketing/sustainability-user-experience/", "Participatory Design": "https://www.interaction-design.org/literature/topics/participatory-design", "Sustainable User Research": "https://www.uxmatters.com/mt/archives/2010/03/sustainable-user-research.php", "Sustainable UX design": "https://blog.adobe.com/en/publish/2021/09/24/sustainable-ux-design-what-is-it-and-how-can-it-benefit-your-organization", "The Design Process": "https://sustainabilityguide.eu/methods/the-design-process/", "The Sustainable UX Design Toolkit": "https://miro.com/templates/the-sustainable-ux-design-toolkit/" } ] }, { "title": "Environmental ideation", "description": "Consider planetary needs and the environmental boundaries during the ideation phase. This can include creating non-user, non-human (animal, planet) personas, or climate-specific user stories and sprints.", "resources": [ { "52 Sustainability Focused Ideation Brainstorm Cards for FREE": "https://www.explorerlabs.co/thinking/52-sustainability-focused-ideation-brainstorm-cards-for-free", "GR491 - 1-3003 - Planet Centric Design": "https://gr491.isit-europe.org/en/crit.php?id=1-3003-uxui-every-design-decision-has-an-impact.-if", "The Net Positive Sprint Kit": "https://human-kind.notion.site/The-Net-Positive-Sprint-Kit-v1-0-Human-Kind-247acbb07bb98025a761eeba67d4fa24", "Planetary Boundaries": "https://sustainabilityguide.eu/sustainability/planetary-boundaries/", "Sustainable UX is more than reducing your website's footprint": "https://uxdesign.cc/sustainable-ux-and-ui-design-is-more-than-reducing-your-website-s-footprint-a99c336c151f", "Sustainable Web Development Strategies Within An Organization": "https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/", "United Nations SDGS - Goal 12 - Consumption & Production": "https://sdgs.un.org/goals/goal12#targets_and_indicators" } ] } ], "benefits": [ { "Accessibility": "Understanding real-world accessibility requirements in the early development stages by involving people with disabilities makes it possible to prioritize inclusive design throughout the entire lifecycle. This improves efficiency, as developers will not be prompted to add in accessibility later. It will also reduce emissions associated with the patching process.", "Conversion": "Testing user interfaces usually leads to improved conversion rates as they can be optimized accordingly. This includes removing anything that causes friction and designing content in a way that optimizes user flow, reducing emissions while maximizing conversion.", "Economic": "Incorporating wireframes, prototypes, and user testing into early product design cycles reduces money and effort otherwise wasted building features people will not use.", "Environment": "Helping key contributors to better understand the environmental impact makes it possible to track and reduce that impact throughout the lifecycle of a project.", "Social Equity": "Accounting for the needs of users who might otherwise face various barriers to accessing content - on such as older devices, in low-bandwidth environments, or have other barriers to accessing information early in the process will reduce the need for costly redesigns or adding appropriate alternatives at a later date." } ], "GRI": [ { "materials": "Medium", "energy": "Medium", "water": "Medium", "emissions": "Medium" } ], "tags": ["Accessibility", "Ideation", "KPIs", "Research", "Social Equity", "Software", "Strategy", "UI"] }, { "id": "4", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#minimize-non-essential-content-interactivity-or-journeys", "guideline": "Minimize non-essential content, interactivity, or journeys", "subheading": "Use distraction and clutter-free design, showing the user only what they need without interruptions or wasted resource consumption.", "criteria": [ { "title": "Efficient paths", "description": "Make access as simple and efficient as possible. Displaying the time required to complete an action, reducing choice, and ensuring users understand requirements at the start of a journey can improve user efficiency.", "resources": [ { "AFNOR Spec 5.2.1 and 5.2.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Customer Experience Mapping": "https://www.startupgrind.com/blog/customer-experience-mapping-what-is-it-and-how-to-do-it/", "GreenIT - 0005 - Optimize the user journey": "https://rweb.greenit.fr/en/fiches/RWEB_0005-optimizing-the-user-journey", "How can we design sustainably?": "https://medium.com/@sandra.pallier/how-can-we-design-sustainably-3be7530a0f5b", "How To Minimize The Environmental Impact Of Your Website": "https://www.smashingmagazine.com/2025/09/how-minimize-environmental-impact-website/", "OpQuast - 29 - A product or service can be purchased without creating an account.": "https://checklists.opquast.com/en/digital-quality/a-product-or-service-can-be-purchased-without-creating-an-account", "OpQuast - 33 - Product availability is indicated before final validation of the order.": "https://checklists.opquast.com/en/digital-quality/product-availability-is-shown-before-final-order-placement", "OpQuast - 84 - The user is alerted at the beginning of a complex process to the nature of the required data and document.": "https://checklists.opquast.com/en/digital-quality/the-user-is-alerted-at-the-beginning-of-a-complex-process-to-the-nature-of-the-data-required", "OpQuast - 149 - Navigating the website does not open any pop-up windows.": "https://checklists.opquast.com/en/digital-quality/navigating-the-website-does-not-open-any-pop-up-windows", "Sustainable UX is more than reducing your website's footprint": "https://uxdesign.cc/sustainable-ux-and-ui-design-is-more-than-reducing-your-website-s-footprint-a99c336c151f", "United Nations SDGS - Goal 7 - Sustainable Energy": "https://sdgs.un.org/goals/goal7#targets_and_indicators", "Validate the user journey and needs": "https://climateproductleaders.org/playbook/validate-the-user-journey-and-needs", "What is a Customer Journey Map?": "https://www.mightybytes.com/insights/customer-journey-map-template-download/" } ] }, { "title": "Patterns for efficiency", "description": "Ensure user journeys are as smooth as possible. It also helps to build on established design patterns that people already understand.", "resources": [ { "AFNOR Spec 5.2.1 and 5.2.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Build straight paths to user value": "https://climateproductleaders.org/playbook/build-straight-paths-to-user-value", "Design patterns": "https://ui-patterns.com/patterns", "Design Principles": "https://principles.design/", "GR491 - 7-3052 - Quick And Simple": "https://gr491.isit-europe.org/en/crit.php?id=7-3052-uxui-there-are-several-scenarios-for-accessing-the", "GR491 - 9-3063 - Useful to the User": "https://gr491.isit-europe.org/en/crit.php?id=9-3063-uxui-the-efficient-use-of-a-digital-service", "How Fast Do Websites Load In 2024?": "https://www.debugbear.com/blog/page-speed-2024", "Patterns": "https://web.dev/patterns?hl=en", "Patterns.dev": "https://www.patterns.dev/" } ] }, { "title": "Distraction-free design", "description": "Enable users to complete tasks without distractions or non-essential features getting in the way.", "resources": [ { "AFNOR Spec 5.2.1 and 5.2.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Cognitive load is what matters": "https://github.com/zakirullin/cognitive-load", "GR491 - 4-5030 - Older Equipment or Limited Network Access": "https://gr491.isit-europe.org/en/crit.php?id=4-5030-frontend-the-more-components-the-service-implements-that", "GR491 - 7-3052 - Quick And Simple": "https://gr491.isit-europe.org/en/crit.php?id=7-3052-uxui-there-are-several-scenarios-for-accessing-the", "GR491 - 9-3063 - Useful to the User": "https://gr491.isit-europe.org/en/crit.php?id=9-3063-uxui-the-efficient-use-of-a-digital-service", "Laws Of UX": "https://lawsofux.com/", "Paradox of Choice: Why Less is More in UX Design": "https://thedecisionlab.com/reference-guide/economics/the-paradox-of-choice", "UI Tools": "https://designsustainably.eu/uitools/", "UX: Best Practices For Developers": "https://blog.openreplay.com/ux-best-practices-for-developers/" } ] }, { "title": "Eliminate the non-essential", "description": "Only present information that is relevant to the user. Do not present non-essential information until requested by the user, and do so in ways appropriate to the accessibility requirements of different users.", "resources": [ { "A manifesto for small, static, web apps": "https://rosswintle.uk/2024/02/a-manifesto-for-small-static-web-apps/", "A User-Centered Lens into Digital Excess (PDF)": "https://limits.pubpub.org/pub/krloqqv4/release/1", "AFNOR Spec 5.2.1 and 5.2.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "GPF - General Policy Framework (PDF) - 3.1 - Architecture (Impact Reduction)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 2-7033 - Lighter Framework / Library": "https://gr491.isit-europe.org/en/crit.php?id=2-7033-backend-for-an-equal-functional-scope-several-technical", "GreenIT - 0001 - Eliminate non-essential features": "https://rweb.greenit.fr/en/fiches/RWEB_0001-eliminate-non-essential-features", "How can we design sustainably?": "https://medium.com/@sandra.pallier/how-can-we-design-sustainably-3be7530a0f5b", "How to Become an Eco Web Designer": "https://onextrapixel.com/how-to-become-an-eco-web-designer/", "Remove non-essential features from the scope": "https://climateproductleaders.org/playbook/remove-non-essential-features-from-the-scope", "Using UX Design to Build a Sustainable Future": "https://uxmag.com/articles/using-ux-design-to-build-a-sustainable-future", "The web is fast by default, let's keep it fast": "https://hidde.blog/the-web-is-fast-by-default-lets-keep-it-fast/", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability" } ] }, { "title": "User-initiated actionable content", "description": "Ensure that disruptive actionable information, such as pop-up or modal windows, can only be initiated by the user.", "resources": [ { "AFNOR Spec 5.2.1 and 5.2.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "dialog: The Dialog element": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog", "Modal & Nonmodal Dialogs: When (& When Not) to Use Them": "https://www.nngroup.com/articles/modal-nonmodal-dialog/", "OpQuast - 29 - A product or service can be purchased without creating an account.": "https://checklists.opquast.com/en/digital-quality/a-product-or-service-can-be-purchased-without-creating-an-account", "OpQuast - 33 - Product availability is indicated before final validation of the order.": "https://checklists.opquast.com/en/digital-quality/product-availability-is-shown-before-final-order-placement", "Popups: 10 Problematic Trends and Alternatives": "https://www.nngroup.com/articles/popups/", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability" } ] }, { "title": "Decorative design", "description": "Use decorative design only when it enhances user experience. Remove unnecessary assets or those that do not enhance user experience or sustainability. Alternatively, make these optional and disabled by default.", "resources": [ { "Against images as accessories": "https://uxdesign.cc/against-images-as-accessories-92f43b0d45e9", "Best practices for fonts": "https://web.dev/articles/font-best-practices?hl=en", "Decorative Images": "https://www.w3.org/WAI/tutorials/images/decorative/", "Don't use custom CSS scrollbars": "https://ericwbailey.website/published/dont-use-custom-css-scrollbars/", "GPF - General Policy Framework (PDF) - 4.6 - UX and UI (Informational Media)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "Implementing image sprites in CSS": "https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Images/Implementing_image_sprites", "Less Data Doesn't Mean a Lesser Experience": "https://timkadlec.com/remembers/2019-08-30-less-data-doesnt-mean-a-lesser-experience/", "Less is more: How stripping back can improve UX Design": "https://www.uxdesigninstitute.com/blog/improve-ux-design/", "Reduce Redundancy": "https://www.nngroup.com/articles/reduce-redundancydecrease-duplicated-design-decisions/", "Reduce The Number Of Images": "https://www.giftofspeed.com/minimize-images/", "Reducing Cognitive Overload": "https://www.lionandmason.com/ux-blog/reducing-cognitive-overload-declutter-your-design-for-better-ux/", "Simple icon systems using SVG sprites": "https://oliverjam.es/articles/svg-sprites", "Simplify Your UX Through Reduction": "https://www.uxmatters.com/mt/archives/2015/07/simplify-your-ux-through-reduction.php", "The Website Obesity Crisis (Video)": "https://webdirections.org/blog/the-website-obesity-crisis/", "Use fewer web fonts": "https://web.dev/articles/font-best-practices?hl=en", "United Nations SDGS - Goal 7 - Sustainable Energy": "https://sdgs.un.org/goals/goal7#targets_and_indicators" } ] } ], "benefits": [ { "Accessibility": "Providing intuitive, lightweight user experiences improves understanding and accessibility, especially for people with cognitive disabilities. Reducing confusion, this can reduce the time spent trying to find content.", "Conversion": "Following conventions and patterns with a clean, distraction-free layout reduces churn, page abandonment, and barriers to entry.", "Economic": "Simplifying interfaces by reducing the amount of information can reduce the burden of choice and help to convert users during online decision-to-purchase processes. Reduced user choice will also reduce data payloads.", "Environment": "Streamlining user experience to remove barriers and the non-essential reduces unnecessary code and content payloads and the amount of time users spend on their devices trying to complete tasks or find information. This reduces the amount of energy used and lowers emissions.", "Performance": "Minimizing the amount of content on screen to what is genuinely required reduces bandwidth consumption over the lifecycle project and may make the user experience feel faster.", "Privacy": "Hiding non-essential features can improve data protection by reducing overall data collection overall, especially that associated with the integration of third-party services.", "Social Equity": "Reducing device and bandwidth requirements through providing more lightweight experiences can improve work better for users using older devices or located in low-bandwidth environments, and similar." } ], "GRI": [ { "materials": "Medium", "energy": "Medium", "water": "Medium", "emissions": "Medium" } ], "tags": ["Accessibility", "Content", "Patterns", "Performance", "Social Equity", "UI", "Usability"] }, { "id": "5", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#ensure-that-navigation-and-wayfinding-are-well-structured", "guideline": "Ensure that navigation and wayfinding are well-structured", "subheading": "Provide good information architecture that signposts users, both human and machine, to what they need, so they can reach their destination as efficiently as possible.", "criteria": [ { "title": "Navigation and search", "description": "Provide an accessible, easy-to-use navigation menu with search features to help users easily find what they need.", "resources": [ { "Building Accessible Menu Systems": "https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/", "GPF - General Policy Framework (PDF) - 4.3 - UX and UI (Optimized Clickstream)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "How To Achieve Instant Navigations On The Web": "https://www.debugbear.com/blog/instant-navigations", "Menu-Design Checklist": "https://www.nngroup.com/articles/menu-design/", "Menus Tutorial": "https://www.w3.org/WAI/tutorials/menus/", "Website Navigation: How to Design Menus Visitors Love": "https://blog.hubspot.com/website/main-website-navigation-ht" } ] }, { "title": "Human-readable sitemaps", "description": "Consider implementing an efficient and regularly updated sitemap for human users. While guidance beyond the navigation bar may be unnecessary for smaller projects, clearly structured human-readable sitemaps can improve accessibility and help users find their way through websites or other online content with naturally complex or legacy information architecture.", "resources": [ { "Build and submit a sitemap": "https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=en", "GPF - General Policy Framework (PDF) - 4.3 - UX and UI (Optimized Clickstream)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GreenIT - 0090 - Set up an efficient sitemap": "https://rweb.greenit.fr/en/fiches/RWEB_0090-set-up-an-efficient-sitemap", "HTML Sitemap: The Benefits for SEO and Users": "https://www.semrush.com/blog/html-sitemap/", "OpQuast - 213 - The website provides a sitemap file listing the content to be crawled.": "https://checklists.opquast.com/en/digital-quality/the-website-provides-a-sitemap-file-listing-the-content-to-be-crawled", "When and how to use HTML sitemaps for SEO and UX": "https://searchengineland.com/html-sitemaps-seo-ux-when-how-394763" } ] }, { "title": "New content", "description": "Implement lightweight and efficient means for users to learn about new content and services.", "resources": [ { "An Excellent Beginner's Guide to Information Architecture": "https://careerfoundry.com/en/blog/ux-design/a-beginners-guide-to-information-architecture/", "How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change", "Information Architecture Design Step-by-Step": "https://uxplanet.org/information-architecture-design-step-by-step-7036897511d7", "Information Architecture: Study Guide": "https://www.nngroup.com/articles/ia-study-guide/", "OpQuast - 1 - The website provides a way for users to find out about new content and services.": "https://checklists.opquast.com/en/digital-quality/the-site-provides-users-with-a-way-to-know-about-new-contents-and-services", "UX: Best Practices For Developers": "https://blog.openreplay.com/ux-best-practices-for-developers/" } ] } ], "benefits": [ { "Accessibility": "Enabling easier navigation makes content accessible to people with disabilities. Bringing people to their goal faster also reduces data consumption.", "Conversion": "Optimizing structure can also boost conversion rates as people are more likely to find what they need. The same applies when users are made aware of new content related to their interests.", "Economic": "Shortening user journeys can also reduce hosting costs where this is linked to data transfer.", "Environment": "Improving navigation and search efficiency can reduce the time users spend finding what they need and achieving their objectives. This also lowers emissions." } ], "GRI": [ { "materials": "Medium", "energy": "Low", "water": "Medium", "emissions": "Low" } ], "tags": ["Accessibility", "HTML", "Marketing", "UI", "Usability"] }, { "id": "6", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#design-to-assist-and-not-to-distract", "guideline": "Design to assist and not to distract", "subheading": "Provide engagement that keeps the user's focus where it needs to be, avoiding anything that will either reduce efficiency or artificially prolong engagement.", "criteria": [ { "title": "Respect user attention", "description": "Ensure users can easily control how and when they receive information, with respect for their attention, focus, and mental energy.", "resources": [ { "Design for Sustainable Behaviour": "https://sustainabilityguide.eu/methods/design-sustainable-behaviour/", "Design Justice Network Principles": "https://designjustice.org/read-the-principles", "GR491 - 8-5057 - Attention Capturing": "https://gr491.isit-europe.org/en/crit.php?id=8-5057-frontend-the-attention-of-the-user-is-a", "GR491 - 10-3072 - Respect for the User": "https://gr491.isit-europe.org/en/crit.php?id=10-3072-uxui-addictions-some-services-are-designed-to-create", "Humane By Design": "https://humanebydesign.com/principles", "Laws Of UX": "https://lawsofux.com/", "Psychology of Design": "https://growth.design/psychology", "Society Centered Design": "https://societycentered.design/", "The Potentially Dangerous Non-Accessibility Of Cookie Notices": "https://www.smashingmagazine.com/2023/04/potentially-dangerous-non-accessibility-cookie-notices/", "The snake that eats its tail": "https://uxdesign.cc/the-snake-that-eats-its-tail-3656b31fd0f9" } ] }, { "title": "Minimize distraction", "description": "Prioritize features that assist rather than distract users, not unnecessarily prolonging the time they spend engaging with your content.", "resources": [ { "5 Website Features to Avoid (and how to fix them)": "https://medium.com/@lancerdesign/5-website-features-to-avoid-and-how-to-fix-them-2a4256f25b1f", "GR491 - 8-5057 - Attention Capturing": "https://gr491.isit-europe.org/en/crit.php?id=8-5057-frontend-the-attention-of-the-user-is-a", "GR491 - 10-3072 - Respect for the User": "https://gr491.isit-europe.org/en/crit.php?id=10-3072-uxui-addictions-some-services-are-designed-to-create", "GR491 - 10-3074 - Attention Control": "https://gr491.isit-europe.org/en/crit.php?id=10-3074-uxui-the--users-attention-is-an-asset", "Top 10 Website Eyesores to Avoid": "https://verticalresponse.com/blog/top-10-website-eyesores-to-avoid/", "Use Distraction Control in Safari to hide items on a webpage": "https://support.apple.com/en-us/120682", "Web Animation: Delightful or Distracting?": "https://constructive.co/insight/web-animation-delightful-or-distracting/", "Web Design Don'ts": "https://www.forbes.com/councils/forbestechcouncil/2019/01/28/web-design-donts-13-website-features-that-can-ruin-the-user-experience/" } ] }, { "title": "Reduce engagement traps", "description": "Avoid using design strategies intended to artificially prolong user attention, such as infinite scroll.", "resources": [ { "Doomprompting Is the New Doomscrolling": "https://www.workingtheorys.com/p/doomprompting", "GPF - General Policy Framework (PDF) - 4.2 - UX and UI (Infinite Scroll)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 8-5057 - Attention Capturing": "https://gr491.isit-europe.org/en/crit.php?id=8-5057-frontend-the-attention-of-the-user-is-a", "GR491 - 10-3072 - Respect for the User": "https://gr491.isit-europe.org/en/crit.php?id=10-3072-uxui-addictions-some-services-are-designed-to-create", "GR491 - 10-3074 - Attention Control": "https://gr491.isit-europe.org/en/crit.php?id=10-3074-uxui-the--users-attention-is-an-asset", "GreenIT - 0013 - Prefer pagination over infinite scrolling": "https://rweb.greenit.fr/en/fiches/RWEB_0013-prefer-pagination-to-infinite-scrolling", "Humane By Design": "https://humanebydesign.com/principles", "Laws Of UX": "https://lawsofux.com/", "Psychology of Design": "https://growth.design/psychology", "Society Centered Design": "https://societycentered.design/", "United Nations SDGS - Goal 3 - Health & Well-being": "https://sdgs.un.org/goals/goal3#targets_and_indicators", "UX Fatigue": "https://webdesignerdepot.com/ux-fatigue-when-your-website-asks-for-too-much-and-how-to-fix-it/" } ] } ], "benefits": [ { "Accessibility": "Reducing unnecessary barriers can improve accessibility and navigation using assistive technologies.", "Environment": "Using pagination rather than infinite scrolling allows individuals to request data on demand rather than encouraging overconsumption. This reduces carbon impact while encouraging healthy and sustainable browsing habits.", "Performance": "Avoiding attention traps improves user experience by reducing the time spent clicking through, closing, or hiding these distractions. Presenting the information in less distracting ways makes the experience feel faster, reduces barriers to access, and improves user flow.", "Social Equity": "Preserving user focus on their objectives reduces the potential for confusion, mistakes, and lapses in judgment.", "Transparency": "Avoiding deceptive patterns will boost trust and encourage users to return or recommend." } ], "GRI": [ { "materials": "Medium", "energy": "Medium", "water": "Medium", "emissions": "Medium" } ], "tags": ["Accessibility", "Assets", "Patterns", "UI", "Usability"] }, { "id": "7", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#avoid-being-manipulative-or-deceptive", "guideline": "Avoid being manipulative or deceptive", "subheading": "Avoid using patterns, content, tools, or techniques that may artificially manipulate or deceive the user.", "criteria": [ { "title": "Deceptive design patterns", "description": "Avoid deceptive design or unethical coding techniques that manipulate users into taking actions that are not in their best interest. Examples include anti-right click, copy prevention, requiring an account to purchase, etc.", "resources": [ { "10 Common Dark Patterns in UX and How to Avoid Them": "https://www.netsolutions.com/insights/dark-patterns-in-ux-disadvantages/", "Biased By Design": "https://biasedbydesign.com/", "Dark Design Patterns Catalog": "https://www.uxtigers.com/post/dark-design", "Dark pattern": "https://en.wikipedia.org/wiki/Dark_pattern", "Dark Patterns Detective": "https://games.productartistry.com/games/dark-patterns", "Dark Patterns Hall of Shame": "https://hallofshame.design/", "Dark patterns in UX: how designers should be responsible for their actions": "https://uxdesign.cc/dark-patterns-in-ux-design-7009a83b233c", "Deceptive design vs. the law": "https://clearleft.com/thinking/deceptive-design-vs-the-law", "Deceptive Patterns": "https://www.deceptive.design/", "Design Justice Network Principles": "https://designjustice.org/read-the-principles", "Designing without dark patterns": "https://designersethiques.org/en/topics/persuasive-design/designing-without-dark-patterns", "Digital sustainability audits: a de facto standard for the Internet carbon footprint": "https://www.researchgate.net/publication/343041330_Digital_sustainability_audits_a_de_facto_standard_for_the_Internet_carbon_footprint", "Ethical Defaults: Why Designers Must Stop Hiding Behind Settings": "https://webdesignerdepot.com/ethical-defaults-why-designers-must-stop-hiding-behind-settings/", "Fair Patterns": "https://www.fairpatterns.com/", "GPF - General Policy Framework (PDF) - 4.14 - UX and UI (Dark Patterns)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 10-3070 - Dark Patterns": "https://gr491.isit-europe.org/en/crit.php?id=10-3070-uxui-some-services-are-designed-to-create-some", "How Deceptive Design is Used to Compromise Your Privacy and How to Fight Back": "https://consciousdigital.org/deceptive-design-patterns/", "Humane By Design": "https://humanebydesign.com/principles", "Just normal web things": "https://heather-buchel.com/blog/2023/07/just-normal-web-things/", "Ledger of Harms": "https://ledger.humanetech.com/", "Overlay Fact Sheet": "https://overlayfactsheet.com/en/", "Overlay False Claims": "https://overlayfalseclaims.com/", "Overlay Timeline": "https://overlaytimeline.com/", "Six Dark Patterns to Avoid On Your Website": "https://www.mightybytes.com/insights/6-dark-patterns-to-avoid-on-your-website/", "Society Centered Design": "https://societycentered.design/", "The Calm Web": "https://calibreapp.com/blog/calm-web", "The Impact of Web Accessibility Overlays on the Usability and User Experience for People with Permanent Visual Impairments": "https://overlays.dnikub.dev/about/", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 3 - Health & Well-being": "https://sdgs.un.org/goals/goal3#targets_and_indicators" } ] }, { "title": "Advertisements", "description": "Select, present, and label advertisements and sponsorships transparently and only implement where these provide economic value in an ethical way without diminishing user experience.", "resources": [ { "Ad Net Zero announces global framework to measure media's carbon emissions": "https://adnetzero.com/news/ad-net-zero-announces-global-framework-to-measure-medias-carbon-emissions/", "An empirical study on the performance and energy costs of ads and analytics in mobile web apps": "https://www.sciencedirect.com/science/article/pii/S0950584923002252", "Dealing with Ads in 2020": "https://schepp.dev/posts/ad-integration-in-2020/", "Effectively loading ads without impacting page speed": "https://web.dev/articles/loading-ads-page-speed?hl=en", "Environmental impact assessment of online advertising": "https://www.sciencedirect.com/science/article/pii/S0195925517303505", "Fastest Ad Blocker: 13 Best We Tested for Performance in 2023": "https://whatsoftware.com/10-ad-blocking-extensions-tested-for-best-performance/view-all/", "GR491 - 10-3073 - Advertisements": "https://gr491.isit-europe.org/en/crit.php?id=10-3073-uxui-targeted-or-untargeted-advertising-can-be-an", "How ad platforms like Facebook, Google, and others drive climate change": "https://asemakula.medium.com/how-ad-platforms-like-facebook-google-and-others-sneakily-drive-climate-change-152194836e81", "How to advertise while considering its environmental impact": "https://greenspector.com/en/how-to-advertise-while-considering-its-environmental-impact/", "Make Better Ads (PDF)": "https://assets.ctfassets.net/ozc5on9ss4ee/1CY4ycGNINwaVU1efbjN9B/c4077a6d5fdac802838ff1d19be21b51/WeTransfer_Advertising_-_Make_better_ads_whitepaper_-_2023.pdf", "OpQuast - 8 - Advertisements and sponsored content are identified as such.": "https://checklists.opquast.com/en/digital-quality/advertisements-and-sponsored-content-are-identified-as-such", "Privacy-Preserving Attribution: Level 1": "https://www.w3.org/TR/2025/WD-privacy-preserving-attribution-20250422/Active participation", "Why People Block Ads (And What It Means for Marketers and Advertisers)": "https://blog.hubspot.com/marketing/why-people-block-ads-and-what-it-means-for-marketers-and-advertisers" } ] }, { "title": "Analytics and tracking", "description": "Evaluate and remove unnecessary or unused analytics and tracking, especially any operating without user consent.", "resources": [ { "48 Cart Abandonment Rate Statistics 2023": "https://baymard.com/lists/cart-abandonment-rate", "Guide to using analytics for performance and privacy": "https://www.wholegraindigital.com/blog/guide-to-using-analytics-for-performance-and-privacy/", "Is GDPR Good for the Environment?": "https://www.mightybytes.com/insights/is-gdpr-good-for-the-environment/", "Learn Privacy": "https://web.dev/blog/introducing-learn-privacy?hl=en", "Review of Web Analytic Tools for Sustainable Design (PDF)": "https://www.techrxiv.org/users/708350/articles/692959/master/file/data/092900a237/092900a237.pdf", "Tracking Protection in Firefox For Privacy and Performance (PDF)": "https://www.ieee-security.org/TC/SPW2015/W2SP/papers/W2SP_2015_submission_32.pdf", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 3 - Health & Well-being": "https://sdgs.un.org/goals/goal3#targets_and_indicators", "Why you should stop using Google Analytics on your website": "https://plausible.io/blog/remove-google-analytics" } ] }, { "title": "Search Engine Optimization", "description": "Focus on serving user intent through non-manipulative search and social media optimization. For example, do not misuse coding practices intended to support assistive technologies. This can include content with natural redundancy, or unhelpful or low-quality material designed only to manipulate search results.", "resources": [ { "Climate change SEO survey": "https://searchengineland.com/climate-change-seo-survey-making-web-more-sustainable-438209", "Content design practices for sustainable communication in tech": "https://uxdesign.cc/content-design-practices-for-sustainable-communication-in-tech-cbfc679be0cc", "GR491 - 1-4002 - Sustainable Commitment": "https://gr491.isit-europe.org/en/crit.php?id=1-4002-contents-many-elements-are-produced-externally-it-would", "GR491 - 2-4014 - Internationalisation": "https://gr491.isit-europe.org/en/crit.php?id=2-4014-contents-multi-language-management-adds-a-substantial-volume-of", "GR491 - 5-3033 - SEO Stakeholders": "https://gr491.isit-europe.org/en/crit.php?id=5-3033-uxui-algorithms-optimization--tend-to-accumulate-data", "How AI Mode Works and How SEO Can Prepare for the Future of Search": "https://ipullrank.com/how-ai-mode-works", "How to Use Keywords for SEO and Web Sustainability": "https://www.mightybytes.com/insights/keyword-optimization-seo-sustainability/", "How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change", "Local SEO vs. National SEO vs. Global SEO": "https://www.semrush.com/blog/local-seo-vs-national-seo/", "On-Page SEO Checklist": "https://www.semrush.com/blog/on-page-seo-checklist/", "Sustainable SEO: Processes and Practices": "https://www.mightybytes.com/insights/sustainable-seo/", "The digital butterfly effect: Sustainable websites and SEO": "https://www.the-future-of-commerce.com/2022/03/01/sustainable-websites/", "Sustainable SEO: How to focus on a lasting SEO strategy": "https://yoast.com/sustainable-seo/" } ] } ], "benefits": [ { "Accessibility": "Avoiding deceptive design patterns improves user experience for people using assistive technologies, as these can be especially disruptive when using a screen reader. This improves their trust and access to your content.", "Conversion": "Avoiding deceptive patterns can result in fewer complaints, reduce barriers, and improve conversion.", "Environment": "Avoiding deceptive design patterns reduces energy consumption because users do not waste time and energy trying to undo choices they never intended to make.", "Performance": "Using ethical, non-disruptive practices will accelerate the user journey and perceived speed and reduce unnecessary friction.", "Privacy": "Ensuring compliance with ethical privacy practices and avoiding dark and deceptive patterns reduces litigation risk. It also reduces data transmission between tracking and advertising services providers." } ], "GRI": [ { "materials": "Low", "energy": "Low", "water": "Low", "emissions": "Low" } ], "tags": ["Accessibility", "Assets", "Compatibility", "JavaScript", "JavaScript", "Patterns", "Privacy", "Security", "Social Equity", "UI", "Usability"] }, { "id": "8", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#make-deliverables-understandable-and-reusable", "guideline": "Make deliverables understandable and reusable", "subheading": "Create discoverable, well documented deliverables so that future users can find and make use of them without requiring assistance or expending unnecessary time and resources.", "criteria": [ { "title": "Deliverables reusability", "description": "Create deliverables, including documentation, in ways that facilitate later reuse.", "resources": [ { "4 Ways to Make Your Code More Reusable": "https://medium.com/@lanceharvieruntime/4-ways-to-make-your-code-more-reusable-bc20889c1e4", "7 simple habits of the top 1% of engineers": "https://read.engineerscodex.com/p/7-simple-habits-of-the-top-1-of-engineers", "A Sustainable Design Handbook": "https://www.sustainabledesignhandbook.com/design-development", "GR491 - 1-3008 - Reusability": "https://gr491.isit-europe.org/en/crit.php?id=1-3008-uxui-a-sustainable-it-knowledge-and-skills-base", "How to Write Clean, Reusable Code": "https://eledris.com/how-to-write-clean-reusable-code/", "How to write exceptional documentation": "https://chrisnicholas.dev/blog/how-to-write-exceptional-documentation", "Society Centered Design": "https://societycentered.design/", "System design": "https://sustainabilityguide.eu/methods/system-design/", "System Design in Software Development": "https://medium.com/the-andela-way/system-design-in-software-development-f360ce6fcbb9", "System Design Roadmap for Beginners": "https://dev.to/hellonehha/system-design-roadmap-for-beginners-nfi", "System Design: The complete course": "https://kps.hashnode.dev/system-design-the-complete-course" } ] }, { "title": "Deliverables documentation", "description": "Document functionality and technical specifications by creating easy to understand resources.", "resources": [ { "A guide to UX documentation": "https://blog.logrocket.com/ux-design/ux-documentation-guide-best-practices-template/", "Boring Web Development": "https://meiert.com/blog/boring-web-development/", "Creating effective technical documentation": "https://developer.mozilla.org/en-US/blog/technical-writing/", "GPF - General Policy Framework (PDF) - 1.10 - Strategy (Documented APIs)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 7-3050 - Documentation": "https://gr491.isit-europe.org/en/crit.php?id=7-3050-uxui-too-many-inadequate-documents-are-produced-during", "How Senior Software Engineers Document Their Project": "https://dev.to/koladev/how-senior-software-engineers-document-their-project-1nf4", "How to Write a PRD": "https://www.perforce.com/blog/alm/how-write-product-requirements-document-prd", "How to Write Technical Documentation That People Will Actually Read and Use": "https://medium.com/slalom-build/how-to-write-documentation-that-people-will-actually-read-and-use-b26791fc1429", "Lean UX ❤ Sustainability": "https://medium.com/design-bootcamp/lean-ux-sustainability-designing-for-people-planet-and-profit-4b1406564c81", "Mitigating our impact on the planet through service design": "https://uxdesign.cc/mitigating-our-impact-on-the-planet-through-services-474859a5b6be", "Product Design Process": "https://uxplanet.org/product-design-process-e25d5b31c581", "Quick Guide to Sustainable Design Strategies": "https://medium.com/disruptive-design/quick-guide-to-sustainable-design-strategies-641765a86fb8", "Sales & Marketing": "https://sustainabilityguide.eu/ecodesign/sales-marketing/", "Sustainability Product Strategy": "https://www.linkedin.com/pulse/sustainability-product-strategy-marisa-gooding/", "Sustainability Storytelling Checklist": "https://www.mightybytes.com/insights/sustainability-storytelling-checklist/", "Sustainable UX is more than reducing your website's footprint": "https://uxdesign.cc/sustainable-ux-and-ui-design-is-more-than-reducing-your-website-s-footprint-a99c336c151f", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 4 - Education": "https://sdgs.un.org/goals/goal4#targets_and_indicators", "United Nations SDGS - Goal 5 - Gender Equality": "https://sdgs.un.org/goals/goal5#targets_and_indicators", "United Nations SDGS - Goal 7 - Sustainable Energy": "https://sdgs.un.org/goals/goal7#targets_and_indicators", "United Nations SDGS - Goal 8 - Economics & Work": "https://sdgs.un.org/goals/goal8#targets_and_indicators", "United Nations SDGS - Goal 10 - Inequality": "https://sdgs.un.org/goals/goal10#targets_and_indicators", "United Nations SDGS - Goal 12 - Consumption & Production": "https://sdgs.un.org/goals/goal12#targets_and_indicators", "United Nations SDGS - Goal 13 - Climate Change": "https://sdgs.un.org/goals/goal13#targets_and_indicators", "United Nations SDGS - Goal 16 - Sustainable Society": "https://sdgs.un.org/goals/goal16#targets_and_indicators", "Write the Docs": "https://www.writethedocs.org/", "Writing Better Documentation": "https://www.aleksandrhovhannisyan.com/blog/writing-better-documentation/" } ] }, { "title": "Deliverables readability", "description": "Developers have access to code comments and have the ability to view source to make it easier to access, understand, maintain, and use code.", "resources": [ { "7 simple habits of the top 1% of engineers": "https://read.engineerscodex.com/p/7-simple-habits-of-the-top-1-of-engineers", "Best practices for writing code comments": "https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/", "HTML First": "https://html-first.com/", "Paying tribute to the web with View Source": "https://signalvnoise.com/svn3/paying-tribute-to-the-web-with-view-source/", "Right-Click-View-Source As Culture": "https://htmx.org/essays/right-click-view-source/#right-click-view-source-as-culture", "The Spirit of View Source": "https://blog.jim-nielsen.com/2020/the-spirit-of-view-source/" } ] } ], "benefits": [ { "Conversion": "Using open and reusable formats lowers barriers to entry, as there will likely be no cost involved in participation. It can encourage users to play a more active role in the project.", "Economic": "Creating and maintaining good documentation will make implementation easier and reduce future ongoing costs associated with maintenance.", "Environment": "Using common and clear formats for deliverables will reduce the time users need to spend familiarizing themselves with and adapting to the environment. This reduces the energy spent managing a project and the associated emissions." } ], "GRI": [ { "materials": "Medium", "energy": "Medium", "water": "Medium", "emissions": "Medium" } ], "tags": ["Accessibility", "Assets", "Content", "Education", "Patterns", "Software"] }, { "id": "9", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#use-a-design-system-for-interface-consistency", "guideline": "Use a design system for interface consistency", "subheading": "Keep the components of the project as consistent and clear as possible by using a design system to organize reusable features.", "criteria": [ { "title": "Design system", "description": "Use a formal design system when a project is large or has many contributors to improve performance, consistency, and sustainability. Choose a system based on web standards with reusable components and ensure your project only loads the components actually needed on the front end. Whether using a formal design system or not, always follow familiar design patterns and conventions.", "resources": [ { "4 Ways to Make Your Code More Reusable": "https://medium.com/@lanceharvieruntime/4-ways-to-make-your-code-more-reusable-bc20889c1e4", "A Brief History of Design Systems. Part 1": "https://uxmag.com/articles/a-brief-history-of-design-systems-part-1", "A Brief History of Design Systems. Part 2": "https://uxmag.com/articles/a-brief-history-of-design-systems-part-2", "AFNOR Spec 5.3.5 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Dark Mode Can Improve Text Readability — But Not for Everyone": "https://www.boia.org/blog/dark-mode-can-improve-text-readability-but-not-for-everyone", "Dark mode can save battery, but only if your device has an OLED screen": "https://www.businessinsider.com/reference/does-dark-mode-save-battery", "Design patterns": "https://ui-patterns.com/patterns", "Design Systems Checklist": "https://designsystemschecklist.com/", "Design System Ecosystem": "https://bradfrost.com/blog/post/the-design-system-ecosystem/", "Design System Gallery": "https://designsystemsrepo.com/design-systems/", "Design System Guide": "https://thedesignsystem.guide/", "Design System Metrics": "https://thedesignsystem.guide/design-system-metrics", "Design System ROI Calculator": "https://www.knapsack.cloud/calculator", "The Digital Playbook: A Crucial Counterpart To Your Design System": "https://www.smashingmagazine.com/2025/01/digital-playbook-crucial-counterpart-design-system/", "Everything you need to know about Design Systems": "https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969", "Google: Here's why dark mode massively extends your OLED phone's battery life": "https://www.zdnet.com/article/google-heres-why-dark-mode-massively-extends-your-oled-phones-battery-life/", "GPF - General Policy Framework (PDF) - 4.14 - UX and UI (Dark Patterns)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 3.1 - Architecture (Impact Reduction)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 7-3047 - Systemic Approach": "https://gr491.isit-europe.org/en/crit.php?id=7-3047-uxui-starting-a-project-without-taking-into-account", "How much is a design system worth?": "https://uxdesign.cc/how-much-is-a-design-system-worth-d72e2ededf76", "How to Write Clean, Reusable Code": "https://eledris.com/how-to-write-clean-reusable-code/", "Laws Of UX": "https://lawsofux.com/", "Lowww Carbon": "https://lowwwcarbon.com/", "Minimal Gallery": "https://minimal.gallery/", "OpQuast - 133 - Links of the same nature have identical colors, shapes and behaviors on all pages.": "https://checklists.opquast.com/en/digital-quality/hyperlinks-of-the-same-nature-have-identical-colors-shapes-and-behaviors-on-all-pages", "Patterns": "https://web.dev/patterns?hl=en", "Patterns.dev": "https://www.patterns.dev/", "Public design systems are worth it": "https://pjonori.blog/posts/public-design-systems-are-worth-it/", "The Anatomy of a Design System": "https://sparkbox.com/foundry/design_system_makeup_design_system_layers_parts_of_a_design_system", "The dark side of green web design": "https://www.wholegraindigital.com/blog/dark-colour-web-design/", "United Nations SDGS - Goal 4 - Education": "https://sdgs.un.org/goals/goal4#targets_and_indicators", "United Nations SDGS - Goal 12 - Consumption & Production": "https://sdgs.un.org/goals/goal12#targets_and_indicators", "What is a Design System?": "https://www.mightybytes.com/insights/what-is-a-design-system/", "Why digital isn't always greener or fairer": "https://www.southampton.ac.uk/blog/digitalteam/2021/03/03/why-digital-isnt-always-greener-or-fairer/", "GR491 - 5-3029 - Visual Soberness": "https://gr491.isit-europe.org/en/crit.php?id=5-3029-uxui-visual-sound-and-tactile-elements-/-components", "GreenIT - 0012 - Simple, clean and friendly web design": "https://rweb.greenit.fr/en/fiches/RWEB_0012-simple-clean-and-friendly-web-design", "How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change" } ] } ], "benefits": [ { "Accessibility": "Using a design system with accessible components will improve access to information for people with disabilities. Building design features that integrate accessibility from the start ensures everyone is always included.", "Conversion": "Using design systems supports consistent user interfaces. This improves user trust because individuals will recognize familiar components and know how to use them. This can improve conversion rates as it will reduce frustration, abandonment, and possible complaints.", "Economic": "Using standardized components and avoiding redundancy can reduce development time and the associated costs. Familiarity makes the experience easier for users, reducing bounce rates.", "Environment": "Building using recognized design components will reduce the amount of time users spend trying to perform a task. The less time users spend achieving their goals, the lower their energy usage and emissions.", "Performance": "Building design systems using standardized components reduces the need for repeat coding. This reduces developer coding time and can improve performance. Overall, sustainable patterns reduce emissions." } ], "GRI": [ { "materials": "Medium", "energy": "Low", "water": "Medium", "emissions": "Low" } ], "tags": ["Accessibility", "Assets", "CSS", "Education", "Patterns", "Strategy", "UI", "Usability"] }, { "id": "10", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#provide-clear-inclusive-content-with-purpose", "guideline": "Provide clear, inclusive content with purpose", "subheading": "Provide content that meets the needs of the audience, ensuring it is formatted for readability and incorporating SEO for visibility, so they can reach their destination as efficiently as possible.", "criteria": [ { "title": "Clear content", "description": "Write content using plain and inclusive language, at an appropriate reading level for your audience. Account for specific needs in relation to accessibility, native language, and internationalization.", "resources": [ { "Accessible Numbers": "https://accessiblenumbers.com/", "Content Audit: A Step-by-Step Guide": "https://www.mightybytes.com/insights/how-to-run-a-content-audit/", "GR491 - 1-4004 - Facts and Opinions": "https://gr491.isit-europe.org/en/crit.php?id=1-4004-contents-when-the-information-provided-is-not-deemed", "GR491 - 2-4014 - Internationalisation": "https://gr491.isit-europe.org/en/crit.php?id=2-4014-contents-multi-language-management-adds-a-substantial-volume-of", "GR491 - 5-4046 - Useful Images and Links": "https://gr491.isit-europe.org/en/crit.php?id=5-4046-contents-content-uses-external-references-rather-than-duplicating", "How much should you spend on accessibility?": "https://karlgroves.com/how-much-should-you-spend-on-accessibility/", "How screen readers read special characters: an update": "https://elevenways.be/en/articles/screenreaders-special-characters", "Plain Language Writing — An Essential Part Of Accessibility": "https://www.forbes.com/sites/andrewpulrang/2020/10/22/plain-language-writing---an-essential-part-of-accessibility/", "Readability Scoring System": "https://readabilityformulas.com/readability-scoring-system.php", "Stop Writing Web Copy That Over Explains Everything": "https://www.mightybytes.com/insights/stop-writing-web-copy-that-over-explains/", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 4 - Education": "https://sdgs.un.org/goals/goal4#targets_and_indicators", "United Nations SDGS - Goal 10 - Inequality": "https://sdgs.un.org/goals/goal10#targets_and_indicators", "WCAG 2.2 Understanding Docs: Reading Level": "https://www.w3.org/WAI/WCAG22/Understanding/reading-level.html", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability", "Why Non-Native Content Designers Improve Global UX": "https://almanac.httparchive.org/en/2024/sustainability" } ] }, { "title": "Content formatting", "description": "Use appropriate formatting for digital media. Provide a clear document structure with consideration of visual hierarchy. Use headings, bulleted lists, line spacing, and highlights appropriately. Provide information with appropriate formatting for the action users need to take.", "resources": [ { "Content design practices for sustainable communication in tech": "https://uxdesign.cc/content-design-practices-for-sustainable-communication-in-tech-cbfc679be0cc", "The Elements of Content Strategy": "https://elements-of-content-strategy.abookapart.com/", "GR491 - 1-4003 - Verified Sources": "https://gr491.isit-europe.org/en/crit.php?id=1-4003-contents-the-information-transmitted-can-be-controversial-and", "GR491 - 1-4004 - Facts and Opinions": "https://gr491.isit-europe.org/en/crit.php?id=1-4004-contents-when-the-information-provided-is-not-deemed", "GR491 - 2-4014 - Internationalisation": "https://gr491.isit-europe.org/en/crit.php?id=2-4014-contents-multi-language-management-adds-a-substantial-volume-of", "GR491 - 5-4046 - Useful Images and Links": "https://gr491.isit-europe.org/en/crit.php?id=5-4046-contents-content-uses-external-references-rather-than-duplicating", "How to Effectively Use Visual Hierarchy in Web Design": "https://speckyboy.com/visual-hierarchy-web-design/", "How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change", "HTML: HyperText Markup Language": "https://developer.mozilla.org/en-US/docs/Web/HTML", "Page Structure Tutorial": "https://www.w3.org/WAI/tutorials/page-structure/", "Why Heading Tags and Content Structure Matter": "https://www.mightybytes.com/insights/why-heading-tags-and-structure-matter/" } ] } ], "benefits": [ { "Accessibility": "Using plain-language makes content easier to understand and accessible to more users. Good structure that complies with standards and expectations works better alongside assistive technologies, such as screen readers.", "Conversion": "Writing and presenting authoritative content with intent and care can lead to citation by third parties. This can increase traffic with pre-warmed leads.", "Economic": "Being recognized as an authoritative source can bring additional recognition, users, and opportunities.", "Environment": "Ensuring content is easy to find and comprehend enables users to make informed decisions faster, taking less time and resources. This reduces energy consumption and emissions.", "Performance": "Creating well-structured content can improve search performance. When content ranks higher in search engines, people are more likely to land in the right place straight away.", "Social Equity": "Using inclusive language that avoids jargon and unnecessary exclusion can improve user experience for a broader audience." } ], "GRI": [ { "materials": "Medium", "energy": "Low", "water": "Medium", "emissions": "Low" } ], "tags": ["Accessibility", "Content", "Social Equity", "UI", "Usability"] }, { "id": "11", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#optimize-media-to-reduce-resource-use", "guideline": "Optimize media to reduce resource use", "subheading": "Ensure all media - including audio, video, animation, images, and other novel formats, when deemed necessary in the design, are optimized, correctly sized and formatted, use lazy loading where appropriate, with a usage policy in place.", "criteria": [ { "title": "Need for media", "description": "Do not include media unless it adds value. Consider the quantity, format, and sizes required.", "resources": [ { "5 terabytes for 30 seconds of homepage video": "https://wagtail.org/blog/5-terabytes-for-30-seconds-of-homepage-video/", "20 ways to make your website more energy efficient": "https://www.wholegraindigital.com/blog/website-energy-efficiency/", "AFNOR Spec 5.4.4 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Decarbonizing the media, broadcast, and streaming industry": "https://www.cell.com/joule/fulltext/S2542-4351(24)00115-6", "GPF - General Policy Framework (PDF) - 5.1 - Content (Image Suitability)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 2-4009 - Meaningful Images": "https://gr491.isit-europe.org/en/crit.php?id=2-4009-contents-the-weight-of-an-image-thus-its", "GR491 - 2-4010 - Image Avoidance": "https://gr491.isit-europe.org/en/crit.php?id=2-4010-contents-the-weight-of-an-image-thus-its", "GR491 - 2-4011 - Text Replacement": "https://gr491.isit-europe.org/en/crit.php?id=2-4011-contents-the-weight-of-an-image-thus-its", "GR491 - 3-4028 - Meaningful Videos": "https://gr491.isit-europe.org/en/crit.php?id=3-4028-contents-video-streams-are-one-of-the-elements", "GR491 - 3-4029 - Video Avoidance": "https://gr491.isit-europe.org/en/crit.php?id=3-4029-contents-in-digital-service-uses-video-streams-are", "GreenIT - 0037 - Use CSS instead of images": "https://rweb.greenit.fr/en/fiches/RWEB_0037-use-css-instead-of-images", "GreenIT - 0050 - Prefer glyphs over images": "https://rweb.greenit.fr/en/fiches/RWEB_0050-prefer-glyphs-over-images", "The Carbon Impact of Web Standards (PDF)": "https://websitesustainability.com/cache/files/research23.pdf", "Streaming the future of sustainability (PDF)": "https://hotcarbon.org/assets/2024/pdf/hotcarbon24-final81.pdf", "Use multimedia wisely": "https://climateproductleaders.org/playbook/use-multimedia-wisely", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability", "Why, when and how to use video and animation on your website": "https://www.wholegraindigital.com/blog/why-when-and-how-to-use-video-and-animation-on-your-website/" } ] }, { "title": "Optimized media", "description": "Resize, optimize, and compress all media. Provide media in appropriate sizes for different screen resolutions, user device capabilities, and user needs. Optimize and compress media appropriately. Provide media in compatible and appropriate formats. Avoid non-native embedded media players.", "resources": [ { "20 ways to make your website more energy efficient": "https://www.wholegraindigital.com/blog/website-energy-efficiency/", "AFNOR Spec 5.4.4 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315", "Avoid Large Base64 data URLs in HTML and CSS": "https://www.debugbear.com/blog/base64-data-urls-html-css", "Dithering Images": "https://www.greendesign.io/dithering-images", "Factcheck: What is the carbon footprint of streaming video on Netflix?": "https://www.carbonbrief.org/factcheck-what-is-the-carbon-footprint-of-streaming-video-on-netflix/", "Fast load times: Optimize Your Images": "https://web.dev/explore/fast?hl=en#optimize-your-images", "GPF - General Policy Framework (PDF) - 4.7 - UX and UI (Media Choices)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 5.2 - Content (Image Compression)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 5.3 - Content (Video Definition)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 5.4 - Content (Video Compression)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 5.6 - Content (Audio Compression)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 5.7 - Content (File Size Reduction)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 2-4008 - Image Compression": "https://gr491.isit-europe.org/en/crit.php?id=2-4008-contents-the-transmission-of-compressed-data-is-essential", "GR491 - 7-5050 - Sizes and Formats": "https://gr491.isit-europe.org/en/crit.php?id=7-5050-frontend-front-end-operations-may-require-file-transfers-between", "GR491 - 7-5053 - Convert and Resize": "https://gr491.isit-europe.org/en/crit.php?id=7-5053-frontend-image-transfers-introduce-peculiarities-related-to-the", "GR491 - 7-5054 - File Compression": "https://gr491.isit-europe.org/en/crit.php?id=7-5054-frontend-the-volume-of-data-transferred-increases-the", "GR491 - 8-3060 - Video and Animation Usage": "https://gr491.isit-europe.org/en/crit.php?id=8-3060-uxui-video-streams-and-animations-generate-a-large", "GR491 - 8-3061 - Optimized Images": "https://gr491.isit-europe.org/en/crit.php?id=8-3061-uxui-the-volume-of-data-exchanged-for-the", "Greening The Web: A Study On Low-Carbon Image Formats": "https://michaelandersen93.substack.com/p/greening-the-web-a-study-on-low-carbon?r=3dzajs", "GreenIT - 0100 - Optimize vector images": "https://rweb.greenit.fr/en/fiches/RWEB_0100-optimize-vector-images", "GreenIT - 0049 - Optimize images": "https://rweb.greenit.fr/en/fiches/RWEB_0049-optimize-images", "How can we design sustainably?": "https://medium.com/@sandra.pallier/how-can-we-design-sustainably-3be7530a0f5b", "How to Build a Low-tech Website?": "https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low-tech-website/", "How to Compress a Video File without Losing Quality (Video)": "https://www.youtube.com/watch?v=sgmE1T8A4UY", "How To Efficiently Encode Images On Your Website": "https://www.debugbear.com/blog/efficiently-encode-images", "How to Properly Size Images to Improve Core Web Vitals": "https://www.debugbear.com/blog/properly-size-images", "How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change", "Image Carbon": "https://www.imagecarbon.com/", "Is WebP really better than JPEG?": "https://siipo.la/blog/is-webp-really-better-than-jpeg", "Learn Images": "https://web.dev/blog/learn-images?hl=en", "Model, estimate or measure? What matters in video energy use": "https://davidmytton.blog/model-estimate-or-measure-what-matters-in-video-energy-use/", "Modern way of serving images": "https://kurtextrem.de/posts/modern-way-of-img", "My solar-powered and self-hosted website": "https://dri.es/my-solar-powered-and-self-hosted-website", "Optimize Images to Improve Sustainability": "https://www.mightybytes.com/insights/how-to-optimize-images/", "Optimize multimedia files": "https://climateproductleaders.org/playbook/optimize-multimedia-files", "Optimizing Video For Size And Quality": "https://www.smashingmagazine.com/2021/02/optimizing-video-size-quality/", "Optimizing Video for the Web": "https://www.mightybytes.com/insights/optimizing-video/", "Power consumption of JPEG, WebP, and AVIF": "https://fershad.com/writing/power-consumption-jpeg-webp-and-avif/", "Practical SVG": "https://practical-svg.chriscoyier.net/", "Reduce the weight of a web page: which elements have the greatest impact?": "https://greenspector.com/en/reduce-the-weight-of-a-web-page-which-elements-have-the-greatest-impact/", "Replace Your Animated GIFs with SVGs": "https://frontendmasters.com/blog/replace-your-animated-gifs-with-svgs/", "Sustainable UX is more than reducing your website's footprint": "https://uxdesign.cc/sustainable-ux-and-ui-design-is-more-than-reducing-your-website-s-footprint-a99c336c151f", "Sustainable Web Design": "https://alistapart.com/article/sustainable-web-design/", "The carbon footprint of streaming video: fact-checking the headlines": "https://www.iea.org/commentaries/the-carbon-footprint-of-streaming-video-fact-checking-the-headlines", "Tips for Creating and Exporting Better SVGs for the Web": "https://www.sarasoueidan.com/blog/svg-tips-for-designers/", "UI Tools": "https://designsustainably.eu/uitools/", "Understanding and Mitigating Webpage Data Bloat: Causes and Preventive Measures (PDF)": "https://hotcarbon.org/assets/2024/pdf/hotcarbon24-final120.pdf", "Video - an Environmental Monster?": "https://www.linkedin.com/pulse/video-environmental-monster-joe-jones/", "WebP vs AVIF - Which is better in 2024?": "https://speedvitals.com/blog/webp-vs-avif/", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability", "Which SVG technique performs best for way too many icons?": "https://cloudfour.com/thinks/svg-icon-stress-test/", "Why Web Designers Need To Think About Sustainable Web Design": "https://www.forbes.com/councils/forbesbusinesscouncil/2022/09/01/why-web-designers-need-to-think-about-sustainable-web-design/", "World Wide Waste": "https://gerrymcgovern.com/books/world-wide-waste/" } ] }, { "title": "Lazy loading", "description": "Incorporate lazy/deferred loading from the start: Consider which media elements are immediately required, and which would be better relegated to loading on specific user interaction. Load data-intensive media on the client side, including the media itself, behind a facade - a non-functional and static representational element.", "resources": [ { "Avoid hotlinking images with Cross-Origin-Resource-Policy": "https://www.sjoerdlangkemper.nl/2024/11/27/avoid-hotlinking-images-with-corp-cross-origin-resource-policy/", "Fast load times: Optimize Your Images": "https://web.dev/explore/fast?hl=en#optimize-your-images", "GPF - General Policy Framework (PDF) - 4.1 - UX and UI (Autoplay)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 9-5071 - Autoplay": "https://gr491.isit-europe.org/en/crit.php?id=9-5071-frontend-active-content-uses-technical-resources-to-function.", "GR491 - 9-5068 - Lazy Loading": "https://gr491.isit-europe.org/en/crit.php?id=9-5068-frontend-when-loading-the-service-on-the-user", "GreenIT - 0051 - Use lazy loading": "https://rweb.greenit.fr/en/fiches/RWEB_0051-use-lazy-loading", "How to Defer Offscreen Images and Background Images": "https://www.debugbear.com/blog/defer-offscreen-images", "Lazy Load Background Images with the IntersectionObserver API": "https://www.debugbear.com/blog/lazy-load-background-images-intersection-observer", "Lazy load third-party resources with facades": "https://developer.chrome.com/docs/lighthouse/performance/third-party-facades?hl=en", "Lazy loading (Wikipedia)": "https://en.wikipedia.org/wiki/Lazy_loading", "Lazy loading (Performance)": "https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading", "Lazy Loading Images Based on Screen Size": "https://www.aaron-gustafson.com/notebook/lazy-loading-images-based-on-screen-size/", "Non-blocking cross-browser image rendering on the canvas": "https://calendar.perfplanet.com/2025/non-blocking-image-canvas/", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability" } ] }, { "title": "User-controlled media", "description": "Disable auto-play functionality on audio, video, and similar media formats. Give the user full agency over media interactions, including a choice of resolutions and formats, and the option to deactivate media. Inform users of the length, format, and data intensity of the media. Provide the option for data-intensive media to be disabled or provide low-fidelity alternatives.", "resources": [ { "Ditch 4K video and new tech to fight climate change": "https://www.bbc.co.uk/news/technology-55164410", "Fast load times: Optimize Your Images": "https://web.dev/explore/fast?hl=en#optimize-your-images", "Focus Mode": "https://www.greendesign.io/focus-mode", "GPF - General Policy Framework (PDF) - 1.9 - Strategy (Interoperable Technologies)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.1 - UX and UI (Autoplay)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.7 - UX and UI (Media Choices)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.11 - UX and UI (Inform Users)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 5.3 - Content (Video Definition)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 6.4 - Front-End (Image Dimensions)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 2-4010 - Image Avoidance": "https://gr491.isit-europe.org/en/crit.php?id=2-4010-contents-the-weight-of-an-image-thus-its", "GR491 - 7-5050 - Sizes and Formats": "https://gr491.isit-europe.org/en/crit.php?id=7-5050-frontend-front-end-operations-may-require-file-transfers-between", "GR491 - 7-5053 - Convert and Resize": "https://gr491.isit-europe.org/en/crit.php?id=7-5053-frontend-image-transfers-introduce-peculiarities-related-to-the", "GreenIT - 0048 - Avoid resizing images in the browser": "https://rweb.greenit.fr/en/fiches/RWEB_0048-avoid-resizing-images-in-the-browser", "OpQuast - 114 - Thumbnails and previews are not larger images resized on the client side.": "https://checklists.opquast.com/en/digital-quality/thumbnails-and-previews-are-not-larger-images-resized-on-the-client-side", "OpQuast - 118 - The length of video and audio content is indicated.": "https://checklists.opquast.com/en/digital-quality/the-length-of-video-and-audio-content-is-displayed", "OpQuast - 119 - Videos are user-triggered.": "https://checklists.opquast.com/en/digital-quality/videos-are-user-triggered", "OpQuast - 120 - Sounds are user-triggered.": "https://checklists.opquast.com/en/digital-quality/sounds-are-user-triggered", "Optimize Images to Improve Sustainability": "https://www.mightybytes.com/insights/how-to-optimize-images/", "Video performance": "https://web.dev/learn/performance/video-performance?hl=en" } ] }, { "title": "Media management and use", "description": "Set up a media management and use policy. Include criteria for media compression, rendering impact optimization, file formats, data retention, review, and deletion.", "resources": [ { "GPF - General Policy Framework (PDF) - 1.9 - Strategy (Interoperable Technologies)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.7 - UX and UI (Media Choices)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.11 - UX and UI (Inform Users)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 5.1 - Content (Image Suitability)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 8-3057 - Media Management": "https://gr491.isit-europe.org/en/crit.php?id=8-3057-uxui-the-volume-of-data-transferred-increases-the", "GR491 - 8-3060 - Video and Animation Usage": "https://gr491.isit-europe.org/en/crit.php?id=8-3060-uxui-video-streams-and-animations-generate-a-large", "Green by Default": "https://screenspan.net/blog/green-by-default/", "Greening of Streaming": "https://www.greeningofstreaming.org/", "Guidelines for Multimedia on the Web": "https://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/", "Image management": "https://www.frontify.com/en/guide/image-management", "Optimized images to Improve Sustainability": "https://www.mightybytes.com/insights/how-to-optimize-images/", "Sustainable Entertainment Alliance": "https://www.sustainableentertainmentalliance.org/", "Tips for Effective Image Management on Your Site": "https://profiletree.com/effective-image-management/", "Using video considerately on sustainable websites": "https://rootwebdesign.studio/articles/using-video-considerately-on-sustainable-websites/" } ] } ], "benefits": [ { "Economic": "Eliminating data-intensive media entirely and using alternatives such as transcripts reduce costs associated with hosting and data transfer.", "Environment": "Reducing the battery drain associated with loading data-intensive content by preventing auto-loading or delaying it until the moment it is required reduces energy emissions associated with data transfer and renering.", "Performance": "Tailoring user experience to the device, situation, and environment of the user by having different resolutions and quality formats available reduces wasted bandwidth. This can boost performance for users who make choices to reduce the data downloaded.", "Social Equity": "Providing alternatives to data-intensive media allows with limited bandwidth or older devices to access content." } ], "GRI": [ { "materials": "High", "energy": "High", "water": "High", "emissions": "High" } ], "example": " \n \n \n \"\"\n", "tags": ["Accessibility", "Assets", "Content", "HTML", "Performance", "Software", "UI", "Usability"] }, { "id": "12", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#ensure-animation-is-proportionate-and-easy-to-control", "guideline": "Ensure animation is proportionate and easy to control", "subheading": "Ensure any animation deemed necessary is not overdone and that the user can control its ability to run.", "criteria": [ { "title": "Need for animation", "description": "Use animation only when it adds value and not for decorative elements.", "resources": [ { "Climate Change Implications of Gaming Products and Services (PDF)": "https://openresearch.surrey.ac.uk/discovery/delivery/44SUR_INST:ResearchRepository/99512335802346#13140594990002346", "GR491 - 9-5079 - Animation Necessity": "https://gr491.isit-europe.org/en/crit.php?id=9-5079-frontend-the-processing-of-animations-consumes-technical-resources", "GreenIT - 0010 - Limiting the use of carousels": "https://rweb.greenit.fr/en/fiches/RWEB_0010-limiting-the-use-of-carousels", "GreenIT - 0013 - Prefer pagination over infinite scrolling": "https://rweb.greenit.fr/en/fiches/RWEB_0013-prefer-pagination-to-infinite-scrolling", "How can we design sustainably?": "https://medium.com/@sandra.pallier/how-can-we-design-sustainably-3be7530a0f5b", "The Carbon Impact of Web Standards (PDF)": "https://websitesustainability.com/cache/files/research23.pdf", "Web Animation: Delightful or Distracting?": "https://constructive.co/insight/web-animation-delightful-or-distracting/", "Why, when and how to use video and animation on your website": "https://www.wholegraindigital.com/blog/why-when-and-how-to-use-video-and-animation-on-your-website/" } ] }, { "title": "Avoiding overburdening", "description": "Progressively display an appropriate number of animations to avoid overburdening the user or negatively impacting device performance. This includes setting a maximum number of replays or iterations.", "resources": [ { "Equations relating total annual energy consumption and chips energy efficiency": "https://www.researchgate.net/publication/371938289_Equations_relating_total_annual_energy_consumption_and_chips_energy_efficiency", "GreenIT - 0009 - Avoid JavaScript / CSS animations": "https://rweb.greenit.fr/en/fiches/RWEB_0009-avoid-javascriptcss-animations", "GreenIT - 0099 - Limit the use of animated GIFs": "https://rweb.greenit.fr/en/fiches/RWEB_0099-limit-the-use-of-animated-gif", "Humane By Design": "https://humanebydesign.com/principles/", "The Web Animation Performance Tier List": "https://motion.dev/magazine/web-animation-performance-tier-list", "The ultimate guide to proper use of animation in UX": "https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9", "UI Animation: Please Use Responsibly": "https://uxdesign.cc/ui-animation-please-use-responsibly-e707dbdb12d5", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability" } ] }, { "title": "Control animation", "description": "Allow users to start, stop, pause, or otherwise control animated content.", "resources": [ { "Accessible Web Animation": "https://css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained/", "Animated sites are unique, but not always accessible": "https://uxdesign.cc/animated-sites-are-unique-but-not-always-accessible-5af54fefa092", "Animation and motion": "https://web.dev/learn/accessibility/motion?hl=en-us", "Animation that fails safely": "https://adobe.design/stories/leading-design/animation-that-fails-safely-defensive-design-for-motion-sensitive-users", "GPF - General Policy Framework (PDF) - 4.1 - UX and UI (Autoplay)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.6 - UX and UI (Informational Media)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 7-5051 - Animation Frequency": "https://gr491.isit-europe.org/en/crit.php?id=7-5051-frontend-the-presentation-of-operations-on-the-front", "Let users pause/stop/hide animation": "https://marcom.wwu.edu/accessibility/guide/pause-stop-hide-animation", "prefers-reduced-motion: Sometimes less movement is more": "https://web.dev/articles/prefers-reduced-motion?hl=en", "Respecting Users' Motion Preferences": "https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/" } ] } ], "benefits": [ { "Environment": "Disabling and reducing animation to the essential, with appropriate optimization and user control, reduces rendering impact and associated emissions.", "Performance": "Compressing, removing, or otherwise reducing animation files reduces complexity, improving performance.", "Social Equity": "Catering to different perspectives on and preferences in relation to animation can improve acceptance and access for individuals using different devices and from different backgrounds." } ], "GRI": [ { "materials": "High", "energy": "High", "water": "High", "emissions": "High" } ], "example": "@media (prefers-reduced-motion: reduce) {\r\n\tbody *,\r\n\tbody *::before,\r\n\tbody *::after {\r\n\t\tanimation-delay: -1ms !important;\r\n\t\tanimation-duration: 1ms !important;\r\n\t\tanimation-iteration-count: 1 !important;\r\n\t\tbackground-attachment: initial !important;\r\n\t\ttransition-duration: 1ms !important;\r\n\t\ttransition-delay: -1ms !important;\r\n\t\tscroll-behavior: auto !important;\r\n\t}\r\n}", "tags": ["Accessibility", "CSS", "JavaScript", "Performance", "UI", "Usability"] }, { "id": "13", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#use-optimized-and-appropriate-web-typography", "guideline": "Use optimized and appropriate web typography", "subheading": "Provide custom fonts in the most suitable file format, but with a preference for pre-installed typefaces where possible.", "criteria": [ { "title": "Pre-installed typefaces", "description": "Use pre-installed fonts, such as system fonts, wherever possible, to reduce the reliance on user-installed or web fonts.", "resources": [ { "Apple System Fonts": "https://developer.apple.com/fonts/system-fonts/", "CSS Fonts": "https://www.cssfontstack.com/", "Fabulous Font-Face Fallbacks": "https://calendar.perfplanet.com/2024/fabulous-font-face-fallbacks/", "Fallback Font Generator": "https://screenspan.net/fallback", "Fallback lister": "https://r12a.github.io/scripts/fontlist/", "Font style matcher": "https://meowni.ca/font-style-matcher/", "GR491 - 2-4016 - System Fonts": "https://gr491.isit-europe.org/en/crit.php?id=2-4016-contents-system-fonts-are-embedded-in-the-presentation", "GreenIT - 0032 - Prefer standard fonts": "https://rweb.greenit.fr/en/fiches/RWEB_0032-prefer-standard-fonts", "How can we design sustainably?": "https://medium.com/@sandra.pallier/how-can-we-design-sustainably-3be7530a0f5b", "List of typefaces included with macOS": "https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS", "List of typefaces included with Microsoft Windows": "https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows", "Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite": "https://media.24ways.org/2007/17/fontmatrix.html", "Modern Font Stacks": "https://modernfontstacks.com/", "System Font Stack": "https://systemfontstack.com/", "Using UX Design to Build a Sustainable Future": "https://uxmag.com/articles/using-ux-design-to-build-a-sustainable-future", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability", "Web fonts: when you need them, when you don't": "https://david-gilbertson.medium.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae" } ] }, { "title": "Web font optimization", "description": "Limit the number and complexity of fonts downloaded. When using a variable font, also restrict the supported axes and ranges to those required by your project whenever this reduces file size. Use the most performant file format available.", "resources": [ { "A Guide to Understanding What Makes a Typeface Accessible": "https://medium.com/the-readability-group/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0", "Best practices for fonts": "https://web.dev/articles/font-best-practices?hl=en", "Font sustainability and accessibility analysis": "https://codewordcreative.com/better-fonts/", "GPF - General Policy Framework (PDF) - 4.7 - UX and UI (Media Choices)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.8 - UX and UI (Font Limits)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 5.7 - Content (File Size Reduction)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 2-4015 - Font Limits": "https://gr491.isit-europe.org/en/crit.php?id=2-4015-contents-each-font-is-encoded-in-a-file", "GR491 - 8-3058 - Fonts and Varients": "https://gr491.isit-europe.org/en/crit.php?id=8-3058-uxui-fonts-can-be-very-large.-by-reducing", "Preload Fonts On Your Website For Better Core Web Vitals": "https://www.debugbear.com/blog/preload-web-fonts", "Reduce web font size": "https://web.dev/articles/reduce-webfont-size?hl=en", "Should you preload fonts for performance?": "https://www.erwinhofman.com/blog/should-you-preload-fonts-for-performance", "The Ultimate Guide to Font Performance Optimization": "https://www.debugbear.com/blog/website-font-performance", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability", "Web Font Performance - How Your Fonts Affect Page Speed": "https://speedy.site/web-font-performance-how-your-fonts-affect-page-speed/", "You're loading fonts wrong": "https://www.jonoalderson.com/performance/youre-loading-fonts-wrong/" } ] }, { "title": "Web font subsetting", "description": "Design or subset fonts to omit unnecessary or unused stylistic variations, such as font weight or italics. Design or subset web fonts based on explicitly supported languages and Unicode scripts rather than assumed defaults. Where you are in full control of all input and output, fonts can be subset to include only the relevant Unicode range or character set. In all other instances - particularly where content is user-generated or affected by dynamic input and output - provide full script coverage and use a solution such as Incremental Font Transfer (IFT) to load the required segments of the font on demand.", "resources": [ { "Best practices for fonts": "https://web.dev/articles/font-best-practices?hl=en", "GPF - General Policy Framework (PDF) - 4.8 - UX and UI (Font Limits)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "Incremental Font Transfer": "https://www.w3.org/TR/IFT/", "Reduce web font size": "https://web.dev/articles/reduce-webfont-size?hl=en", "The performance cost of custom web fonts, and how to solve it": "https://www.wholegraindigital.com/blog/performant-web-fonts/", "The Ultimate Guide to Font Performance Optimization": "https://www.debugbear.com/blog/website-font-performance", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability", "You're loading fonts wrong": "https://www.jonoalderson.com/performance/youre-loading-fonts-wrong/" } ] } ], "benefits": [ { "Environment": "Reducing the number and complexity of custom fonts used reduces data transfer and rendering effort, which lowers associated emissions.", "Performance": "Using optimized web fonts or system fonts supports a smoother user experience and faster rendering.", "Social Equity": "System fonts are preinstalled and are reliable, ensuring content can always be presented fast in a font users are familiar with." } ], "GRI": [ { "materials": "Medium", "energy": "Medium", "water": "Medium", "emissions": "Medium" } ], "example": "font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;", "tags": ["Accessibility", "CSS", "Performance", "UI", "Usability"] }, { "id": "14", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#offer-suitable-alternatives-for-every-format-used", "guideline": "Offer suitable alternatives for every format used", "subheading": "Integrate fallbacks so that if something cannot load or is not compatible, there is an accessible alternative to ensure equal access to the content.", "criteria": [ { "title": "Open formats", "description": "Default to using open alternatives, such as HTML, over proprietary file formats.", "resources": [ { "Are PDFs Hurting the Planet?": "https://medium.com/@thepdfspace/are-pdfs-hurting-the-planet-7c850655c98e", "GPF - General Policy Framework (PDF) - 3.1 - Architecture (Impact Reduction)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.6 - UX and UI (Informational Media)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.7 - UX and UI (Media Choices)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.12 - UX and UI (Impact Flags)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "Making a positive change: PDF to HTML": "https://accessibility.blog.gov.uk/2023/06/12/making-a-positive-change-pdf-to-html/", "PDFs vs. web pages: what's better for users?": "https://lapope.com/2023/08/07/pdfs-vs-web-pages-whats-better-for-users/", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "Why you need to stop using PDFs": "https://shorthand.com/the-craft/the-pdf-is-in-terminal-decline/index.html" } ] }, { "title": "Font stack fallbacks", "description": "Provide a suitable font stack as a fallback when custom typefaces are used.", "resources": [ { "A New Way To Reduce Font Loading Impact: CSS Font Descriptors": "https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/", "Creating font subsets": "https://markoskon.com/creating-font-subsets/", "Fast Load Times: Optimize WebFonts": "https://web.dev/explore/fast?hl=en#optimize-webfonts", "How to subset a variable font": "https://clagnut.com/blog/2418", "The performance cost of custom web fonts, and how to solve it": "https://www.wholegraindigital.com/blog/performant-web-fonts/", "Web Font Performance - How Your Fonts Affect Page Speed": "https://speedy.site/web-font-performance-how-your-fonts-affect-page-speed/", "Web fonts: when you need them, when you don't": "https://david-gilbertson.medium.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae" } ] }, { "title": "Alternative text", "description": "Provide meaningful alternative text for all descriptive images that are non-decorative and support the user's understanding of the content, acting as a fallback if the images do not load.", "resources": [ { "Alt Text: What to Write": "https://www.nngroup.com/articles/write-alt-text/", "Alternative Text": "https://webaim.org/techniques/alttext/", "GR491 - 2-4012 - Image Alternatives": "https://gr491.isit-europe.org/en/crit.php?id=2-4012-contents-accessibility-assistants-must-be-able-to-use", "GR491 - 9-5064 - Image Text Replacement": "https://gr491.isit-europe.org/en/crit.php?id=9-5064-frontend-accessibility-assistants-must-be-able-to-use", "OpQuast - 111 - Each decorative image has an appropriate text alternative.": "https://checklists.opquast.com/en/digital-quality/each-decorative-image-has-an-appropriate-text-alternative", "WCAG Guideline 1.1 - Text Alternatives": "https://www.w3.org/TR/WCAG22/#text-alternatives", "Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2024/sustainability", "Write helpful alt text": "https://developers.google.com/tech-writing/accessibility/self-study/write-alt-text" } ] }, { "title": "Transcripts and text", "description": "Include transcripts and/or text versions of media files as an alternative to playing the media.", "resources": [ { "Audio accessibility": "https://userway.org/blog/audio-accessibility/", "GR491 - 3-4034 - Audio Alternatives": "https://gr491.isit-europe.org/en/crit.php?id=3-4034-contents-access-to-sound-is-difficult-if-not", "Making Audio and Video Media Accessible": "https://www.w3.org/WAI/media/av/", "OpQuast - 116 - Each audio and video content is accompanied by a text transcription.": "https://checklists.opquast.com/en/digital-quality/all-audio-and-video-content-is-accompanied-by-a-text-transcription", "The Carbon Impact of Web Standards (PDF)": "https://websitesustainability.com/cache/files/research23.pdf", "Transcripts": "https://www.w3.org/WAI/media/av/transcripts/" } ] }, { "title": "Video alternatives", "description": "Include closed captions and subtitles along with transcripts for videos. Provide localization as expected by your audience, including subtitles and sign language that meet the same standard.", "resources": [ { "GPF - General Policy Framework (PDF) - 5.5 - Content (Video Alternative)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GR491 - 3-4030 - Video Alternatives": "https://gr491.isit-europe.org/en/crit.php?id=3-4030-contents-the-information-provided-by-video-can-often", "Making Audio and Video Media Accessible": "https://www.w3.org/WAI/media/av/", "OpQuast - 116 - Each audio and video content is accompanied by a text transcription.": "https://checklists.opquast.com/en/digital-quality/all-audio-and-video-content-is-accompanied-by-a-text-transcription", "The Carbon Impact of Web Standards (PDF)": "https://websitesustainability.com/cache/files/research23.pdf", "Tips for creating a transcript file": "https://support.google.com/youtube/answer/2734799", "Video Captions": "https://www.w3.org/WAI/perspective-videos/captions/", "W3C Web Accessibility Initiative: Transcripts": "https://www.w3.org/WAI/media/av/transcripts/", "Web Video Text Tracks Format (WebVTT)": "https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API", "WebVTT: The Web Video Text Tracks Format": "https://www.w3.org/TR/webvtt1/" } ] } ], "benefits": [ { "Accessibility": "Providing content in multiple formats means users can choose the format that best supports their needs, helping to eliminate barriers.", "Conversion": "Creating text alternatives to media, such as transcripts, means your content can be more easily found and indexed by search engines.", "Economic": "Hosting and delivering text is less computationally expensive than media, so providing text-based content can reduce hosting and bandwidth costs.", "Environment": "Offering low-impact alternatives to media formats reduces rendering and processing effort, and the associated emissions.", "Performance": "Reducing interactivity can help users access what they need faster.", "Social Equity": "Providing text alternatives for those who are not able to watch a video or listen to audio, even situationally, improves access and user experience." } ], "GRI": [ { "materials": "Medium", "energy": "Medium", "water": "Medium", "emissions": "Medium" } ], "example": "WEBVTT\r\n\r\n00:01.000 --> 00:04.000\r\n- Something happened yesterday morning.\r\n\r\n00:05.000 --> 00:09.000\r\n- Or was it in the evening?\r\n- I can't remember!", "tags": ["Accessibility", "Assets", "Compatibility", "Content", "HTML", "Performance", "Social Equity", "UI", "Usability"] }, { "id": "15", "url": "https://www.w3.org/TR/web-sustainability-guidelines/#provide-accessible-usable-minimal-web-forms", "guideline": "Provide accessible, usable, minimal web forms", "subheading": "Ensure forms are as minimalistic and friction-free as possible, reduce the impact of submitting, and only collecting required data.", "criteria": [ { "title": "Simple forms", "description": "Remove unnecessary forms and reduce form content to the minimum necessary to meet the user needs while satisfying the organization's minimum requirements. Clearly communicate why a form is necessary, the value it provides, the number of steps required for completion, and what will be done with the collected data. Also disclose if the data will be shared with third parties.", "resources": [ { "Accessible Forms: Tips and Techniques": "https://afixt.com/accessible-forms-tips-and-techniques/", "Best Practices For Mobile Form Design": "https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/", "Designing Efficient Web Forms": "https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/", "Form Design for Complex Applications": "https://coyleandrew.medium.com/form-design-for-complex-applications-d8a1d025eba6", "Form design: from zero to hero all in one blog post": "https://adamsilver.io/blog/form-design-from-zero-to-hero-all-in-one-blog-post/", "Form UX: How to Design a User-Friendly Form": "https://blog.hubspot.com/marketing/form-ux", "Forms Tutorial": "https://www.w3.org/WAI/tutorials/forms/", "GPF - General Policy Framework (PDF) - 1.6 - Strategy (Data Collection)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "GPF - General Policy Framework (PDF) - 4.10 - UX and UI (Input Format)": "https://www.arcep.fr/uploads/tx_gspublication/general_policy_framework_for_the_ecodesign_of_digital_services_version_2024.pdf", "How Web Content Accessibility Guidelines Improve Digital Products": "https://www.mightybytes.com/insights/web-content-accessibility-guidelines/", "Ultimate Guide to Accessible Form Design": "https://www.uxpin.com/studio/blog/ultimate-guide-to-accessible-form-design/", "United Nations SDGS - Goal 1 - Poverty": "https://sdgs.un.org/goals/goal1#targets_and_indicators", "United Nations SDGS - Goal 10 - Inequality": "https://sdgs.un.org/goals/goal10#targets_and_indicators" } ] }, { "title": "Functional forms", "description": "Avoid using auto-completion or auto-suggest based on partial entry to conserve user bandwidth and reduce unnecessary server side requests. Support the use of helpful tooling, such as password managers, by not preventing autofill.", "resources": [ { "Autofill": "https://web.dev/learn/forms/autofill?hl=en", "Autofill in action: real-world insights": "https://developer.chrome.com/blog/autofill-insights-2024?hl=en", "Avoid Unnecessarily Complex Password-Creation Requirements (82% Don't)": "https://baymard.com/blog/password-requirements-and-password-reset", "Don't Get Clever with Login Forms": "https://bradfrost.com/blog/post/dont-get-clever-with-login-forms/", "GreenIT - 0014 - Prefer assisted input to autocomplete": "https://rweb.greenit.fr/en/fiches/RWEB_0014-prefer-assisted-input-to-autocomplete", "How to turn off form autocompletion": "https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion", "How to turn off password managers for fields": "https://www.stefanjudis.com/snippets/turn-off-password-managers/", "Making password managers play ball with your login form": "https://hidde.blog/making-password-managers-play-ball-with-your-login-form/", "Reducing the impact of autocompletion": "https://greenspector.com/en/reducing-the-impact-of-autocompletion/" } ] } ], "benefits": [ { "Accessibility": "Labeling your forms correctly and testing for accessibility and compatibility with a range of different devices and inputs reduces barriers. Autocomplete improves ease of use and efficiency for all use, especially those with additional accessibility needs. Well-labeled and accessible forms are more likely to be successfully completed.", "Conversion": "Building forms based on standards with ease of use and accessibility in mind boosts conversion, as more users are able to complete them.", "Economic": "Implementing more accessible and usable forms reduces frustration while increasing completion rates. This can reduce complaints, support costs, and abandonment.", "Environment": "Optimizing forms reduces the resources required to complete them, which reduces emissions.", "Privacy": "Collecting informed consent and providing helpful disclosures about cookies, data collection, and data processing within forms, alongside appropriate links to find further information in an accessible format, improves data privacy." } ], "GRI": [ { "materials": "Medium", "energy": "Low", "water": "Medium", "emissions": "Low" } ], "example": "
\r\n\t