I design sustainable websites. AMA

Thanks, Tom! I should probably write more. But if someone feels the urge to do that, please contact me! :slight_smile:

Do you mean downloads of files from websites?

If so, I’m not aware of a tool that makes it easy to automate this, but if you track the number of downloads in your analytics and you know the size of the files, then you could pop it all in a spreadsheet and factor in the CO2 per MB. Sorry that’s not a straight forward answer :grimacing:

That said, it could be automated, but I’m not aware of anyonme doing it yet.

Why thank you! Yes I am excited for what it could turn into. I am working on the site at the moment, so would actually love more input from potential users.

Feature requests etc. And… maybe plugin recommendations or a build recommendation for creating a robust, easy to manipulate and style user/membership tool with WordPress. With potential for paid memberships/restricted content. As what I’ve been looking into so far hasn’t really cut the mustard!

1 Like

Hi all,
Great AMA! What are the basics when designing a website that is accessible?

Hi Tom,
You mentioned earlier that a 10Mb app downloaded 1,000 times would produce 500gCO2. Is there a resource that we can use to find statistics like that?

I feel your pain. They don’t sound like unreasonable requirements but it is hard to find a WordPress membership solution that does all three really well. We have used Restrict Content Pro and found it works quite well, but it very much depends on the unique requirements of the project.

2 Likes

I think the basics are ensuring that content is well structured and well written, that code is structured logically and that any non-text elements are tagged up accordingly (e.g. Alt tags on images). Also, at a basic level, simple things like colour contrast and colour combinations that work for the colour blind are important.

Some of the basics are quite intuitive if you stop and think about each detail, but then the devil is in the detail. WCAG2.1 quick reference guide is a good starting point - How to Meet WCAG (Quickref Reference)

1 Like

Hi Tom,

This is a really interesting topic!

I work for an advertising agency and have a team of designers including web. What actionable changes can I encourage them to help design more sustainably?

Thanks,
Jason

1 Like

So I’ve based that on the calculations behind www.websitecarbon.com. But the core data is mainly from this study https://www.mdpi.com/2078-1547/6/1/117#abstract

I do have a spreadsheet that I can share later if you’re interested in fiddling about with the numbers :wink:

2 Likes

I love the new https://www.wholegraindigital.com.

I see a relatively lot of animation. Do you have some kind of decision making process when choosing between weight vs. animation? I mean that animation has its price in the visitors browser.

I’ve written some tips in this article that might be a good reference - https://www.wholegraindigital.com/blog/website-energy-efficiency/

A few key things for designers are:

  • Plan intuitive and simple user journeys
  • Try to use less images, and make images smaller. Be creative to find ways of creating visual impact with colour, space, CSS styles and simple vector graphics
  • Use less white and blue! These use the most energy of OLED screens
  • Avoid autoplay video
  • Be frugal with custom fonts - try not to have too many different typefaces and font weights
1 Like

Hi Tom,
What are your thoughts on hosting providers? Are there any that you’d recommend to be part of an overall sustainable website?

Wow, this is interesting. They might be the two most used colours on the web. :slight_smile:

Yeah this was a really tough process for us and we are still experimenting. Our process was the following:

  1. Discuss whether a particular part of the site would genuinely benefit from user experience in terms of user experience and client perception (commercial benefit). This is subjective, hence the ongoing debate!
  2. Test different options for animating the defined element and test in Safari browser with the Energy Impact tool to find the option that achieves the impact we want with the elast energy impact.
1 Like

I know, I guess the internet followed on from white paper and blue ink!

1 Like

What is this tool Tom?

1 Like

Thanks!
I haven’t heard of this tool. Is it a Mac app or the Activity monitor?

Yes, it depends on the project but we love https://positive-internet.com/ who are independent and really care about what they are doing. From the big providers, Google are doing good work in driving the industry forwards in both renewable energy and energy efficiency.

A good starting point is to check The Green Web Foundation Directory of hosts at The Green Web Directory - Green Web Foundation

1 Like

The Energy Impact tool is inside the Web Inspector of the Safari browser. Some info about it here: How Web Content Can Affect Power Usage | WebKit

2 Likes

This is really interesting, whilst we are all in here, do you have any suggestions on how to make this forum more sustainable? :slight_smile: