Sustainable Web Design

Lesson plan & Content:

#1 What is sustainable web design.

The first chapter explains the concept of sustainable web design and gives you a deeper knowledge of what we are trying to achieve. We also talk about how bad of a situation we are in right now, and how by using sustainable methods we can make the situation better.

The first chapter also briefly explains the other half of sustainable web design which is ethical design. Ethical practices won’t be covered much throughout the book, but you will get a general understanding of them and know how to put people first.

#2 Understand carbon footprints and how to measure them.

The second chapter is dedicated to talking about what carbon footprints are and how we measure our website’s footprint. We will also talk about why it is hard to achieve precise readings and how we can use these readings to improve our own footprints.

#3 Green web hosting.

Web hosting is an important topic to talk about, and in this chapter/lesson, we talk specifically about green and environmentally friendly hosting. We will also look into greenwashing and how you can find the right hosting for you and your website.

#4 CDN (Content Delivery Network).

This technology has been around for many years but did you know we can use it to make our websites more sustainable? In this lesson, we will talk about the advantages of using a CDN, when it should be used and how to set it up using Cloudflare.

#5 Page-weight budgets.

This is a highly underestimated method to make a website more sustainable, but it is highly effective. In this lesson, we talk about what these budgets are, how they help us make a website more sustainable and keep it that way, and also how you get started.

#6 Death of content.

This is one of the concepts that is mostly neglected today but could become one of the most effective. The internet exists of more than 90% of unused data that no one will ever see. But by being aware of what we collect and how long we keep it we can turn it around. This chapter is therefore dedicated to introducing the concept of the death of content.

#7 Accessibility.

The internet is important to all people and everyone should be able to use it. Accessibility is what gives everyone a chance to access important information and it is therefore also a very important part of sustainable web design. In this chapter, you will learn how to make your website more accessible to people.

#8 Minimalistic and lightweight design.

We as people want more, bigger, and better and usually we associate it with making things even more extreme and complicated. In this lesson, we look at the importance of minimalistic and lightweight designs. You will learn how lightweight designs are making your website more sustainable and how they help your customers find information easier and quicker. Minimalism doesn’t have to be bad. When done correctly less is more.

#9 Dark mode, light mode and colors.

Over the years dark mode has become more popular and in this lesson, we talk about its advantages of it and the risk of eye strain. You will also learn about colors and how some of them use more energy than others. Lastly, we will talk about giving the visitor the choice to choose between dark and light mode and why it is important.

#10 Image optimization for the web.

In this chapter, we dive into image optimization and how we can lower the environmental impact our images has as much as possible. You will learn how to edit your images, apply effects, compress them and save them in correct formatting.

#11 Video optimization for the web.

In this lesson, we talk about the rapidly growing demand for video quality and how the difference is hard to see on today's screens. We also talk about video optimization and which formats give the best compression without compromising the quality.

#12 Font optimization for the web.

Almost every website is using custom fonts and often in the heaviest formats available. So we have dedicated this chapter to talking about font optimization, the possibility of using system fonts, lightweight and well-compressed formats, and how to apply them to your website.

#13 Optimizing HTML.

The more HTML we write the more the web browser has to interpret. This lesson is going to teach you how to optimize your code.

#14 Optimizing CSS.

The CSS is controlling how our website looks and this lesson is dedicated to learning how to optimize your CSS. We will go through everything from removing unused code to writing simpler and reusable code. We will also talk about why we shouldn’t use libraries such as Bootstrap and which advantages we get from writing custom code.

#15 Optimizing JavaScript.

JavaScript can be complicated and just because a function works it doesn’t mean it is running as efficiently as it could. In this chapter, we will talk about how we can optimize our code, why we shouldn’t use jQuery, and lots of other useful information you can use when optimizing your script tags.

#16 Optimizing React and Svelte.

React is very popular to use when building web apps and Svelte is also being used more. Using these frameworks can be both a blessing and make our jobs as developers easy, but it can also be costly to both us and our visitors if we don’t do it correctly. In this chapter, we will talk about optimization, split chunks, and many more concepts you can use to optimize your web apps.

#17 Removing unnecessary trackers and requests.

We as humans are curious and we like Lots of data. The average website includes more than one tracker which creates lots of unnecessary data and requests. This chapter is dedicated to talking about removing unnecessary trackers and bringing down the total amount of requests.

#18 Caching with service workers.

Caching is an interesting topic, and in this chapter, we will explore the possibilities of caching content using a service worker script and see how it can help our visitors.

#19 Green API.

We use APIs more than ever, but are we doing it sustainably and efficiently? This chapter opens up the topic and we will discuss different methods that we can use to make APIs more sustainable.

#20 Email, newsletters, and marketing management.

Emails and social media are used for all types of communication between us and our customers. But are you doing it sustainably? This chapter is dedicated to talking about how we handle marketing and how we can improve.