An infinite number of aspects impact the world and the environment: the web, marketing, SEO and UX are part of it. Obviously, it is impossible to change all habits and change the world overnight. But it is possible, with a better awareness of the problem and devoting a little effort to it, to reduce the impact on the planet of these activities by adopting an eco-web design.
> Download: The guide and templates for redesigning your website” align=”middle”/>
IT and the digital world are areas where energy consumption is increasing very quickly. Applications, websites and databases are getting heavier and heavier. Between the images, the videos, the technologies used, a number of elements are liable to lead to overconsumption of energy and an overproduction of CO2.
What is web eco-design?
Eco-web design, also called Green UX, represents directing website design towards more environmentally responsible actions. For designers, it is a question of focusing on the performance and consumption of interfaces.
Designers therefore no longer persist in producing great experiences but in finding a balance between aesthetics and simplicity of consumption.
Knowing that all websites consume more or less electricity to run servers and databases, if websites optimize their interfaces from the start, this can only reduce the impact on the environment.
How do digital devices harm the environment?
Today, billions of digital devices are used and each consume a share of energy. In these digital products, it is obviously necessary to count the smartphone which is an extremely greedy tool.
In fact, the cost of manufacturing a smartphone represents 95% of CO2 emissions for two whole years of the phone. This is due to the routes smartphones take to reach their buyers.
Also, phone screens get bigger and bigger every year and therefore have a much worse carbon footprint than smartphones with smaller screens. This is linked to the extractions of cobalt, gold, aluminum, etc. necessary for the manufacture and development of smartphones.
The vast majority of phones are made using materials, most of which are harvested causing significant damage to the planet. In addition, smartphones are disposable and not recycled. On the other hand, according to some surveys, nearly 50% of users say they change phones every 2 years. However, building a new phone consumes a lot more energy than using the same phone for a long time.
The Internet is used by over 4 billion people every day. With so many users, data requested and technologies used, consumption is multiplying at high speed.
About 300 hours of YouTube videos, 500 Facebook comments and over 300,000 tweets are generated every minute. Also, in 2010, it was estimated that each tweet generated more than 0.02 grams of carbon dioxide, which comes down to 7,000 grams in 1 minute, 420,000 grams in one hour and 10,080,000 grams per day. 11 tonnes per day are counted in the United States. At first glance, a small action may seem ridiculous when it comes to consumption, but on a large scale it immediately becomes more impressive.
To keep all this data alive and storing, digital clouds and large databases are needed. Again, these servers are supplied with electricity. Each file stored in Google Drive, in Gmail or Dropbox has an influence on the carbon footprint of an individual or a company.
How to apply eco-design in the field of the web?
In reality, a good user experience is an experience that does not consume a lot and is above all fast. A website with a good loading speed, for example, is a site that will limit its number of round trips. Everything is a question of optimization, technical or not, on the way in which the product is built.
To optimize the loading speed of a site, reducing the size of images and their quality immediately comes to mind, as images have a huge impact on the performance of a website. Even as machines, computers, and phones get more powerful, the fact is, it demands even more power, connection, and performance.
The objective here is therefore to reduce the size of the images used and / or even to no longer use images at all. Many websites do very well without images, they play on a minimalist and clean design.
And if you absolutely must use images, then compress them, you will find that often the difference between an HD image and an average quality image is not obvious. In addition to reducing the quality of images, you can also reduce the amount of images on your site. If there are images on your interface that don’t have much use, then don’t hesitate, whether it’s in favor of better loading speed or green web design.
Finally, move towards specialized image formats for the web such as SVGs. For example, for simple icons such as “shopping cart” or “user” do not use icons in PNG format but in SVG.
If even the images are heavy to download, then you can imagine the impact of video consumption on the environment. To set up an optimized video playback system on its site, it requires technical knowledge and a well-done dynamic integration. However, this is very rare. It is therefore common to find high quality videos with sizes much too large for a single server.
Like images therefore, optimize and reduce your videos. Compress them so that the quality is not for nothing. Also, the error would be to start the video automatically when the user has not decided to do so. Let the user choose whether or not they want to play the video, it will avoid unnecessary use of resources.
Use suitable accommodation
The impact can be huge here, switching to “green” accommodation can have a really interesting environmental impact. Using green UX-oriented accommodation means using accommodation based on a host powered by sustainable energy sources such as hydroelectric power for example. You will easily find green UX-oriented accommodation on the web. Nevertheless, it can be difficult to find one that stores your data in your own country.
Minimize the number of fonts
Again, it is often possible to minimize the number of fonts you use. Of course, fonts are important when it comes to design and branding, but there’s no point in overdoing them. What’s the point of using more than 3 or 4? For example, if you are using Roboto, Regular and bold, there is no point in including the Roboto Light.
Also, base yourself on a clear design system. Set yourself a font size and typography variable for H1s, a size and typography variable for H2s, etc. So reduce your number of different uses, base yourself on styles defined in advance and avoid using new ones. Concentrate on the “less is more” principle.
Mobile traffic has been increasing for many years now. The traffic from computers is not as important as it used to be. If a mobile charges an interface that is not made for smartphones, charging it consumes more than an interface optimized for smaller screens.
In addition, a responsive website is a website that automatically adapts to all screen formats, including tablets. And then it goes hand in hand with the speed of loading, many old, outdated sites take more than 7 seconds to load on mobile, and that’s not a good thing for consumption.
Facilitate navigation and accessibility
UX rhymes with ease, efficiency and usability. And these aspects are also very important for green UX. By having efficient navigation and quickly giving users the information they are looking for, you reduce the time spent and the number of pages loaded and viewed. When people spend less time on your site, they’re bound to spend less energy, so that’s a good point.
The menu, for example, plays an important role in accessibility. So the navigation menu is intuitive and includes all the necessary information.
All these elements relate to UX because they touch on aspects related to navigation comfort, usability, accessibility and design in general. But other areas such as SEO, web development or copywriting also have their role to play.
The thing to remember to move towards web eco-design is to play on simplicity, minimalism and efficiency regarding navigation. This can be counter-intuitive for designers wanting to innovate and let their creativity run wild. But in a context like this, it is better not to take any risks and to offer the most qualitative user experience possible, even if it means setting aside “pretty” especially with HD videos, high quality images and animations . Green UX means limiting energy consumption while improving the user experience.
To go further, download this free guide and discover valuable tips to make the next redesign of your site easier.