🔍

Site Quality Standards

This is our rubric for judging whether a website is successful, across all of the major aspects. Each section has Basic aspects which we believe are mandatory for any website. Then we have a standard level we expect all Cantilever sites to hit, and an advanced level for sites that need focus within that aspect.

These standards straddle both design and development. Some can only be measured against the finished product, but many can be evaluated and considered throughout the UX and design phases.

♿️ Accessibility

Basic

Markup is clean, semantic, and readable
All media has a text fallback
Every feature can be used successfully entirely by using the keyboard
There is a Skip to Main link present and first in the tab order
There is sufficient contrast for all text (at least 2.5:1 for headings and 4.5:1 for body text)
Text is 12px or larger, minimum
The site can easily be scaled to different sizes without breaking the layout.

Standard

☝
Check out our Accessibility Audit process for information on how to test for the WCAG criteria.
The site satisfies all of the WCAG 2.1 AA Criteria.

Advanced

The site satisfies all of the WCAG 2.1 AAA Criteria.

💨 Performance

☝
We Google’s PageSpeed Insights tool and Google Search Console to measure performance. The tools are flawed, but are usually good enough.

Basic

No Core Web Vitals should be in the “Red Zone”.
image
All critical pages should have a First Contentful Paint (FCP) of less than five seconds on mobile and two seconds on desktop.
Largest Contentful Paint should be less than two seconds after FCP on both mobile and desktop.
All markup and static assets are minified and compressed.
All links use text labels that fully describe their destination (ex. “View All Articles” as opposed to “See More”)

Standard

One or zero Core Web Vitals should be in the “Yellow Zone”.
All critical pages should have a First Contentful Paint (FCP) of less than four seconds on mobile and 1.5 seconds on desktop.
Largest Contentful Paint should be less than one second after FCP on both mobile and desktop.
A Content Delivery Network (CDN) is in place for all static assets. Options include reverse proxy services like Cloudflare.
Images are served using next-gen formats and are optimized for size without losing quality.
CSS and JS files are trimmed to remove unecessary rules, such as those generated by Tailwind or other libraries, that are not relevant to the site.
If the website is dynamically generated, there is a large degree of server-level caching in place such as database query caching and template caching.
Scripts use async and defer as appropriate and are placed within the DOM optimally to avoid render-blocking.

Advanced

All Core Web Vitals should be in the “Green Zone”.
All critical pages should have a First Contentful Paint (FCP) of less than three seconds on mobile and one second on desktop.
Largest Contentful Paint should be less than 0.5 seconds after FCP on both mobile and desktop.
The site uses lazyloading for resources like iframes and analytics scripts to prioritize visible resources.
Whenever there are animated elements, those animations run using hardware acceleration whenever possible.
The site uses extensive caching both at the CDN and application level.
The site is jank-free. Pay attention specifically to javascript components that are bound to state changes.
Webfonts are loaded optimally, with either a FOUT or FOIT as appropriate.

🔐 Security

☝
Many security standards are handled automatically when we use a PaaS which is why that is our default method. Nonetheless, we should validate that the PaaS does indeed satisfy the requirements.

Basic

All passwords for any site-related services are strong.
All services related to the website use two-factor authentication and/or passkeys.
The site and all related services load via HTTPS only.

Applications with a server:

All web servers allow login via SSH only.
The application does not require or use the root user.
Logs are in place which store all login activity.

Database Applications:

All user input is sanitized to prevent XSS attacks.
The database is not accessible remotely.

Default

Cloudflare is in place. NOTE: This may not be necessary if the site is on a PaaS, but not all of our sites are yet.
IntruderIntruder returns no critical alerts.
There are no shared passwords for any site services. Individuals should have individual access to the services they specifically require to do their jobs, which can be deactivated easily without affecting other users. These passwords should all be secured in 1Password1Password
Any secrets such as tokens are stored in 1Password1Password.

Advanced

We have a schedule for rotating keys and passwords at most every twelve months.
IntruderIntruder returns no alerts.

🔎 SEO

Basic

The site displays no 'black hat' SEO practices, such as keyword stuffing, dark user patterns, unneccesary linking, redirecting legitimate site errors, domain spoofing, etc.
All important pages include a title tag, meta description, og:url, og:author, og:site-author, and og:image. The values are human-readable and sensible for the context.
All pages that should not be crawled use robots.txt exclusions to prevent them from being crawled.
The "keywords" meta tag is not in use.
All media should have a text fallback
Markup is clean and semantic, with content in the correct order (i.e. no H2 tag before the H1 tag)
All pages have an H1 tag that is appropriate to the page.
Google Search Console is in place
The site has a sitemap that is updated regularly and submitted to Google Search Console
If the codebase has a CMS that might contain publicly-visible files such as licenses and admin routes, the Robots.txt file excludes those from being searched.

Standard

Redirects are in place for all old page routes that may be hit by users. All redirects use a single “hop” and do not chain.
URLs are cleanly formatted and legible.
There is no duplicate content. When required, duplicate content is clarified using canonical links.
In Google Search Console, there are no duplicate content warnings or Core Web Vitals warnings.
The website’s content uses important keywords frequently, particularly in anchor tags.

Advanced

Pages with structured data use schema.org tagging to present that data.

🖌️ User Interface

Basic

Text is always contained within containers and does not break into other columns.
The site scales elegantly between 50% size and 200% size without major layout disruptions.
The site works equally well at any screen size, from 375px wide up to 1920px wide
Images are never stretched or pixelated
Vector icons and graphics use SVG instead of rasterized images.
User Interface is consistent in all major browsers:
  • Safari (Mac/iOS)
  • Chrome (Mac/Win/Android)

Standard

Images are served with Imgix to ensure they are at the right resolution and optimal format.
All UI elements should have “hover” and “down” states that are simple and helpful.
Transitions should be present but tasteful and simple.
User Interface is consistent in Firefox (Mac/Win)

👩🏽‍💻 Code

Basic

All files are organized logically into directories that represent different features or code types.
Code is straightforward and easy to follow.
Code is well-commented
Project has a standard README.md file with local installation instructions

🔨 Infrastructure

Basic

Code is in GitHubGitHub, which is set up for automatic deployment of branch previews
Local development is done using Valet.
Project is served using a platform-as-a-service (PaaS) matching the type of project (Final selections pending):
  • JAM Stack: Netlify
  • WordPress: Pantheon
  • Webflow: Webflow 🙂
  • Other PHP: Digital Ocean App Platform

Standard

JS and CSS linting is in place and run automatically throughout the dev process. Files must be clean before PRs are merged.

Advanced

Unit testing is in place for key parts of the code

📈 Analytics & Results

Basic

Google Analytics (GA4) is in place, measuring pageviews and events for significant user interactions.
The most important interactions are set up as “Key Events” in GA4, and as conversions in any other connected marketing platforms such as the Meta pixel. The names of the key events match across platforms.

Standard

GTM or Segment is in place as an abstraction layer between marketing tagging and the application.
Generally speaking, the metrics in each measured platform match. For example, if Facebook reports 100 conversions over a given timeframe, GA4 should report around 100 as well. If GA4 reports 20, that’s a problem.
No pages show anomalous stats around traffic, time on site, etc. All pages appear to be in the same “band” of performance.
Platforms do not receive erroneous event data but rather just receive the specific events they need.
There is a separate Production and Non-Production GA4 tracker.

Advanced

Analytics tags are set up to Lazy Load so that they do not affect page load speed as much.
Server-side analytics is in place to send data to the major platforms directly via API, such as the Facebook Conversions API.