Medium impact πΏ
Time is precious, wasting a visitor's will cause frustration and lead to abandonment or resentment. Additionally, the more time a visitor spends in front of a screen, the more energy they utilize. As such, throwing stuff in front of the visitor vying for their attention might sound like good business (even though we know due to banner blindness it rarely works), but it mostly damages the environment and dissuades the visitor.
Respect a visitor's attention by allowing them to easily control how (and when) they receive information.
Prioritize features that don't distract people or unnecessarily lengthen the time they spend using the product or service.
Avoid using infinite scroll or related attention-keeping tactics.
π¦Ύ
Medium impact πΏ
Visitors can identify patterns fairly easily, and they like browsing websites and apps and feeling as if they know what they are dealing with. As such, focusing your efforts on producing a product or service that is clean and has key components in easy-to-recognize locations (and visuals) will allow faster user-experiences and fewer emissions.
Provide only essential components visible at the time they are needed. Where appropriate, interfaces should deploy visual styles (patterns) that are easily recognized and used.
π¦Ύ
High impact πΏ
Manipulating the visitor into doing things you want them to is a short-term gain, long-term loss tactic tool. It's ethically bad, unsustainable, and should be avoided at all costs.
Advertisements and sponsorships are both ethical and clearly identified with the product or service, only presenting them when they provide real economic and ethical value and don't diminish a visitor's experience.
Remove unused and unconsented page tracking.
Avoid what are commonly known as dark patterns, deceptive design, or unethical coding techniques, which manipulate visitors into taking actions not necessarily in their best interest (anti-right click, no-copy, requiring an account to purchase, etc).
π¦Ύπ¦Ύ
Medium impact πΏ
Everything produced by designers, developers, writers and those involved with a project should be in an open format, well maintained, and curated in a common format (so everyone is working from the same model).
The deliverables output, including documentation, are used upstream of the project and produced in ways that will allow it to be reused in subsequent projects.
Design functionality and technical specifications are documented so that deliverables are comprehensible by the project team and transferable to the development team.
π¦Ύπ¦Ύπ¦Ύ
Low impact πΏ
Design systems allow common components and patterns to be formalized and managed within a website or application. By using such a tool, designers and developers can avoid reinventing existing tooling and thereby reduce wasted time (and emissions).
Employ a design system based on web standards and recognizable patterns to mutualize interface components and provide a consistent experience for visitors.
π¦Ύπ¦Ύ
Low impact πΏ
Everyone should be able to understand what you've written without wasting time staring at a screen or jumping from page-to-page looking for answers, whether they have accessibility requirements or not. This also means avoiding using technical language (without explanations) and including enough information to help direct people (and search engines) from page to page.
Write clearly using plain, inclusive language delivered at an easy-to-understand reading level considering accessibility and internationalization inclusions as required (for example, dyslexia).
Deliver content formatted in ways that support how people read online, including a clear document structure, visual hierarchy, headings, bulleted lists, line spacing, and so on.
Prioritize SEO at early design stages and throughout a product or service's lifecycle to improve content findability.
π¦Ύ
High impact πΏ
Of all the data which comprises the largest over-the-wire transfer rates within the average website or application, images are usually those which are responsible due to their quantity and usefulness. As such, doing all you can to reduce their size and unnecessary loading will be beneficial for sustainability.
Assess the need for images considering the quantity, format, and size necessary for implementation.
Resize, optimize and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions.
Provide Lazy Loading to ensure image assets only loads when they are required.
Let the visitor select the display size, and provide the option to deactivate images.
Set up a media management and use policy to reduce the overall impact of images, with criteria for media compression and file formats.
π¦Ύ
High impact πΏ
Video and audio-heavy websites are often those which can have significant sustainability costs in terms of storage and carbon intensity for viewers who have to process the media with their devices to watch them (draining batteries). Optimizing such assets as much as possible is critical for a sustainable product or service.
Assess the need for video or sound usage (including only when they add visitor value), and ban non-informative media (background media) including autoplaying functionality.
Choose the right media to display by compressing according to the visitor's requirements, selecting the appropriate format, ensuring it works across browsers, and avoiding embedded player plugins.
Media requiring a lot of data to be downloaded on the client side (including the media itself) must be loaded via a facade (a non-functional, static, representational element).
Increase visitor awareness and control by informing them of the length, format, and weight of the media; allowing media deactivation, and giving a choice of resolutions; all while providing alternative resolutions and formats.
Set up a media management and use policy to reduce the overall impact of audio and video, with criteria for media compression and file formats.
π¦Ύπ¦Ύ