Responsive Design Principles

This workbook turns the Responsive Design Principles course into one real, finished multi-breakpoint layout - a landing or dashboard screen specified at mobile, tablet, and desktop. Each section pairs with a course module and mixes guided exercises, fill-in worksheets, and checklists so you end up with an actual breakpoint map, a fluid type and spacing scale, and per-component reflow rules a developer can build - not just notes. Work through it with a design tool open (Figma, Penpot, or Affinity Designer), a browser with dev-tools device mode, and a real piece of content to lay out. The value is in the specification you produce: the widths, units, and reflow decisions written down so one layout works from a 320px phone to a 1440px desktop.

Set up the responsive canvas and lock in a mobile-first content order before any layout is drawn.

Define what you are designing and the artboards it will live on before placing anything. Pick one real screen (a marketing landing page or a simple dashboard) and let it drive these choices. Use CSS-pixel widths, not hardware resolutions.

On the 375px artboard, list every block of content this screen contains, then force it into a single vertical column in priority order. This stacking order is the most important decision in the whole layout - get it right here and every wider screen becomes an arrangement of an order you trust.

Find breakpoints from where your content breaks, make the grid fluid between them, and document the system in a breakpoint map.

Start at 360-375px with the mobile layout finished and slowly drag the frame wider. Each time something looks wrong - the text measure passes ~75 characters, a button stretches absurdly wide, or whitespace yawns - stop and record that width. Keep going to find the next break.

Specify how the layout flexes between breakpoints and where it stops growing. Decide column behaviour in relative terms (percentages, fr units, or auto-fit minmax) and the ceiling that keeps text readable on wide monitors.

Build the table that turns your artboards into instructions. Name each breakpoint, give it an exact min-width value, and state what the layout does there. Use this map as the spine of your developer handoff.

Build relative-unit type and spacing scales and define how each key image adapts in size, resolution, and crop.

Define a modular type scale in rem and decide which sizes scale fluidly with clamp(). Pick a ratio, set a base, and compress for mobile. Record min and max for any clamped headline so type handles every width itself.

Build a spacing ladder on a 4px or 8px base and set how section padding scales across breakpoints. Then lock the minimum sizes for every interactive element so the mobile layout is comfortable to tap.

List the key images on the screen (hero, feature, thumbnails) and decide, for each, how it adapts. Most need only fit-and-resolution handling; a few hero or feature images need art direction with a different crop per breakpoint.

Specify how each real component reflows across breakpoints, test the full width range, and assemble the developer handoff.

For each major component, name the responsive pattern it uses and describe its state at mobile, tablet, and desktop. This is the part of the handoff that lives in the gaps the artboards do not show, so be explicit.

Take the two hardest components and commit to a strategy for each on a narrow phone, rather than letting them overflow or split. Tables get a deliberate pattern; forms go single-column with proper input sizing.

Sweep the full width range in browser dev-tools device mode and record what you find. Test the smallest real width and the longest realistic content, and confirm touch behaviour on an actual phone where possible.