Guide 
to 
sustainable 
strategy 
for 
website 
development

Published on 25/02/2021

Digital is not necessarily 'green', on the contrary

The digital realm is seen as the solution for environmental issues. But that's not always the case, only if we use web technology wisely. As we know, the internet could bring huge benefits to society and the environment, but it can also harm it a lot.

How is that even possible? What can the internet do to harm the environment? Aren't we going more and more digital just to protect Mother Nature? Unfortunately, the reality is quite different from this. Digital doesn't automatically mean green. From server farms to data centers to the actual device, everything consumes energy to function which results in producing carbon emissions.

What is the cost of our digital energy consumption?

Have you ever thought about how many resources are needed for your website? Guaranteed more than you think. Every request your website sends is received, processed, returned, and if necessary, stored somewhere. All together, that's a lot.

Let me hit you with some facts first. If the Internet were a country, it would have the sixth-largest electricity consumption in the world. Website Carbon states it consumes 416.2TWh per year, which's 3,8% of global carbon emissions. That's approximately the same amount as Germany consumes. That number keeps rising because of our hunger for data. Communications tech will even emit more carbon by 2025 than any country except China, India, and the U.S.

The average web page produces 1.76 grams of CO2 per page view. 10,000 monthly page views on your website equal 211 kg CO2 per year, for just one page. Besides the environmental impact, web technologies are also used to sow discontent, corrode privacy, cause unethical decisions and even threaten personal freedoms and the well-being of society.

Estimate your web page carbon footprint with this calculator.

Fortunately, there's something called 'sustainable websites'. Everyone can set up a sustainable web design strategy to make their website greener and reduce their environmental impact.

If the Internet were a country, it would have the sixth-largest electricity consumption in the world.

What is sustainable web design?

With the Internet playing an important role in the daily lives of billions of people, especially during these times, we have to create more sustainable digital products and services. Sustainable web design is the way to go. It's an approach to designing web services that put people and planet first. It delivers digital products and services that are clean, efficient, open, honest, regenerative, and resilient.

Sustainable websites make great use of compressed images, efficient file formats, and lightweight fonts, avoiding bloated frameworks. Making your website eco-friendly isn't just better for the environment. You will notice some great advantages in the user experience of your website. In this article, we will discuss some sustainable web design strategies to upgrade your website to a greener level.

How to build a sustainable web design strategy

Frontend energy consumption of any digital product or service is typically determined during the design phase.Designers, developers, and creators of sites have the opportunity to reduce the environmental impact. There are several key areas where we can make small but significant changes. All it takes are a few tweaks to the workflows. With this tool you can discover how green your website already is. If those results need some improvement you can contact us to help you out.

Sustainable website development guide

Follow this guide to make your website greener. If you still have questions about sustainable web development, feel free to ask us!

Development

The amount of data downloaded by web applications is increasing. More data means more energy use. How can developers play their part in sustainable web design?

1. MOBILE-FIRST STRATEGY

What's a better feeling than finding information quickly and easily on your phone? Tell me, I'll wait. Maybe that's a bit of an exaggeration, but we have all had the experience of finding information difficult to locate or click on from a mobile phone. The mobile-first strategy leads designers towards more energy-efficient, user-friendly web solutions.

When I researched the effects of corona on marketing, I found out that we're browsing and buying more on mobile. More designers are now thinking about the mobile experience as fundamentally different from desktop by planning those user experiences at the beginning of the design process. It's no longer an afterthought.

What makes the mobile-first strategy more sustainable? It forces the owner of the website to consider the most essential content and transactions. That way, visitors load fewer pages which burns less energy in the process. When you size photos and graphics for mobile, pages will load more quickly while using less bandwidth which means saving more energy.

Save energy when you're coding a website by starting with mobile views and progressively adding styles for larger screens.

More designers are now thinking about the mobile experience as fundamentally different from desktop by planning those user experiences at the beginning of the design process.
2. CHOOSE A GREEN HOST

Web hosting devours energy and causes significant CO2 emissions. A green host is powered by renewable energy. It is the single most important thing you can do to reduce greenhouse gas emissions that stem from your website.

What's important about a host? It has to have a low PUE (power usage effectiveness) rating for its data center. A perfect PUE is 1,0. The further data travels, the more energy it consumes. The hosting should be located as close as possible to the core user base or you could use a Content Delivery Network when you have an international user base.

Also, check if the provider has a strong environmental policy. Use the latest tech stack to receive the best performance, security, and energy efficiency. Make sure bad bot traffic is blocked. When using a CMS, keep server processing to an absolute minimum by implementing effective server caching or using static web technology.

