Earlier this year I found myself looking at a design file and realising that the page was the least useful part of the discussion.
The page still mattered, obviously. A client still sees a homepage, a service page or a product page before they think about anything smaller. The problem was that most of the difficult decisions were not really page decisions anymore. They were decisions about cards, navigation areas, forms, content panels, media blocks and the way those pieces behaved when they were moved into different spaces.
That felt like a shift worth paying attention to. For a long time, website planning started with the full page, then each section was broken down afterwards. In 2023, that approach feels less reliable to me because the same piece of content might appear in several different widths, inside a block editor, in a related-content area or as part of a campaign page built months after launch.
The question I kept coming back to was simple. If this piece of interface is moved somewhere else, does it still know how to behave?
Starting With The Smallest Useful Piece
When I started planning layouts this way, the work changed slightly. Instead of only asking what the homepage should look like, I started asking what each reusable part needed to understand about itself. A testimonial card should not depend entirely on the page it first appeared on. A call-to-action block should still make sense if the text gets longer. A service card should not collapse because it has been placed in a narrower column.
That sounds like a design detail, but it quickly becomes a development decision. If a component only works because a very specific page wrapper is holding it together, it is not really reusable. It might look reusable in the design, but it will create work later when someone tries to place it somewhere else.
This is where I think modern CSS has changed the conversation. Container queries, subgrid and more capable layout tools make it easier to design elements around the space they actually have, rather than only around the viewport. The viewport still matters, but it is no longer the only measurement that tells the interface what to do.
The Viewport Was Too Blunt
Media queries solved a huge problem, but they often made us think in whole-page breakpoints. At 1024 pixels the layout does one thing. At 768 pixels it does another. That is useful, but it assumes the component knows enough about its situation by looking at the browser width. In many modern layouts, it does not.
A card inside a wide page can still be narrow if it lives in a sidebar. A content block inside a mobile page can still have enough space to behave differently if it sits inside a horizontal scroller or a two-column layout on a larger device. The viewport tells us something, but it does not always tell us what the component itself is experiencing.
That changed how I approached design handover too. I stopped thinking only in terms of desktop and mobile versions of a page. I wanted to understand the states a piece of interface might enter over time. Narrow, wide, text-heavy, image-missing, empty, repeated and edited by a client who has no interest in preserving a carefully balanced mock-up.
What This Changed In Development
The practical change was that I started giving components more responsibility. A card could have its own layout rules. A media block could decide how to present itself based on the container. A repeated section could use spacing rules that did not depend on one page template knowing every context it might appear in.
.article-card-list {
display: grid;
gap: 1.5rem;
}
.article-card {
container-type: inline-size;
}
@container (min-width: 34rem) {
.article-card__inner {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1.25rem;
}
}That small example is the kind of thing I find more useful than another full-page breakpoint. The card can adapt when it has enough room, wherever it happens to be placed. The decision sits closer to the thing it affects, which usually makes the CSS easier to maintain.
It also makes the design system feel less fragile. Not because everything becomes automatic, but because each part of the page has clearer rules. When a client adds more content or reuses a section later, the layout has a better chance of responding without needing another round of fixes.
Retrospective Thoughts
Retrospectively, I think page-first design became weaker once websites became more editable, more responsive and more reusable. The page is still what the visitor sees, but it is no longer the only meaningful unit of planning. The smaller pieces need to be understood properly because those are the pieces people will keep reusing after launch.
That is the part I have found most useful in 2023. Good layout work is less about drawing a perfect page and more about creating parts that survive real use. The page gives those parts a home, but the components need enough thought behind them to live outside the exact place where they were first designed.