Sustainable Web Development: Website Redesign with a Low Carbon Footprint
In today's digital age, sustainability isn't just about reducing physical waste; it's also about minimizing the environmental impact of our online presence. Studies indicate that the Internet accounts for approximately 3.7% of global carbon emissions (Source: Sustainable Web Design), so it's clear that addressing our digital footprint is very important as businesses shift their operations online.
My company’s mission is to dedicate at least one-third of our work capacity to projects that are inclusive, eco-friendly, and supportive of diversity. To be the change we want in the world, we recently embarked on a journey to redesign our website with sustainability as a guiding principle. In this article, we'll explore some of the key decisions and efforts we made to create a more eco-friendly online platform.
1. Design Phase
Before the pixels hit the screen, we laid the groundwork for sustainability by planning our website's structure. Information architecture is a key part of the design process. A well-structured architecture makes information easy to find and understand for the visitors of a website. We wrote down a map of all the pages and all the content for each page, doing our best to ensure that the content is intuitively organized and easy to navigate. A lot of attention was paid to the header and the footer structure to minimize the number of clicks needed to find the content. In a future iteration of the website, we plan to implement search by keyword to make content even easier to find.
Enhancing Accessibility and User Experience
In addition to environmental considerations, we also focused on optimizing the user experience to reduce unnecessary clicks and improve navigation efficiency. We incorporated strong contrast between elements and designed easily identifiable buttons to minimize user errors and enhance accessibility. By streamlining the browsing experience, we aim to reduce the overall energy expenditure associated with website interactions.
Font Selection
Another conscious decision we made in the design phase was to limit the choice to one custom font. We recognize that having two different fonts for the headings and body is aesthetically pleasing, but we leveraged different font weights and sizes to achieve a similar effect. By reducing the variety of fonts, we want to minimize the network requests required to load the page. This improves loading times and reduces the energy consumption associated with transferring data over the Internet. To improve accessibility, we also set a system font as a fallback font, and to improve speed, we are using WOFF and WOFF2 font formats for better compression.
2. Focus on Web Performance
Achieving faster page load times reduces carbon emissions by decreasing energy use across data centers, networks, and devices. Every time you interact with a website, the following actions are performed:
- When a user visits the page, a network request is sent to the server that hosts your website.
- The server sends back a response.
- The browser processes the data received from the server.
All of this consumes electricity, so you can imagine how a large page weight can quickly increase the electricity needed. As of today, the average page weight across our website is 0.44g per page, 50% cleaner than the global average.
Choose Green Hosting
Data centers supporting the Internet consume a significant amount of energy, with typical centers using between 11 and 19 million liters of water per day (Source: Sustainable Web Design). We opted for a green hosting provider for our agency's website to mitigate this impact. Shopify's green-hosted domain and CDN, powered by environmentally friendly energy sources and running on Google Cloud, align with our commitment to sustainability.
Optimized Images
Images are an integral part of web design, but they can also contribute to excessive file sizes and increased loading times. To mitigate this, we focused on using black and white imagery and we optimized images to reduce the weight of files visitors need to download. This not only enhances the user experience but also minimizes the energy required to load our website.
We also lazy loaded images below the fold, served them in next-gen formats like webp (Shopify does this for us), and provided different values in the srcset attribute to serve an appropriate image for each screen size. This guide by the Shopify Performance Team was super helpful for us to understand the intricacies of image optimization.
3. Continuous Monitoring and Improvement
To raise awareness among our visitors about the environmental impact of digital activities and to keep ourselves accountable for how the pages perform over time, we integrated a website carbon emissions calculator widget. This interactive tool allows users to estimate the carbon footprint generated by the website, including visits and data transfers. By making this information visible, we aim to encourage conscious digital consumption, promote sustainability practices, and show our commitment to the cause.
Looking ahead, we're committed to continuously enhancing our website's sustainability and user experience.
We plan to introduce a dark mode feature, providing users with an alternative interface that reduces energy consumption, particularly for devices with OLED and LED screens. Devices with OLED and LED screens can save energy by utilizing dark mode, as these screens can turn off individual pixels to display darker colors, thereby reducing overall energy consumption compared to traditional LCD screens.
Another improvement involves adding search functionality so users can find information more quickly. Finally, we aim to minimize JavaScript and CSS files and remove any unused code for leaner data transfers.
To delve deeper into sustainable web design and discover additional resources, consider exploring the following materials:
Redesigning our company website with sustainability in mind has been a rewarding journey that aligns with our commitment to environmental responsibility. By implementing strategies such as streamlined font selection, optimized image assets, and user-friendly design elements, we've not only improved the performance and accessibility of our website but also reduced its environmental footprint. Addressing the environmental impact of our digital presence is an essential step towards a greener future.