Meanwhile, many hosting providers are joining in and focusing on renewable energies. You can check if your host is green by using this tool from The Green Web Foundation. If you're looking for a green hosting company you can check this directory.

3. WRITE REUSABLE CODE

If you enjoy being efficient, don't reinvent the wheel. The carbon footprint of a website includes the emissions of the team that created it like office energy and travel. You can save time and energy by writing reusable code when it's possible. It's more efficient and delivers results with lower carbon emissions.

How can you make your code more reusable? Don't repeat yourself, make a class do just one thing, write unit tests for your classes and make it easy to test them. Write code that can easily be extended, don't write code that isn't needed. Keep your code reusable by maintaining high cohesion so it can adapt to different environment.

4. DECOUPLING FRONT-END AND MODULAR DESIGN SYSTEM

Use modular code frameworks to keep file sizes to a minimum, improve load speeds and save energy. Certain functionalities from some codes or frameworks aren't needed in every project. Modularization makes it easy to understand code and makes it more maintainable. You can easily reuse methods or functions in a program and reduce the need to write repetitively. Make the code as simple as possible so others can easily understand the architecture and identify the components, boundaries, and interfaces.

Reduce coupling where possible. Loose coupling allows modules to function independently so they will not affect one another when errors arise. Think about the links and coupling the code is creating, does it need to be linked to those other classes? Highly coupled modules make it challenging to modify a function. It requires a programmer to edit the whole codebase instead of just modifying a single function. Decoupling makes your code more portable because it makes a function perform without external support.

Use modular code frameworks to keep file sizes to a minimum, improve load speeds and save energy.
5. LEAN/AGILE METHODS IN THE DEVELOPMENT PROCESS

Agile methods are based on collaboration and adapting to changes when you learn new things. This approach is much more efficient than other traditional ones. Don't waste resources by building features that haven’t been proven or tested. That way you can get sloppy code and technical debts which causes less sustainable digital solutions.

With methods like these, you can break large, complex projects down into a series of “sprints” that each focus on a core component of the larger project. Start using this method by planning a sprint with clearfunctioning deliverables, usually every two weeks.

6. THE RIGHT CHOICE OF TECHNOLOGY

Open source tools allow projects to sustain themselves over time. They will optimize software tools for better performance and efficiency which reduces energy use. They keep costs down and improve project speed, flexibility, and agility. You can also maintain strong security and quality control on your projects. They help lean teams start small and test ideas before scaling, reducing waste.

You can evaluate the sustainability of an open-source project by checking the next criteria. Keep in mind that these are not the only factors. For a project to be sustainable, it must have contributors, and its codebase needs to be evolving. Check the release history for the activity pattern. Get an idea of who is talking about the project because the software isn't sustainable without users or companies that engage with it.

Web standards make source code simpler which reduces development and maintenance time. They improve performance and ensure that your digital products and services display accurately across different ****devices and platforms. This also supports a better user experience and expands access to your content.

7. INFORMATION ARCHITECTURE FOR GREAT URL-ROUTING

IA is the art and science of organizing and structuring the content of websites, web and mobile apps, and social media software. A good information architecture allows users to find everything they need without big effort. Fewer clicks mean less energy use and a powerful user experience. A good information architecture contributes to great URL routing, which in turn improves your site's SEO.

Fewer clicks mean less energy use and a powerful user experience. A good information architecture contributes to great URL routing, which in turn improves your site's SEO.
8. MORE SUSTAINABLE APIS FOR EASY INTEGRATIONS

Web APIs lack recognizable interface patterns. To be sustainable you should always choose reuse over reinvention. A good ecosystem needs a community of adopters to foster it. This involves the creation of the right incentives and encouragement to an appropriate mindset. It is tempting to create customized Web APIs because economic motives sometimes overpass sustainability. Reuse challenges current Web APIs practices and the business models created around them.

Design

A significant portion of the Internet’s total footprint, some say up to 40%, occurs on the frontend, created by designers. That means design is a big part of the road to sustainable web design.

1. CHOOSE FLAT DESIGN

Flat design puts an end to unnecessary elements such as gradients, beveled corners, etc. Those needless elements not only distract users but also makes pages load slower which means a bigger environmental impact. Stripping down those elements is an eco-friendly designcontent-first approach. It helps your site's functionality and readability and it is more energy-efficient. It improves your site aesthetically and allows pages to load faster.

2. THE IMPORTANCE OF USER EXPERIENCE

A well-functioning user experience helps you and your customers make your website more sustainable. You minimize unwanted detours by your users. Ideally, only pages that the user wants to visit are loaded. If you reduce unwanted clicks, you send fewer data requests and therefore consume less energy.

