Snøhetta
Together with Snøhetta Design, we built the new global websites for Snøhetta in winter 2023.
With Snøhetta's focus on sustainability and accessibility, it was natural for Snøhetta Design to prioritize this when creating the new website. It is easy to forget that what happens digitally and in the "cloud" actually leaves a footprint. The server on which the website is hosted, the routers it passes through on its journey through the internet, and the device that is used to display it - all consume energy. Although it is difficult to measure exactly how many resources a website uses, there are a couple of things we know are factors:
- How much data needs to be transferred to display the website
- How much resources the user's device needs to display the website
So we jumped into the project with death-defying enthusiasm, aiming to create an interesting and functional website that also attempted to address these two points. How did it go? Keep reading.
Technology
- Craft CMS
- Azure Active Directory SSO
- OpenAsset
Pictures - the biggest culprit
Pictures and videos make up a very large portion of the size of most websites. A website with only text would be the best option, but it is unrealistic for most companies. And for Snøhetta, it is essential to be able to document their projects using images. It was therefore natural to start by looking at how we could optimize these beyond transforming, compressing them, and delivering using modern file formats such as WebP and AVIF, which we normally do.
We explored various directions, but it quickly became clear that some of the directions were more visually appealing than others. Reducing the number of colors, dithering, and upscaling images without anti-aliasing created an expression that brought back memories from the time when CGA, EGA, and VGA were the screen standards, and Monkey Island was the best game ever made.
We reminisced and experimented, and eventually came up with something we liked (16 colors, Floyd-Steinberg dithering, GIF, and 2-4 times upscaling). This gave us a distinct visual expression and a 60-80% reduction in file size.
Optimize, optimize, optimize
With the images completed, we tackled all the other things we could optimize.
Javascript is the main culprit when it comes to resource usage on the user's device, so we minimized its usage and divided the code into smaller pieces that could be loaded on demand. We created a simplified mode where animations and interactivity are minimized, and even less Javascript is loaded.
In addition, we implemented static page caching to minimize resource usage on the server, and placed resources behind a CDN so that they are loaded from access points closer to the user. Like all websites we manage, the website is hosted on DigitalOcean's data centers powered by green energy.
The result is an unusually lightweight website, which in simplified mode with low-res images is as light as a feather.
A simpler editor's everyday life
Snøhetta's old website was built on a proprietary content management system where content and design were closely linked. This was perceived as cumbersome and inflexible for the editors at Snøhetta. The result was that few people were involved in publishing content, and the website often felt outdated.
We built the website on Craft CMS, where content and design are independent of each other. We modeled the content structure to be intuitive for the tasks the editors at Snøhetta needed to perform, and created a toolbox with modules that provided great flexibility.
In addition, we integrated Snøhetta's single sign-on solution in Microsoft Azure, both to lower the threshold for using Craft and for increased security and easier access management. We also integrated Snøhetta's media library in OpenAsset, so that the editors can easily find and use images seamlessly in Craft.
After a short video training, Snøhetta employees from all over the world quickly started publishing content at a rapid pace.
Plus a little extra creativity on top
As if that wasn't enough, the creative developers at Snøhetta also developed some additional, more experimental modules, which we also integrated into the solution.
In the end, we were left with an efficient, interesting, flexible, and scalable solution that can grow alongside Snøhetta's increasing global ambitions.
