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. With studies indicating that the internet accounts for approximately 3.7% of global carbon emissions (Source: Sustainable Web Design), it's clear that addressing our digital footprint is very important as businesses shift their operations online.
Nama Studio'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 to see 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.
Design
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 content is intuitively organized and easy to navigate. A strong attention was placed on the header and the footer structure, so that we could minimize the number of clicks needed to find the content. In a future iteration of the website, we are planning on implementing 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 network requests required to load the page. This not only improves loading times but also 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.
Focus on web performance
Achieving a faster page load times reduces carbon emissions by decreasing energy use across data centers, networks, and devices. As a matter of fact, 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 amount of 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). To mitigate this impact, we opted for a green hosting provider for our agency's website. 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.
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 and promote sustainability practices, as well as to show our commitment to the cause.
Looking ahead, we're committed to continuously enhance the sustainability and user experience of our website.
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 that the users can find information more quickly. Finally, we aim to minimize JavaScript and CSS files and to remove any unused code so that we have leaner data transfers.
To delve deeper into sustainable web design and discover additional resources, consider exploring the following materials:
- Sustainable Web Design
- Climateaction.tech
- Green Web Foundation
- Website Carbon Calculator
- Ecograder
- Greening Front End
- Lowwwcarbon
Conclusion
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.
As developers, have you integrated sustainability into your web development practices? I'd love to hear about your experiences and any eco-friendly initiatives you've implemented. Share your insights and tips with me! Your contributions can inspire others in our collective efforts to make the digital world more sustainable. Let's exchange ideas and work towards a greener future together.
Reach out and let's start the conversation!
