Skip to content

The green web design goodness coming your way

Peep everything you’ll learn inside the 7 fluff-free modules.

Intro to Green Web Design

What the heck is green web design and why is it important? We take a look at how green web design touches the physical world, and take a brief look at the history of the Internet and web design in all its glory.

We’ll define Green Web Design and clear up myths you may have heard about the Internet’s impact.

Next, take a dive through history to learn how we got here (remember Flash? Yeah, neither do I). And we’ll discuss what we can take away from the past as we head into the future.

Video Titles:

  • Welcome to the Course! (11:12)
  • What is Green Web Design (18:46)
  • Green Web Design Myths (22:05)
  • Electricity’s Carbon Footprint: An Introduction (32:56)
  • Technology + The Physical World (24:21)
  • The Web: A Look Through Time (27:09)

Content & Organization

Website strategy begins. There are a ton of moving pieces to consider before you decide on a builder, a host, and an aesthetic. Strategy is the foundation of all design.

We’ll talk through site mapping, choosing content, and developing page structure. If you’ve been designing websites for a while, you might feel tempted to skip this unit. But stick around – ’cause we’ll be doing it all through a sustainable lens.

Video Titles:

  • A Website’s Carbon Footprint (20:23)
  • Site Mapping For Sustainability (16:55)
  • Choosing Content For People and Planet (7:53)
  • Page Structure + Sections (23:01)
  • Case Study: Optimal Organization (33:08)

Before you Build

Strategy’s done, but there’s still a lot of work that goes into a website before a lick of code touches web browser. We’ll go through how to choose the right website builder for your project. Yes, even Squarespace can be a good choice – and no need to shamefully use it, either!

If you’re using a platform like WordPress that doesn’t have its own hosting, you’ll also need a web host. You’ll learn how to pick that, too.

How are the most popular website builders shaping up in the sustainability front? What’s Shopify doing to help the planet? Or Show It? We’ll find out!

And finally, we’ll conclude with an overview of some of the tools you’ll be using in the units to follow.

Video Titles:

  • How to Choose a Website Builder (8:34)
  • How to Choose a Web Host (29:27)
  • The Sustainability of Website Builders (35:423)
  • Green Web Design Tools (23:28)

Images & Video

Here comes the nitty gritty step-by-step how-to videos. This is where rubber meets the information highway and you’ll start seeing tangible impact through grams of CO2.

We’ll talk through different image file types, how to size them, and then how to save them through different programs. Next up, video: how to know whether to include them or not, their file types, and how to optimize them.

Video Titles:

  • Images: File Types + Sizing (16:06)
  • How to Save + Optimize Images (1:11:11)
    • Photoshop
    • Illustrator
    • Canva
    • TinyJPG / TinyPNG
    • Figma
    • Adobe XD
  • Video: File Types + Optimizing (16:19)
  • Case Study: Imaginative Imagery (50:23)

Fonts, Code, & More

While images and video are flashy and a quick way to reduce your impact, fonts, code and plug-ins also contribute to a website’s carbon footprint.

We’ll cover how to choose fonts for your site and then how to implement them. Then we’ll take a quick detour into code to talk through what you need to know and what’s not worth the effort.

And finally, plug-ins – those so-called magic bullets of solutions. Some are definitely worth the hype but a lot are nothing more than a good marketing strategy. And while we can’t get into every single one out there, you’ll get an overview into knowing how to tell a legit plug-in from a poser.

Video Titles:

  • Choosing Fonts: File Types + Font Types (17:04)
  • Crash Course into Code (7:06)
  • Colors and Their Energy Impact (15:29)
  • Plug-Ins + Possibilities (12:09)
  • Case Study: Small Touches with Big Impact (44:30)

Accessibility & Designing for People

If you want to make a greener, radder website, you gotta account for the people visiting it.

Talking accessibility can make people freeze up and panic. It’s a huge topic! And while this course can’t teach you all things accessibility, it will help you get your website on the right track for design and usability.

We’ll talk about how to design for those with disabilities and for those without access to the infrastructure needed to access the fanciest of sites.

Video Titles:

  • Accessibility Overlays are Bullsh*t (10:04)
  • Who to Keep in Mind (17:29)
  • Colors, Contrast, + Visuals (14:23)
  • Alt Tags, Labels, + Captions (28:41)
  • Case Study: Accessibility Testing (48:39)

Marketing + Beyond

By this point, you’ll have all the tools you need to get through the technical sides of a website. But, your work doesn’t start and end with the design. There’s marketing effort before (and after) and upkeep.

Websites are kinda like living things. Do you want to help maintain it or is that not for you? If you killed your Tamagotchi back in the day, that might be a good indicator of the direction you should take.

Video Titles:

  • Marketing Green Web Design to Clients (17:37)
  • Gone Too Green: Avoiding Sustainability Pitfalls (12:26)
  • Website Upkeep + Ongoing Changes (7:24)

SOUND LIKE YOUR DOMAIN?

Learn all the nifty tricks to create low-carbon websites

Investment: Currently ON SALE for $250 USD (originally: $300, sale ends April 30th 2024)