Sustainable Web Design In 20 Lessons

Lesson plan & Content

• #1

  What is sustainable web design

  What exactly is sustainable web design, and what is it we are trying to achieve? In the first lesson I explain the concept and introduce the rest of the book.

• #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

  The power of Content Delivery Networks (CDN)

  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

  Minimalism and lightweight design

  We 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

  HTML Optimization

  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

  CSS Optimization

  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

  JavaScript Optimization

  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

  React and Svelte Optimization

  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

  Trackers and HTTP 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

  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 APIs

  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 and newsletters

  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.