Sustainable Web Design: Can You Lower Design’s Environmental Impact?

Sustainable web design is a growing movement as organizations look for every opportunity to reduce emissions and minimize their carbon footprint. If you follow responsive web design and mobile-first practices, you’re already on the way to reducing your environmental impact with greener digital products.

According to a March 2020 BBC article, Why your internet habits are not as clean as you think, the internet accounts for “3.7% of global greenhouse emissions.”–which includes devices, websites, apps, data centers, and all the supporting infrastructure.

This article looks at how designers, engineers, and businesses can do more to reduce emissions by making eco-friendly digital products and websites for their customers.

Create a greener UX workflow by reducing time-to-market with UXPin. PayPal used UXPin Merge to scale design and create massive efficiencies without adding more staff or resources. Find out more about this revolutionary code-based UX design technology and how to request access to UXPin Merge.

What is Sustainable Web Design?

Sustainable web design is the process of optimizing digital products and websites to reduce bandwidth and power consumption. Organizations must access several key emission-reducing strategies, including:

• Design
• Web Development
• Content & Marketing
• Hosting
• Project Management
• Business Operations

As you can see, sustainable web design extends beyond the design and development for a holistic impact assessment to reduce greenhouse gas emissions.

What Are the Benefits of a Sustainable Website?

Designing a sustainable website or digital product isn’t just beneficial for climate change; it also creates business value and reduces costs. One of the most significant savings is hosting.

Most hosting plans bill you for the amount of server space plus the number of monthly users or bandwidth. Reducing the size of your website saves server space while lowering bandwidth and requests. Companies that self-host require smaller data centers and save on energy bills.

Website performance also correlates to conversion increases, and page speed is one of Google’s rank factors.

So, businesses that optimize website and application performance benefit from cost savings and higher revenue, leading to a more sustainable business model.

How Do You Create a Sustainable Website?

Here are 12 sustainable web design tips that improve performance, save money, increase the user experience and reduce your website’s environmental impact.

1) Optimizing Visual Content & Lazy Loading

According to HTTP Archive, “Images are the most popular resource type on the web” and makeup 50% of the average web page size. WebP instead of JPEG or PNG can reduce file size by 25-35% while increasing page speed performance. Switching icons and logos to SVG format can also significantly reduce page weight. 

Designers should use WebM instead of MP4 and GIF for video content. WebM is smaller and optimized for the web.

Lazing loading is another way designers can optimize image and video content. Instead of loading all of these resources simultaneously, the browser only loads what’s above the fold and then fetches additional images and thumbnails as the user scrolls.

2) CSS Sprites

CSS sprites is an old video game trick for loading multiple images with only one HTTP request. Instead of uploading each file individually, you stack the images vertically and combine them with a gutter between each one.

Developers use CSS to set the position and dimensions, hiding the rest of the stack, making it look like a single page image. CSS Tricks has an informative article about how to use CSS sprites, including package managers for automating the process.

3) Reducing Emails

According to a BBC article, “If every adult in the UK sent one less ‘thank you’ email, it could save 16,433 tonnes of carbon a year – the equivalent to taking 3,334 diesel cars off the road.”

Organizations should audit correspondence and eliminate wasteful emails. For example, how many emails does a customer receive when they complete a sale? Can you combine these into one?

According to marketing guru Neil Patel, marketers should purge email lists regularly. If you’re sending emails to inactive accounts or customers that don’t open or engage with your content, then you’re wasting money and adding unnecessary carbon emissions.

Also, consider whether it’s necessary to include images in your emails. A regular text email is 4g CO2, whereas an email with a photo is 50g CO2.

4) Optimizing Design Workflows

Optimizing design workflows can reduce rework, errors, and usability issues. These problems often put a strain on resources affecting departments beyond UX.

DesignOps can help organizations optimize UX workflows and create design efficiencies. Building a design system can also help reduce errors and time-to-market while improving the user experience with cleaner user interfaces that load faster.

5) Mobile-First Design

Mobile-friendly websites must be lighter to load faster on smartphones. So, adopting a mobile-first design strategy means designers create value for their users while saving the environment.

UXPin provides designers with predefined canvas sizes for web, iOS, and Android devices. Adaptive Versions allows designers to create multiple layouts for each viewport, like mobile, tablet, and desktop. Sign up for a free trial to experience mobile-first design with UXPin.

