A layout that looks composed on a desktop mock often collapses on a phone: headlines wrap badly, cards stack without rhythm, and the reader loses the point. Design the content model once, then decide what each viewport is allowed to change.
One hierarchy, two viewports
The first screen on mobile should still answer what this page is and what to do next. Do not hide the primary action below a gallery that only made sense at 1440 pixels.
Measure and rhythm
Keep body text in a readable measure — short lines on desktop, full width with comfortable padding on mobile. Repeat the same vertical rhythm so sections do not feel like a new template every scroll.
Patterns that do not collapse
Use a small set of patterns: hero, proof, steps, and a closing action. If a pattern needs a custom exception on mobile, it is not a pattern yet.
Key takeaways
- The first mobile screen still states the page and the next action.
- Keep a readable measure and one vertical rhythm.
- A pattern that needs a mobile exception is not finished.