Edit

My rating of web sustainability guidelines

The Web Sustainability Guidelines are a very new standard, which I’ve been reviewing extensively. Here is my personal rating of how useful / appealing I found individiual success criteria.

Understanding the ratings

Obligatory disclaimer that this is a very personal rating, based on my perspective as an open source web developer. In particular,

  • Though I appreciate the broad definition on the “sustainability” scope of the guidelines, and I think it’s the right choice, I’m personally primarily interested in the environmental aspects.
  • There are other well established guidelines for specific aspects of our industry (accessibility, security, etc.) – so I’m rating the guidelines compared to other available resources, rather than in complete isolation.

The primary purpose of my rating was to think of which guidelines I would want to see considered for projects I’m involved with. Whether at work, or in the open source universe, or recommending what colleagues and friends should follow.

My classification

Here is how I personally rated the 238 success criteria (and how many SCs I found for each rating):

  1. ⭐ Highlight (13): those are the stand-out items I would recommend to anyone.
  2. 💚 Good (67): consider first for most projects.
  3. 💛 Ok (98): if time allows. Either not broadly relevant to all projects, or not particularly impactful or actionable.
  4. 🔴 Meh (60): skip. Either the guideline is vague, or I disagree with the premise, or it’s low-impact / not actionable.

Highlights

Here are the 13 success criteria I earmarked as “highlights”, with the most potential for the type of work I do:

All ratings

Here is my full rating of all 238 success criteria:

Rating Success Criterion
  2. User-Experience Design
  2.1 Undertake Systemic Impacts Mapping
💚 External Variables
  2.2 Assess and Research Visitor Needs
💛 Identify And Define
⭐ Visitor Constraints
💛 Barriers And Access
🔴 Barrier Removal
💛 Seat At The Table
  2.3 Research Non-Visitor’s Needs
🔴 Non-Human Impact
  2.4 Consider Sustainability in Early Ideation
💛 Wireframes And Prototypes
💛 Participation And Testing
  2.5 Account for Stakeholder Issues
💚 Human-Centered Brainstorming
⭐ Ecological Brainstorming
  2.6 Create a Frictionless Lightweight Experience by Default
🔴 Performance By Default
💛 Efficient Paths
💚 Patterns For Efficiency
⭐ Distraction-Free Design
🔴 Eliminate The Non-Essential
🔴 User-Initiated Actionable Content
  2.7 Avoid Unnecessary or an Overabundance of Assets
🔴 Decorative Design
  2.8 Ensure Navigation and Way-Finding Are Well-Structured
💚 Navigation And Search
💚 Navigable Sitemaps
🔴 New Content
  2.9 Respect the Visitor’s Attention
🔴 Respecting Attention
🍏 Avoid Distraction
💛 Avoid Attention-keeping
  2.10 Use Recognized Design Patterns
💚 Design Patterns
  2.11 Avoid Manipulative Patterns
🔴 Dark and Deceptive Design Patterns
💛 Using Advertisements
💛 Page Tracking
  2.12 Document and Share Project Outputs
💛 Deliverables Reusability
💛 Deliverables Documentation
  2.13 Use a Design System To Prioritize Interface Consistency
💚 Design System
  2.14 Write With Purpose, in an Accessible, Easy To Understand Format
🔴 Write Clearly
💛 Content Formatting
💚 Search Engine Optimization (SEO)
  2.15 Take a More Sustainable Approach to Image Assets
⭐ Need For Images
💚 Optimize Images
⭐ Lazy Loading
💛 Sizing And Deactivation
💚 Management And Usage
  2.16 Take a More Sustainable Approach to Media Assets
⭐ Need For Media
💚 Optimize Media
⭐ Lazy Loading
💛 Labels And Choice
💚 Management And Usage
  2.17 Take a More Sustainable Approach to Animation
🔴 Need For Animation
🔴 Avoid Overburdening
💛 Control Animation
  2.18 Take a More Sustainable Approach to Typefaces
💚 Default Typefaces
💚 Font Optimization
  2.19 Provide Suitable Alternatives to Web Assets
