Sustainable Web Design – Resources

Book cover of Designing for Sustainability by Tim Frick

While the discussion has started much earlier, the first book about Sustainable Web Design in the English speaking realm was Tim Frick’s Designing for Sustainability – A Guide to Building Greener Digital Products & Services, which was published in 2016 by O’Reilly. In the book, Tim explains the foundations of sustainability and its definition and outlines a framework for designing more sustainable digital products and services, which consists of the categories design and UX, content, performance optimisation and green ingredients, including green hosting. The book also includes research on devising meaningful ways to measure the environmental impact of digital work and looks at what a more sustainable future Internet might be.

Book cover image Tom Greenwood Sustainable Web Design

Published just this year (2021), Tom Greenwood’s Sustainable Web Design (available at A Book Apart) goes into detail on how we can measure our impact, how we can design low-carbon websites, what sustainable web development looks like, and how green web hosting works.
Tom also explains how to sell Sustainable Web Design, which he has experience with his agency Wholegrain digital. He talks about being selective when it comes to projects, something that I always advocated as well, but was hesitant and wary of people’s reactions.
You can get a little taster of Tom talking about his experience in this podcast episode 103: Sustainable Websites – Tom Greenwood, Wholegrain Digital.


Book cover of World Wide Waste by Gerry McGovern

Also only published in 2020 by Silber Beach is Gerry McGovern’s World Wide Waste – How digital is killing our planet – And what we can do about it. The book looks a bit broader on digital consumption and the waste that comes with it. It looks at organisations and consumer behaviour, and as such also at personal and cultural change in our relationship with media consumption that is inevitable.

Help me keep this list up to date, if you have and book or resource suggestions, please leave a comment or contact me!

Sitemaps – thing of the past or must-have?

While Google’s John Muller commented on Reddit that HTML sitemaps are not worthwhile for SEO purposes [1] [2], there may be enough other reasons to keep them around. Sitemaps have arguably become a bit of a rarity, but there’s good examples of sitemaps making sense for a variety of reasons.

What is a sitemap?

sitemap is a file where information about the pages, videos, and other files on a site are provided, as well as their relationships between them. These can be provided in form of a .xml-file, which is created solely to aid the search engine in crawling the site and finding the files it is looking for. But the contents of a page can also be mapped out via HTML, which is then usually linked in the footer of the page.

Should a sustainable website have a sitemap?

An HTML sitemap can help with the organisation of a website, especially larger ones, with structuring content and keeping track of all pages. It can therefore serve as a project management tool. But it can also aid in highlighting the value of the website and identify the most relevant and unique keywords for SEO.
Moreover, an HTML sitemap can aid in enabling page links in a natural way to drive visitors, help them find their way to difficult to categorise pages.
The biggest potential of a sitemap, in terms of making it sustainable, probably is, that it can help identify orphaned pages, understand user journeys and optimise them, aid in SEO and therefore findability (one of Tim Frick’s principles of Sustainable Web Design) and in a good page structure. However, sitemaps still only make sense for large websites, or new content needs to be crawled fast (like for news to be displayed on Googe News), there is no need for a sitemap on a portfolio page or the site of a small local business[5][6], blogs, for example, should avail of RSS feeds instead.

Sitemap examples

The following shows the sitemap of online magazine designorate.com. It is linked in the top menu via “About” and also in the footer of the page.

Sitemap of Web-based Design Magazine Designorate https://www.designorate.com/html-sitemap/

The sitemap in this case definitely helps in finding pages that are otherwise difficult to find. Pages that are listed last in the sitemap don’t appear in the menu, the page “Design Ressources” actually links to the “Publications” page. I also find the list of resources under “Design Thinking” very helpful and wonder why it isn’t adapted in the top navigation. Overall, the structure and organisation of the page is difficult to understand, but through looking at the sitemap I find the resources a lot more helpful than if I looked just through the menu.

