Here’s what we learned when using the World Wide Web Consortium’s Web Sustainability Guidelines to drive a more sustainable website redesign process that better meets the needs of people and the planet.

We just redesigned the Mightybytes website. Along the way, we learned a lot about web sustainability, accessibility, and the long-term care of digital products/services. 

Hold onto your hats because this is a hefty case study. Use the information below to explore how to apply sustainable web design principles and W3C’s Web Sustainability Guidelines (WSGs) to your next website redesign project.

In tandem with defining a more sustainable website redesign process to use on future projects, Mightybytes is also developing a new version of Ecograder. This new product includes Web Sustainability Guidelines as part of its core recommendations.

With this in mind, three primary drivers informed our website redesign approach to make the site as sustainable, accessible, and privacy-focused as possible. 

1. Good Software Extends Hardware Lifespan

Conforming to Web Sustainability Guidelines will ultimately reduce energy use and extend the lifespan of hardware across the system, including servers and end-user devices. Plus, improving sustainability also improves usability, performance, and other important website criteria. 

By designing a lightweight, modular site that works across devices, platforms, and assistive technologies, we improve the entire system. This also makes the system easier to maintain over time, which brings us to the next driver. 

2. Good Governance Improves Everything

A set-it-and-forget-it approach to digital products and services doesn’t work. Complex communications systems like websites or applications need to be effectively managed over time. Good governance policies and practices are crucial for both longevity and easy maintenance. They also help you build capacity.

• Accessibility governance: ensure easy access to information over time for all users
• Digital governance: improve administration and maintenance policies and practices for digital products and services
• Data governance: prioritize privacy, security, and sustainable data strategies to improve digital resilience

Because of this, long-term, stakeholder-driven governance strategies should inform any approach to redesigning a website or other digital product.

3. Experimentation Drives Innovation

Innovation can easily fall by the wayside if it’s not continuously prioritized and revisited during a project. We gave ourselves freedom to experiment, even though we knew it might push back our launch deadline or take up more resources.

We prioritized experimentation for the following reasons:

1. Learning opportunities: Defined best practices like the Web Sustainability Guidelines mentioned above continuously evolve, change, and improve over time. It can be tough to keep up.
2. Cone of uncertainty: Also, uncertainty can undermine success due to a common need for organizations to control project parameters. Conversely, embracing uncertainty and a growth mindset can help you improve your product or service in previously unconsidered ways. 

Even though the project might take longer, prioritizing experimentation ultimately drives better solutions and informs how we’ll approach future client engagements.

First, we pulled metrics to understand our baseline. Here’s how the site stacked up before the redesign.

Before the Redesign

Next, we assigned some rigorous goals for the project. Years of prior stakeholder research allowed us to forego several product roadmapping steps we might typically take at the outset of a website redesign project.

Goal #1: Clarify Our Value Proposition

First and foremost, we wanted the new site to better reflect our brand’s values and make it clear to prospective clients and others how these values inform our company mission and projects we deliver. 

1. Sustainable: We measurably improve performance, efficiency, and environmental impact in everything we do.
2. Accessible: We create inclusive experiences that reduce barriers to information access and opportunities, especially for people with disabilities and other marginalized communities.
3. Educational: We educate key project stakeholders to help them build skills and capacity.
4. Responsible: We lead with the latest data privacy, digital governance, and security best practices.
5. Measurable: We drive continuous improvement toward shared, long-term goals over time, prioritizing outputs over outcomes whenever possible.

Goal #2: Performance Budget

A maximum performance budget of 500 kb or less per page put guardrails on the number of features, media elements, and so on we could include across the site. This improves sustainability and ensures that the site works well in low-bandwidth environments and on older devices. It also helped us focus our content strategy.

The performance budget was not a hard-and-fast rule, but rather provided guidance. We occasionally made exceptions to this budget on blog posts or case studies where a visual process breakdown with examples is important to help people learn key topics.

In these cases, we still prioritized optimizing content as much as possible.

Goal #3: Digital Carbon Rating

