Layout & concepts
Responsive design
Responsive design is the practice of building one page that reflows its layout, type and media to fit any screen width, from wide desktop down to phone.
- Also called
- Mobile design, Mobile-responsive layout, Adaptive layout, Mobile-friendly design
- Spotted on
- 408 of 422 homepages
- Browse examples
- Mobile designs →
What is responsive design?
Our catalog captures SaaS homepages at a 390px phone width as well as desktop, and that view shows what a site really prioritizes. The common moves are consistent: the navigation collapses into a menu icon, the headline breaks onto three or four lines, buttons stack and go full-width, and multi-column grids fall to one or two columns.
The interesting decisions are what gets cut and what changes form. Useproof drops its quote card and portrait entirely on phones; Semrush folds its footer into accordion rows; card rows become sideways carousels; tabs become stacked blocks. Each is a judgment about what a visitor on a phone actually needs.
Weak responsive design is a desktop page squeezed: tiny screenshots nobody can read, rows of tabs clipped at the edge, a headline broken one word per line. Strong responsive design treats the phone as its own layout and checks that the hero still has a clear headline and one tappable CTA above the fold.
Responsive design examples from real SaaS sites
Mobile from the catalog.
When to use responsive design, and when not to
Use it for
- AlwaysThere is no case for a fixed-width SaaS homepage; plenty of first visits come from phones and links opened in chat apps.
- Before a launchLaunch traffic from social posts and chat apps lands on phones first.
- After a redesignNew sections tend to be designed at desktop width and break at 390px in ways nobody noticed.
Avoid it for
- Separate mobile siteMaintaining a second m-dot site instead of one responsive page doubles the work and splits links.
- Hiding core contentRemoving pricing or key features on mobile rather than reflowing them leaves phone visitors with half the pitch.
- Desktop-only demosInteractive product demos that need a mouse should offer a video or screenshot fallback, not a broken widget.
Anatomy of responsive design
- 1BreakpointsWidths at which the layout changes, typically around phone, tablet and desktop sizes.
- 2Fluid gridColumns that collapse from four to two to one as the viewport narrows.
- 3Collapsed navigationLinks folded behind a hamburger or menu button on small screens.
- 4Scaled typeHeadline sizes that shrink with the viewport so lines don't break one word at a time.
- 5Touch targetsButtons and links at least about 44px tall, often full-width on phones.
Common responsive design variants
1. Stack and shrink
Columns stack in source order and media scales down; the simplest and most common approach.
2. Reformat
Grids turn into carousels, tabs into accordions, footers into collapsible rows.
3. Prioritize
Decorative or secondary elements are hidden on phones so the core message stays above the fold.
Spotted in our design reviews
Our reviews describe responsive design on 408 of the 422 SaaS homepages in the catalog. A few of them:
Beside a purple card reading "Born in New York City, I'm drawn", twelve monospace labels run in four columns, including "DESIGN YOUR WEBSITE FROM SCRATCH", "CREATE CUSTOM GRIDS AND BREAKPOINTS" and "PROMPT IMAGE EFFECTS AND CUSTOM INTERACTIONS", each marked by a yellow icon.
Cntrl · Portfolio mock and feature label grid
At 390px the page grows to 12616 pixels.
FuseBase · Mobile
At 390px the hero keeps its headline and the dark "Sign up now, free forever!" button, but the mock-ups shrink to cropped screens.
Lemcal · Mobile
At 390px the hero headline changes to "Start monitoring critical user flows in minutes", with a different subhead and the orange button beneath.
Tester · Mobile
At 390px the hero text and both buttons keep their order, and the prompt panel becomes a taller blue block with chips wrapping to three rows.
Heidihealth · Mobile
At 390px the page is 14,748 pixels tall.
Giga · Mobile
At 390px the 13,436-pixel page keeps the hero but drops the storefront strip to a single row of cropped portraits.
Table22 · Mobile
At 390px the headline wraps to two lines and the subline changes to "Create apps and websites by chatting with AI".
Lovable · Mobile
Often confused with
Responsive design vs. hamburger menu
A hamburger menu is one responsive pattern for navigation; responsive design is the whole approach to fitting every element to every width.
Responsive design vs. above the fold
The fold sits much higher on a phone, so responsive design is mostly about deciding what still fits above it.
Frequently asked
What width should I test my SaaS homepage at?
At least a standard phone width around 375-390px, a tablet around 768px and a common laptop width. Our catalog captures every site at 390px for its mobile view.
Is responsive design the same as mobile-first?
No. Mobile-first is a way of building responsive pages, starting from the phone layout and adding complexity for larger screens. The result is still one responsive page.