In our previous blog article discussing the Sustainable Web Design, we discussed how “Going digital” without carefully auditing the carbon footprint of our design methodology and online activities does little to reverse the damage. In this second article, we break down the nuts and bolts of how one should go about getting a website designed with sustainability as a guiding principle.
Building a Sustainable Website: Key Actions
First things first, start with an in-depth audit
The first step before you dive into a full-fledged action plan is a detailed website performance and sustainability audit with this set of guiding questions:
- How easy is it for people to find the content they are looking for on my website? The faster they can find content on your site, the fewer the resources consumed.
- What are the main culprits making your website heavier, slower, and jammier?
- How does my website look when I pull it up on the mobile phone? On a tablet? On different device models?
- What are the pain points for each page?
- What are the areas that need most improvement? Ask the following questions:
- How long does my website take to load? Studies show that most users will leave a website if it doesn’t load within 2-3 seconds.
- How easy is it for a first-time visitor to navigate through my website?
- How much do my pages weigh? The average web page composed of 1.3 MB of data results in an annual carbon footprint of 9 kg of CO2 according to a recent University of California, Berkeley research.
- Is my website using a lot of videos? After all, videos not only use up more energy but also more bandwidth than text or images.
A thorough website audit will help you quickly deduce the areas that need the most work. You can improve the sustainability of your existing website by integrating sustainable practices into its development, which is more convenient and organized.
Remember that making a sustainable website requires, first and foremost, for your web development and maintenance practices to be sustainable.
Be Mindful of Your Hosting
Often ignored, the ‘green’ quotient of your hosting matters significantly when building a sustainable website. Most data centers use old equipment, that contributes only to mountains of e-waste and unwanted emissions.
Green servers and cloud-based hosting are the ideal way forward for digital businesses today. Make sure that your hosting provider has a stringent environmental policy in place that addresses business emissions, responsible use of new technology, and secure, environmentally friendly means of disposal or recycling of outdated equipment. Some providers donate to renewable energy projects and/or employ renewable energy to power their data centers, making them an even more suitable choice.
Design for lighter data consumption
Here are a few tactics to reduce data loading needs on the server:
- Avoid high-resolution images because they increase load times and energy consumption. As a general rule, WEBP is the most efficient format for photographs, typically with files 30% lighter than jpegs.
- Only using images, videos, and animations when absolutely necessary
- Maintain static pages whenever possible
- Enhance site navigation to cut down on the time users spend navigating the site in search of the information they need.
As an alternative, you might want to consider caching. Before a user requests a URL, the entire contents of the page are loaded onto web servers as part of caching. The static version of the page is then displayed when the URL has been retrieved.
Get Rid of What You Don’t Need
A congested website with outdated content is not only unpleasant for visitors to experience, but it also consumes unnecessary energy. Conduct a periodic spring cleaning of your website and remove any outdated content. This includes unused themes and plugins, outdated post revisions, unused material, categories, broken links, and more. Your website will consume less energy as it becomes more efficient, faster, and streamlined with user demands.
Be responsive & responsible with fonts and colours
Mobile websites must be lightweight for them to load more rapidly on smartphones. Focus on improving user experience without compromising on the environment by adopting a mobile-first strategy. This includes optimizing pages, media, font, colours, and so on for cross-device usage.
One, single-page designs are easier for mobile visitors to view and more environmentally friendly. Reduce the number of pages, if needed, and set a page budget for each part of your website.
Two, use generic fonts over custom fonts. Custom fonts, can be large and require longer loading times Even though they are relatively generic, web-safe fonts are the greatest choice for long-lasting website development because they come pre-installed on all digital devices.
Three, use colours consciously. Vibrant, brighter colours require more screen power. Going into default ‘dark mode’ or providing that option if brand guidelines are an issue will help.
At the end of the day, you do not have to give up or modify your brand’s colour scheme but just be mindful when you choose colours responsibly when designing the site, keeping the contribution of each colour in mind.
Being active with lazy loading
Anything below the visible page when it first loads is referred to as being "below the fold". Considering this, adopting lazy loading for all below-the-fold media makes sense to conserve energy and to ensure that your website loads as quickly as possible.
Lazy loading refers to the process of loading images and other media only when necessary. Therefore, when you use lazy loading for your website, everything above the fold loads immediately every time someone visits your page. The remainder does not appear until they scroll down. This will not only amaze your visitors but also improve the SEO of your website in the short term itself.
Make content king, but purposeful.
It is true that for your website to reign supreme, useful content is king. The operative word here is useful, so remember that the purpose of content should be to keep your visitor interested and informed.
If you have to use videos for example, think twice about embedding a YouTube video into a page because that can easily pulls in an extra 500KB of data — that is extraneous data consumption even before a user clicks to watch the video.
So instead of default Youtube embeds, think about using smaller video thumbnail s and only load the video in a modal when the user clicks the image which then results in less data consumption while not compromising the user experience.
Therefore, make sure you use content with a purpose. Being sustainable is having a vision for the long term. Channel your content according to the most important themes of your business, and a sustainable marketing strategy to highlight the most important elements of your site’s design for a comprehensive user journey.
Interested to see sustainable web design and development in action?
Read about the project in a detailed case study for Earth Observatory Singapore on our website.