Technote

Development workflow Advanced

Series From design file to WordPress — the handoff Part 8 of 8

The design QA checklist to run before release

Most design problems found after release are catchable before it, in order. Here is the pass, in three stages: rules, states and real devices.

This is the final part. So far we have handed over rules, aligned names, drawn the states, validated with real content, decided the editable regions, built a scale and reviewed by rule. What remains is the last pass before release.

The order matters below: each stage is arranged so that a failure earlier makes the later checks meaningless.

Stage 1 — were the rules kept?

Stage 1 — rule compliance. A single catch here usually fixes several screens at once

This stage is not about looking at screens; it is about reading a list of values. Skim the stylesheet for colours outside the palette or numbers outside the scale. One problem caught here typically corrects many screens simultaneously.

Stage 2 — are the states implemented?

Stage 2 — states and edge cases. Open the screens that were never in the design first

Checking is straightforward: apply any filter until the list returns nothing, open the item with the longest title, and type a URL that does not exist. Three screens, about three minutes.

Stage 3 — real devices and accessibility

The final stage — look at it under real conditions, not in a resized browser window, before opening

On real devices, check that nothing scrolls horizontally, that touch targets are big enough, and that fixed elements do not cover the content. None of that is visible from a narrowed browser window.

Accessibility is not a separate task but part of design quality. Contrast between text and background, a visible focus indicator when moving by keyboard, alternative text on images — those three alone catch most of it.

The editor scenario comes last and is skipped most often. Write an actual post in the editing screen, add an image, make the title absurdly long. If the worst screen an editor can produce is still tolerable, the design is ready to ship.

Closing the series

One argument ran through all eight parts: what you hand over is rules, not screens. Screens are finite and content is not, so without rules the handoff never finishes.

Two companion series if you want to keep going. Getting the rules into an actual theme is worked through step by step in planting a design system in WordPress, and if you want to take stage three further, accessibility is quality covers checking it on real screens. Rebuilding structures that collapse on phones is the subject of layouts that hold up on mobile.

If you would rather have the build, the performance work and the security review handled as one job, that is our optimization program, and the order we work in is published on the process page.

More on this topic

All technotes

Development workflow Advanced

Never deploy without a way back

A rollback is not one button. It is two tracks — code and database — with an order to reverse them in, written down before you deploy.

Designers 9 min read

Development workflow Advanced

Adding your own hooks: extension points instead of edits

Code with no extension points gets forked or edited in place. Where you put do_action and apply_filters — and how many — decides how long that code survives.

Developers 7 min read

₩270,000 · Join the program