Users love shorter user journeys and it saves energy by reducing the amount of time spent online and the number of pages that need to be loaded to complete a task. Eliminating barriers contribute to a more efficient user journey. It saves time and energy while also making online services more enjoyable to use and more accessible. This involves removing pop-up banners, avoiding ‘dark patterns’ that trick people, or eliminating the technology that requests a user to install the software before they can use your digital product or service.

Digital products and services have to work seamlessly across screen sizes, technologies, browsers, bandwidth speeds, and devices. Otherwise, users will waste time and energy trying to accomplish tasks.

A well-functioning user experience helps you and your customers make your website more sustainable. You minimize unwanted detours by your users.
3. USE OF IMAGES AND VIDEO

High-resolution images look amazing on your website, but they also require a lot of load time. Reduce your images as much as possible. Video content has become the most effective for generating engagement. Sadly, they're not as effective for your website's performance. Use as low resolution as you can get away with and embed them directly into the website, no autoplay.

Use lazy loads for media. That means a video or image only appears as you scroll down. If a user doesn't scroll all the way down, not all the images need to load. That means more energy-saving and faster loading time, which is a bonus for your SEO.

4. GOOD USE OF COLOR AND FONTS

The popularity of OLED screens that light up each pixel is increasing. They allow digital designers to save energy. Darker colors require less energy to illuminate. Blue pixels use approximately 25% more energy than red and green pixels. Try prioritizing low energy colors, while keeping accessibility in mind. Consider making your design support dark mode.

Custom font files can increase the file size of web pages. A typical custom font file can be over 200kb. Multiple typefaces and font weights can add up quickly, increasing energy use and causing slow performance. To avoid that, try using system fonts that are already on the users' devices.

Darker colors require less energy to illuminate. Blue pixels use approximately 25% more energy than red and green pixels.
5. SET A PAGE WEIGHT BUDGET

A page weight budget is a budget of how much a webpage can weigh in kilobytes or megabytes of files. It is the size of files transferred over the internet when a web page is loaded.

The purpose of a page weight budget is to design each key page of the website in no more than the agreed budget. This means that designers need to pay attention to the size of page assets such as images, animations, embedded videos, and so on.

Marketing

1. THE PERFECT CONTENT

You need a clear content strategy that answers your target audience’s most common questions. Researching your users and employing that information in your strategy, can quickly provide your audience with the answers they need and increase your chances for success while also reducing the energy they use searching for answers.

The purpose of every web page should be cleareasy to understand and invite people to take action. Making clear and actionable content helps users select between their options and reduces the time they spend deciding which choice to make.

The purpose of every web page should be clear, easy to understand and invite people to take action.
2. COLLECTING DATA FOR ADS IN AN ENVIRONMENTALLY FRIENDLY WAY

A lot of energy is consumed by user trackinguser data collection, and targeting in advertisements. That's because of the large size of tracking and advertising scripts, the energy required to process and track user behavior, and databases collecting vast amounts of user data. This can also violate user privacy and degrade the user experience.

Look further than the GDPR, and respect the spirit of web privacy. Be clear with users which data you're collecting and how you will use it. Try to collect data in the least invasive and most efficient manner possible.

3. DON'T FORGET SEO

With good SEO and information architecture, the right people find the right content more efficiently. Fewer clicks to reduce energy and a better user experience. Optimizing your keywords helps people find your content, both through search engines and for those searching within a website. The more findable content is, the less irrelevant content a person needs to go through to find what they are looking for.

With good SEO and information architecture, the right people find the right content more efficiently. 

Sustainable website strategy for clients

Your clients might need some convincing to make a green website. Drop these advantages and they should ready to be on board:

  • Improved usability and user experience
  • Clear and easy to understand designs
  • Improved SEO rankings
  • Shorter loading time
  • Mobile-optimized pages

There is no reason to not make sustainable websites. It's better for people and planet.

Conclusion

Sending an email has the same effect on our environment as using a plastic bag. Therefore, books are often more environmentally friendly than e-books. Buying music albums is better for our resources than streaming them. The list is endless. Above all, these statistics shake up our previous general understanding that digital also means "green".

Digital can be eco-friendly and better for the environment, but only if we use it wisely. The Internet also makes it much easier to spread information about sustainability and environmental protection. It's time to get on the train towards sustainable web development and design. If you need some help with that, feel free to contact us and we will help you on your sustainable journey!

Ready 
to 
make 
your 
website 
greener?

Contact us and we will help you tailored to your business.

Experience Lab BV

VAT BE0756.564.465

Coupure Rechts 620

9000 Ghent, Belgium

© 2021 Experience Lab BV - All rights reserved.