Snøhetta
Togedder wit' Snøhetta Design, we built th' new global websites fer Snøhetta in winter 2023.
Wif Snøhetta's focus on sustainability an' accessibility, it were natural fer Snøhetta Design to prioritize this when creatin' th' new website. It be easy to forget that what happens digitally an' in th' "cloud" actually leaves a footprint. Th' server on which th' website be hosted, th' routers it passes through on its journey through th' internet, an' th' device that be used to display it - all consume energy. Although it be difficult to measure exactly how many resources a website uses, there be a couple o' things we know be factors:
- How much data needs to be transferred to display th' website
- How much resources th' user's device needs to display th' website
So we jumped into th' project wit' death-defying enthusiasm, aimin' to create an interestin' an' functional website that also attempted to address these two points. How did it go? Keep readin'.
Tech
- Craft CMS
- Azure Active Directory SSO
- OpenAsset
Pictures - th' bigges' culprit
Pictures an' videos make up a very large portion o' th' size o' most websites. A website wit' only text would be th' best option, but it be unrealistic fer most companies. An' fer Snøhetta, it be essential t' be able t' document their projects usin' images. It be therefore natural t' start by lookin' at how we could optimize these beyond transformin', compressin' them, an' deliverin' usin' modern file formats such as WebP an' AVIF, which we normally do.
We explored various directions, but it quickly became clear that some o' th' directions were more visually appealin' than others. Reducin' th' number o' colors, ditherin', an' upscalin' images without anti-aliasin' created an expression that brought back memories from th' time when CGA, EGA, an' VGA were th' screen standards, an' Monkey Island were th' best game ever made.
We reminisced an' experimented, an' eventually came up wit' somethin' we liked (16 colors, Floyd-Steinberg ditherin', GIF, an' 2-4 times upscalin'). This gave us a distinct visual expression an' a 60-80% reduction in file size.
Optimize, optimize, optimize
With th' images completed, we tackled all th' other things we could optimize.
Javascript be th' main culprit when it comes t' resource usage on th' user's device, so we minimized its usage and divided th' code into smaller pieces that could be loaded on demand. We created a simplified mode where animations and interactivity be minimized, and even less Javascript be loaded.
In addition, we implemented static page caching t' minimize resource usage on th' server, and placed resources behind a CDN so that they be loaded from access points closer t' th' user. Like all websites we manage, th' website be hosted on DigitalOcean's data centers powered by green energy.
Th' result be an unusually lightweight website, which in simplified mode with low-res images be 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 scallywags from all over the world quickly started publishing content at a rapid pace.
Plus a wee extra creativity on top
As if that wasn't enough, th' creative developers at Snøhetta also developed some additional, more experimental modules, which we also integrated into th' solution.
In th' end, we were left wit' an efficient, interestin', flexible, and scalable solution that can grow alongside Snøhetta's increasin' global ambitions.
