The approach to sustainable web design

Sustainable web design is the practice of designing and developing websites that have a low environmental impact. This can be done by using energy-efficient hosting, optimising images, and using sustainable web technologies. Hence, sustainability in this context refers to designing and developing websites in ways that have a minimal environmental impact, are economically viable, and are socially responsible.

The internet currently produces approximately 3.7% of global carbon emissions. This is equivalent to the emissions of all air traffic in the world.

To reduce our carbon footprint, there are many things we can do.

• Using energy-efficient data centres. When developing and designing a website, bear in mind what your infrastructure would be. Use energy-efficient hosting and infrastructure.
• Reduce the time to load assets. Images are perhaps the most expensive asset on your website. Optimize images for the web by reducing their file size and using the correct file format.
• Use sustainable web technologies that are browser efficient. Browsers are designed to effectively process HTML and CSS. Using outdated technologies that require additional plugin support and excessively consume processor power is not sustainable.
• Use a content delivery network (CDN) which can help to deliver your website's content more efficiently and reduce overall internet traffic routing.
• Reduce development overuse or over-engineering. Using excessive third-party libraries and scripts adds to loading time, and use of energy by the processor and hence will eventually impact your website’s performance and carbon footprint.

The UAE design system aims to provide components, blocks and guidelines to help the federal government of the United Arab Emirates build efficient websites. Sustainability is a goal that helps guide the design system and provides the basis towards many of the rules set forth.

The principles of a sustainable web design are:

1. Reduction in energy consumption
2. Optimised media
3. Efficient coding
4. Maintainability
5. Inclusive design
6. Green hosting and infrastructure

Ask the right questions

Design is a process based on research. It is a combination of business requirements, user experience and content. These 3 pillars will create the direction of the design.

Hence, we must ask ourselves if the direction is sustainable. Here are some questions that as a designer, you must question yourself when designing projects.

Does the design provide an 'invisible' experience without barriers?

Enhancing the user journey for improved efficiency, time-saving, and overall experience is crucial in optimizing online services. By removing obstacles such as pop-up banners, unwanted advertising, deceitful 'dark patterns', and the need for extra software installation, we strive to make our digital product or service accessible to all.

Also read:
Deceptive Patterns (https://www.deceptive.design) Dont make me think, revisted

Has the design used imagery efficiently?

Images often constitute the largest portion of a web page's file size, making their efficient use pivotal to reducing energy consumption and enhancing performance. Ensure every image serves a purpose, and remember that intricate details and vibrant colours can increase file size.

Opt for simpler visuals when possible. To achieve the desired visual effect, consider switching to lightweight alternatives like SVG graphics or CSS styles. It's crucial to ensure images are optimized for various display devices.

Check if your CMS resizes user-uploaded images for the web and if it can automatically convert traditional formats to newer, more efficient ones like HEIF, WebP, or JPEG XR, considering browser compatibility.

Additionally, implement "lazy loading" for images to enhance page load speed, ensuring images only load when they come into a user's viewport.

Also read:
How to Optimize Images for Faster Load Times and Sustainability WebDev: Fast load time The importance of good website imagery Accessibility expert warns: stop using carousels Sustainable websites – tip #1 – use images efficiently

As a designer, have you set a page weight budget?

A page weight budget is literally a budget of how much a webpage can weigh in terms of megabytes (MB). Your budget can be further broken down into the assigned weight in kilobytes for your HTML, CSS, Javascript, fonts, image assets and other assets.

When a page weight budget has been set, the team’s goal is to deliver each key page of the website in no more than the agreed budget. This means paying attention to the size of page assets, such as images, animations, embedded videos, and so on.

Also read:
How Performance Budgets Improve Websites Sustainable web design – make your website better for the environment How to set a Page Weight Budget for a greener, faster website

Is the font selection minimal and only uses what is required?

Custom font files can significantly increase the file size of web pages. Principles of sustainable design advocate the use of font CDN's that can send optimized versions of font used on the website.

You must also load the font-weight that is required. Some fonts have 8 different weights, but you must ask yourself as a designer and developer if all weights are necessary for your website.

Also read:
Sustainable website fonts and the proper use of them

Is the web experience seamless across devices?

Digital products and services have to work seamlessly across an ever-increasing array of screen sizes, technologies, browsers, bandwidth speeds, and devices.

Recreating different versions of your web experience specific to a device is not a sustainable practice. The time and effort it takes to maintain several versions of a single content page is exponentially higher when compared to a well-optimized responsive layout. Learn more about the Approach to Responsive Design as well.

Are video and animations added only when they are required?

Video assets are far more expensive in energy consumption than images. It may certainly be necessary to use them within your design and content - in which case, opt-in to use a video hosting platform which follows sustainable principles and optimises the video output for the device.

Think carefully about video and animation use, ensuring that they genuinely add value for users.

Also read:
Why Web Designers Need To Think About Sustainable Web Design

Are you respecting user privacy?

Legislation like Europe's GDPR and the California Consumer Privacy Act in the U.S. is intended to enhance people's right to privacy and protect their interests as consumers. Designers should take responsibility for respecting and protecting user privacy in the solutions they create.

Digital products and services should be very specific about what data is collected and how that data will be used.

Are you writing code efficiently?

The carbon footprint of a website includes the emissions of the team that created it. The energy cost to build the website and maintain it also impact's the sustainable approach of the project.

Writing reusable code might not be a fit for every project, however, we can certainly be smart about it and ensure we are not reinventing the wheel.

The purpose of the UAE Design System is to provide reusable components for federal websites of the United Arab Emirates, which can be used as is, hence reducing the effort to create the same component on each website separately.

Also read:
Developing Sustainable Design Systems Do you write clean and reusable code?

Is the hosting powered by renewable energy?

Data centers represent a large portion of overall internet energy. When selecting a hosting provider for a web project, specify the use of renewable energy. Selecting a green host is one of the easiest ways to reduce the emissions of any web project.

Also read:
Wikipedia: Green hosting Green Web Hosting: How To Choose An Eco-Friendly Hosting Provider For Your Digital Project

Is the hosting infrastructure physically located closer to the base of the target audience? Or are you using a CDN?

Transmission of data around the world consumes a lot of energy. If you are sure that over 50% of your target audience will be in a certain geographical location, it is advisable to ensure your infrastructure is closest to that - bearing in mind that you do not sacrifice other sustainable principles regarding green hosting.

Alternatively, use a Content Delivery Network, that can not only speed up your website's performance but also be a sustainable and energy efficient solution towards serving assets for your website.

Why adopt a sustainable approach

Sustainability in web design is not just an eco-friendly initiative; it's imperative for the digital age.

The internet's carbon footprint is vast, rivalling that of major industries. Every byte of data processed, every image loaded, and every video streamed consumes energy. As a web project that may serve a very small target audience, you may not see the impact it may bring to a global footprint, however, it is a combined effort that can help make a difference.

By embracing sustainable web design practices, we not only reduce our environmental impact but also offer users faster, more efficient, and accessible experiences. An eco-conscious digital realm can leave a lasting, positive mark on both the environment and user experience.