Skip to content

Skill

Responsive Design

wshobson

Make one layout work across screen sizes - fluid grids, breakpoints, and sensible touch targets - so a page reads well on phone, tablet, and desktop without a separate mobile site.

Situations it fits

On desktop the homepage looks fine, but on phones images overlap the header and buttons are tiny so people miss taps - the client wants one build that behaves across devices.
Responsive Design. responsive-design skills focus on making a single page layout work cleanly at different screen sizes: rearranging columns, scaling media, and adjusting hit areas so content reads and can be tapped on phones as well as desktops. Other skills are useful in their domains - accessibility helps assistive users, SEO audits diagnose search issues, and programmatic SEO creates many pages from templates - but the immediate problem here is layout and touch usability across viewport sizes, which is what responsive-design addresses.
On phones the homepage hero overflows horizontally, the nav items overlap, and touch targets are so small people keep tapping the wrong link.
Responsive Design. This problem is about making one layout work across screen sizes and improving spacing and tap targets so the page reads and behaves correctly on phone, tablet, and desktop. An SEO audit or programmatic generator won’t fix the breakpoints, spacing, or tap-target sizing that cause these mobile layout and usability issues.
A landing page uses two columns that stack on phones, but images get cropped and touch targets sit too close together; the team wants one design that adapts smoothly from phone to desktop.
Responsive Design. Responsive-design work focuses on making a single layout behave well across viewports: adjusting how images scale, rearranging content flow, and increasing interactive target sizes so the same page is usable on phones and desktops. SEO or programmatic efforts won't fix visual scaling and touch spacing, and accessibility reviews alone don't address overall layout adaptation, so responsive-design is the correct choice.

5 scenarios in the bank answer to Responsive Design. The rest are in the game.

Skills it gets confused with

These share a family with Responsive Design, which is another way of saying they are the ones you might reach for by mistake.

Knowing what Responsive Design does is the easy half. Telling it apart from the others under time pressure is the game.

Today's session

Responsive Design is part of wshobson/agents. Licence: MIT. The description above was written for this game, not taken from the skill.