THE PAGEBROWSER FIELD GUIDE
Look closer at a single webpage.
Read the hierarchy, structure, navigation, and behavior of a page before borrowing a design idea.
Studying one webpage carefully can reveal more than collecting dozens of screenshots. Treat the page as an answer to a visitor's question. Identify its central message, the information that supports it, and the route it offers to continue. Then inspect how those choices hold together at different sizes.
Read the page in layers
Start with the headline and opening explanation. Next, scan the section headings, images, captions, and links. Finally, read the details. Write down whether these layers tell a consistent story. A visitor looking for a quick answer and someone investigating carefully should both have a sensible route through the material.
Check the layout as it changes
Resize the browser and observe wrapping, spacing, image cropping, and navigation. Chrome DevTools Device Mode can simulate a mobile viewport, but Google's documentation describes it as an approximation. Use an actual device when possible before drawing conclusions about the full mobile experience. Record the width and browser alongside each observation.
Document the useful pattern
Save the page address and a short explanation of the decision you want to learn from. For example, note how a long comparison becomes readable on a narrow screen, or how supporting details sit beside a claim. Translate the pattern into your own content and constraints. Keep questions separate from facts you have directly checked.
For the underlying guidance, see Simulate mobile devices with device mode | Chrome DevTools.
Work from meaning to appearance
- Read the opening: identify the page’s topic and the audience it addresses.
- Scan the headings: look for a sequence that answers the questions a visitor is likely to have.
- Follow a link: check whether its destination matches the label and preserves a useful path back.
- Resize and zoom: observe how text, images, and navigation adjust.
- Use the keyboard: note whether the focus stays visible and the order makes sense.
Separate a pattern from its content
A split layout can work well when both sides have a clear role. A large heading can establish hierarchy when its message is useful. Neither choice fixes unclear content by itself. Describe the relationship you want to preserve, then write and design for your own subject.
Use the web design guide to turn observations into decisions, and the website page guide when the flow spans several destinations.