There are various ways you can shrink the carbon footprint of your website and digital marketing, from page speed improvements to carbon certification to overall green SEO. But what about web design? Web design generally refers to the layout, visual appearance, and user experience of a site. Therefore sustainable web design focuses on making those visual elements more ecologically sound.
It’s worth noting that the topic of this blog post is also the title of a 2021 book by Tom Greenwood. Sustainable Web Design has a beautiful website with a catalog of web sustainability guidelines that I highly recommend checking out in addition to our post.
Build the Site from the Ground Up
Let me preface this section (and article, for that matter) with a caveat: I’m not a web designer, much less a developer. I’ll do my best to cover the ideas of sustainable web design as I understand them, but please feel free to let me know if I say something totally heinous.
If at all possible, avoid using no-code website builders when creating and designing a new website. This recommendation doesn’t come from a place of elitism! Those platforms typically preload websites with tons of extra code and design elements that you likely won’t need or use. That makes it harder to control the sustainability of your overall site and web design.
Like 40% or so of the internet, I’m a big fan of WordPress. If you have the web development capacity to design your site from the ground up, I’d recommend starting there. For more in-depth insights on how to reduce the carbon impact of a WordPress site check out https://sustywp.com/.
Provide a Dark Mode Option, or Make It the Default
It sounds like one of those things that’d be an oversimplification or too good to be true, but adding a dark mode option to your site’s design (or just making it the default) can reduce your end users’ energy consumption. From phones to laptops to desktop monitors, more and more modern screens are made with OLED technology. OLED screens fully shut off a black pixel, meaning a screen that’s mostly black thanks to dark mode is mostly not consuming power. Plus, about 1/3rd of respondents in a recent Nielsen Norman Group study reported preferring dark mode, so having the option will make many people happy!
Similarly, darker color tones use less energy (but that doesn’t mean your site has to be depressing)! RicketyRoo’s primary brand colors are vibrant orange and blue, but our homepage’s deep-space background fits our theme (we’ll hopefully be able to redesign the blog to have the same dark background soon).
Minimalism in Design: Less is More
Our page-speed SEO guide discussed the importance of compressing images, but what about using fewer? Gone are the days of flashing GIFs and tiled background photos on every page. We can make attractive and interesting pages without bogging sites down with multiple megabytes of image files. Vector shapes made from SVG files or icon packs are a good alternative to large PNGs and JPGs.
Frictionless User Experience Means Less Heat
The quicker a user can find what they’re looking for on a website — that is, the fewer pages and resources that are loaded — the less energy is used. There are nearly 30 articles in the UX Design category in the Sustainable Web Design library. Here are some of the ideas that stood out to me:
- Information Architecture: When we say the fewer pages loaded the better, this is where information architecture comes in. Don’t bury your content behind layers of links and subfolders. If you have relevant content that’s related to a service, link to that content from the service page. And, perhaps most importantly, make sure you link to all pages on your site! This is as much an SEO concern as it is information architecture.
- Media Assets: Not every page needs a video or audio embed, and they especially don’t need to autoplay when the page loads. If you really want to show off a video, let users decide whether or not to click and watch.
- PDF Documents: Some information is more useful as a downloadable PDF, but HTML is more lightweight and frictionless. Plus, when is the last time you’ve been happy about having to download a restaurant menu rather than just looking at a page?
- UX Testing: You might think you know how users flow through a site, but nothing will question your assumptions like testing. We’ve been using Microsoft Clarity to run tests for our clients, but there are all kinds of options out there you can use to improve UX and conversions.
Join the Green Wave and Design for a Better Future
Sustainability doesn’t have to come at the expense of good web design. Whether you’re a web developer yourself or are working with a team of talented web designers, keep these green web design ideas in mind when you start building a new site or reworking an existing one. You can make a beautiful, user-friendly website that’s better for the planet.