6) Minify HTML and CSS Resources

Minifying code removes unnecessary whitespace, reduces file sizes, and increases page speed. Developers can also combine resource files, so browsers have fewer requests.

There are loads of free tools for minifying HTML and CSS, including plugins for code editors and package managers. Minifying Javascript is a little more complicated, so leave this for a qualified developer to handle.

7) Choosing a Content Management System (CMS)

Choosing the right CMS can also significantly impact the size of your website and page speed. WordPress is often the most popular choice, but it’s bulky, outdated, and unnecessary for most websites.

Here are some lightweight alternatives for popular website use cases:

• Ghost: A lightweight headless CMS designed for content creators, excellent for blogs, publications, and subscription websites.
• Gatsby: Great for most websites, including eCommerce, single-page layouts, landing pages, web applications, portfolios, company websites, and much more.
• Strapi: An open-source modern headless CMS alternative to WordPress. Build everything from one-page designs to eCommerce and complex mobile and web applications.

8) Hosting

According to the US Energy Efficiency & Renewable Energy Office, data centers account for 2% of US electricity usage. So, switching to a green web host provider can help reduce energy consumption. 

The Green Web Foundation has a hosting directory of 342 green hosting providers in 26 countries (figures correct as of December 2021). Green hosters use renewable energy like wind, solar, and hydro. In some circumstances, hosting providers generate more green power than they need, which they feed back into the grid.

You’ll be pleased to know that many big names, including AWS, A2 Hosting, Firebase Hosting, and Siteground, are listed as US-based green hosting providers.

9) Choose Fonts Wisely

Fonts are known to slow page speed, particularly custom, self-hosted fonts. Consider designing your website with one of 18 web-safe fonts compatible with all browsers–meaning the browser doesn’t need to download additional files.

If you are using a custom font, make sure it’s in WOFF or WOFF2 format so browsers can read and download it. You’ll also need to include a web-safe font in your font stack, or the browser will load New Times Roman if it can’t process the WOFF file.

Developers can also use other tricks for custom fonts like pre-loading and CSS optimization.

10) Hierarchy, Navigation & Links

Hierarchy and navigation play a crucial role in helping users find content and complete tasks quickly. Designers should prioritize essential navigation in the header (4-5 max) and secondary links in the footer.

Hierarchy helps users identify important content and complete tasks quicker. Visual hierarchy is also a crucial factor for user experience and website accessibility.

Teams should conduct regular website audits for broken internal and external links to ensure users never waste server requests with dead-end 404 errors. Use 301 redirects for internal links and find new resources for broken external links.

11) Use Fewer Web Pages

Every new page visit requires the browser to send a request to the server, which returns the page’s content and resources. The more page visits you have, the more work (and energy consumption) the server must do to serve content.

Designers should assess each project to determine how to reduce or consolidate pages. A single-page design is often enough for most portfolios, landing pages, corporate websites, local businesses, SaaS, and apps, to name a few.

Single-page designs are good for the environment and provide a better user experience for visitors on mobile devices who only have to scroll to find what they need.

12) Buy Refurbished Equipment

Businesses and designers should also consider buying refurbished equipment whenever possible. In an interview with Forbes, co-founder of UK-based Wholegrain Digital web design agency and author of Sustainable Web Design, Tom Greenwood points out that the lifetime carbon footprint of a 13″ MacBook Pro laptop is 185kg CO2, 80% of which is initial manufacture and transport.

So, buying refurbished equipment can significantly reduce your company’s carbon footprint. 

Design agencies Wholegrain Digital and Mightybytes partnered on sustainablewebdesign.org, which provides companies with strategies organizations can implement to deliver more sustainable web design projects. The website also has a carbon calculator which shows you how to calculate your digital emissions.

When you buy an old pc or mac, make sure to remove malware so you can use the computer safely. Doing so is pretty easy with virus removal and malware removal tools, so always buy used computers if you can.

Design Better User Experiences With UXPin

Building a sustainable website starts during the design process. UXPin’s code-based design tool lets designers create fully functioning prototypes to eliminate costly usability issues before the design handoff.

Sign up for a free trial to see how the world’s most advanced code-based design tool can optimize design workflows and enhance your website’s performance for a greener end-to-end design process.