Digital design in the age of sustainability
Background
When designing the new snohetta.com, we wanted to use the process to challenge ourselves and reflect upon what it means to create a sustainable website. From early on, we set a goal of being as transparent as possible about the project and to share some reflections and learning.
While the internet may be digital, its footprint is very real. The internet is a global network of physical cables. The data that makes up the internet is stored at a physical location, with a large number of servers that run on energy. Cooling to prevent the servers from overheating also takes energy. And each prompt on a website leads to a local download of text, images, and videos, which consumes energy too. Adding up all these parts results in quite large CO2 emissions, which most of us don't think about while being online large parts of the day on our various devices.
ITC among the world’s worst emitters
According to calculations, the ITC sector is responsible for approximately 1.8%–2.8% of global carbon dioxide emissions (source). This is almost as much as South Korea and Germany emit yearly (source). Or, you could say that if the ITC sector were a country, it would be in 8th place of the world's worst emitters. Calculating energy use is quite complex, and many experts disagree on the exact numbers. Still, these figures show the significant responsibility that the ITC sector also has for reducing its emissions.
We have given users the choice of how they can view the website and see what a more sustainable web experience can look like.
A digital, sustainable aesthetic
In design, constraints are catalysts for change, so what can we do to help find solutions? How can we work smarter with digital design and creative technology to reduce the cost of web surfing in an age where everything is digital and more people are going online on bigger laptops and smarter smartphones? What if we could create better and greener websites by not over-designing them?
Throughout the explorations of designing our website, we've seen how building a sustainable site largely affects experience and aesthetics. In a way, this is going against current design trends, which are a lot about movement, interactivity, and immersive experiences. For the new Snøhetta website, we wanted to design something more sustainable yet still create an immersive experience – in a slightly different way.
Approximately 16 million colors.
Approximately 75 % of 16 million colors.
Sustainability Panel
With the new website, we want to empower and enlighten our users about digital sustainability. One of the new features to do this is a sustainability panel that is available when you first enter the website and in the menu. These settings won't save the world, but they help make the site a little more sustainable.
Using dark mode can reduce some of your screen's energy and is one of the more popular ways to provide a more sustainable web alternative in recent years. However, the actual effect of this is small, as only OLED displays save power while in dark mode. Unlike LCD or LED screens, OLED screens do not require energy to block light. More relevantly, however, the dark mode can often be more comfortable to read than a bright white screen. Read more about the difference between OLED and LED/LCD here.
When websites play animations and transitions (such as spinning footer logos), the effects are pulled from a third-party library and loaded for each visit to a page. This data can take up a lot of space. The simplified button turns off all these transitions and animations.
The low-resolution filter reduces the image size by about 75 %. When developing it, we tested how we could maintain a certain aesthetic quality in the images while reducing the weight of the image. Initial experiments with simply reducing the image's resolution successfully reduced the image size. However, it looked a lot like lazy, low-quality versions of the same image. We needed something to make up for sacrifices in quality.
A technique often used in low-resolution images is a process called dithering. It distributes the colors over a limited palette of 256 colors instead of the approximately 16 million colors normally used. This significantly reduces data usage in image storage. A side effect is that you can clearly see colors that create distinct bands (color bands) due to the limited range of colors.
To fix this, the second step is to distribute colors over a larger area by checking how far the original colors are from the new, limited color. This has the fortunate effect of creating visually more exciting images. It brings us closer to a distinct style rather than being a technical compromise.
For our website, we have looked at how we can communicate the practice of a multidisciplinary, global architecture and design firm and find good ways to create immersive experiences while considering the physical impact a website like this can have.
Summary
There are certain considerations anyone can make to create a more energy-efficient website. Here's a brief summary of the things we've been working on – and will continue to work on – to make sure we're doing what we can.
Images and videos are the elements that take up the most space on the internet. As a global architecture and design practice, we depend on using images and sometimes videos to showcase our work. However, we have reduced unnecessary data usage by being aware of image sizes, compressing, and avoiding automatic playback of videos and gifs.
Social sustainability is at Snøhetta's core. As part of this, we have made an active choice to respect our visitor's privacy by not using cookies to track, collect or store personal data. Neither do we sell it to anyone. A good side effect of less tracking is often also a faster website.
To help us better understand how this website is used, we use the open-source software Plausible, which is completely in line with GDPR, CCPA, and PECR. We’ve written more about it here.
Choosing a green hosting option is one of the biggest factors when building sustainable websites. This website is hosted by DigitalOcean. They have taken a clear position on both social and environmental sustainability, and run on renewable energy.
See our open Are.na board where we collect references and ideas about working with sustainable websites.
Sources
We've been inspired by many talented people who have been great resources for us. The following is a list of the people and projects that have influenced our work on our new website. If you have any questions or comments on the topic, we would love to get in touch with you.
