The Website Quality Playbook

It’s not the flashiest designs that win – but those that feel fast, calm and accessible.

Forget ‘more effects’. Modern websites stand out thanks to a noticeably better user experience: fast responsiveness, subtle motion, robust accessibility and a component-based approach.

Proof: Google has established INP (Interaction to Next Paint) as a Core Web Vital (web.dev). With WCAG 2.2, the W3C sets out clear quality standards for accessibility (W3C WCAG 2.2). Both standards show that a high-performing, accessible user experience is no longer just a ‘nice-to-have’, but a key factor in both search rankings and conversion rates.

This does not apply if: If you’re building a simple campaign microsite with no SEO or long-term ambitions, then you’re free to set other priorities – as long as you’re aware of the trade-offs.

1. Responsiveness must feel fast throughout

INP has replaced FID (First Input Delay) as a Core Web Vital. This means that Google now measures not only the first interaction, but all interactions throughout the entire page lifecycle. Your design must feel fast throughout – not just whilst loading.

Responsiveness is not purely a developer’s task. Every design decision – from animation timing and transition duration to component complexity – has a direct impact on the INP.

Proof: Google/web.dev defines INP as a Core Web Vital (web.dev/inp). We carried out a mini-benchmark: native CSS transitions versus JavaScript animations with identical visual output.

What we tested

Setup: Two UI patterns (page-turn animation, scroll-based parallax effects), each with two implementations:

• Native CSS transition + transform

• JavaScript-based animation using `requestAnimationFrame`

Measurement logic: Chrome DevTools Performance tab: INP measured across 10 interactions per pattern; average INP values compared.

Context: Standard desktop (MacBook Pro M1), average smartphone (iPhone 13), using Chrome and Safari respectively.

Result: Native CSS transitions delivered, on average, 35–40 per cent better INP values. JavaScript variants showed greater variance and poorer worst-case performance.

Borders: This was not a representative large-scale test across different devices and browsers. The focus was on pattern comparison, not on absolute benchmarks.

Conclusion: Design using native browser features beats fiddling around with JavaScript – not just in theory, but measurably in practice.

This does not apply if: If your site is minimally interactive (e.g. a static one-page site with no animations), INP is less relevant – but even in that case, it’s worth ensuring a solid foundation.

2. Smooth transitions instead of fiddling about with JavaScript

CSS View Transitions deliver app-like page transitions with less code, lower maintenance risk and native performance benefits. Instead of building complex JavaScript animations, you define transitions declaratively in CSS.

Proof: The W3C specification (CSS View Transitions) is already ‘Baseline Newly Available’. Browser support is now widespread, but not universal. Plan for progressive enhancement: if a browser does not support it, the navigation will continue as normal – just without the transition.

Screenshot browser support: Chrome, Edge and Safari (version 18.2 and later) fully support View Transitions. Firefox is working on this (available on an experimental basis).

Fallback strategy: For browsers that do not support this feature, navigation still works – just without the animation. Progressive enhancement at its best.

This does not apply if: you are working in an enterprise environment and browser versions are beyond your control. In that case: View Transitions are fine, but only as a bonus, not as a prerequisite.

3. Scroll animations – yes, but only if they serve a purpose

Scroll animations are increasingly being implemented without JS scroll libraries (Intersection Observer is often no longer sufficient). CSS scroll-driven animations reduce complexity and improve performance.

Proof: Documented by MDN Scroll-driven animations as a native CSS solution. Browser support is growing rapidly (Chrome/Edge fully supported, Safari/Firefox under development).

DevTools screenshot: A performance comparison between GSAP ScrollTrigger and native CSS scroll animation shows approximately 20 per cent less main-thread blocking whilst producing identical visual output.

This does not apply if: If an animation offers no functional benefit – it’s merely decoration for decoration’s sake – then remove it. Scroll animations are not an end in themselves. They must provide guidance or support storytelling.

4. Responsive design per component (container queries)

Responsive design is shifting from the viewport to the component. Container queries allow you to design components independently of screen size – depending on their context.

Example: A card module looks different in a narrow sidebar than it does in a wide hero section – without the need for separate classes or JavaScript logic.

Proof: MDN explains Container Queries as a standard feature. Browser support stands at around 95 per cent (Can I use).

Component demo: A card component in three different contexts (sidebar, grid, hero) adapts automatically – using a single CSS rule instead of three separate sets of breakpoints.

This does not apply if: If your project doesn’t require a scalable design system (e.g. a small campaign site with five static pages), then standard media queries are sufficient.

