A deep dive into ethical and sustainable website design

What is sustainable web design?

Sustainable web design is a hybrid approach that blends forward-thinking and accessible digital design principles with an environmentally-conscious ethos.

 

The Sustainable Web Manifesto defines the sustainable internet as one that is:

 

🔋 Clean - Only utilising services powered by renewable energy.
💡 Efficient - Using the minimum amount of energy and resources possible.
🚪 Open - Providing an open and accessible exchange of information and data.
😇 Honest - Transparency across all products, services and marketing.
♻️ Regenerative - Supporting and nourishing both people and the planet they inhabit.
💪 Resilient - Providing reliable functionality when it's needed the most.

 

Thanks to pressure from members of the ever-growing environmental community, even giant tech companies such as Google and Amazon have jumped on the trend, focusing on efforts to go carbon-zero by 2030 by powering their data centres with clean, renewable energy.

 

Alongside working in a way that keeps the health of the planet in clear focus, sustainable website design also often incorporates human-centric principles such as clear colour contrast, text-to-speech screen reading and keyboard-only functionality to provide an online environment that is accessible to all, regardless of physical ability.

 

Why sustainable website design matters

There has never been a more important time to reevaluate the environmental cost of website design and development. Already, the carbon footprint of the internet and the systems used in keeping it online account for 3.7% of all global greenhouse emissions, with this number set to rise to 14% by 2040.

 

Sustainability is quickly becoming a priority for online shoppers, and with 81% of consumers stating that they would actively look to buy products and services from sustainability-conscious brands, businesses run a real risk of being left behind if they don't immediately begin to change the way they think about the environmental impacts of their e-commerce websites.

 

As champions of sustainable website design, we believe that all web agencies need to consider everything from how they code their themes, the impact of an app, the eco-credentials of their tech partners, to how they can increase sales while reducing e-waste in an effort to improve the overall health of the planet.

 

Here at Noughts & Ones, we focus on efficient coding, apply an overall page weight budget for our Shopify stores and only include front-end features that have minimal impact on code alongside supporting a whole host of environmental causes like Ecologi and Surfers Against Sewage along the way.

 

Noughts & Ones' tips for sustainable website design

To help website designers ensure that their website designs are as environmentally-friendly as possible, the team here at Noughts & Ones have put together a list of our top tips for designing low-impact websites, including the importance of streamlining user journeys, the benefits of using darker colour palettes, and how compressing images, video and limiting interactive elements ensures a more sustainable digital experience.

 

🧭 Streamline your user journey

One of the most obvious ways of reducing the environmental impact of your website designs is to consider planning and streamlining your user journey in an attempt to keep users on your website for the shortest amount of time possible and limit the amount of data transferred and energy consumed by each user.

 

Remember that for e-commerce businesses in particular, the ultimate aim of your website should be to guide a user through the process of finding and purchasing a product in the shortest amount of time possible.

 

While nobody knows for certain exactly how Google's ranking algorithm works, what we do know for certain is that there is no correlation between a website's bounce rate or the amount of time each user spends on your website and how high that website ranks on search engines.

 

Keep your user journeys short and unambiguous by eliminating unnecessary pop-up banners or utilising a one-page checkout, which can even increase your online store's conversion rate and generate more sales for your business.

 

🎨 Use a darker colour palette and encourage users to switch to dark mode

Innovations in display screen equipment itself are also helping digital designers make their products more environmentally friendly. For example, OLED screens illuminate each pixel independently, meaning that darker colours don't require as much power as lighter colours do, and anything pure black doesn't require any power at all.

 

A study conducted by PhD students Pranab Dash and Charlie Hu found that switching over to dark mode at 100% screen brightness reduced a phone's battery usage by 42% on average. When looking at devices at 50% screen brightness the total power saving was somewhat less dramatic, extending the device's battery life by 8.5%. An experiment by YouTube user PhoneBuff also revealed similar results, with an iPhone XS Max drawing 5% to 30% less battery life in dark mode than in light mode.

 

It's clear then that a darker colour palette results in less power consumption overall and increased battery life on mobile devices, both of which result in a reduced environmental impact overall. There are other benefits too, including improved text readability for those who suffer from dyslexia and better sleep for those who view their screens late at night thanks to a reduction in the amount of blue light emitted. However, it's important to consider the legitimate drawbacks of dark user interfaces before committing to them for your next design project.

 