💚 Open Formats
💛 Font Subsetting
💛 Alternative Text
💛 Audio Alternatives
💛 Video Alternatives
  2.20 Provide Accessible, Usable, Minimal Web Forms
💛 Form Simplicity
💛 Form Functionality
  2.21 Support Non-Graphic Ways To Interact With Content
🔴 Alternative Interactions
  2.22 Provide Useful Notifications To Improve The Visitor’s Journey
💚 Notification Justification
💚 Notification Control
🔴 Prompts And Responses
  2.23 Reduce the Impact of Downloadable or Physical Documents
💛 Printing Documents
💛 Optimize Documents
💛 Optimize Delivery
💛 Labels And Choice
  2.24 Create a Stakeholder-Focused Testing & Prototyping Policy
💛 New Features And Perspectives
🔴 Resourcing And Viability
🔴 Training And Onboarding
💛 Testing And Validation
  2.25 Conduct Regular Audits, Regression, and Non-Regression Tests
🔴 Regular Issue Testing
🔴 Non-Regression Tests
🔴 Regression Tests
  2.26 Analyze The Performance Of The Visitor Journey
🔴 Measurement And Compliance
  2.27 Incorporate Value Testing Into Each Major Release-Cycle
🔴 Usage Changes
  2.28 Incorporate Usability Testing Into Each Minor Release-Cycle
🔴 Usability Testing
  2.29 Incorporate Compatibility Testing Into Each Release-Cycle
💚 Compatibility Policy
💚 Maintaining Compatibility
💛 Frequent Testing
💛 Mobile Friendly
💛 Progressive Web Application’s (PWAs)
  3. Web Development
  3.1 Identify Relevant Technical Indicators
⭐ Performance Goals
  3.2 Minify Your HTML, CSS, and JavaScript
💚 Minify Code
  3.3 Use Code-Splitting Within Projects
💚 Code Splitting
  3.4 Apply Tree Shaking To Code
💚 Remove Redundancy
  3.5 Ensure Your Solutions Are Accessible
💚 Accessibility Compliance
💛 Enhancing For Accessibility
🔴 Electronic Inequalities
  3.6 Avoid Code Duplication
🔴 Remove Or Simplify
🔴 Iteration Over Recreation
🔴 Organize Code Arrangement
  3.7 Rigorously Assess Third-Party Services
💚 Assess Third-Parties
💛 Third-party Implementation
💛 Libraries And Frameworks
💛 Self-Hosting
💛 Avoiding Dependency
  3.8 Use HTML Elements Correctly
💚 Semantic Code
💛 Optional Features
💛 Avoid Non-standard Code
💛 Custom Code
  3.9 Resolve Render Blocking Content
💛 Asynchronous Code
💛 Priority Loading
  3.10 Provide Code-Based Way-Finding Mechanisms
💚 Metadata And Microdata
💛 Search Engines
💛 Accessibility Aids
  3.11 Validate Form Errors and External Input
💛 Error Validation
💛 Label Elements
💚 Allow Paste
  3.12 Use Metadata Correctly
💛 Required Elements
💛 Meta Tags
💛 Structured Data
  3.13 Adapt to User Preferences
💚 Media and Preference Queries
  3.14 Develop a Mobile-First Layout
💚 Mobile-First
💚 Responsive Design
💚 Carbon Aware Design
💚 Alternative Browsing
  3.15 Use Beneficial JavaScript and Its APIs
🔴 Beneficial JavaScript
💚 API Requests
  3.16 Ensure Your Scripts Are Secure
💛 Script Security
  3.17 Manage Dependencies Appropriately
💚 Dependency Management
💚 Dependency Necessity
💚 Dependency Updates
  3.18 Include Files That Are Automatically Expected
💛 Expected File Formats
  3.19 Use Plaintext Formats When Appropriate
💚 Beneficial File Formats
  3.20 Avoid Using Deprecated or Proprietary Code
💛 Deprecated Code
💚 Outdated Code
  3.21 Align Technical Requirements With Sustainability Goals
🔴 Identify Requirements
🔴 Optimized Methodology
🔴 Static VS Dynamic
🔴 Expandability Considerations
🔴 Interface Impact
  3.22 Use the Latest Stable Language Version
