Responsive Design: Breakpoints, Grids, and Layout Rules

People visit websites and web apps on phones, tablets, laptops, large monitors, and everything in between. Responsive design is the practice of making a single interface work across all of those sizes.

A common approach is to design three fixed mockups — mobile, tablet, and desktop — and hope everything in between works out. It usually doesn't. The best responsive design focuses on how layouts should adapt across a continuous range of widths. These rules help.

Rule 1: Design content first#

Before thinking about breakpoints, understand your content and its priority. What's essential on every screen size? What can be secondary or collapsed on small screens?

Starting with content priority — rather than shrinking a desktop layout — leads to better mobile experiences and more focused desktop ones too.

Rule 2: Start mobile first, but think about all sizes#

Designing the smallest layout first forces prioritization. Once the essential content and actions work on a small screen, you can add layout complexity as space becomes available.

Mobile first doesn't mean mobile only. Design how the layout expands, not just how it looks on a phone.

Rule 3: Let content decide breakpoints#

Common breakpoints are often based on popular devices, but devices change constantly. A better approach: start with a narrow layout and widen it until the content starts to look awkward — lines too long, cards too stretched, too much empty space. That's where a breakpoint belongs.

In practice, most products end up with a few breakpoints in similar ranges:

• Small: phones, roughly up to 600 pixels wide.
• Medium: large phones in landscape and tablets, roughly 600 to 1024 pixels.
• Large: laptops and desktops, roughly 1024 to 1440 pixels.
• Extra large: wide monitors, above 1440 pixels.

Treat these as starting points, adjusted to your content.

Rule 4: Use fluid grids#

A column grid provides structure across sizes:

• Small screens: 4 columns with 16-pixel margins.
• Medium screens: 8 columns with 24 to 32-pixel margins.
• Large screens: 12 columns with wider margins.

Columns should be fluid, expanding and contracting with the viewport, while gutters typically stay fixed. Components span a number of columns that changes at each breakpoint.

Rule 5: Set a maximum content width#

On very wide screens, layouts that stretch indefinitely become hard to use. Text lines become too long and related elements drift far apart. Set a maximum width for the main content area, centering it with growing margins on large screens.

For reading-focused content, constrain text columns to a comfortable line length — roughly 50 to 75 characters — even when the page itself is wider.

Rule 6: Know the common layout patterns#

A few patterns cover most responsive needs:

• Stacking: multi-column layouts collapse into a single column on small screens.
• Reflowing grids: a grid of cards changes from four columns to two to one as space decreases.
• Off-canvas: secondary content, such as navigation or filters, moves into a drawer or panel on small screens.
• Priority collapsing: less important elements hide or move into a menu.
• Column drop: sidebars move below the main content.

Choose patterns based on content priority rather than habit.

Rule 7: Adapt navigation#

Navigation often needs the biggest change between sizes:

• Desktop can show full horizontal navigation.
• Tablet might show a condensed version.
• Mobile often needs a bottom navigation bar or a menu.

Whatever pattern you choose, keep the most important destinations easy to reach, and make sure the current location is always clear.

Rule 8: Scale typography responsibly#

Headings that look great on desktop can be enormous on phones. Use a smaller type scale on small screens and increase it on larger ones. Fluid typography — sizes that scale smoothly between a minimum and maximum based on viewport width — avoids sudden jumps.

Body text should stay comfortable to read; around 16 pixels is a good minimum on mobile. Always allow text to scale with user settings.

Rule 9: Make images responsive#

Images need care across sizes:

• Serve appropriately sized images for each screen to save bandwidth.
• Use art direction where needed — a wide landscape image might need a tighter crop on mobile to keep the subject visible.
• Define aspect ratios so layouts don't shift as images load.
• Use modern formats and lazy loading for performance.

Rule 10: Design for touch and pointer#

Screen size often correlates with input method, but not always. Tablets and many laptops have touch screens; some phones use external keyboards.

• Make touch targets at least 44 to 48 pixels, regardless of screen size.
• Don't hide essential information or actions behind hover, since touch devices can't hover.
• Ensure keyboard navigation works at every size.

Rule 11: Handle tables, forms, and complex components#

Some components need special responsive treatment:

• Tables: horizontal scrolling with a fixed first column, or a switch to card layouts on small screens.
• Forms: single-column layouts on small screens, with full-width inputs.
• Modals: often become full-screen sheets on mobile.
• Data visualizations: simplified versions with fewer labels and data points.

Rule 12: Design responsive components in Figma#

In Figma, build components with auto layout and fill-container resizing so they adapt to different widths. Use min and max widths to define limits. Test components by resizing frames rather than designing separate versions for every size.

Show key breakpoints in your designs, but also annotate behavior between them: what stacks, what hides, what changes size. These notes are often more useful to developers than additional mockups.

Rule 13: Test on real devices and in between#

Emulators and browser resizing are useful, but real devices reveal real issues: touch accuracy, performance, font rendering, and on-screen keyboards covering inputs.

Also test at awkward in-between widths — just above and below each breakpoint. That's where layouts most often break.

Adapt, don't shrink#

Responsive design is about adapting experiences to context, not shrinking desktop layouts until they fit. Start with content priority, use fluid grids and content-based breakpoints, constrain widths for readability, adapt navigation and components thoughtfully, and test across the full range of sizes.

When it's done well, people don't notice responsive design at all. The product simply works, whatever screen they're holding.