Tech-knowledge needed: basic
In 2020 the carbon dioxide emissions of the world has raised to shocking 39.9 billion tons by year. Digital technologies account for 4% of the greenhouse gas emissions. That number is scaringly high, but we, the developers of this digital world, can do something against it by changing our design mindset. Here are a few ideas on how to approach this topic.
Be warned, this article is highly theoretical and was written to inspire you, not to lecture you on how to design. Tho, this article is part of my 2021 focus interest Maximum sustainability design-extremism. Here are some takes on how to design with sustainibility extremism in your mind. As I am a tech-lead with a webdesign and ‑developing background, let me show you a few web examples.
Design useful not stylish
Don’t get me wrong, I do not want you to design ugly websites, systems or apps, but one of the most impactful ways to approach a cleaner internet is to design for the use and not for the style. The thumbrule I’ve soaked into my design process is “does the user gain information from this effect?”. You’d be surprised how often this question can be easily answered with no.
Swaying waves, moving textblocks and flashing images might look “cool” and “modern”, but they do not only distract the user but also come with multiple costs.
The Code and it’s impact on you and the user
Pinpoint redundancy, eradicate repeats
One of the things most beginners and even some professionals do wrong is repeating stuff. I myself am a victim of lazyness and therefore sometimes include redundancy in projects. The biggest problem is the idea of “Ahh, no worries, I can fix that later!”. Based on my 10+ years of professional experience I can tell you that in most cases you will not have the time to fix things later on, as long as a client doesn’t see the need of the fix. It is about you to include that into your design thinking process. Here are two examples on my biggest mistakes.
Reusable code in Wordpress
As over 50% of my projects are based on wordpress websites for SME, I am using this example. This can be replaced with most traditional CMS, headless CMS and modern package-based development styles.
Most websites have code snippets that are most likely to be re-used in the code design. This starts with wordpress’ own head and footer calls but doesn’t end there. Template parts2 are a good example for re-usable code but are, based on my insight, mostly only used for loops. These template parts can also be used for repeatable code such as api-based forms, promotional sections and basically everything you use more than just once.
The biggest complaint I’ve heard from beginners or front-end developers is, that reusable code isn’t very flexible. While this might was true a few years ago, todays technology can help you with that. By designing your front-end with CSS Grid or Flexbox-Grids, you can re-arrange the content of the re-used code’s DOM as simple as 1234.
Reusable CSS or SCSS/LESS
You can check out the example on codepen . Mixins can technically be used for everything even though I would suggest using it for multi-line styling. It doesn’t have to be complex at all, but you can even create awesome mobile first responsive/fluid declarations as you can see at my (very old) _marvli preset.
These are just some examples that would reduce your carbon footprint of your projects. It is about you to ask yourself: is it needed? Is it redundant? If we all absorb critical thinking about the usage of our code, we could reduce the impact on our environment, optimize the usage of recources and also save a lot of time and money.
We only have this one planet for now and therefore have to respect our home and it’s resources. It is easy and mostly comes with a lot of benefits. Now it is time for us to act accordingly. Together as humans we can solve human problems. After all we are one species.