UI and Content Production Ready Checklist Overview
Overview
This checklist serves as a guide for us to achieve standardisation in the appearance and performance of UI and content across each device and browser combination level. Each of these principles is quantifiable, allowing us to create actionable requirements, and produces measurable results. The importance of these principles is that together they guarantee consistency across our UI and content.
Stability
Stability allows us to maintain consistency by giving us ways to responsibly handle differences between different device and browser combinations. We can determine stability requirements for each component to mitigate the negative side effects that may accompany each change.
- Error pages (application)
- Logging - query string for errors (smart components)
- Fallbacks / no support notification (application)
- Testing - unit, integration (builds/pipeline testing)
- Security - audit packages before prod
Accessibility
Accessibility ensures that we are delivering a consistent experience for all of our users. UI and content that is truly accessible for all can be measured against defined guidelines, and should be a core principle in any components that we build.
- UI conforms to the Web Content Accessibility Guidelines (WCAG) 2 Level AA
- UI has appropriate WAI-ARIA
- The HTML is semantic
- Appropriate labels for inputs, titles on buttons
- We are exposing errors correctly
- We are using Keyboard / outline focus appropriately
- Mouse and pointer events also work via the keyboard
- We are setting language for screen readers (application)
- Colour contrast is passing
- We have autocomplete in forms
- AST linting
- Mouse text highlighting
- Alt tags on images
Rendering accuracy
UI and content must be visually appealing to users, and we can define the different aspects that guarantee that appeal and deliver a well executed and overall pleasing experience. There are minimum acceptable levels of individual component performance, and we can analyze these through the following areas:
- Responsive design
- Perceived delay in individual component render
- Optional lazy loading with skeletons for image components
- Component lazy load
Asset optimisation
Delivering optimised assets, only when they need to be delivered, will ensure our UI and content loads faster and also reduces the bandwidth we take up for our users. We can match our media asset optimisation to the requirements of different browser and device combinations to render UI and content in the most efficient way.
- Most efficient image formats used (also svgs)
- Use video instead of GIFs
- Responsive image size
- Max asset size / utilise image optimisation options to reduce file size
Page performance
When we are building full pages or experiences, we should consider overall page performance. There are some key metrics that we can use to measure the performance of any page, and use to benchmark how that page may perform in production in terms of page load efficiency and also SEO.
- First Contentful Paint (FCP) - The time from when the page starts loading to when any part of the page's content is rendered on the screen. An ideal measurement is less than 1.8 seconds.
- Largest Contentful Paint (LCP) – The time it takes for a page’s main content to load. An ideal LCP measurement is 2.5 seconds or less.
- First Input Delay (FID) – The time it takes for a page to become interactive. An ideal measurement is less than 100 ms.
- Cumulative Layout Shift (CLS) – The amount of unexpected layout shifts of visual page content. An ideal measurement is less than 0.1.
- Time to First Byte (TTFB) - The time it takes to request information from the server and send the information that was requested (initial response). An ideal measurement is less than 200 ms.
- Time to Interactive (TTI) - The time is takes for a page to become fully interactive. An ideal measurement is less than 3.8 seconds.