Skip to content
Home » Blog » Tools I use to build a sustainable website

Tools I use to build a sustainable website

Image: Tools I use to build a sustainable website

This is a list of tools I use to develop a sustainable website (if you’re new to sustainable web design, read the brief introduction here.) You will learn about what each tool does, how it helps keep the site lightweight, and where you can get it. This is a living document that I keep updating as I learn and test them. 

WordPress

What does it do? 

WordPress is a powerful Content Management System (CMS), a foundation of all my website projects. You can look at it as a website builder, where you can share your content, sell your products or services, or interact with your audience. 

How is it important for sustainable web design?

WordPress is free to use and gives me great flexibility and control in building my website. I can choose my web hosting, themes, plugins, or other third-party services. I can remove the functions I don’t need, choose more lightweight ones, or integrate them with any third-party tools I want.

Free or paid?

WordPress is free to use, and it can be free forever if you want it to be. But you still need to pay for your domain name. There are many free plugins that can get your job done without paying anything. However, at some point, you may need to upgrade to paid themes or plugins if you want to streamline your workflow or scale up your website. 

Where to get it?

https://wordpress.org/

Theme Neve

What does it do?

Every WordPress website needs to have a theme, which is the structure of your website layout, styles, and functions. Each theme is different from one another depending on its purpose. For example, one could be good for blogging, one could be ideal for building an online store, and another could be great for both. 

How is it important for sustainable web design?

Since the key idea of sustainable web design is keeping the site lightweight, the theme you choose plays a huge role in the weight factor. On average, a theme weighs over 600KB with roughly 20 HTTP requests for an empty site. Neve theme, however, weighs 206 KB and has 11 HTTP requests, making it one of the most lightweight WordPress themes. This is why I chose Neve for my blog. What I like most about Neve, besides the lightweight factor, is the ability to lay featured images in line with the excerpts on the blog page. Which makes featured images smaller but still have the appropriate size without taking up much space on the main section.

Free or paid?

I’m using the free version, which covers all my needs. However, there is a paid version that you can do more things with, such as getting more blog layouts and more styles options. 

Where to get it?

https://wordpress.org/themes/neve/ (Free)
https://themeisle.com/themes/neve/pricing/ (Paid)

Smush

What does it do?

Smush is a WordPress plugin that optimizes your images by compressing, resizing, and lazy loading. Compressing is the process of stripping down the space of an image that takes up on a server. For example, a 1 Mb-size image is compressed to a 250Kb-size image. Resizing minimizes an image’s dimension. For example, a 1000x450px image is resized to a 500x225px image. Lazy loading loads an image only when it appears on a user’s screen as they scroll, without fully loading all the images on the page at once. As a result, this plugin’s three optimizations make a web page load faster.

How is it important for sustainable web design?

When heavy resources on a web page like images are fully optimized, the web page becomes more lightweight. Thus, less energy is required to compute and, therefore, less carbon is emitted whenever users view the page. 

Free or paid?

It’s free to start. I think the free version does an excellent job at optimizing images. However, I’m thinking about upgrading to a Pro for more seamless file converting and image compressing.

Where to get it?

https://wordpress.org/plugins/wp-smushit/

W3 Total Cache

What does it do?

W3 Total Cache makes the website load faster by caching (memorizing) content files in different places such as a web server, database, or browser for repeated visits. It can also combine and minify HTML, CSS, and JavaScript files to further cut down the load time.   

How is it important for sustainable web design?

Overall, W3 Total Cache optimizes the webpage in several ways, making the page load faster. Thus, less time and energy are required to process the web page. 

Free or paid?

You can install this plugin for free. Refer to the plugin developer’s documentation when configuring it on your website.  

Where to get it?

https://wordpress.org/plugins/w3-total-cache/

Yoast SEO

What does it do?

Yoast SEO guides and suggests ways to optimize your content for search engines. It suggests how to use keywords on a page or post to increase its visibility through a search engine. It checks image attributes to ensure your content is accessible for impaired users, analyzes the content’s readability, and enables you to edit meta descriptions.

How is it important for sustainable web design?

The easier your website is found, the more time and energy efficient it is. It increases the conversion rate on your website as well. Mastering SEO is a win-win situation for your web sustainability and conversion.

Free or paid?

You can start for free with Yoast SEO. The free version already has plenty of useful features (as mentioned above) that help set a standard for your SEO status. 

Where to get it?

https://wordpress.org/plugins/wordpress-seo/

Chrome Web Developer tool

What does it do?

The Chrome Web Developer tool or other browser developer tools help us understand the mechanism of a web page on a deeper level. It shows us the page’s components such as HTML, CSS, JavaScript, image files, element sizes and loading time, etc. It also allows us to debug the page by manipulating components and seeing the changes in real-time. 

How is it important for sustainable web design?

I like to use the Chrome Dev tool to inspect my web page weight and load time. It helps me identify what element takes the longest time to load and weigh the most so that I can fix the right thing. 

Free or paid?

Browser developer tools are free to use and are mostly pre-installed on all browsers, whether Chrome, Safari, Firefox, etc. 

Where to get it?

To bring up the Chrome developer tool, right-click and choose “Inspect.” Or press key F12. Learn more about browser developer tools here

Notion

What does it do?

Notion is a real game-changer for managing anything: your calendar, to-do lists, projects, homework, content, etc. It helps extract ideas from your brain into a document in an organized and streamlined manner.   

How is it important for sustainable web design?

It simplifies my workflow and keeps things organized in one place. When things are organized and easy to find, you spend less time and energy (physical, mental, electrical) managing them. In addition, if you onboard another team member to help with your web work, you can easily add them on Notion, where they have access to your resources, plan, and documentation. 

Free or paid?

You can start for free on Notion. I’m also on a free plan and have over 40 documents, including personal and shared docs. I can add up to five guests as collaborators. If you want to share a document with more people, you can share a document link with permissions.

Where to get it?

https://www.notion.so/

Color Contrast Checker

What does it do?

Color Contrast Checker rates how your chosen colors pair well together and have the right contrast. It’s useful when choosing font and background colors or any visual content for your website.

How is it important for sustainable web design?

This tool doesn’t directly reduce the carbon emissions of a website, but it’s a tool that helps build and improve the user’s experience. When choosing colors that are easy on the eyes, 

Free or paid?

Color Contrast Checker is free to use, which is enough if you only want to compare colors. There is also a Pro version to purchase if you want to get unlimited palettes and more color schemes. 

Where to get it?

https://coolors.co/contrast-checker/112a46-acc8e5

Canva

What does it do?

Canva is my number one graphic design tool that makes me completely forget about the Adobe family. What I love most is it helps me create beautiful graphics quickly and easily. My graphics are minimal, aesthetic, illustrative of my points, and consistent with my brand identity. 

How is it important for sustainable web design?

Canva has a wide selection of vector images, which are ideal for reducing the energy used for image content compared with real pictures that weigh down the page and take more computing power to display. The flatter the images are, the lighter and faster your webpage is. 

Free or paid?

You can start for free on Canva and enjoy plenty of vector selections and templates. However, I invested in the Pro version because it gives me more selections and customization. 

Where to get it?

https://www.canva.com/

Throughout the process of cleaning up my blog, these tools are truly useful and save a lot of time. Have you used any of them? What are similar tools you use and want to share about them? Comment below!

Leave a Reply

Your email address will not be published.