5. Typography with less clutter (variable fonts)

Variable fonts enable expressive typography whilst potentially requiring fewer font files. Instead of five separate font files (Regular, Medium, Bold, Italic, Bold Italic), you load a single variable font file containing all axes (weight, width, slant).

Proof: MDN documents Variable Fonts as a standard. Browser support: 98 per cent (Can I use).

Network screenshot: Comparison between five individual font files (total: ~320 KB) and a variable font (180 KB) – saving: ~45 per cent whilst maintaining the same visual output.

Please note: Variable fonts do not always reduce file size. If you only need two weights (Regular and Bold), two separate WOFF2 files may be smaller than a single variable font containing all axes. Do the maths.

This does not apply if: If the font you’ve chosen doesn’t offer a useful variable implementation, or if you’re only using one weight, then opt for standard web fonts.

6. AI as a workflow assistant

AI (e.g. Figma AI, Adobe Firefly) speeds up the creation of variations and routine tasks – but it does not replace strategic design work. AI generates options. You make the decision.

Proof: Figma AI product page (Figma AI) illustrates use cases such as automatic layout adjustments, content fillers and variant generation.

Internal example: We used Figma AI to generate five button variants (different sizes, states and colours). Time saved: ~40% compared to manually duplicating and customising them. However, the final decision (as to which variant would be included in the design system) rested with the designer – based on brand guidelines, accessibility checks and consistency.

This does not apply if: You’re using AI without a design system framework. This leads to increased inconsistency, because AI does not guarantee brand consistency. AI is a tool, not a strategy.

7. Make cookie preferences clear

Regardless of browser strategies (Privacy Sandbox, third-party cookie phase-out), a clear preference UX is becoming increasingly important. Users want control – not 47 toggle options in a monstrous accordion menu.

Proof: Google’s statement on the Privacy Sandbox initiative (Google Privacy Sandbox) shows: Third-party cookies are disappearing (gradually, but definitely). Tracking mechanisms need to be rethought.

UX screenshot: A clear Preferences interface with three options:

1. Minimal: Only technically necessary cookies

2. Default: + Anonymous statistics (no user tracking)

3. Personalised: + Marketing/Personalisation

Instead of hidden toggle lists, a clear selection option with explanations in plain language.

This does not apply if: If your website operates entirely without tracking or personalisation, then congratulations – you’re already compliant. But even then, it’s worth making this clear to your visitors (“We don’t track anything”).

Checklist: Quality set-up for modern websites

Before you launch your relaunch, go through this checklist. It will help you prioritise – based on impact, not hype.

Performance & Core Web Vitals:

1. Have I included INP as a metric in my performance budget?

2. Should I use native CSS features (transitions, animations) instead of JavaScript libraries?

3. Do I have a fallback plan for browsers that do not support view transitions?

Responsiveness & Component Design:

1. Should I use container queries for context-sensitive components?

2. Are all interactive elements at least 24×24 px in size (WCAG 2.2)?

3. Have I defined Focus States for keyboard navigation?

Typography & Assets:

1. Am I using variable fonts – and have I compared the file size with that of traditional web fonts?

2. Should I load fonts with `font-display: swap` to improve perceived performance?

Motion & Animation:

1. Do scroll animations offer any functional benefits (navigation, storytelling)?

2. Should I use CSS scroll-driven animations instead of JavaScript libraries?

3. Is there a ‘prefers-reduced-motion’ fallback option?

Accessibility & Trust:

1. Does my design comply with WCAG 2.2 Level AA (Target Size, Contrast, Focus Appearance)?

2. Is my cookie/preference interface designed to be clear and transparent?

3. Have I planned user testing with assistive technologies?

Workflow & Tools:

1. Am I using AI tools strategically (to generate options, for routine tasks) – rather than as a substitute for design decisions?

2. Do I have a design system that seamlessly integrates AI-generated components?

Now it’s your turn: put the Playbook into practice.

You now know which quality drivers really matter – and which ones simply cost money in terms of maintenance and performance. Not just Pinterest-style inspiration, but prioritised decisions backed by evidence, counter-arguments and clear criteria.

If you have specific questions about your relaunch or your existing website: let us take a look. We’ll analyse your current UX (performance, accessibility, interactions), identify quick wins and show you which measures deliver a genuine ROI – one that’s measurable, not just perceived.

Modern websites don’t win people over with noise. They do so through speed, calm and accessibility, without the burden of maintenance.