Technote

Development workflow Practical

Series Redesigning a site that is already live Part 4 of 8

Review on staging, not in screenshots

A screenshot is one moment under ideal conditions. States, edge cases and real content only surface on staging — and staging has conditions of its own.

Once the mockups are approved and the build is done, you ask for a review. Posting a folder of screenshots is convenient, but screens that pass a screenshot review routinely misbehave after launch. The reason is simple: a screenshot is one moment under ideal conditions, and a real site spends most of its life outside those conditions.

What screenshots hide

The same screen tells you different things as a still image and as a live page

Real content length is the clearest example. The title in the mockup was written to fill exactly two lines; the titles editors write were not. In a row of three cards, one title running to three lines breaks the row. That never appears in a screenshot and always appears on a page carrying real data.

States behave the same way. What a link looks like on hover, where the Tab key goes, what a form shows when validation fails — these are rarely drawn. Focus indicators that existed on the old site frequently vanish in the new design, and nobody reviewing with a mouse will ever notice.

Staging has conditions

Staging is not merely “a copy”. A staging site without these conditions becomes an incident of its own.

Five conditions for staging — the top four cause incidents if skipped

Blocking search matters most. An indexed staging site puts the same content at two addresses and leaves search engines unsure which is the original. Have that happen mid-redesign and diagnosing anything becomes twice as hard.

Outbound mail is the other common miss. Testing an order or an enquiry on staging sends the notification to a real customer address. Stop sending, or funnel everything to a single test inbox, before anyone touches a form.

How to ask for a review

Send only a URL and you will get “looks good” back. Include three things and the answers change: which screen, what to look at, and what decision you need. “This is the single post template. Please look at a three-line title and a long pull quote. I need a decision on whether to narrow the text column.” gets you a specific answer.

Order the review by the entry list from part one. When time runs short, which screens get looked at first is then already decided.

More on staging setups and deployment lives in the development workflow archive, and how we use staging in practice is written out step by step on the process page.

Next part

The review is done. Deployment is next — but not all at once. The following part is rolling out one template at a time.

More on this topic

All technotes

Development workflow Practical

Turning taste arguments into rule checks

"It feels a bit cramped" can be neither argued with nor fixed. Spacing off the scale, colour off the palette, contrast below threshold, missing states — four rules…

Designers 9 min read

Development workflow Practical

Do not swap everything at once

A full swap makes every problem appear at the same moment — which means none of them can be attributed. So you switch one template at a time.

Designers 6 min read

Development workflow Practical

Adding an SCSS build, and whether to commit the output

WordPress themes are expected to deploy without a build step, which leads to the opposite conclusion from ordinary application code — and to its own costs.

Developers 7 min read

₩270,000 · Join the program