Green guide

The internet is full of apps and digital services that are never used. One of the most important ways designers can contribute is to prevent us from creating services that no one uses, or that are downloaded and only used a few times. The author of the book World Wide Waste, Gerry McGovern, brings out striking statistics:

«We download the free app, try it maybe once, and then never again. Research by mobile intelligence firm Quettra found that the average app loses 77% of its users within the first three days after the install, 90% within the first 30 days, and 95% within the first 90. All that effort, expense and energy that went into creating things that nobody is using.»

— Gerry McGovern

Therefore, in each project we should ask the question whether the service should be created. Is it a service that responds to a customer need? Through insight work, prototyping, testing and user involvement, we can create services that solve customers' problems and do not gather dust after the first use.

Think about whether you can help the customer make choices that are better for the environment in the project you are involved in. Then make the sustainable choices simple and easily accessible. For example, can you emphasise the green choices more than "greyer" offers? Offer a "stripped down" website as default, so the customers can choose to switch on features themselves.

Example:
Oda introduced a climate footprint on the receipt. This makes it easy for customers to see which of the goods they buy have low, medium and high greenhouse gas emissions. Using a simple visualisation, they make the customer aware of food products' greenhouse gas emissions. No pointing fingers but a friendly nudge in a more climate-friendly direction. Maybe the customer will drop the chorizo next time they shop?

A good user experience and universal design is not only better for the users – it's better for the planet as well.

«… the idea of accessibility is essential for digital sustainability. Accessibility is inclusive. It provides clean aesthetics, rich content formatting, and ease of use. For a client, this translates into increased web performance and visibility online. For sustainability, it means fewer data transfers.»

Help the user to find their way with good navigation, structure, presentation and naming. This avoids unnecessary energy use in form of page loads.

A single typeface in one weight can add as much as 250 kb to a webpage. There are several things designers and developers can do to compress the size of font files. Whenever possible, choose modern font files such as WOFF and WOFF2. These compress the font files to a higher degree than TTF, OTF and SVG file formats, according to Wholegrain Digital.

Another possibility is to use fonts that are already available online, such as Google Fonts. These fonts come with a number of options, and are therefore a greener choice.

Consider whether you need several different fonts in the project and whether they all need to be special fonts. Ditching special fonts in favour of system fonts like Arial and Times New Roman might not be a designer's dream but it's definitely the greenest option – because these fonts are already on users' devices.

Ask yourself:

• Can I use a standard font in this project?
• Can we use one special font instead of two?
• Can we cut down on the number of weights and font families?
• Can we optimise the font files (in cooperation with the developer)?

Read more about optimising the performance and size of fonts.

Additionally to being good for universal design, good colour contrasts in the design can enable users to see the content with lower brightness on the screen. It saves energy. Some phones can actually cut energy consumption in half by reducing the brightness of the screen by 20 percent.

Reach for AAA contrast ratio. You can check the contrast with such tools as Colorable or the Figma plugin Stark.

Design in dark mode can also save energy use: A theme that uses darker colours can reduce battery use by up to 63 percent on AMOLED screens, even if the screen is at maximum brightness.

The colours you choose can also have something to do with power consumption: Certain colours require more screen light, with white and blue being the worst. Even though lighter themes are often standard, dark mode is better for both battery life, the environment and eyes.

Get dark mode from the start when working with design systems. Create some rules for simple "translation" from light to dark mode, for example that the blue colour in light mode becomes white in dark mode.

A website with a lot of content takes up more space on the internet and thus uses more energy than a smaller website. Avoid including unnecessary pages, blog posts, texts, images and videos on the website – include only what adds value to the end user.

Search engine optimisation (SEO) is about giving users what they are actually asking for. In this way search engines ensure that users find the website quickly. This reduces both the number of searches and the number of webpages that are loaded – which, in turn, reduces energy consumption.

Use keyword analyses

