Snøhetta
⛰

Our website

Digital design in the age of sustainability

Background

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.

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.

When designing the new snohetta.com, we wanted to use the process to challenge ourselves and reflect upon what it means to create a more 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.

A 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 more sustainable 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.

Test your own website using Website Carbon Calculator.

Calculations

Since launching the new site in March 2023, the site has had over 4,4 million page views and over 1,4 million unique visitors. With a site like this, visited by so many, the implications of creating a more sustainable (energy efficient) site become bigger than we first expected.

When using the tool Website Carbon Calculator we get a A+ rating and are measured to be cleaner than 91% of all web pages globally. They calculate that 0.09g of CO2 is produced every time someone visits the webpage. The tool estimates that our site, with 150.000 monthly page views, produces an amount of 170 kg of CO2. A selected few of our competitors all score within a range that's equivalent of 700 to 900 kg of CO2.

With the tool Ecograder we get a score 97 out of 100, and the site measures that 0.12 grams CO2 is emitted per page load. The tool estimates our site to be 134.23% smaller than the average web page. The website gets a score of 97 out of 100 using Google Lighthouse.

List view on the Project site: 17.6 MB transferred.

Grid view on the Project site: 35.8 MB transferred.

Explorations

Throughout the process of designing the site, we've constantly testet and experimented to get the best acchivable results. The challenge has been how we could create an emersive portfolio experience on our site, while stile maintaining our goals.

On our site, we've used a consistent use of list design to reduce the amount of images loaded when exploring. We discovered that we could reduce the amount of data loaded by 50% by using a list view on the Projects site, contrary to the classic grid view option. This being said, our images are compressed largely and we've tried to make sure subpages dominated by images are as good as they could be.

An image on our site with using the global compression settings. An average image can consist of circa 16 million colors. 

An image on our site with using the low-res image setting. The image size is reduced to 60-80% of the original file size.

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.

Our website deliberately hosts images at lower resolutions. Employing the AVIF image format, we've successfully compressed them while retaining their visible quality. However, we've taken an additional step by exploring what we've termed the 'low-res filter.' This not only enhances our image compression techniques but also sheds light on commonly used formats and sizes in online communication.

The low-resolution filter shrinks image sizes by around 60 to 80%. As we crafted this feature, our aim was to preserve a particular aesthetic while trimming image weight. Early trials involved merely reducing image resolution beyond the capabilities of the AVIF format, effectively reducing size but resulting in images that seemed lackluster, resembling low-quality versions of the originals. We sought an alternative to offset these quality compromises.

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.

What can you do?

There are certain considerations anyone can make to create a more energy-efficient website. If you yourself want to make your website more conscious, we've created a check list over what you should keep in mind. Our technical partner Værsågod has also written in detail about the technical aspects of the new website, which you can read here (in Norwegian).

Choosing a green hosting option is one of the easiest things you can do when building a more sustainable website. However, it doesn't do the job alone, you still need to design an efficient site. Our website is hosted by DigitalOcean. They have taken a clear position on both social and environmental sustainability, and run on renewable energy.

It's not necessary to add all images in 4k resolutions. Who's looking at your website at the cinema anyway? Use image formats like WebP and AVIF.

Limit or be cautious of the usage of autoplaying videos. Consider when and where you use it, and set a max size for how big the video can be. Usage video compression tools like Handbrake to reduce the size of your video. 

You don't need to remove all images. But have in mind how many images people will see, and when. We've for example added a list view option to all of our sites that have a lot of images shown in a grid, so that people looking for a specific person or project can reduce the images downloaded per view.

The easier it is to find the right content on your site, the easier it is to reduce unnecessary surfing and energy use. How many click does it take a user to find what's relevant on your site?

All animations and effects used third party libraries or JavaScript to function. Try to reduce the amount of effects, and test how well they work before using them.

Makes it so that the site loads in images gradually, instead of everything all at once. Also makes for a better user experience across types of devices. 

How much unnecessary content is on your site? Delete unused content regularly. 

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.

Use the network function under inspect element in Chrome, to check how much data is being downloaded when using your site. Also test regularly using tools like Website Carbon Calculator and Ecograder.

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 some of the studies, platforms, 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.

Press and Awards

Contact

Graphic & Digital Projects