Similarly, shooting for a digital carbon rating goal of ‘A’ or higher on all pages helped us prioritize sustainability as we implemented the redesign. This would require us to review our digital supply chain to better understand how to improve sustainability across the marketing stack.

Goal #4: Improve Usability & Accessibility

The site must work well with assistive technologies and provide a meaningful experience to people with a variety of cognitive and physical disabilities. As with all projects, we targeted Web Content Accessibility Guidelines 2.2, level ‘AA’ to achieve this.

Goal #5: Improve Navigation

Content on the site should be easy to find and quickly signpost people toward the information they need. Navigation labels might need to change as part of this process.

Goal #6: Content Strategy

Mightybytes’ website has long been a well-known resource for detailed content about responsible digital practices based on E-E-A-T principles—Experience, Expertise, Authoritativeness and Trustworthiness. 

Given our longstanding history, we asked ourselves, how might we take this sustainable content strategy to the next level on our website redesign project?

Here’s a dashboard reflecting the ‘after’ results of our redesign on top-level pages.

While not a monumental shift—the site already performed pretty well—these data points will drive continuous improvement.

To improve governance over time, ongoing website data analysis and reporting will help us identify improvement opportunities over time, including:

1. Compliance: Potential compliance issues for accessibility, sustainability, security, data privacy, and so on.
2. Marketing: Opportunities to improve conversion rates, qualified leads, and other more traditional digital marketing metrics. 

Details on how we achieved the stats above are in the sections below.

Here are some ways we struck a balance between designing a visually impactful website that aptly conveys our value proposition and one that is lean, performant, compliant with regulations and guidelines, and quickly provides people with the information they need. 

Browser Rendering

We utilized CSS styles and browser rendering to create lightweight content that reduced data transfer and minimized server requests. This included:

• Blog heroes: We defined visually compelling blog heroes that render in the browser using gradients and inline SVGs rather than raster image files. These can be found on the blog index page, individual posts, and tag or category list pages.
• Inline SVGs: Lightweight vector images served inline rather than as separate files gave us more flexibility. For example, color changes based on variables when the site is in light vs. dark mode help us save bandwidth over loading entirely new image files.

We’re looking into taking a similar approach with case studies as well. 

Design & Content Strategy

Tools like content briefs and efficient content workflows help you improve storytelling. For the website redesign, we utilized a one page, one purpose approach to designing content. To this end, we reviewed key pages using the following process:

• What’s possible: First, we explored all relevant resources for each page based on intent to ensure we weren’t missing anything important.
• What’s important: Next, we reviewed each page to ensure each element served that page’s purpose. This often meant stripping out components.
• What’s necessary: Finally, we optimized each page to reduce page size and data transfer as much as possible to maintain our performance budget and digital carbon rating goals.

For the new site, a full content audit wasn’t in-scope. However, we’ll review the entirety of our blog when time and resources allow.

Inevitably, experimentation reveals roadblocks or other challenges. Some of these were navigable. Others required that we abandon the experiment—all part of the process. Some examples are below.

Homepage Animation

First, we wanted a homepage animation to provide visual impact and lead visitors to important page components. However, web-based animations are notorious for using up bandwidth, impeding performance, and not working across older browsers or devices. 

• Challenge: Create balance between optimal performance and non-intrusive yet visually appealing animations that lead visitors down the homepage.
• Solution: Optimize animation that doesn’t loop (using more energy) or impede page performance (7kb script + 11kb web worker). Add Reduced Motion to the Accessibility Control Panel.

It took several cycles of trial-and-error before we landed on an animated solution that provided both the visual impact we wanted and didn’t impede performance.

SVG Issues

Next, we decided to use lightweight, vector SVG files for icons, logos, and other elements across the site. 

• Challenges: Using SVGs ended up presenting numerous challenges. 

1. Icons provided visual impact, especially for people with cognitive disabilities, but each icon increased the number of server requests.
2. Inline SVGs offered a potential solution to this, but they came with their own challenges, such as a requirement for content admins to edit code. 
3. However, inline SVGs don’t behave by the same rules as other images when it comes to sizing and need to be accounted for in CSS.
4. Some logos were only available as PNG files. How could we maintain visual integrity while also keeping page size down?