A keyword analysis gives you answers to which words and phrases users search for. This allows you to create content that answers users' questions, so that they don't have to click through to another website to get answers. If you do this well, you will also rank higher on these words and phrases in Google.

Optimise metadata

When you design a website, each individual page contains metadata between the head tags. This data describes what the page is about. It is important to keep these tags updated with correct information and to optimise them with the correct words from the keyword analysis. This increases the chance that the page will rank for the right keywords in the search engines, so that users get the information they want with just a few clicks.

• Meta title:
  The metadata field "title" determines the title displayed at the top of the browser window (in the tab). It is also displayed as a heading on the search results page in e.g. Google. If the metadata title is automated to match the page title, it is important to use well-thought-out page titles that include the keyword for the webpage.
• Meta description:
  The metadata field "description" is a textual description of the webpage which the search engines can choose to use on the results page. The text should be a short and correct description of what the webpage contains, including important keywords and/or search phrases.

Create descriptive link texts

Links combine webpages together and are one of the core features of a website. Feel free to link, but only to pages that users actually need so that they don't waste energy clicking on and on unnecessarily.

Both for reasons of search engine optimisation, universal design and general user-friendliness, link texts must be precise, clear, descriptive and meaningful. Avoid generic link texts such as "Read more" and "Click here". The aim of the link must be clearly stated in the text, so that users are provided help to see whether the link is relevant for them.

Add alternative texts for images and videos

Describe meaningful images, videos and other visual media with the "alt" tags so that a textual description of these can be displayed when the media is not loaded. This is especially significant for those who use a screen reader or a browser that only loads text (text-only browsers). The text also explains to the search engines what the image or video shows, which influences the ranking.

Plain language is a text with such clear wording, structure and visual design that users find what they need, understand it and can use it. Plain language creates effective digital texts and is absolutely essential for a good user experience and more sustainable content.

Not sure how to do it? Here are 6 simple tips:

• Write briefly and to the point.
• Put key information first.
• Remove all redundant data.
• Structure the text into easily digestible paragraphs (in a logical order).
• Create informative and comprehensive headlines.
• Avoid jargon (and explain foreign words if you MUST include them).

General writing advice for plain language This is how you write in plain language in digital solutions

Avoid autoplay of films, large file sizes and long films. Videos that play automatically means unnecessary energy use/data loading. Ask yourself:

• Does the film add real value to the user?
• Can the same effect be achieved with a picture, an illustration or an infographic?
• Can the file size be reduced without influencing the quality?
• Can you reduce the amount of video streamed by removing autoplay?
  • Can the films be shortened/cut?

If you want animations on the page, we recommend using svg files and CSS code rather than uploading a gif.

Large images and files contribute to making the webpage heavier. In fact, images are often one of the heaviest elements on a webpage – they make up on average 21 percent of the total weight. As a designer or content producer you can make numerous decisions that reduce the file size of the images, which automatically also reduces both energy consumption and page load time:

• Ask yourself if the image adds value to the user.
• Upload images in the correct scale instead of relying on CSS to resize them.
• Use tools such as TinyPNG or ShortPixel to compress images without visible loss of quality.
• Use the most efficient file format for each image, for example WebP instead of jpeg.
• Use vector graphics and CSS effects to create a visually engaging experience with much smaller files than jpeg and gif (see below).

Further reading How to optimise images for web and performance

Image formats such as jpeg and png build the images using square pixels. The larger the image, the more pixels are needed to display it. This leads to heavier files. You may also need to upload the image in multiple sizes for it to work on different screen types and devices.

Therefore, use SVG files (scalable vector graphic) rather than jpeg and png where you can. Scalable vector graphics have a smaller file size and are ready regardless of the size at which they are displayed.

Is the content still relevant? If not, delete it.

• Use annual wheel for maintenance tasks.
• Create routines to delete or optimise pages that receive little traffic.
• Set a date for depublishing if possible and delete depublished pages that are not to be republished.
• Delete images and films that are only used on the pages you are deleting as well.