💛 Versioning
  3.23 Take Advantage of Native Features
💛 Native Over Custom
  3.24 Run Fewer, Simpler Queries As Possible
💚 Database Queries
  4. Hosting, Infrastructure and Systems
  4.1 Choose a Sustainable Hosting Provider
💛 Monitor Metrics
💛 Equipment Longevity
💛 Recycling Waste
💚 Renewable Electricity
💛 Remaining Emissions
  4.2 Optimize Browser Caching
⭐ Server-side Caching
💛 Offline Access
  4.3 Compress Your Files
💛 Server-side Compression
💚 Media Compression
  4.4 Use Error Pages and Redirects Carefully
💚 Error Pages
💚 Redirection
  4.5 Limit Usage of Additional Environments
⭐ Unused Environments
  4.6 Automate To Fit the Needs
💛 Automate Tasks
💚 Necessitate Tasks
💛 Automated Scaling
💛 Security Tooling
  4.7 Maintain a Relevant Refresh Frequency
⭐ Refresh Frequency
  4.8 Be Mindful of Duplicate Data
💛 Data Backups
  4.9 Enable Asynchronous Processing and Communication
💚 Batch Processing
💛 Protocol Usage
  4.10 Consider CDNs and Edge Caching
💚 Content Delivery Network’s (CDNs)
🔴 Sustainability Commitment
🔴 Local Servers
🔴 Avoid Caching Inappropriate Resources
  4.11 Use the Lowest Infrastructure Tier Meeting Business Requirements
💚 Lowest Requirements
  4.12 Store Data According to Visitor Needs
💛 Reduce Redundancy
💛 Expiration Dates
💛 Classify And Tag
💛 Justify Storage
💛 Optimize Logging
💚 Compress Storage
  5. Business Strategy and Product Management
  5.1 Have an Ethical and Sustainability Product Strategy
💚 Statement Availability
⭐ Achievements And Compliance
💛 Governance Over Time
🔴 Onboarding New Members
💛 Documentation
💛 Renewable Showcasing
  5.2 Assign a Sustainability Representative
💛 Ecological Referee
  5.3 Raise Awareness and Inform
💚 Inform And Train
💛 Active Participation
  5.4 Communicate the Ecological Impact of User Choices
💚 Impact Communication
  5.5 Estimate a Product or Service’s Environmental Impact
💚 Life-cycle Analysis
💚 Competitor Analysis
  5.6 Define Clear Organizational Sustainability Goals and Metrics
💚 Sustainability Goals
  5.7 Verify Your Efforts Using Established Third-Party Business Certifications
💛 Certification Achievement
💛 Certification Maintenance
  5.8 Implement Sustainability Onboarding Guidelines
💛 Training Materials
💛 Progress Incentivisation
💚 Negative Variables
  5.9 Support Mandatory Disclosures and Reporting
💛 Policies And Practices
💛 Impact Report
🔴 Standards And Policies
🔴 Impact Reduction
  5.10 Create One or More Impact Business Models
🔴 Theory Of Change
  5.11 Follow a Product Management and Maintenance Strategy
💛 Management And Maintenance
💛 Planning Strategy
🔴 Resourcing Products
🔴 Resource Measurement
  5.12 Implement Continuous Improvement Procedures
🔴 Continuous Improvement
🔴 Agile Reviews
🔴 Iterative Consideration
💛 Functionality Decisions
💛 Security Updates
🔴 Skills And Maintenance
  5.13 Document Future Updates and Evolutions
💚 Feature Changes
  5.14 Establish if a Digital Product or Service Is Necessary
💛 Sustainable Development Goals
💚 Creation Evaluation
💛 Avoid Duplication
💛 Obstacle Consideration
  5.15 Determine the Functional Unit
💚 Life-cycle Assessment
  5.16 Create a Supplier Standards of Practice
💚 Vetting Potential Partners
💛 Collaborative Measurement
💛 Informative Partner Promotion
  5.17 Share Economic Benefits
