Website checklist for design: check the live look

A design review usually happens in the tool where the design was drawn, with the designer's sample text and a screen the designer chose. Headlines are shorter there, product names fit on one line, and the hero photo is the one that looked best. Once the real content goes in, a three-word heading wraps onto two lines, a button drops below the fold and a sticky header covers the first sentence of the body. A stranger on a phone meets that version, not the mockup.

• Headline and button at the length of the real copy, not the sample text
• Hero photo at the size the server sends, on a phone, with the text still readable
• Empty states: a blog with no posts, a shop with one product, a gallery with three photos
• A sticky header, chat bubble or cookie banner covering the first call to action
• Fonts that swap in after load: does the first screen move once the page settles?

Designers set type sizes against a sample headline of a few words. The real page has a description of the service, a town name and a promise that runs to two lines. The layout was built for the short version, so the extra words push the button down the screen or squeeze it into a narrow column. Open the new design with the longest headline you will publish, on a phone at its normal width. Count the words above the first button. If the button sits below the first scroll on a phone, the headline is pushing the one action a visitor needs out of view.

Check the same thing on the laptop. A wide screen hides the problem because the headline has room to sit on one line, and the owner tends to judge the page from the laptop they designed it on. Then turn the phone to portrait, where the headline wraps the most. That is the width to judge the first screen by, not the one in the design tool.

Check the new site before launch

A mockup is a still image, so it never shows the moment a page is still loading. Photos arrive after the text, a web font replaces a system font a moment later, and a cookie banner slides up from the bottom. Each one moves something on the screen. A button that sat in one spot in the design can drop a line when the font swaps, and a visitor who has already aimed a tap at it can land on the wrong link. Throttle the connection in a laptop browser, reload the home page and watch the first screen for the first few seconds, not only the finished page.

A design shows three blog posts, five products and a gallery that all match. A product grid laid out for rows of three looks fine with six items and breaks with one: the single card stretches across the row, or it sits alone at the left with an empty column beside it. A team page with two people keeps its heading and grid, and the blank space makes the page look unfinished. Make a copy of the site with each list cut to one item and then to none, and open every page at a phone width. A stranger who lands on an empty blog reads the empty heading as the main content of the page.

Live sites keep changing after a redesign: a new hero photo, a holiday banner, a different font file, a longer product name. Each one can move the button a visitor needs. After any change to the first screen, run the same walk on the live address at the real content lengths, and compare where the visitors stop. Pages behind a login need a test account, and the walk should run again before each new ad or campaign.