How do you build a low-carbon website? Web designer Victor Hwang shares his wisdom

“Just as it’s an architect’s responsibility to think about the carbon cost of the things they design, it should be every digital designer’s responsibility to think about the same thing for the websites and apps they make.” This is the musing of London-based Victor Hwang, a designer who advocates for furthering the usage of low-carbon web design. Earlier this year, Victor collaborated with the artist and curator Maddie Rose Hills on her research platform Mater. The platform is made up of contributions from artists, designers and researchers who have a deep, interwoven relationship with the materials they use. “Together, they make the case for us all being more thoughtful about the materials we use – especially in the context of a climate emergency,” Victor expands.

It was this ethos – of being mindful and considered of the materials you use throughout your practice – that Maddie was keen to integrate into the website design. “We don’t often think about digital things as being made of materials, but they absolutely are,” Victor says. Frank Chimero’s essay The Web’s Grain Victor cites a brilliant representation of this fact, and is a “formative” piece which informs Victor's practice. Both Victor and Maddie were also inspired by other climate conscious websites: for Victor, he was inspired by the Low-Tech Magazine’s website which is solar powered, and for Maddie, it was the research-based design studio Formantasma’s portfolio site.

Maddie reached out to Victor when she was in the midst of writing a bid for Arts Council funding and, in the earliest stages, they built a brief together that was committed to a low-carbon end result. One of outlines of the brief was guidelines for all contributors, which Victor explains “steered them towards something that would be inherently low-carbon by banning video and encouraging the use of text and audio”. Far from limiting, Victor instead sees the guidelines as having enhanced the contributions. He highlights the page of Nolan Oswald Dennis’, which integrates poetic ASCII art interventions throughout his text.

Victor first got into web design in a way many will relate to – designing Neopets guild layouts and forum signatures on a pirated copy of Photoshop, for example. But aside from this, with his mum working as a taxi driver, Victor explains that art and design weren’t directly on his radar growing up. It was a few great art teachers – who let him tinker away on computers during art lessons – that helped his passion grow. One in particular, who had previously taught at Kingston, nudged him towards a graphic design degree at the institution. Since graduating, Victor has worked as a designer for the BBC and Parliament. Recently, however, Victor quit his job to focus on making websites for projects more aligned with his personal interests.

In realising the Mater website, one of the elements both Victor and Maddie are most proud of is the top section of each contribution. “It offered a space to play with imagery, transforming it in some way to develop a low-carbon common expression,” Victor explains. The first interaction of this practice is visible on the Chapter One page. Here, each contribution is listed and the name of the author is visible, before transforming into an image – composed of textural dots – when the cursor moves over it. To compress these images in such a visually arresting way, Victor explains: “I wrote a little bit of code to crunch the artist’s images into tiny files, and then we exploded each image back to its original size, while erasing darker or lighter pixels, to see what remained.” For the second set of contributions, Victor explains that they needed something that didn’t involve as much processing. And so, Victor shrunk down images and laid them over supersized text. “It’s an inversion of how lots of websites handle this section – with large images and small text. But again it’s one driven by the desire to find a creative solution that keeps our impact on the planet as small as possible,” Victor details.

Looking to the future, Victor hopes that this low-carbon approach will be adopted and integrated by large companies. “The reality is that a tweak to a site loads of people visit, many of which are bloated with unnecessary code, will have a much bigger impact than something that only reaches a niche audience,” he says. Moreover, Victor sees there as being a massive untapped realm of expression waiting to be unearthed. “Low carbon doesn’t need to mean boring! So I hope a reconnection between the underlying material of the web and the websites we build can lead to a more creative, interesting internet.” Using intuition and creative problem solving, all the while creating something arresting, the Mater website itself is a testament to the fact that low-carbon web design doesn’t come at the expense of beautiful, complex visuals. Planning on building your own low-carbon website? Read on below for some handy advice.

Victor's tips for building a low-carbon website

The most important thing is making sure the file size of the website is kept as slim as possible: compress your images! Image file formats have come a long way in the last few years, so you don’t need to compromise on quality. For Mater, we used a fairly new file format called .webp, which cuts file sizes massively.

Use defaults wherever possible, so there’s less to download. For example, we only use Times New Roman throughout the site, which is a font everyone has on their computers already. We also used default HTML elements wherever possible – using the default <audio> component, and using the <details> element for audio transcripts, rather than designing anything bespoke.

It’s also important to think about the behind the scenes stuff. We made sure our web host uses only 100 per cent green energy, and built Mater as a static site. This is a little more technical, but most websites are ‘dynamic’, meaning they’ll make many requests to servers for more data as the user browses the website. Each request uses electricity, increasing the carbon footprint. Instead, a static site turns all the content into a flat HTML file ahead of time.

Think about how much energy your site is going to make the user’s device use. Dark colours use less energy, because of the way modern screens work. Also, a site with lots of animations will make their computer or phone work a lot harder, increasing the electricity it uses or how fast the battery drains. We avoided anything like that with Mater, which forced us to think a little harder about how the ‘brand’ expresses itself. A good challenge!