Sustainable web design

Sustainable design is all the tea right now. But what is it really? What does sustainable design look like? And how does it compliment accessible design? This piece is more of a rant, than it is educational. Though I do hope I'll be shedding light on a issue that designers and clients alike need to consider when designing.

Why all the illustrations?

When I finally got around to making my own website (every designer's dread), I had to decide on the UI. What colours, photos and fonts should I choose? Since I'm a designer, I do need to have some photos to showcase my work. Though there are multiple places where I've opted for illustrations instead. Why? The SVG file from an illustration is so much smaller than a photo. And size matters. Summarised very shortly, the smaller the size of the website, the smaller the CO2 footprint.

Sustainability and accessability - two peas in a pod

A growing trend in web design is the use of animations. Scrolling animations, hover animations, mouse animations, and everything else animation. Wherever you look, the new and trendy websites have got their new and trendy animations. The reason for sounding so passive aggressive, is that I rarely hear someone say "Wow did you see that supercool animation over at website.com?". Yet I do hear a lot of "Ahhh f this" when going on a heavily animated website. Not being able to see the content on a page, because there is a scroll delay animation, is weirdly enough, annoying.

Yes, like everything else, animations can be used with a good conscience, and also assist the user on your website. But, likewise with photo usage, we need to have a conscious relationship to how and when we use animations. Instead of opting for animations, opt for static pages, as they take up less space, less likely to distract the user, have a shorter loading speed and generally have a better sustainable and accessible practise.

Checklist for sustainable websites

Though it is tempting mention all the best practises for sustainable webdesign, I've decided to mention the low-hanging fruit that doesn't require a lot of expertise or time to implement. I'll most likely re-do this article with more in depth explanations of each point at a later stage, but for now, It'll stay a checklist.

• SVG over PNGs/JPGs when possible.

  
  

• No GIFs. If you must, convert them to a WEBP.

  
  

• Stop autoplaying videos. Bad for accessibility as well as the environment.

  
  

• Reduce custom fonts. I love myself a pretty custom font, but opt for Google fonts for body text, and only keep the custom font weights to an absolute minimum.

  
  

• Fewer pages. A good site architecture is key to reducing overall size. One pager? Yes please.