Medium impact πΏ
Animation can be both CPU and GPU intensive and have implications for accessibility. While visually appealing and useful in certain situations, care and attention should be taken when considering the use of a high emissions' technology.
Use animation only when it adds value to a visitor's experience, and not for decorative elements.
Progressively display an appropriate quantity of animation so as not to overburden the visitor or diminish expected device behavior.
Allow visitors to start, stop, pause or otherwise control animated content.
π¦Ύ
Medium impact πΏ
Since the advent of the modern web, the ability to include embedded fonts and provide a more customized experience has seen their use explode. They aren't always the most performant option (which poses emissions hazards) and come with a few issues such as Flash Of Unstyled Content (FOUC) / Flash Of Unstyled Text (FOUT) which should be addressed.
Use standard system-level (web-safe / pre-installed) fonts as much as possible.
Ensure the number of fonts, and the variants within typefaces (such as weight and characters) are limited within a project, using the most performant file format available.
π¦Ύ
Medium impact πΏ
Media, images, fonts, and documents enrich the Internet. The problem is that people may not want to watch a video, listen to an audio file, look at an image, or use a specific application. By providing alternative formats to anything you embed, you ensure the widest possible audience can benefit from it (and reduced carbon output will occur as alternative text will induce less consumer hardware thrashing than its rich media alternative).
All proprietary file formats (such as PDF) should also be offered in HTML for accessibility and to ensure future availability.
All custom typefaces (using font-display) should be subsetted and offered as part of a font stack with a system font as a backup.
All images should provide meaningful alternative text for screen reader users (or when images fail to load) accessibility.
Audio should provide text transcripts of conversations as an alternative to playing the media.
Video should provide text transcripts (at minimum), subtitles (using WebVTT), and for accessibility best practice, offer closed captions and sign language options.
π¦Ύπ¦Ύ
Low impact πΏ
It's understandable that businesses want to know more about their customers, but a key part of sustainability is being ethical towards visitors and as such, the right to privacy is considered paramount. Don't demand information when it's not required and not only will this help visitors complete transactions quicker (reducing emissions), it will help with legal compliance such as GDPR.
Assess the need for forms and reduce form content to the bare minimum necessary to meet the visitor's needs and the organization's business goals. Clearly communicate why a form is necessary, what its value proposition is, how many steps it will take to complete, and what an organization will do with collected data (informed consent).
Avoid auto-completion / auto-suggest if it would prove unhelpful (to conserve bandwidth) whilst allowing autofill for ease of repeat entry (including the use of helpful tooling such as password managers).
π¦Ύ
Low impact πΏ
Certain visitors such as those with visual disabilities or speech agents (like Amazon Alexa) may rely on an experience without the graphical part of an interface. As such, they potentially may use less data or may have a different carbon impact on the Web.
Support speech browsing and other non-graphical ways to interact with content that provide alternatives to a visual interface.
π¦Ύπ¦Ύ
Low impact πΏ
Notifications whether through the browser or messaging can be potentially useful, but only used in moderation. Spam and the lack of control are contributing sources of Internet emissions and as such, businesses should aim to reduce such actions.
Remove non-essential notifications while justifying and reducing the practice of e-mailing or text messaging to what is strictly necessary. Useful notifications (such as alerts for new content) should be used with care and restraint.
Let the visitor control notifications (for example through the browser, SMS, or by email) and adjust messaging preferences, and the option to unsubscribe, logout, and close an account should be available and visible.
Help visitors manage expectations by clearly explaining the result of a potential input through helpful prompts and messages that explain errors, next steps, and so on.
π¦Ύ
Medium impact πΏ
Printing or downloading documents can both be a net benefit and a net cost in terms of sustainability as it can reduce repeat requests to websites, but the act of printing (especially when unoptimized) wastes valuable ink and paper.
Design documents to limit the printing impact. If the production of paper documents is essential, it should be designed to limit its impact to the lowest possible. Create a CSS Print stylesheet and test it with different types of content. Ensure PDF printing is encouraged over paper-based storage.
Offer optimized, compressed documents in a variety of accessible file formats.
If a document is likely to be re-used, generate the document once on the server-side (preferably on a cookie-free domain) rather than forcing the effort to be duplicated.
Clearly display the document name, a summary, the file size, and the format, allowing the visitor a choice if possible of both the format, and the language (if not the same as the web page). Furthermore, be sure to avoid embedding the document within Web pages (provide a direct link to download or view within the browser instead).
π¦Ύ
High impact πΏ
The organization has policies and practices in place to incorporate stakeholder-focused testing and prototyping into its product development cycles.
The organization has outlined processes it uses to prototype and test new features, product ideas, and user-interface components when applicable with real users who represent various stakeholder perspectives, including people with slow connection, with disabilities, with difficulties using digital services and so on.
The organization has appropriately resourced these processes to support its long-term product viability.
The organization has training materials to onboard new product team members to these practices.
The organization regularly conducts extensive testing and user interviews to validate whether the released features are meeting both business goals and visitor needs.
π¦Ύπ¦Ύ