Let’s have a look at another example, the below is the sitemap of the online directory mygreendirectory.info, I couldn’t find a link to a sitemap but found it by chancing it and entering /sitemap in the URL.

sitemap from mygreendirectory.info/sitemap

First things first, it would be helpful if the list was presented in two or three columns, it took three full-screen images to puzzle together the above image. But since there is no link to the sitemap anywhere visible, it is safe to say it was created for the search engine, not the visitors.
Again, the sitemap headings don’t correlate with the navigation items, the “FAQ” page doesn’t exist, the “Offer” navigation link leads to a page called “deal”, which is blank, same as the “Events”, but I guess that was to be expected in a pandemic. The navigation item “Add a listing” is linked to the page “advertise”, which I suppose summarises this not so honourable intention of a website. A few cheesy stock photos and a poor logo, and a page that let’s you buy ad space. The lack of reviews on the listings doesn’t create authenticity either. A long way to go for mygreendirectory.info.

Conclusively, sitemaps can be beneficial for large websites such as directories for a variety of reasons, but they won’t save a poorly structured website.

Resources

[1]https://www.reddit.com/r/bigseo/comments/dbqcmh/still_worth_making_html_sitemaps/
[2] https://www.seroundtable.com/google-html-sitemaps-seo-28312.html
[3] https://www.searchenginejournal.com/html-sitemap-importance/325405/#close
[4] https://sustainableux.com/talks/2016/designing-for-sustainability-concept-to-practice/
[5] https://developers.google.com/search/docs/advanced/sitemaps/overview
[6] https://blog.spotibo.com/sitemap-guide/

Sustainable web design is accessible web design

Digital products offer opportunities print products don’t: the product can be adapted to the viewer. When I first heard about variable fonts and having to consider that viewers should be able to increase the type-size on a website, or adjust the colour scheme, I felt like everything I learned and loved about design was thrown over board: How dare those users adjust my carefully selected design choices!
Thankfully, I have come a long way and see modern web typography as an art form in itself, an underrated one as such. In my previous post Best practices in Sustainable Web Design I introduced the beautifully designed website sustainablewebdesign.org and it’s accessibility controls panel.

Screenshot from https://sustainablewebdesign.org/ accessibility

The drop-down menu is – very noticeably – located in the top right corner of the page. It allows for alterations in colour and font size, and even allows for the removal of the background design elements. It even allows for switching to dark mode, which apart from adding a different viewing experience, allows for site access with lower energy consumption.
Accessibillity is a very broad topic, and if you are, like me, not originally coming from a web design background but only dipping your toe in every once in a while, it is very easy to get overwhelmed.
Thankfully, there is a standard in Web Accessibility, the Web Content Accessibility Guidelines (WCAG).

WCAG is primarily intended for:

  • Web content developers (page authors, site designers, etc.)
  • Web authoring tool developers
  • Web accessibility evaluation tool developers
  • Others who want or need a standard for web accessibility, including for mobile accessibility[1]

The WCAG is developed by the Web Accessibility Initiative (WAI), as part of the World Wide Web Consortium (W3C) which develops standards for the web[3]. The website has a very handy quick reference guide that helps in understanding what is required for accessible web design in four categories: Perceivable (text alternatives, adaptability, distinguishability), Operable (keyboard accessibility, time adjustments, seizures and physical reactions, navigation and input modalities), Understandable (readable, predictable, input assistance), Robust (compatibility)[2].

There are of course also online tools that scan websites for these features. The w3.org website itself lists 162 software or online tools for web accessibility standard compliancy testing[4]. And it does not only go by its own standards but also offers filters for standards of specific countries, and also a guide that helps in selecting the right tool.

One of the tools is wave.webaim.org. I’ve tested the tool by running three different websites through it:

1. Ethics in Graphic Design Blog


http://www.ethicsingraphicdesign.org/

Screenshot from ethicsingraphicdesign.org
Web accessibility test of the site http://www.ethicsingraphicdesign.org/ using https://wave.webaim.org/

