What is green (UX/UI) webdesign?

If the Internet were a country, it would rank third place in global energy consumption. In third place. When I first heard that, it was unimaginable for me, but then it got pretty clear. In this article I give a short introduction to the topic of sustainable web design and what we can do to make the web greener.

What is so ungreen about websites?

Every click on a web page starts a dialog with data servers. They are located somewhere in the world, are fed with an insane amount of electricity and cooled with vast amounts of (often drinkable) water. This leads to CO2 emissions and not too little. A single web page consumes on average 1.76g CO2 per page view. Feel free to calculate how many page views you have per month… Yep, that’s quite a lot.

Are we all hypocrites?

We ride our bikes to work, separate our garbage, use as little plastic as possible, but then fill our websites and social media channels with pictures, videos, tracking/analysis tools, crazy fonts and fancy animations. You can do that, but it definitely doesn’t make us greener.

What exactly does sustainable web design mean?

#1 Your hosting provider

Your hosting provider uses green electricity and is energy efficient. My favorites are currently Petricore, Biohost and greensta. If you consider that with standard electricity 475g CO2e/kWh are emitted and with electricity from renewable resources only 33.4g CO2e/kWh, I think that’s pretty sweet (with some dependencies of course).*

#2 Your technical setup

Your technical setup is as data efficient as possible. This includes the compression of CSS and JavaScript, but also the use of caching or avoiding cookies and many requests and redirects. If you use WordPress, there are many cool plugins and themes with great performance.

#3 Your content

Your content is just as data-efficient as the technical setup. You use pictures and videos when really needed, compress them and don’t let the videos play via auto-play. You use system fonts (#arialforreal) and optimize your click paths. We’re not in a supermarket where the shelves are placed in such a way that you have to walk through them all to do your shopping. As I said, every click causes more CO2. And maybe you are already trying to reduce that with other parts of your business or your products. Then talk about it in detail and let it flow into your content.

#4 Your emails

Your email signature is just text (no pictures) and your newsletter is mainly text (few pictures). Most recipients have turned off the automatic display of pictures anyway and see only white boxes. Some recipients just delete your emails or mark them as spam because they are too lazy to unsubscribe or haven’t found a way to do so. Throw them out. They just shrink your opening rate and thus “intelligent” mailboxes don’t display your emails.

#5 Your partners

You take a look at what your suppliers and cooperation partners are doing. Are they sustainable? What do they do for the climate? Create awareness or find other partners. Also in your direct environment.

#6 Your digital office

How green is the hosting of your cloud? Tip: Dropbox and Adobe are not. Do you use Ecosia as your search engine? How often do you sort out emails and your files? Do you need so many file versions in your archive? What about digital to-do lists? Do you include our beautiful blue planet Earth in your design processes? For example as a persona or target customer? If not, feel free to try it out. For me it was a real game changer.

What are the benefits of sustainable web design?

Because we try to keep the amount of data as small as possible, your website will have a super minimal loading time, which means a faster site, happy users, more purchases, a better ranking in search engines (because they reward us for the low loading time) and better findability. Well, I think that’s pretty great.

Resumé

I think it’s great and I hope you do too. If we all build greener websites, we can make a huge difference. And it doesn’t have to look dull, colorless and without pictures. It’s just a matter of using things in a compressed and targeted way, instead of filling everything up.

And now?

If you liked the article, please feel free to share it with colleagues, co-workers and friends. It would help me a lot to make the topic better known and hopefully inspire more designers to create greener websites.

Have a wonderful day!

Sandy

Share this article

Hi, I’m Sandy, the author of this blog and a UX/UI Designer with 10+ years of experience. I founded Green the Web in 2019 to share my passion, ideas and vision of a sustainable web with change makers like you. Let’s connect on LinkedIn or on Instagram @greentheweb to discuss and share ideas.

Sign up for the newsletter

Get the latest green web hacks, business insights and news directly into your inbox. Usually sent once a month.

Sustainable best practices

Get inspired by lightweight, user-friendly, aesthetic and sustainable UX/UI designs of the web.

My favorite resources

Scroll through my favorite articles, studies, podcasts, talks, communities, books and tools on sustainable web design.