Month: February 2021

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.

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/

2. The Green Web Foundation

https://www.thegreenwebfoundation.org/

3. The UX Collective

https://uxdesign.cc/

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

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:

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.

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?

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/

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:

Let’s not be fooled however, this is looking at it from a modern browser. Tim Berners-Lee’s first browser, which was called WorldWideWeb² (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

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

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?

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:

 

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. 

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:

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

• [1] https://www.thegreenwebfoundation.org/fosdem/
• [2] https://www.statista.com/statistics/871513/worldwide-data-created/