One consideration you may need to make is determining when and where your website is likely to be viewed. Dark UI themes can make written content much harder to read, particularly when using fonts at either small sizes or typefaces that utilise thin font weights. This potentially rules out using darker colour palettes when designing for screens that are expected to be used outdoors in high-glare scenarios. Also worth considering is the fact that 4% of the population suffer from red-green colour blindness, and that certain shades of red and green are notoriously difficult to see against darker backgrounds for those who suffer from deuteranopia.

 

For help switching over to darker colour palettes for future designs, we recommend checking out the following resources to help guide inspire you on your next digital design project:

 

• ColorHunt
• Material Design's Introduction to Dark Themes
• Khroma, An AI-Assisted Colour Palette Generator

📷 Use static and compressed images instead of video

Research undertaken by Google determined that the probability of a user leaving your website after their first visit (also known as a website's bounce rate) increased by 90% when a web page took just two seconds longer to load.

 

This is particularly concerning when combined with the fact that high-quality video is becoming more and more prevalent in modern website design. A 2019 report by CISCO predicted that video traffic will account for almost 82% of all website bandwidth this year, a number four times higher than the total amount of video bandwidth consumed in 2017.

 

As such, there's a real opportunity to massively increase page speeds and reduce the amount of data (and therefore energy) required by your website simply by swapping out all video content for compressed, static imagery instead.

 

For those who don't have access to high-end editing software such as Adobe Photoshop, we recommend online compression tools such as Optimizilla or TinyPNG to keep the file size of images on your website design to an absolute minimum. We recommend 150kb to 250kb as the "sweet spot" between crisp image quality and low file size.

 

If video is an absolute must for your website, then try and use them sparingly and keep the content as short as possible. Also, consider turning off autoplay on all videos throughout your website to ensure that data is only streamed when specifically requested by a user.

 

🎬 Limit interactions and animation

Animation can often be a great addition to website design and is a fantastic method of capturing the interest of your users by drawing their eyes to important calls-to-action throughout your website.

 

There are drawbacks however, and web-based animations can often be weighty, buggy and unreliable, and depending on the method of animation you choose, may still not be supported seamlessly across older web browsers.

 

More importantly, page speed is now a crucial factor for both Google search rankings and Google Ads performance, and animations can negatively affect page speed in quite a dramatic way. Some animated properties are more detrimental to page speed than others, and limiting animations to either opacity or transform is one method of keeping the performance cost of web-based animation down to a minimum.

 

If animation must be included in your website design, then make sure that they run seamlessly and support the visitor's journey in a meaningful and impactful way. Also, ensure that you're using web-optimised file formats to keep page speeds as fast as possible:

 

❌ Avoid using .GIF - This format was designed for very short, low-resolution animations and are notoriously difficult to compress. Options do exist for online GIF compression, but these often mean compromising on frame rate, colour range or image resolution.

⭕️ Be careful using .APNG or .WebP - These file formats often yield far smaller file sizes for animated bitmap images as opposed to .GIF, but are still too large for regular use without affecting page speed and .ANPG and .WebP formats still aren't supported by all website browsers.

✅ Use .SVG where possible - SVG animations don't require HTTP requests to load, and as text-based SVG animations are vector-based, they can infinitely scale up to any size without any drop in quality. Because SVG animations are also handled by the browser itself, then these can be set to only animate when displayed on the screen to reduce wasting page resources when the animations aren't even visible to the user.

 

Consider too whether adding animation is actually beneficial or detrimental to the overall user experience of your design. As many as 35% of adults aged 40 years or older have experienced at least one or more symptoms of vestibular disorder in their lifetimes, and excessive motion in website design has been tied to nausea, dizziness and vertigo for the many people who suffer from the condition. If animation must be used in your design, then we recommend keeping animations simple with subtle motion to avoid triggering any negative physiological symptoms for these users.

 

🔤 Avoid or limit your usage of custom fonts

Custom fonts from sources such as Adobe Fonts or Google Fonts are typically integrated into websites via scripts that connect to these platforms' third-party servers, submitting a request for the relevant typefaces and checking for relevant licences before finally serving the files back to your website. These requests increase the data and energy demands of both your website's hosting server and even your customers' devices themselves, due to a requirement to temporarily download and store a custom font file to a user's machine before they are able to view the web page as intended.

 

To cut down on the performance costs and unnecessary server requests, then try and limit the number of font variations or weights that you use throughout your website designs. Alternatively, consider using pre-installed system fonts that a user is more likely to have installed on their machine by default, eliminating the need for any unnecessary server requests altogether.

 

Not only can omitting custom fonts from your website designs entirely save on energy and reduce the carbon footprint of your website, but the reduced amount of server requests your website makes will also result in faster loading times, in turn resulting in a better and more consistent experience for your customers.

 

While the speed benefits here might sound minimal, a 2020 study from Deloitte found that just a 0.1s (one-tenth of a second) improvement in e-commerce site speed resulted in customers spending almost 10% more, with page views increasing by up to 8% across mobile devices.

 

If utilising custom typography online is absolutely critical for brand consistency, then converting each typeface to more efficient formats such as WOFF2 can bring the total file size down from anywhere between 50% to 75%.

 

For those looking to reduce their website's font weight even further, then consider stripping out any unused characters from the files themselves. Modern font libraries often include more than 2000 individual characters across several different alphabets, however the Latin alphabet used by English speakers only contains about 100-160 unique glyphs, including special characters such as currency and punctuation.

 

If your website is only targeted toward English speakers or you plan on hosting separate versions of your website based on a user's spoken language and physical location, then this technique can potentially reduce the storage requirements of each individual font file from anywhere between 50% to 90%.

 

📱 Optimise website designs for mobile

Before starting any website design, it's important to conduct market research within your industry to identify whether your users are more likely to visit your website on a desktop or mobile device. As of January 2022, 55% of all website traffic comes from mobile devices (compared to 42% on desktop devices and 3% on tablets), so the chances are most of your users will be consuming your website's content on the go.

 

Mobile-first design is quickly becoming the primary method of creating professional websites, and with Google switching over to mobile-first indexing last year, it's never been more important to craft a unique and seamless experience for mobile users on your business' website.

 

To get you started, we've put together a list of key considerations to make when looking at mobile-first website design:

 

• Organise information in an easy-to-access way that requires the minimum number of actions from your users.
• Plan for users to interrupt the browsing process, saving their progress for users regularly switching between multiple apps.
• Use larger buttons and generous amounts of white space to account for less-precise clicking behaviour than on desktop devices.
• Consider that users will typically be navigating through your website with just their right hand. Keep frequently used controls in the screen's green zone, and destructive functionality (such as back, close or cancel buttons) in the screen's red zone to avoid accidental presses.
• Strip back on unnecessary elements like animation and scroll-based parallax to allow for faster load times and less data consumption.
• Utilise larger font weights with higher colour contrast to account for outdoor settings where screen glare could compromise text legibility.
• Use sticky menus to keep site navigation accessible at all times to make it easier for users to find relevant content at much smaller screen sizes.

Accelerated Mobile Pages (AMP) is an open-source website component framework developed by Google and Twitter and designed to dramatically increase the speed of pages when viewed on mobile devices. In essence, they are stripped-down HTML pages that offer much faster load times on mobile than standard HTML5 documents.

 

One of the ways AMP achieves this is by pre-loading cached versions of each web page in a single iframe as soon as they appear on search engine pages. These cached web pages are not only more lightweight than standard HTML5 pages (saving on data consumption for those using mobile data), but also much, much faster to load. This ultimately results in a far better user experience for mobile users, and while AMP implementation is not directly tied to page ranking, the reduced page load and increased page speed should give your website an increased chance of appearing higher up in Google search rankings.

 

🙊 Understanding Dark Patterns to Avoid Deceiving Your Users

Dark patterns are deceptive tricks often used in website design to trick users into committing to actions that they didn't intend to, such as purchasing a product or subscribing to a newsletter.

 

One of the most common examples users typically come across are those pesky "send me offers by email" boxes found towards the end of checkout pages. Without reading the content carefully (which is often designed to be as difficult to read as possible), it's hard to know whether the checkbox shown subscribes or unsubscribes you from the website's mailing list.

 

Other examples on e-commerce websites include products sneaking themselves into a user's basket, forced continuity after signing up for a free trial, or making it deliberately hard to compare the price of one product to another, making it more difficult for a user to make an informed decision on the products they're looking to purchase.

 

When putting your designs together, make sure that you're deliberate with your design decisions, conducting user testing where possible to ensure that a customer is able to easily navigate your website without any hidden surprises along the way.