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 reducing emissions.
success criteria:
Need for images: Assess the need for images considering the quantity, format, and size necessary for implementation.
Rethink every bitmapped image to ensure that it is contributing something of value to the page
Provide longdesc and/or alt for every image that needs explaining
Eliminate gratuitous images (we can do better at this!)
Optimize images: Resize, optimize and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions.
Choose simpler images that will compress easily
Provide multiple sizes for different screen sizes and resolutions using <picture> and <source>
Provide multiple formats—avif, webp, png, and jpeg
Optimize images to the fullest extend using an image optimizer tool
Lazy loading: Provide lazy loading to ensure image assets only loads when they are required.
Eagerly load only images above the fold
Consider very basic placeholders for lazily loaded images (but only if workable without JS)
Sizing and deactivation: Let the visitor select the display size, and provide the option to deactivate images.
Add deactivation (how?)
Perhaps use sessionStorage to set a value so that images are blocked from loading when use deactivates?
More research needed
User can set display size
Everything responsive and relative
Correct use of meta viewport
Management and usage: Set up a media management and use policy to reduce the overall impact of images, with criteria for media compression and file formats.
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), it mostly damages the environment and dissuades the visitor.
success criteria:
Respecting attention: Respect a visitor’s attention by allowing them to easily control how (and when) they receive information
No pop ups!
No annoying ads (maybe ads for useful tools)
Provide a Patreon link and other ways to support CC
Avoid distraction: Prioritizes features that don’t distract people or unnecessarily lengthen the time they spend using the product or service.
No useless animations
Animations must add value
Avoid attention-keeping: Avoid using infinite scroll or related attention-keeping tactics.
Visitor’s 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.
success criterion:
Design patterns: 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.
No inessential components
HONEST layout
Check that components are correct semantics
Check that components are fully accessible
Ensure that components follow established patterns (check NN/g)
Need for animation: Use animation only when it adds value to a visitor’s experience, and not for decorative elements.
Animate only when necessary
Avoid overburdening: Progressively display an appropriate quantity of animation so as not to overburden the visitor or diminish expected device behavior.
Keep animation to a minimum
Avoid autorepeat
Control animation: Allow visitor’s to start, stop, pause or otherwise control animated content.
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.
success criteria:
Default typefaces: Use standard system level (web-safe / pre-installed) fonts as much as possible.
Use only system fonts on Craft Code and related sites (e.g., system-ui)
Font optimization: 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.
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.
success criteria:
Printing documents: 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.
Use a print stylesheet to remove all unnecessary chrome
Use print stylesheet to add URLs next to all links
Use print stylesheet to add QRCode to page at bottom of page to encourage online use
Consider QRCode in <details> block at bottom of page so printing is not needed to use it (e.g., for phone)
Encourage PDF saving rather than paper printing
Minimize colors on print pages (keep only colors that provide information)
Optimize documents: Offer optimized, compressed documents in a variety of accessible file formats.
When documents are provided (none so far), do so in OS formats and as efficiently as possible
Compress all documents where possible
Labels and choice: Display clearly 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).
For all downloads:
Display title and filename
Display file format
Display file size
Provide a summary of content (TL/DR)
Offer language choices if practicable
Do not embed document in Web page: allow view in browser and direct download
Try to ethically measure how efficient a visitor’s experience is, by doing so you might be able to reduce any issues they may have encountered previously and reduce the energy burden of loading unnecessary pages.
success criterion:
Measurement and compliance: Only collect the data required to provide a streamlined and effective user-journey, put policies in place to ensure strict adherence, and comply to relevant accessibility policies and privacy laws, such as General Data Protection Regulation (GDPR).
Check GDPR requirements
Check cookie policy, privacy policy, and terms of use
While some things require the use of electricity, during the early ideation phase you could consider wireframing or rapid prototyping (using paper) among other offline tools to reduce energy consumption. Even the electronic versions of these may have a lower carbon cost than committing to building a full-blown experience for each idea.
success criterion:
Wireframes and prototypes: Utilize wireframes, user-testing, and rapid prototyping to quickly build consensus, reduce risk, and lower the number of resources needed to build features.
Site wireframed and prototyped
low impact
low effort
WE DO A LOT OF PAPER PROTOTYPING AND WHITEBOARDING.
Information architecture is a central part of the Web development process, and how you structure a website ensures that people can way-find your content easily. Having appropriately marked up links within your product or service allows visitor’s, search engines and social networks to identify key information quickly.
success criteria:
Navigation and search: Provide an accessible, easy-to-use navigation menu with search features that help visitor’s easily find what they need.
Menu
Search
Navigable sitemaps: Implement an efficient (human-readable) sitemap that is organized and regularly updated helps search engines better index website content, which helps visitor’s more quickly find what they are looking for.
Visible site map automatically generated for all visible pages (avoids noindex)
XML sitemap automatically generated by Astro
New content: Provide a way for visitor’s to find out about new content and services.
Add (and keep updated) a “What’s new?” page
Include Atom feed (XML document – automated? Check for Astro plugin)
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.
success criteria:
Write clearly: Write clearly using plain, inclusive language delivered at an easy-to-understand reading level considering accessibility and internationalization inclusions as required (for example, dyslexia).
Add i18n when appropriate
Investigate dyslexia adjustments
Define all technical terms, either in the context or with an <abbr> or <dfn> element: (CSS pop up on pointerover)
The <abbr> HTML element represents an abbreviation or acronym. When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation.
The <dfn>HTML element is used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <p> element, the <dt>/<dd> pairing, or the nearest <section> ancestor of the <dfn> element, is considered to be the definition of the term.
Add a glossary of terms
Link defined terms to glossary (but show definition on pointerover)
Content formatting: 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.
Use Hemingway to clean up and optimize all content
Search engine optimization (SEO): Prioritize SEO at early design stages and throughout a product or service’s lifecycle to improve content findability.
Ensure 100% Lighthouse SEO score on all indexed pages
Make sure Google indexes all key pages
Check all pages to ensure best Google results
Check social media links to ensure images, descriptions, canonical links all work
Provide microdata and linked data on all pages
Include microdata on book titles, etc. using Schema.org
Use various online tools to check SEO and maximize effectiveness
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 (General Data Protection Regulation).
success criteria:
Form simplicity: 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).
All forms ask for minimal data
Optional fields clearly marked (consider move to details block)
Forms explain the purpose of the form clearly and unambiguously (value proposition)
Forms explain why the data is necessary (in the help field)
Break longer forms into steps
Make clear how long it will take to complete the form
Indicate clearly the number of steps
Show progress
Allow partial forms to be saved and resumed later (continuations)
Form functionality: 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).
Notifications whether through the browser or through 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.
success criteria:
Notification justification: 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.
Notify only when necessary (both on and offline): “we respect your time and attention”
Notify of new content via email only when subscribed
Use double confirmation
Provide a blacklist to remove those who complain permanently
Keep other communication to a minimum
Notification control: 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 account should be available and visible.
No emails unless subscribed (or requested a response)
Ask if they want to receive online notifications before popping up the allow/deny modal
Always provide an easy way to unsubscribe, turn off notifications, logout, whatever
Do not hide the unsubscribe link: big and bold
Prompts and responses: Help visitor’s manage expectations by clearly explaining the result of a potential input through helpful prompts and messages that explain errors, next steps, and so on.
Manipulating the visitor into doing things you want them too is a short-term gain, long-term loss tactic tool. It’s ethically bad, unsustainable, and should be avoided at all costs.
success criteria:
Dark patterns: Avoid what are commonly known as dark patterns, deceptive design, or unethical coding techniques, which manipulate visitor’s into taking actions not necessarily in their best interest (anti-right click, no-copy, requiring an account to purchase, etc).
Using advertisements: 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.
If ads provided:
Relevant to topic
Clearly identified as ADS
Ethical product or service (sustainable, too)
Do not diminish visitor’s experience (unobtrusive)
Include ads only if necessary and useful
Page tracking: Remove unused and unconsented page tracking.
New features and perspectives: 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.
Create and post on the site a “collaboration” policy
Make it easy for users and interested parties to provide suggestions, critiques, bug reports, and more
Provide a community discussion area as quickly as possible
Consider how to avoid bot signups, spam, phishing, etc.
Encourage people with slow connections, “disabilities”, atypical needs, etc. to engage with the site and the developers
Resourcing and viability: The organization has appropriately resourced these processes to support its long-term product viability.
THIS IS THE DIFFICULT PART. How to build community to get help with doing all this? It is too much for one old man.
Find ways to encourage community and get help
Be honest about what is doable
Prioritize according to best ROI for users and organization
Training and onboarding: The organization has training materials to onboard new product team members to these practices.
Create a “site” page/hierarchy with a complete description of everything involved in building the Craft Code site
Provide abbreviated, typical, and full to-do lists for building an equivalent site, prioritized
Get the ScratchCode site online ASAP and the Paperhat methodology site as well
Document the @sitebender/components library fully and include an HTML pattern library
Re-use this library and extend it on all Sitebender/Paperhat projects
Use the Munat Methodology and just-in-time learning
Minimize cognitive footprint where possible and practicable
The to-do lists provide a single, shortest path through the materials so that information is seen only when immediately useful: no sooner, no later
Testing and validation: The organization regularly conducts extensive testing and user interviews to validate whether released features are meeting both business goals and visitor needs.
Automate testing as much as possible (e.g, axe, lighthouse, vitest, biome, CI/CD)
Invite users to volunteer to be manual testers (with credit on the site)
Video and audio heavy websites are often those which can have the highest emissions costs in terms of data transfer, storage usage, 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.
success criteria:
Need for media: Assess the need for video or sound usage (including only when they add visitor value), and will ban non-informative media (background media) including autoplaying functionality.
Provide video/audio streams only when they add significant value
Serve the lowest quality reasonable
Keep videos/podcasts short and efficient
Optimize media: 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.
Use a service/platform that maximizes efficiency
Choose the best CODECs for efficiency (but consider accessibility and legacy systems)
Stream with adequate buffering to reduce bandwidth
Labels and choice: 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.
Label sections of the media properly and provide direct links to those sections
Break longer media down into small chapters streamed separately so users stream only what they need
Inform users of length, format, and file size
Allow media deactivation (how?)
Provide a choice of resolutions
Provide alternative resolutions and formats (default to most efficient)
Don’t hide controls (such as full-screen, CC, speed)
Management and usage: 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.
Compatibility is a critical part of the sustainability mindset and should be prioritized through all products and services. If individuals wish to use older devices (or cannot upgrade due to cost), or do not wish to upgrade as frequently, it will reduce the amount of e-waste which enters the system. If something doesn’t work, it’s also likely to result in visitor’s suffering a wasted effort or are refused access to your service (and thereby emit further emissions).
success criteria:
Compatibility policy: Establish a policy for compatibility with obsolete devices and software versions, listing the supported devices brands, operating systems, and browsers (including versions).
Establish a compatibility policy
Check that site is compatible with those systems/apps
Consider actual usage statistics and update regularly
Try to be at least usable on every system (e.g., Mosaic)
Maintaining compatibility: Avoid planned obsolescence in software updates, striving to maintain compatibility for as long as possible and clearly communicating whether an update is evolutionary (large updates that can significantly reduce performance) or corrective (smaller updates that fix bugs or improve security).
Frequent testing: Regularly test the product or service with weak connections, old browsers, and on devices older than five years to ensure compatibility.
See testing plans above.
Mobile friendly: Prototype your interfaces using mobile-first methods to ensure progressive enhancement, content prioritization, and improved accessibility.
All pages must work on mobile devices
Avoid enhancements that fail on mobile or small screens
Make sure such enhancements are enhancements, not requirements
Full responsiveness, mobile-first
Progressive Web Applications (PWAs): Consider whether a PWA will be more sustainable and compatible over a native mobile application.
It’s great to have a pretty looking website or application, but to ensure a sustainable design, it’s important to avoid cluttering up the interface with too many visuals (which aren’t necessary to the content). Keeping a clean design will reduce data transfer, and thereby emissions.
success criterion:
Decorative Design: Decorative design is used only when it improves the user-experience, and unnecessary assets or ones that fail to benefit the visitor or sustainability are removed (or rendered optional and disabled by default).
There are many variables which can impact the user-experience, and a bunch of these can impact how sustainable your website will be. Attempting to identify where you can make a difference to the visitor and give them a more sustainable experience will be beneficial.
success criterion:
External variables: List the negative external variables and identify where your product’s sustainable impact can be diminished (systemic design).
List negative external variables
Identify where sustainability impact can be reduced via systemic design
If you provide physical goods or services, you may also have to account for the sustainability impact of delivery services. This can often be tricky, but courier companies may provide useful tooling to help you identify emissions data for routing.
success criterion:
Non-human impact: Consider non-users and other stakeholders who might be passively impacted by a digital product or service, such as neighbors accepting parcels, traffic jams due to deliveries, etc. Research their needs and understand how they might be affected.
Brainstorming allows you to flush out ideas before you commit to pursuing a path. Being considerate of not just your visitor’s but other individuals who may be affected by your product or service (including non-humans, like the environment!) is a useful practical exercise as it may influence your decisions in how you scope your project.
success criteria:
Human-Centered Brainstorming: In the brainstorming process, consider all stakeholders using a human-centered approach.
Devs who want to code to Craft Code standards
Provide clear axioms, methods, and explanations of techniques and approaches to coding
Make as clear as possible the rationale for and benefits of Craft Coding practices
Keep it simple, effective, and fun
Related professionals (design, UX, accessibility, testing, etc.) who care about Craft Code
Make clear that Craft Code is about much more than just coding: design, architecture, testing, deployment, etc. all play key roles.
People who care about social justice, universal design, sustainability, and craft
Make clear the importance of social justice and fairness at every opportunity
Make equally clear the importance of sustainability
Remind readers of the importance of preserving skills, knowledge, and experience
Perhaps a guest author?
People who are looking to offset the “integral accident” of AI and the consequent loss of skills, knowledge, and experience
Illustrate clearly the relationship between AI and job/skill loss
Show how Craft Coding can offset some of this damage
Perhaps a guest author?
Media who are looking for a story
Provide a media kit to make their efforts as easy and effective as possible
Explain why Craft Code is important and different – worth a story or three
Discuss with media professional; do online research in media kits, press releases, etc.
Tech leaders, management, government who are looking for alternative approaches to web development (and other coding)
Explore how Craft Code techniques could be used in an enterprise environment using techniques such as micro-app, loose/non-binding, pattern libraries, reduction or elimination of external client-side dependencies
Establish the importance to labor, the environment, social justice, etc. of the Craft Code approach
Explore ways to use Craft Code where possible to increase profitability, ROI, DevX, job satisfaction (hence retention), etc.
Perhaps a guest author?
Aesthetes who appreciate the aesthetics of elegant, bespoke, state-of-the-art code and design
Provide one or more essays discussing the aesthetics, the art, of Craft Coding both to code and to presentation/functionality
Perhaps a guest author?
Determine stakeholder needs
Prioritize stakeholder needs
Ensure that stakeholder needs are met to the extent feasible
Ecological brainstorming: In the brainstorming process, take the planetary needs and ecological boundaries into account.
Consider all environmental impact and minimize same
When providing the option to download, save, print, or access anything online, defaulting to the most lightweight, least featureful version will reduce emissions through passive browsing; with non-essential information removed from the screen either to be shown when it’s required or eliminated entirely.
success criteria:
Performance by default: Prioritize performance optimization as a product or service’s default approach.
All pages 100% performance Lighthouse score
All pages AAA WCAG 2.2 compliance
Responsive without media queries to the fullest degree possible
Use system fonts!
Optimize:
Caching
Compression
Image sizing
Use of SVGs
Deduping
Efficient paths: The path taken to access the service (the initial contact with the website or service) should be as efficient and as simple as possible (time required to complete an action displayed, reducing too much choice, ensuring visitor’s know what’s required at the start of a complex set of steps, etc).
Simple, readable URLs
Clear information architecture
Menu
Sitemap
Pagination
Patterns for efficiency: Make your user-journey (when browsing an accessed website or service) as smooth as possible. User-research is key, as is building on established design patterns which people already understand.
Keep hierarchy reasonably shallow
Test on users
Distraction-free design: Visitor’s can complete tasks without distractions or non-essential features getting in the way.
No gratuitous anything (everything on the page is there for a reason)
Provide images to break up text and provide eye relief and visual interest)
Eliminate the non-essential: Visitor’s see only information that is relevant to their experience, without non-essential information being displayed on the screen.
Menu can be hidden but also can be displayed on every page
JS enhancement: works without JS
Digressions (asides) in accordions (details element)
User-initiated actionable content: Ensure that actionable information such as pop-up or modal windows can only be initiated by the visitor.
Pop-ups and modals avoided to the greatest extent
Alerts and other messages appear in the page and are dismissible (if JS enabled)
Media, images, and fonts enrich the Internet. The problem is, people may not want to watch a video, listen to an audio file, or even look at an image. 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 uses far less data than it’s rich media alternative).
success criteria:
Open formats: All proprietary file formats should also be offered in HTML for accessibility and to ensure future availability.
Simply avoid all proprietary formats
Use HTML with a print stylesheet
Use OS formats for spreadsheets, etc.
Font subsetting: All custom typefaces (using font-display) should be subsetted and offered as part of a font stack with a system font as backup.
N/A as we use no custom fonts
Alternative text: All images should provide meaningful alternative text for screen reader users (or when images fail to load) accessibility.
Every image not used solely for presentation purposes must have alt text and, if practicable, a longdesc description usable by screen readers (aria-describedby).
Audio alternatives: Audio should provide text transcripts of conversations as an alternative to playing the media.
All audio has associated accurate transcript
Video alternatives: Video should provide text transcripts (at minimum), subtitles (using WebVTT), and for accessibility best practice, offer closed captions and sign language options.
All video is subtitled using WebVTT: Web Video Text Tracks
All video has a transcript
All video offers closed captions which includes descriptions of visual actions
Products and services at any stage of a project can suffer bugs or issues which need to be resolved. Fixing these regressions also generates additional development and environmental costs. By resolving such issues, you can reduce the chances of a visitor giving up on a session and thereby reduce the amount of wasted energy your website emits overall.
success criteria:
Regular issue testing: Check your codebase for bugs, identify any performance issues, and account for accessibility or security problems at either monthly or quarterly timeframes (depending on your scheduling allowance).
Set up and automate the following:
Unit/integration/component testing with Vitest
Code coverage (standard: 100% – mark skipped tests manually with justification, recheck regularly)
End-to-end testing with Playwright
Automated axe devtools and lighthouse testing (AAA WCAG 2.2 and 100% on all categories in lighthouse except SEO on noindex pages)
CI/CD pipeline prevents deploy of failing builds (test wise)
Use check:packages on every commit (and at least weekly) to keep dependencies up to date (including components) – add to CI/CD somehow?
Automated snapshots and image comparisons
Follow semantic versioning faithfully
Non-regression tests: Non-regression tests are implemented for all important functionality.
As above
Regression tests: Incorporate regression testing into each release cycle to ensure that new features don’t introduce bugs or otherwise conflict with existing software functionality.
Researching a product or service and how it is used over time allows you to iterate and ensure the features and functionality being offered match how user-needs change over time. Doing so will help you reduce code redundancy further and reduce emissions through optimization.
success criterion:
Usability Testing: Incorporate usability testing into product cycles and measure the impact of these tests for future releases.
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).
success criterion:
Design system: Employ a design system based on web standards and recognizable patterns to mutualize interface components and provide a consistent experience for visitor’s.
Certain visitor’s 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.
success criterion:
Alternative interactions: Support speech browsing and other non-graphical ways to interact with content that provide alternatives to a visual interface.
All pages must be keyboard accessible
All pages must read properly on screen readers
All pages must work on a text-only browser such as Lynx
When creating a product or service, identifying your target audience through user-research, analytics data collected using ethical anonymous methods, or feedback from visitor’s is important in being able to create a customized service for them which is tailor-made for their specific preferences, adapted for any needs they may have, and particularly useful in helping a website or application evolve it’s service to meet sustainability targets.
success criteria:
Identify and define: Primary and secondary target visitors are identified, and their needs defined through quantitative or qualitative research, testing, or analytics.
Primary target visitors identified
Needs assessed
Secondary target visitors identified
Needs assessed
Visitor constraints: Potential visitor constraints like the device age, operating system version, browser, and connection speeds are considered when designing user-experiences.
Visitor constraints identified
Who is our audience and what equipment do they have?
Barriers and access: The team has researched and identified whether a technical, material, or human constraint might require an adapted version of the product or service that reduces barriers or improves access to content.
Identify barriers
Cognitive: how difficult are the concepts and techniques?
Motor: can everything be accessed without a mouse?
Equipment/connection: Does everything important work on legacy equipment or at very low bandwidth? (3G?)
List potential alternatives for overcoming barriers
Implement
Barrier removal: In the user-research, identify if some barriers should be removed (pain points or dark patterns).
Eliminate pain points, dark patters, etc. to the greatest extent possible
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).
success criteria:
Deliverables reusability: 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.
Document the components library thoroughly and well
Document the methodology and tools used to build and test the Craft Code site (“the site” page)
Deliverables documentation: Design functionality and technical specifications are documented so that deliverables are comprehensible by the project team and transferable to the development team.
Largely N/A, but ensure that others can take over or build similar sites
When creating a product or service, identifying your target audience through user-research, analytics data collected using ethical anonymous methods, or feedback from visitor’s is important in being able to create a customized service for them which is tailor-made for their specific preferences, adapted for any needs they may have, and particularly useful in helping a website or application evolve it’s service to meet sustainability targets.
success criteria:
Identify and define: Primary and secondary target visitors are identified, and their needs defined through quantitative or qualitative research, testing, or analytics.
Primary target visitors identified
Needs assessed
Secondary target visitors identified
Needs assessed
Visitor constraints: Potential visitor constraints like the device age, operating system version, browser, and connection speeds are considered when designing user-experiences.
Visitor constraints identified
Who is our audience and what equipment do they have?
Barriers and access: The team has researched and identified whether a technical, material, or human constraint might require an adapted version of the product or service that reduces barriers or improves access to content.
Identify barriers
Cognitive: how difficult are the concepts and techniques?
Motor: can everything be accessed without a mouse?
Equipment/connection: Does everything important work on legacy equipment or at very low bandwidth? (3G?)
List potential alternatives for overcoming barriers
Implement
Barrier removal: In the user-research, identify if some barriers should be removed (pain points or dark patterns).
Eliminate pain points, dark patters, etc. to the greatest extent possible