2. The Green Web Foundation

https://www.thegreenwebfoundation.org/

Screenshot from thegreenwebfoundation.org
Web accessibility test of the site thegreenwebfoundation.org using https://wave.webaim.org/

3. The UX Collective

https://uxdesign.cc/

Screenshot from uxdesign.cc
Web accessibility test of the site https://uxdesign.cc/ using https://wave.webaim.org/

The first report for ethicsingraphicdesign.org mostly consists of errors regarding missing alternative text for images and a lot of ‘suspicious’ link text or redundant links. The thegreenwebfoundation.org suffers of too much low contrast for its text elements that are placed on images. In comparison, the result for uxdesign.cc seems like a disaster. The many errors primarily stem from ARIA issues though. ARIA stands for Accessible Rich Internet Applications and is a set of attributes that can be added to HTML elements and are supposed to help users with disabilities who use assistive technologies (AT). When accessibility issues cannot be managed with native HTML, ARIA can help bridge those gaps[5]. Standard HTML accessibility features are prefferable though, as ARIA isn’t supported in older browsers. In this last website, a lot of the ARIA links seem to need fixing.

Web accessibility tools can be very helpful in assessing what needs more work, and the WCAG are indeed very helpful, but consulting experts, collaborating and testing with people with disabilities should be the way to go. I am hoping we will also see more little tools like the accessibility controls on the sustainablewebdesign.org website. With more and more variable fonts becoming available, we are entering an era of simpler, more accessible, and more adaptable web design. Have you seen any other interesting accessibility features? Please drop me a comment below!

Resources

[1] https://www.w3.org/WAI/standards-guidelines/wcag/

[2] https://www.w3.org/WAI/WCAG21/quickref/

[3] https://www.w3.org/WAI/

[4] https://www.w3.org/WAI/ER/tools/

[5] https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility

Best practices in Sustainable Webdesign

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].

Screenshot of sustainablewebdesign.org

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?

Resources

[1] https://sustainableux.com/talks/2016/designing-for-sustainability-concept-to-practice/

[2] https://sustainableux.com/about/

[3] https://www.oreilly.com/library/view/designing-for-sustainability/9781491935767/

[4] https://almanac.httparchive.org/en/2020/page-weight

[5] p. 23 Sustainable Web Design by Tom Greenwood, 2021, A Book Apart, London https://abookapart.com/products/sustainable-web-design

[6] https://wp-rocket.me/blog/best-practice-guide-reducing-website-page-weight/#:~:text=Web%20performance%20expert%20Tammy%20Everts,part%20of%20their%20performance%20budget.

[7] https://www.performancebudget.io/

[8] https://www.websitecarbon.com/how-does-it-work/

[9] https://en.reset.org/blog/whats-carbon-footprint-your-website-01162020#:~:text=An%20average%20website%20produces%204.61,carbon%20footprint%20of%20their%20websites.

[10] https://sustainablewebdesign.org/

[11] https://www.sustainablewebmanifesto.com/

A brief time-travel to the beginnings of the web

While working at CERN, the European Organisation for Nuclear Research, Tim Berners-Lee created the World Wide Web. That was in 1989. The intention of it was originally the automated sharing of information between scientists.

In 2013, CERN launched a project to restore the first ever website, which can now be accessed at http://info.cern.ch/ and looks like this:

The first ever website can be accessed through: http://info.cern.ch/hypertext/WWW/TheProject.html

Let’s not be fooled however, this is looking at it from a modern browser. Tim Berners-Lee’s first browser, which was called WorldWideWeb2 (which was later renamed into Nexus as to not cause confusion between the software and the technology), was already a What-You-See-Is-What-You-Get HTML editor, but in order for the browser to be accessible on other machines than just on NeXT Computers, the first line-mode browser was released in 1993.

Thankfully, CERN has also created a line-mode simulator which let’s us view the original website, but also any other, on a line-mode browser: https://line-mode.cern.ch/www/hypertext/WWW/TheProject.html

