Responsive design is not just about making things fit on smaller screens. It is about composing layouts that work beautifully and communicate effectively at every viewport width — from a 375px phone to a 2560px ultrawide monitor. This lesson covers the strategies and techniques for designing compositions that adapt gracefully across breakpoints.
Breakpoints
Breakpoints are the viewport widths where your layout shifts to accommodate a different screen size. Common breakpoints used across the industry:
- Mobile: 375px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px - 1439px
- Large desktop: 1440px and above
These are guidelines, not rules. The best breakpoints are determined by where your specific layout starts to break down, not by arbitrary device widths. Resize your browser slowly and add a breakpoint wherever the content stops looking good.
Mobile-First Composition
Mobile-first design means designing for the smallest screen first and then progressively enhancing the layout for larger screens. This approach forces you to prioritize ruthlessly — a 375px screen has no room for secondary content, decorative elements, or complex multi-column layouts.
Benefits of mobile-first:
- Forces content prioritization. You must decide what information is essential because there is only room for the essentials.
- Simpler baseline. A single-column mobile layout is the simplest starting point. Adding columns and complexity for larger screens is easier than removing them for smaller ones.
- Performance. Mobile-first CSS loads the simplest styles by default and layers on complexity with media queries, which can improve performance on slower mobile connections.
In practice, start by designing a single-column layout that works at 375px. Get the content hierarchy, spacing, and typography right at this size. Then expand to tablet and desktop, adding columns and adjusting proportions.
Reflow Strategies
When a layout moves from a wide viewport to a narrow one, content needs to reflow — rearrange itself to fit. Common reflow strategies include:
Column Stacking
The most common reflow pattern. A three-column layout on desktop becomes a single column on mobile, with each column stacking vertically. Card grids, feature sections, and comparison tables all commonly use this approach.
Design tip: consider the stacking order carefully. On desktop, the left column might contain a sidebar and the right column might contain the main content. On mobile, the main content should stack above the sidebar so the user sees the most important content first.
Content Reordering
Sometimes the visual order on desktop does not match the ideal reading order on mobile. CSS Grid and Flexbox allow you to reorder elements without changing the HTML structure. For example, a hero section with text on the left and an image on the right might reorder on mobile to show the image first (above the text) for stronger visual impact.
Collapsing and Hiding
Some elements are useful on desktop but unnecessary on mobile. A decorative sidebar illustration, a wide data table, or an elaborate navigation menu might be hidden or replaced with a simpler alternative on smaller screens. Use this strategy sparingly — if content is important enough to exist on desktop, consider whether it should be accessible on mobile too, perhaps in a different format.
Fluid Scaling
Rather than jumping between fixed layouts at breakpoints, fluid scaling uses relative units (percentages, viewport units, clamp functions) to scale elements smoothly across all viewport widths. A headline set with clamp(1.5rem, 4vw, 3rem) scales fluidly between 1.5rem and 3rem based on the viewport width, with no abrupt jumps.
Key Considerations Across Breakpoints
Typography
Font sizes that work on desktop often need adjustment on mobile. A 64px hero headline is impactful on a wide screen but overwhelming on a phone where it might consume three or four lines. Scale headings down for smaller screens and ensure body text remains at least 16px for comfortable reading.
Touch Targets
On mobile, interactive elements need to be large enough to tap accurately. The minimum recommended touch target size is 44x44px (Apple's guideline) or 48x48px (Google's guideline). Buttons, links, and form inputs that are comfortable to click with a mouse may be too small for a finger.
Spacing
Margins and padding often need to shrink on mobile to preserve usable content width. A section with 80px vertical padding on desktop might use 40px on mobile. Maintain proportional relationships — if desktop spacing is generous, mobile spacing should still feel open relative to the smaller screen.
Images
Large hero images and illustrations should adapt across breakpoints. Use responsive image techniques — different image sizes for different viewports, art direction to crop images differently at different sizes, and lazy loading for below-the-fold images to improve mobile performance.
Testing Your Responsive Layouts
Never rely solely on your browser's responsive mode. Test on real devices when possible, because:
- Touch interactions feel different from mouse interactions
- Screen brightness and viewing distance affect readability
- Real device performance reveals loading and rendering issues
At minimum, test your layout at 375px (iPhone SE), 768px (iPad portrait), 1024px (iPad landscape / small laptop), and 1440px (standard desktop). If the layout works at these four widths, it will work at most sizes in between.
Responsive composition is not an afterthought — it is a core part of the design process. Design for every screen from the start, and your layouts will feel intentional everywhere.