We asked ChatGPT for sustainable design tips - are they any good?
A collab with Emma of Little Fox Design.
The voiceover was done in one take with all imperfections included - so you may hear me stumble over my words or some background noise.
Hey y’all! Hope you’re doing well. It has been A WEEK over here already. Our dog is infected with a parasite that has made us drop everything to deep clean our house.
If there was an award for most loads of laundry in a week, I think we’d win. We only found out on Monday and it’s felt like years have passed between then and now.
Because life happens, I had to scrap my original post idea for today and slide into editing something a little bit easier.
This topic is one
of Little Fox Design and I covered on Instagram back in the spring, but I wanted to post it here, too, in order to add more context (and have an extra backup cause Insta is still not letting me use my account).So, does ChatGPT actually know its stuff when it comes to sustainable design? Or can we throw its advice in the trash?
When we asked, ChatGPT spit out 10 tips on Green Web Design best-practices and 10 tips on Green Graphic Design best-practices.
I'll go through each green web design tip and let you know if it's legit or bullshit. And at the bottom is Emma’s critique of ChatGPT’s 10 tips on Green Graphic Design. Two for the price of one!
1. Optimize images and videos: Use compressed files and optimized images and videos to reduce file size and load times, and minimize the environmental impact of large files.
True! This is the best thing you can do on a site.
Images on average make up about 50% of a web page’s file size. Videos, if used, are most often the largest pieces on a web page.
If you do nothing other than optimize these two elements on a page, you’ll get a TON of carbon savings.
Some quick tips to optimize your images and videos include:
Use a tool like TinyJPG to compress your JPGs and PNGs before uploading them to your website. If you only have time to do one thing for your website - do this!
If you’re saving from Canva, make sure to save photographs as JPGs. Canva defaults most creations to PNGs but JPGs are better suited to optimizing photos. Plus, Canva is the MVP at small JPG file sizes.
For your videos, use HandBrake. It will optimize them with not much effort on your part and you can save SO MUCH in file size. It’s free to download and install!!
2. Use sustainable web hosting: Choose a web hosting provider that uses renewable energy sources, such as wind or solar power, to power their data centers.
Yes, but there's a caveat here...
Most green web hosts purchase renewable energy credits in order to claim they use “100% renewable energy.” RECs are not perfect. They don’t actually stop fossil fuels from being burned and they don’t stop carbon from being emitted. But, they can help build a future towards green energy, if used properly.
This also only solves half the problem. Most people accessing a site will be using electricity generated by fossil fuels, especially in the US as fossil fuels still make up about 60% of the grid.
A better tip would be to organize for and vote for politicians who support renewable energy and the Green New Deal. And use green web hosts in the meantime, if you can 😉
A few of my favorite green web hosts to consider if you’re looking to make the switch:
There’s tons more, too! The Green Web Foundation lists all the green web hosts (or the vast majority of them) and is a great place to look for more if none of these quite fit the bill.
3. Reduce HTTP requests: Minimize the number of HTTP requests made by your website to reduce the energy required to load your site.
A good tip! Let's unpack it a little.
First, what the heck is an HTTP request? To put it simply, one file that has to be loaded on a web page equals one HTTP request. This includes images, videos, fonts, CSS & JS files, and other miscellaneous assets.
The less of these that need to load, the faster a browser can load the page, and the less energy that’s used loading it.
A few ways you can do this include:
Using less assets overall (i.e. less images and videos). Within reason of course - don’t go deleting vital content. Just create with intention.
Use system fonts instead of custom fonts so the site loads what’s already on the user’s computer.
Keep all your custom CSS and JS in one file each - if you’re not a developer and your head is spinning as to what this means, don’t stress and just ignore this bullet.
4. Implement efficient coding: Use efficient coding practices to reduce the amount of energy needed to process and render your website.
It can help, but usually doesn't come into play.
This tip is simply not important in most cases. For most website builders, you can’t touch the HTML, CSS, and JavaScript on the page. You can only add to it. Therefore, you can’t minimize the code.
On top of that, HTML and CSS combined make up a little less than 5% of the average web page. Minimizing these will have minimal returns. And adding your own custom HTML or CSS to a web page will add very little file size. So don’t sweat it!
JavaScript, however, does make up about 23% of the average web page. To minimize this, avoid unnecessary plugins and JavaScript animations. There is a good chunk you can’t do anything about, though, if you’re using a builder like Squarespace, Showit, Wix, or Shopify.
5. Use a Content Delivery Network (CDN): A CDN can help reduce the amount of energy needed to serve content to visitors by caching and delivering content from the closest server location.
Important in some cases...
If you have a lot of global customers and visitors to your page, this can help your page load much faster for everyone.
But, if you’re a local business with only local customers, you probably don’t need a CDN as long as your webhost is located somewhat close to your business location, which is good practice to begin with.
Most web hosts offer a CDN in their hosting packages, too. So it’s not a consideration most people will have to make.
6. Prioritize website speed: A faster website uses less energy and can reduce the carbon footprint of your website.
True, but not a very helpful tip.
Green web design tactics aim to make a site load faster and more efficiently. The smaller the file size of a page, the faster it loads, the less carbon it emits.
This tip basically says, “just make a sustainable website.” So helpful!
7. Optimize for mobile: Make sure your website is optimized for mobile devices to reduce the energy required to load your site on smaller screens.
Yes! This is a must for any website.
I don’t have much more to add, this is just good practice.
Most website builders have this as a standard practice already. But I guess if your website builder doesn’t have a mobile optimization option then ditch it and move to one that does when you can.
And also please tell me what builder you’re using because I need to know what builders don’t support mobile optimization in 2023.
8. Use sustainable design principles: Use design principles that prioritize sustainability, such as choosing colors with a lower carbon footprint and using eco-friendly fonts.
Yes to the fonts, no to the colors.
Eco-friendly fonts in this case mean system fonts. Think Arial and Times New Roman. Replacing a custom font with a system font can save 50KB to 250KB to even more! And not all system fonts are as boring or basic as those options.
Both PC’s and Mac’s have their own system fonts, but there is a bit of crossover!
System fonts that work on both Macs and PCs include: Comic Sans MS, Courier New, Georgia, Impact, Microsoft Sans Serif, Tahoma, Times New Roman, Trebuchet MS, and Verdana.
These can be great for body copy because those just need to be legible and don’t do as much work for your brand recognition. I’d recommend keeping your fancy brand fonts for your headings, though.
Onto the other half of this tip:
Choosing colors with a lower carbon footprint is not something to worry about. To simply sum up what they mean: on OLED screens, blue light uses more energy than red light. Dark mode also uses less energy than light mode on OLED screens. But dark mode isn’t great for everyone. (Read my opinion on dark mode here.)
So if certain colors do use more energy, why shouldn’t we be concerned about them?
Well, OLED devices make up about half the devices we use, most commonly mobile devices. Laptops and desktop monitors most commonly use LCD technology in their screens where these color choices don’t have the same energy impacts.
So even if you choose a so-called energy efficient color palette, only half the devices your users are using will save energy. There will be no impact on their big computer screens.
On top of that, the energy difference between blue light and red light is microscopic. Switching your website’s colors to reds and greens instead of blues will save maybe 1% of the energy used by a site. It’s really not worth driving yourself mad for 1% savings.
As long as your colors are accessible, use whatever colors you want.
9. Consider user experience: Optimize your website's user experience to reduce the amount of time visitors spend on your site, minimizing the energy required to load your website.
A good tip! This strategy is vital to a green site.
Unlike social media, where they want you to doom scroll for hours, a website should be designed for a visitor to get in, get the info they need, and get out. Or get in, find that they like you and your services and/or products, make an inquiry or a sale, and then get out.
Someone spending less time on your website does not necessarily mean it failed if your visitors are finding what they need. We want to keep them there for a specific purpose in reaching our goals for our site.
Additionally, make sure everyone can access the info on your site in a way that works for them. Have captions on your videos and alt text on your images. If someone is struggling on your site because of their impairments, they will spend more time on your site for the wrong reasons.
10. Encourage sustainable behavior: Use your website to promote sustainable behavior and practices, such as encouraging visitors to reduce their carbon footprint and adopt sustainable habits.
Ahem, such as taxing the rich and eliminating subsidies to fossil fuel corporations.
Fixed it for them! 😉
But in all seriousness, individual actions only do so much. Yes, they can create ripple effects. Yes we should still adopt individual sustainable habits if we can. But we shouldn’t put a ton of pressure on ourselves to be perfect. And we especially shouldn’t shame others for their habits!
This is a complicated issue but I think being active in our communities and making our voices heard through elections is going to make a much bigger splash than a few simple tips for eco-friendly living on our websites.
But this might also depend on your business. Maybe this tip would work perfectly for you! And if so, go ahead.
This is just my opinion and I’m mostly being cheeky about it.
So... how did ChatGPT do overall?
Half of their tips had good, solid advice! A lot of it could be enhanced with more detail and nuance but they had 5 tips that would give a designer a good starting point in sustainable web design.
Only one half of one tip was useless, re: the energy efficient colors.
The other 5 tips were semi helpful but they needed more context and information to truly be useful.
Which means I’m giving ChatGPT a grade of 75%. In the US school system this would be a solid C - a passing grade.
Overall though, I don’t think ChatGPT is a great place to get your sustainability tips. You can’t fact check their sources, they don’t even list their sources, and ChatGPT has innate biases.
What do you think, though? Am I being too harsh on our AI overlords? Am I too cynical about the whole thing? Or do you agree with my assessment?
Let me know in the comments!
And as an added little bonus to this post, I’m including Emma’s half to this collab here! Her half included 10 green graphic design tips.
So here’s ChatGPT’s responses and her thoughts on them:
1. Use eco-friendly materials such as recycled paper, non-toxic inks, and biodegradable or compostable packaging.
This one is good! Although, there are a few caveats...
There's no such thing as a "non-toxic ink" and compostable packaging isn't always truly "compostable". (Technically, some plastic is "biodegradable".)
2. Minimize your carbon footprint by using local suppliers and reducing transportation.
Yes! Absolutely a great tip.
We always try to source printers and/or materials near our clients or their desired distribution area.
3. Design for durability and longevity to reduce waste and promote reuse.
Good, but pretty mid.
Design for durability, as well as the right to repair is important. But technically, plastic is an extremely durable material, so this one needs context for what you're designing. Reuse is also not always practical or available. What can you do when reuse isn't an option?
4. Avoid overuse of color and use white space effectively to reduce ink usage.
Not something we generally recommend.
Ink and colours just simply don't make up a large material impact. There isn't any practical reason to sacrifice colors or over-use white space for sustainable design. If you really want, you can avoid full-bleed designs. You're WAY better off focusing on sustainable paper stock options.
5. Use energy-efficient equipment such as Energy Star certified computers and monitors.
Good, but pretty mid.
A good home office / energy-saving tip but honestly doesn't really have that much to do with green graphic design.
6. Digitize your workflow to reduce paper waste and promote remote work.
Good, but pretty mid.
Digitized workflows are good, but I feel that most of designers work in Adobe primarily, and sketchbooks aren't killing our planet. Remote work is also not directly important to green graphic design.
7. Consider alternative printing methods such as digital printing or print-on-demand to reduce excess inventory.
Yes! Absolutely a great tip.
Always good to evaluate how many business cards or brochures or items you /really/ need.
8. Use sustainable typography such as typefaces that use less ink and are designed for screen reading.
FULLY GREENWASHED CLAIM!
Ink makes up 1% or less of your overall material use. Fonts make up even less. Every single "eco-friendly" font that "saves ink over the long run" has been completely debunked. Don't waste time with "eco-friendly" fonts.
9. Design for accessibility to reduce the need for multiple versions of a design.
Yes! Absolutely a great tip.
More of a digital design tip in some ways, but I always recommend clients make large marketing pieces especially for tradeshows as reusable as possible.
10. Educate your clients on the benefits of sustainable design and encourage them to adopt eco-friendly practices.
Yes! Absolutely a great tip.
Yep! Often (like 99% of the time) clients are extremely well meaning and don't know that the "soft-touch matte coating” they requested on their business card is actually made out of plastic. (Gently) let them know!
If you enjoyed Emma’s perspective and the green graphic design tips, check out her Substack:
If you’re interested in learning more about green web design, check out these resources:
7 Days to a Greener Website Challenge: 100% free! Once you sign up, each day, you’ll get a task emailed to you with a video walkthrough + PDF guide to help. Works for any website platform. DIYers and designers welcome! No coding knowledge needed.
Green Web Design Course: Learn everything from the impact of the web on the planet to how to optimize all the details on a site. With seven modules, the curriculum gives a well-rounded look at what green web design is, why it’s important, and how to implement it in your work and marketing. No coding knowledge needed. Investment: $300 USD. Payment plans available!
Thanks so much for venturing into the Blue Raspberry Patch with me! I love exploring all these sustainability and design topics in longer form and sharing little berries of info with you all. I’d be delighted if you’d join me here!