Best practices in Sustainable Webdesign – Conscious Communication Design Blog

Sustainable web design goes hand in hand with general good web design practice, which should:

solve problems
achieve results
be innovative
be predictable
communicate a message effectively
support business objectives e.g. getting users to
consume the content or respond to action(s).
be designed with an understanding of how humans process visual information

Tim Frick is the author of “Designing for Sustainability: A Guide to Building Greener Digital Products and Services” – one of the pioneering books in this field, which was published in 2016. In the same year he gave a talk at sustainableux.org, which is an online “conference in an attempt to provide a forum for practitioners to share the methods and philosophies that enable us to make meaningful contributions to the struggle as individuals, and an industry” [2]. In his talk Designing for Sustainability: Concept to Practice [1], Tim categories these four pillars for sustainable web design:

Findability
Usability
Performance optimisation
Green hosting

Before we attempt to fix a problem, we must understand it. Hence does good and sustainable web design depend not just on fast performance. Good load times are important, but they don’t always correlate with reduced data transfer and emissions [5]. The httparchive.org‘s Web Almanac publishes some incredibly insightful data with the mission to track how the web is built. Below shows the page weight distribution in 2020:

Bar chart showing the distribution of the total bytes per page. Desktop pages tend to have more bytes throughout the distribution. The 10, 25, 50, 75, and 90th percentiles for mobile pages are: 369, 900, 1,915, 3,710, and 6,772 KB per page. Source: https://almanac.httparchive.org/en/2020/page-weight

By experts recommended is an overall page weight of 1MB [6], and many companies make target 1MB as their performance budget. Tools like Jonathan Fielding’s Performance Budget tool [7] can help calculate which load speed can be achieved with which page weight per selected connection speed, and also how the weight is distributed between assets.

Bar chart showing the median number of bytes per page for images, JavaScript, CSS, and HTML. The median desktop page tends to have more bytes. The median mobile page has 916 KB of images, 411 KB of JS, 62 KB of CSS, and 25 KB of HTML. Source: https://almanac.httparchive.org/en/2020/page-weight

The above shows, the bulk of the page weight still comes from images, so image optimisation is the key to reducing the overall page weight, and with it the data transfer, and the emissions.

An average website produces 4.61 grams of CO2 for every page view. For websites that have an average of 10,000 page views per month, that makes 553 kilograms of CO2 per year[9]. The carbon footprint however needs to account for the data transfer over the wire, the energy intensity of the web data, the energy source used by the data centre and the carbon intensity of electricity as well as the website traffic[8].

Ultimately, any web project should start with a performance (or should I say carbon-) budget, meaning that we set our target at the lowest possible page weight while still respecting design principles. Because any request sent for unattainable information is a useless request – if our visitors don’t find what they are looking for, the energy it took for them to get to our page was wasted (and our job poorly done).

Good and effective web design needs to have a good user interface, which guides the user and presents them with a clear path, UI should be clear, consistent, flexible, intuitive, responsive & structured. The users attention must be focused and overstimulation reduced. All functionality of the website or app should be obvious and self-explanatory, following the principle show, don’t tell. Important features should be exposed and easy to find, but overall user requirements should be kept at a minimum. It is also not necessarily helpful to include phony testimonials that supposedly underline trustworthiness, which can be better demonstrated with independent rating tools – authenticity makes for good design. But the overall page must also be consistent, and follow familiar patterns. All of this while following the Gestalt principles.

Case study

The website sustainablewebdesign.org promotes web design that follows the Sustainable Web Manifesto: and is clean, efficient, open, honest, regenerative, and resilient[11].

So let’s have a look at the website sustainablewebdesign.org itself and analyse it in regards to good and sustainable web design practices:

Findability (seach function, SEO, content inventory and relevance

The site doesn’t have a search function
A quick SEO check yields a good result: The amount of css and js files used should be reduced and the amount of h1 headings optimised, otherwise the page has good crawlability, structure and meta data. The content is very relevant and includes data and resources from this year so very much up to date.

Usability (all functionality obvious and self-explanatory, attention focus, Gestalt principles

The visuals are kept simple, instead of images, the website uses coloured shapes created with css, which reduces the page weight. No imagery also means few distractions. The content is broken up into easily digestible chunks which require scrolling to view. The design is based primarily on typography and white space with content organised through coloured shapes and proximity and similarity. The website works primarily with two fonts: Paralucent 600 and Courier 400, and font awesome for icons. The features and calls-to-action are straight forward and effective.

Performance optimisation

A few images are used further down for image recommendations, but those are fully optimised for the web. Running a speed optimisation test reveals that the page still takes 2.651 seconds for the Largest Contentful Paint (LCP), but is fully loaded shortly after (2.726s). For a test run from Chrome-desktop-location:Ireland this is not overly fast, but can be explained with the website being dependant on a multitude of css and js files to build. The free performance test result lists security issues, which can likely be ignored as they are based on the fact that the website uses WordPress, and if WP is kept up to date, the security vulnerabilities will be resolved by the CMS. Overall, for a WordPress site it performs very well.

Green hosting

The websitecarbon.com test result claims the site was run on “bog standard” energy. It did however say that for this website, too, which does is fact run on renewables, so I would doubt this result.

Accessibility

The website has a very prominent tab in the top right menu, which allows for adabting the website in font size, colour mode and even to toggle off the background shapes, and therefore reduce the background noise. This is truly progressive!
A test on webaccessibility.com gives a 92% compliance score. The only violation being that links that open in a new tab don’t have a warning window

Authenticity

The website states it is presented by MightyBites and Wholegrain digital. Tim Frick (Founder & President MightyBites) and Tom Greenwood (Managing director Wholegrain digital) are the authors of the books Designing for Sustainability and Sustainable Web Design (respectively) which are promoted on the website.
These two resources (together with World Wide Waste by Gerry McGovern) are pretty much the only published books to date about Sustainable Web Design.
If you read this, Tim and Tom, which web hosting provider runs your website, or more importantly, with which energy?