• Solution: We created unique solutions to each challenge above. 

1. We scripted a replacement for all SVG class and ID names to ensure each was unique.
2. This enabled us to add css to inline SVGs as necessary to constrain proportions and adjust sizing.
3. We also used CSS variables in our inline SVGs to change colors when the site is in light or dark mode.
4. For logos that were transparent PNGs instead of SVGs, we used css filters to change the color depending on light mode or dark mode.

Finally, we added numerous new features that played a key role in defining more sustainable website redesign practices.

B Corp Impact Hub

In 2025, B Lab, the organization that certifies B Corps, released a rigorous set of new standards. Transparency, continuous improvement, and real-time reporting are at the heart of these new standards. 

To address this, we created a B Corp Impact Hub that serves as a resource for Mightybytes to document certification requirements in real-time.

We also added individual pages covering our Impact Business Models and a page to house important company policy documents in a publicly available location:

• IBM Statements
• Company Policies
• Guidelines for Effective Partnerships

Accessibility Control Panel

We added an accessibility control panel to help users customize the site to best meet their needs. The control panel offers these features:

• Dark/light mode (more on this below)
• Adjust font size
• Make pages grayscale
• Make pages high contrast
• Reduce motion to stop elements from animating

This helps to provide a better experience for people with disabilities.

Dark Mode Default

Dark mode reduces energy use on OLED (Organic Light Emitting Diode) screens, which represent the biggest market share of screen technologies. However, rather than offering dark mode as an option users turn on—which uses more energy—we made it the default. 

However, dark mode doesn’t work for everyone. It can be a mixed bag for people with visual disabilities. For example, while dark mode can reduce eye strain for people with light sensitivity, it can also adversely affect people with astigmatism or dyslexia. 

To address this, visitors can use the control panel choices described above to customize the website to best meet their needs.

Strategic partners make the work we do possible while improving our company’s digital supply chain. Here’s how we engaged our partners on this work.

Third-Party Fonts

Along the way, we also learned that EcoSend, our email marketing partner, embeds a 74kb font in their web forms. Since we use this form on many site pages, it blew our performance budget. Plus, the font’s impact on visual design and form legibility was negligible. 

For some pages, despite having optimized the fonts we use, embedded fonts represented nearly 50% of page resources. On pages that require embedded images or other media, this could mean not meeting our performance budget and Digital Carbon Rating goals.

Thankfully, EcoSend was more than accommodating on this issue.

• Challenge: Embedded fonts in a third-party web form blows our performance budget across many pages.
• Solution: EcoSend is updating their service to include forms that are free of embedded fonts, significantly reducing bandwidth across their client base.

Website Analytics

We migrated away from Google Analytics to Cabin Analytics in order to better respect user privacy and support tools that prioritize web sustainability. Cabin offers the following sustainability features:

• Estimated emissions
• User controllable data disposal
• GDPR and CCPA privacy-compliant by default

Generative AI & Website Redesigns

In keeping with our Responsible AI policy, Mightybytes took an intentional approach to utilizing generative artificial intelligence during this project. 

• We used GreenPT, a more sustainable and privacy-friendly AI service, to create first drafts of policy docs and company statements. Final drafts were edited with human oversight.
• We used GitHub’s CoPilot to assist with web development, especially when devising proofs-of-concept for the homepage animation.

The web’s social and environmental impact is complex and increasing quickly with the rapid rise of generative AI. We need to redefine success in digital marketing so that the techniques outlined in this post live in harmony alongside more traditional marketing and product management practices.

For prospective clients, agencies must communicate clear processes to help stakeholders understand how they create value while aligning their work with responsible practices. 

We’ve nowhere near covered the possibilities with W3C’s Web Sustainability Guidelines in this case study. However, these and related guidelines can help organizations ensure their digital products and services adhere to emerging best practices in sustainability, data privacy, security, AI, and so on.

Ultimately, this will improve the organization and extend the shelf life of digital products and services it creates and manages.