First ever website viewed in a simulated line-mode browser; Source: https://line-mode.cern.ch/www/hypertext/WWW/TheProject.html

Resources:

[1] https://line-mode.cern.ch/www/hypertext/WWW/TheProject.html

[2] https://line-mode.cern.ch/

[3] https://first-website.web.cern.ch/first-website/node/24.html

[4] https://www.w3.org/History.html

[5] https://www.w3.org/People/Berners-Lee/WorldWideWeb.html

Sustainable Webdesign – Why it’s a thing and why you should bother

Moving from paper to digital is good for the environment. Right?
Well, kinda. When it comes to the decision between print vs screen, we should really be making our design decisions based on which means of communication is going to be most effective, but at the same time, the whole lifecycle of the product needs to be evaluated and optimised to reduce it’s negative impact on the environment. While print products require physical resources (ink, paper, transportation, printers, binding materials and glues, finishes) and cause more obvious hazards (eg. chemicals used in inks, paper sizing, finishing, binding), digital solutions are by no means the prince on the white horse.

Most estimates put carbon emissions from the internet, and data centres to be responsible for between 1 and 2% of total global carbon emissions. That’s comparable to aviation, or shipping. Or Canada, or Germany.[1] 

But how, you ask?

Well, apart from you using a device that uses electricity (and this device having been produced with rare earths and it becoming an environmental and human health hazard at the end of its lifecycle), every interaction you have online means a data transfer, and the data your device requests and sends most be stored (or hosted) somewhere. 

The total global data created, captured, copied and consumed by 2020 is estimated at 59 zettabytes.

No idea what a zetta byte is?

visualisation of 59 zettabytes

A byte is a unit of digital information and most commonly consists of 8 bits. Historically, the byte was the number of bits used to encode a single character of text in a computer and for this reason, it is the smallest addressable unit of memory in many computer architectures. A thousand bytes makes a kilobyte – so far, so good. That’s about the measure of what fit on a floppy disk, if you’re old enough to remember those. A thousand KB make a megabyte, we’re now at a level of songs and images. Images on the web would be at a couple hundred KB, images straight out of a camera are at about 5-50MB. A thousand MB then make a gigabyte, we’re now at a level of movies for example. 
At a thousand gigabyte, we’re talking about terabyte, which you might have heard of when buying a hard drive in the last few years. A thousand TB make a petabyte – which we don’t come across in a regular household. Add three more zeros and you get to an exabyte. But you’ll need a thousand of those to make up a zettabyte.
Now try and imagine that not only do we have over 59 zettabytes stored right now, but this is our forecast:

data creation forecast
Global Data Creation Forecast, Source Statista [2]

 

By 2025, we’ll already be at 175 zettabytes. This trend is consistent and stands in correlation with the globally rising population and amount of people with internet access, the rising internet connection speed which allows for a lot more and faster traffic. 

Data progression visualisation

In economics, the Jevons paradox occurs when technological progress or government policy increases the efficiency with which a resource is used, but the rate of consumption of that resource rises due to increasing demand, and it explains the exponentially rising data consumption and creation quite well:

Jevons paradox graph

But we have, especially due to the pandemic, learned that it is not just a matter of wanting fast and convenient and 24/7 reliable data transfer, but we have become very dependent on it, and this dependence is set to increase just as much. 

Free cloud space is being thrown at us left and right, while our devices can store more and more as well, and our phones take photos ten times as large as a few years ago, and our livelihoods and educational systems depend on reliable video streaming and constant availability. What we are forcing on our planet while setting up these systems is dangerous, and we are doing it -yet again- without considering or talking about the consequences. 

The bottom line

Each device transmits and receives information to a server somewhere in a data centre, which requires power 24/7/365. Few of these data centres are powered by renewable energy. Each message we send out digitally as designers (or consumers) has an impact: It weighs data and it costs energy. Let’s send our digital behaviour to fat camp!

 

Resources