🔴 Living Wage
🔴 Incentivisation
💚 Employee Benefits
🔴 Legislation Advocation
  5.18 Share Decision-Making Power With Appropriate Stakeholders
🔴 Decision-Making
  5.19 Use Justice, Equity, Diversity, Inclusion (JEDI) Practices
💛 JEDI Practices
💛 Accessibility Policy
🔴 JEDI Training
🔴 JEDI Improvements
🔴 JEDI Legislation
  5.20 Promote Responsible Data Practices
💛 Privacy Policy
🔴 Data Ownership
🔴 Data Protection
  5.21 Implement Appropriate Data Management Procedures
💚 Outdated Content
🔴 Data Controllers
  5.22 Promote and Implement Responsible Emerging Technology Practices
🔴 Emerging Technologies
🔴 Disruptive Technology
🔴 Technology Legislation
  5.23 Include Responsible Financial Policies
💚 Fuel Divestment
💛 Responsible Finance
  5.24 Include Organizational Philanthropy Policies
💚 Philanthropy Policy
💚 Voluntary Work
  5.25 Plan for a Digital Product or Service’s Care and End-of-Life
💛 End-of-life Care
  5.26 Include E-Waste, Right-To-Repair, and Recycling Policies
💛 E-Waste Policy
💛 Recycling And Repairing
💛 Refurbishment Strategy
  5.27 Define Performance and Environmental Budgets
⭐ Environmental Budget
💚 Performance Budget
💚 Measurable Improvements
🔴 Capacity And Maintenance
  5.28 Use Open Source Tools
💛 Open Source Policy
🔴 Collaboration
💛 Contribution

Summarizing by guideline

To summarize this a bit, we can calculate a score at the “guideline” level. We assign a “5/5” to the “Highlight” rating, “4/5” for “Good”, “3/5” for “Okay”, and “1/5” for the “Meh” rating.

With this methodology, we can calculate an average score of 2.97/5 across all guidelines. And by area:

  • 2.73/5 for 2. User-Experience Design.
  • 3.28/5 for 3. Web Development.
  • 3.61/5 for 4. Hosting, Infrastructure and Systems.
  • 2.79/5 for 5. Business Strategy and Product Management.
Rating Guideline
  2. User-Experience Design
4 2.1 Undertake Systemic Impacts Mapping
3 2.2 Assess and Research Visitor Needs
1 2.3 Research Non-Visitor’s Needs
3 2.4 Consider Sustainability in Early Ideation
4.5 2.5 Account for Stakeholder Issues
2.5 2.6 Create a Frictionless Lightweight Experience by Default
1 2.7 Avoid Unnecessary or an Overabundance of Assets
3 2.8 Ensure Navigation and Way-Finding Are Well-Structured
2.66 2.9 Respect the Visitor’s Attention
4 2.10 Use Recognized Design Patterns
1.66 2.11 Avoid Manipulative Patterns
3 2.12 Document and Share Project Outputs
4 2.13 Use a Design System To Prioritize Interface Consistency
2.66 2.14 Write With Purpose, in an Accessible, Easy To Understand Format
4.2 2.15 Take a More Sustainable Approach to Image Assets
4.2 2.16 Take a More Sustainable Approach to Media Assets
1.66 2.17 Take a More Sustainable Approach to Animation
4 2.18 Take a More Sustainable Approach to Typefaces
3.2 2.19 Provide Suitable Alternatives to Web Assets
3 2.20 Provide Accessible, Usable, Minimal Web Forms
1 2.21 Support Non-Graphic Ways To Interact With Content
3 2.22 Provide Useful Notifications To Improve The Visitor’s Journey
3 2.23 Reduce the Impact of Downloadable or Physical Documents
2 2.24 Create a Stakeholder-Focused Testing & Prototyping Policy
1 2.25 Conduct Regular Audits, Regression, and Non-Regression Tests
1 2.26 Analyze The Performance Of The Visitor Journey
1 2.27 Incorporate Value Testing Into Each Major Release-Cycle
1 2.28 Incorporate Usability Testing Into Each Minor Release-Cycle
3.4 2.29 Incorporate Compatibility Testing Into Each Release-Cycle
  3. Web Development
