Maybe you spied a little link in the footer of this site that says “This website is cleaner than 88 % of web pages tested “. It links to a great tool where you can calculate your site’s carbon footprint and how it scores in comparison to others.
I put the link there because the environmental impact of a website is still a somewhat obscure fact, but it doesn’t need to be.
Is it really that bad?
The average webpage loads about 2 to 3 MB on resources; website files (like HTML, CSS or JavaScript), images, videos and webfonts. This might not seem like much but consider that all of our clicks, emails, online payments, video calls, TikTok dances and rants on Twitter combined result in 416.2TWh of electricity per year. As a point of reference: that means it’s positioned somewhere between the U.K. and France in terms of energy use per year.
It stands to reason that if we want to live more sustainably on this planet that what we do online needs to be a part of the conversation too. Including how we build websites.
Obviously there are many things you can do to optimize a website and make it more sustainable. Anything ranging from simple (but powerful!) actions like reducing the file size of your images, to more technical things like caching and Content Delivery Networks, to nitty-gritty development choices like only loading critical styles and scripts first.
All of these techniques can play a role (and I’ll talk about some of them another time) but what I want to focus on today is how to incorporate sustainability in the style of the site as well.
Sustainable style choices
I’m not suggesting making everything green and plastering leaves all over, what I mean is making design choices that by default will use less resources. This places some constraints on a project but that doesn’t mean we can’t find creative solutions.
Here are some of the techniques I worked with when making this site:
1. Low(er) resolution images
If you didn’t notice, the images are pixelated on purpose! Not only does it play with the idea of a website still ‘in progress’ (‘not fully loaded’) but it actually saves quite some bytes compared to their non-pixelated originals because it reduces the detail of the image, often along with the number of colors to render it.
Image reduction techniques such as pixelating, duotone and dithering are having a bit of revival at the moment. Nothing quite like 90’s nostalgia to make you feel old.
2. SVG images
Talking about other image options: what about SVG’s? Although SVG is not as straightforward to work with as – let’s say – a jpg it does have a heap of advantages; it’s usually smaller than other file types, it’s scalable without losing clarity, and when used in a page as code you can target it with CSS and JavaScript to do all sorts of neat stuff.
[ Here’s an absolutely gorgeous SVG +CSS animation by Aysenur Turk to get an idea of the possibilities. ]
The caveats being of course that these images can only be vector illustrations or text, and that you best only use your own SVG’s to make sure there are no security concerns.
For this website I’ve only used an SVG for my big header backgrounds and while the difference in terms of file size when compared to an optimized jpg isn’t that spectacular (61KB vs 90KB), the sharpness of the image on bigger screens is absolutely worth it.
Oh and there’s the emoji’s I use to spruce things up occasionally. But do they really count?
✏ Yes, emoji’s count
The WordPress emoji set is very easy to use and delivers SVG’s from an existing library via CDN but that doesn’t mean it’s without cost. I think it warrants a closer look in the future.
For now it beats having to create, insert and position tiny images manually each time so I’ll keep them until I have a better solution.
3. Using 1 font (but in various styles)
Webfonts were a huge step forward to styling webpages when they were introduced years ago; it creates far more beautiful, unique pages as typography is such a huge part of compelling graphic design. More options also mean more issues can pop up though. In the case of webfonts:
- Extra resources on pageload: standard webfonts consist of a separate file per font weight (normal, light, bold, italic). This adds up quickly. Let’s say your design uses 3 fonts in light, normal, demi and bold styles; that’s 12 files!
- The infamous FOUT: FOUT or ‘Flash of unstyled text’ means that when you open a webpage you will – hopefully- briefly see a system font before the webfont is loaded. This can also cause your layout to jump a bit as the pitch1 can vary wildly.
If you want to read more about this I recommend FOUT, FOIT, FOFT on CSS Tricks.
Obviously this is not ideal so generally it’s suggested to not use too many different webfonts in one website, or too many styles; to keep the pageload down, and to prevent too many layout shifts while the page loads.
Enter variable fonts
In recent years variable fonts have become a way to incorporate various font styles into one webfont. Not only is it far more efficient to only have to load one file for your visitors, it can be drastically smaller too. And you get a ton of font styles to play with.
✏ About the font you’re seeing right now
On this website I use Urbanist, a fantastic open source font that comes in various weights and italic styles.
It’s on Google Fonts but I prefer to host it myself to not be dependent on Google’s servers. I also recommend converting the standard .ttf file to a .woff2 file for maximum file size reduction.
4. Style details with CSS
While images can have a profound impact on the look & feel of your website, they are by no means the only way to create a distinct style. Looking more closely at text style and color, or small elements that can be easily made with CSS can make a page less boring or stiff.
I made the “browser window” element specifically for this purpose: it can be added to any site element with a class. It’s nothing more than a bit of CSS (and a tiny SVG) for the icons.
Hey! This is a box with my custom .has-style-webframe class!
What I want to say is: adding visual focal points can be done without resorting to images necessarily.
5. A hint of animation
Popular web design seems increasingly obsessed with animating.all.the.things.
Though animations can be used to create stellar web experiences I don’t believe you should animate just because you can. Animation on the web is currently very dependent on JavaScript and that often comes with a hefty file size, and – what is worse – can mess up the browsers’ standard scroll, click and touch interactions if you’re not careful.
Luckily CSS offers a variety of animation options too, even if they are limited to being fired on page load (for now, hopefully that will change soon). CSS animations are lightweight, easy to code and easy to implement.
I only added the smallest hint of animation to this site as a little nudge on the homepage for what I consider my call-to-action frame, where I link to whatever I want visitors to look at first.
More with less
It’s always easier to reach a goal if you design with it in mind than to wait until the end and try to ‘fix’ it. I think it’s ideal to start this thought process when deciding on the style of your website as so many decisions often flow directly from it.
I purposefully choose some very bright (I know) accent colors because using fewer images would mean I needed other focal points; something that will catch your eye while keeping the base colors very soft and easy on the eyes. I’m not sure I would’ve chosen these colors if minimizing image resources wasn’t part of the plan from the start.
Obviously I’m not saying that we should all collectively stop using images or webfonts in our websites, or to ditch JavaScript; this websites uses all of them! I’m only asking that you consider if you absolutely need it, and where it creates real impact for your visitors or users.
We can absolutely do more with less. And it can be fun too!