What is a green web designer?

We’ve all heard it or some variation of it. “Go paperless, go green!” But, is it really that simple to be green? Can a green web designer even be an actual job title? It’s the digital world, it’s already green! ….Right?

Well, the web isn’t as green as we all think. In fact, data centers, those magical places that house hundreds of servers in which websites live on, consume enormous amounts of energy. And, those server parts had to be manufactured somewhere. This adds to many environmental and human rights issues.

The goal of a green web designer

The goal of a green web designer is pretty simple: to create a website that leaves minimal impact on the environment. But, since a website is an abstract concept, it can be harder to visualize what this actually means.

Take green graphic design as an example. If you’re a green graphic designer and creating business cards for someone, some of the best things you can do are print on recycled paper, avoid bleeds, and avoid finishes that render the card non-recyclable. But, you can visualize all of these aspects effortlessly. They’re all available to your sight and touch. So, it’s much easier to think about the impact on the planet with tangible items. Websites are not as tangible. In addition, there’s a lot happening behind the scenes we don’t know about or even consider when thinking about the web.

So, how do we make a website more tangible? Well, we can break a website down into energy-usage, file sizes, load times, number of pages, and more. This is best understood if we break a website into two parts, both of which need to be considered by a green web designer.

The two sides to a website: servers and clients

We must first understand the server-side and client-side of a website before detailing what a green web designer actually does. The server-side deals with where a website lives. This includes looking at the hardware of the server, the energy it runs on, and how a company deals with the hardware as it reaches the end of its lifecycle.

The client-side is a little more complex as a designer can’t control what hardware or energy a website visitor is using. So, to account for any situation, the client-side must account for dirty energy and inefficient hardware. This means minimizing file sizes by optimizing content in terms of amount, types, and resolution.

A green web designer minimizes their impact on both of these sides by making sure they can control everything from the web host to the code. To do this successfully, a web developer must not lock themselves into a web template builder such as Squarespace or Wix. A web developer must use a template builder that let’s them control everything, such as WordPress, or must build it by hand-coding, which is what I do at Blue Raspberry.

Green web hosting

Let’s start with green web hosting. There are some great options out there and some less than great options. The main attribute you want to look for in a web host is that they primarily use renewable energy. Three good options for this are GreenGeeks, Greenhost, and Kualo.

GreenGeeks, the web host Blue Raspberry uses, boasts that they are 300% green. This means they use renewable energy where they can, and anywhere they cannot, they offset their carbon three times over. They have web server locations in the United States, Canada, and the Netherlands.

Greenhost runs on 100% wind energy and has one location in Amsterdam. This limits who can use them as choosing a server location close to your customer base is important for energy-efficiency and load times, but, they are a great option for anyone with a customer base primarily located in the Netherlands area.

Lastly, Kualo has two locations, one in the U.S. and one in the U.K. Their data center in the U.S. uses 100% renewable energy as certified by Green-e. Their U.K. data center uses green-sourced power as specified by E.ON and as regulated by Ofgem. So, they are a good option for businesses with either U.S. or U.K. based customers.

Other than renewable energy, you may want to look into a web host’s sustainable practices such as their offices, other projects they’re involved with, and how energy-efficient their hardware is. (Deep dive into those parts of these web hosts, and more, coming soon.)

Understanding the client-side of a website

The client-side to a website is a little trickier. There’s much more that goes into it instead of just choosing a web host. Not to minimize how important it is to vet a web host but, this is where all of your design and development skills need to be pushed and optimized. This is a step that can sometimes be rushed due to deadlines, but it is really important to take the time to do it. The client-side is really about taking every aspect of a website and making it efficient for a user.

First and foremost, a green web designer will create an efficient and easy-to-use site structure. What that entails is minimizing the number of pages down to the bare minimum that is needed. This doesn’t mean that your content needs to be completely chopped, however, it just means identifying your true goals and choosing pages that are completely necessary.

Next, all content in the form of images, fonts, and videos need to be optimized and streamlined. Images should be saved at the max-width they will be used at using the save for web option in Adobe Illustrator or Photoshop. Fonts should be limited to a maximum of four to decrease file sizes and the amount of data a visitor must download. Lastly, videos should be used sparingly, if at all. If videos are necessary, this is a really good guide by KeyCDN on how to make the lowest impact possible.

How a green web designer applies these guidelines

We have the guidelines but what does a green web designer actually do with them? How does it all get implemented? And, how do you still end up with a phenomenal website with all these stipulations?

The biggest way we can apply these guidelines is to deeply consider site structure. Is there a page that can be removed? Can pages be combined? Is there information that would be better suited for a blog or social media? How do you streamline your message? What’s great about this too, is that it can also be a big boost to your site’s SEO and your social media game.

When thinking through the visuals, creativity is a must, and quality versus savings has to be considered. Creatively, we can think about how to use images and videos in ways we may not normally consider. For example, is there an image you could replace with SVG code instead? Could you add a max-width to your screen so you don’t need to save your images as large? Can you save an image at a slightly lower quality? How much does this save in terms of file size compared to the output?

The solutions will depend on the brand behind the site, but they do exist. Another aspect to consider with green web design is accessibility. Make sure all images have alt tags, all information is accessible by screen readers, the contrast is huge, and all the other good stuff for those with disabilities.

More on green web design

Green web design is such a huge topic, one blog post isn’t going to tell you all you need to know. So, here’s some more helpful information for you! You can follow Blue Raspberry Design on Instagram to learn more as I post helpful tips. And, you can check out this Intro to Green Graphic and Web Design webinar I did with Emma Fanning of Little Fox Design.

Another project in the works is my green web design course! Coming to you February 28th, 2023. You can learn more on its official website. Signing up for the waitlist is free and not a commitment to purchase.

As always, if you have any questions, send me a message! I love sharing ideas and knowledge and together we can make green web design the standard in the industry.

Tools to use

Some great tools to use to check your website include:

Pingdom Website Speed Test to check on file sizes

Website Carbon Calculator to check carbon output and comparisons to other sites

The Green Web Foundation to check if a website runs on renewable energy and who hosts it

Sources

The Growth of Web Page Size – KeyCDN

Why Green Hosting – GreenGeeks