5 3.1 Identify Relevant Technical Indicators
4 3.2 Minify Your HTML, CSS, and JavaScript
4 3.3 Use Code-Splitting Within Projects
4 3.4 Apply Tree Shaking To Code
2.66 3.5 Ensure Your Solutions Are Accessible
1 3.6 Avoid Code Duplication
3.2 3.7 Rigorously Assess Third-Party Services
3.25 3.8 Use HTML Elements Correctly
3 3.9 Resolve Render Blocking Content
3.33 3.10 Provide Code-Based Way-Finding Mechanisms
3.33 3.11 Validate Form Errors and External Input
3 3.12 Use Metadata Correctly
4 3.13 Adapt to User Preferences
4 3.14 Develop a Mobile-First Layout
2.5 3.15 Use Beneficial JavaScript and Its APIs
3 3.16 Ensure Your Scripts Are Secure
4 3.17 Manage Dependencies Appropriately
3 3.18 Include Files That Are Automatically Expected
4 3.19 Use Plaintext Formats When Appropriate
3.5 3.20 Avoid Using Deprecated or Proprietary Code
1 3.21 Align Technical Requirements With Sustainability Goals
3 3.22 Use the Latest Stable Language Version
3 3.23 Take Advantage of Native Features
4 3.24 Run Fewer, Simpler Queries As Possible
  4. Hosting, Infrastructure and Systems
3.2 4.1 Choose a Sustainable Hosting Provider
4 4.2 Optimize Browser Caching
3.5 4.3 Compress Your Files
4 4.4 Use Error Pages and Redirects Carefully
5 4.5 Limit Usage of Additional Environments
3.25 4.6 Automate To Fit the Needs
5 4.7 Maintain a Relevant Refresh Frequency
3 4.8 Be Mindful of Duplicate Data
3.5 4.9 Enable Asynchronous Processing and Communication
1.75 4.10 Consider CDNs and Edge Caching
4 4.11 Use the Lowest Infrastructure Tier Meeting Business Requirements
3.16 4.12 Store Data According to Visitor Needs
  5. Business Strategy and Product Management
3.16 5.1 Have an Ethical and Sustainability Product Strategy
3 5.2 Assign a Sustainability Representative
3.5 5.3 Raise Awareness and Inform
4 5.4 Communicate the Ecological Impact of User Choices
4 5.5 Estimate a Product or Service’s Environmental Impact
4 5.6 Define Clear Organizational Sustainability Goals and Metrics
3 5.7 Verify Your Efforts Using Established Third-Party Business Certifications
3.33 5.8 Implement Sustainability Onboarding Guidelines
2 5.9 Support Mandatory Disclosures and Reporting
1 5.10 Create One or More Impact Business Models
2 5.11 Follow a Product Management and Maintenance Strategy
1.66 5.12 Implement Continuous Improvement Procedures
4 5.13 Document Future Updates and Evolutions
3.25 5.14 Establish if a Digital Product or Service Is Necessary
4 5.15 Determine the Functional Unit
3.33 5.16 Create a Supplier Standards of Practice
1.75 5.17 Share Economic Benefits
1 5.18 Share Decision-Making Power With Appropriate Stakeholders
1.8 5.19 Use Justice, Equity, Diversity, Inclusion (JEDI) Practices
1.66 5.20 Promote Responsible Data Practices
2.5 5.21 Implement Appropriate Data Management Procedures
1 5.22 Promote and Implement Responsible Emerging Technology Practices
3.5 5.23 Include Responsible Financial Policies
4 5.24 Include Organizational Philanthropy Policies
3 5.25 Plan for a Digital Product or Service’s Care and End-of-Life
3 5.26 Include E-Waste, Right-To-Repair, and Recycling Policies
3.5 5.27 Define Performance and Environmental Budgets
2.33 5.28 Use Open Source Tools

How to use this

There’s not necessarily much wisdom for others to gain from my own ratings, as they’re directly based on my experience and what’s relevant within my own context. This also makes it possible to create a more nuanced list of highlights! Here’s everything with a “4” and up: