How to Show Off Responsive Design (Without Five Screenshots)

Responsive design is one of those achievements that's invisible when it works.

Nobody visiting a site on their phone thinks, "What a thoughtful breakpoint." They just use it. Which is exactly why presenting responsive work is hard: the thing you did well is the absence of problems.

The usual answer is a row of screenshots, desktop, tablet, phone, lined up like a passport photo strip. It's accurate, but it's rarely compelling, and it often hides the most interesting part: how the layout adapts.

In this guide, I'll show you better ways to present responsive design, how to capture each layout accurately, and what to point out so viewers appreciate the work.

Why Screenshot Strips Undersell Responsive Work

A strip of screenshots at different widths has three problems:

1. It's static. Responsive design is about change, how the layout reflows, and a strip shows only endpoints.
2. It's tiny. Three or four screenshots side by side means each one is small and hard to read.
3. It lacks context. A narrow screenshot doesn't say "phone" as clearly as an actual phone does.

Viewers see "here are some screenshots" rather than "this works beautifully everywhere."

Option 1: The Multi-Device Scene

Put two or three devices in a single composition, each showing the site as that device really renders it.

Which devices to use

• Laptop + phone: the classic pair. Covers the biggest layout difference and reads instantly.
• Laptop + tablet + phone: only if the tablet layout is genuinely distinct.
• Desktop monitor + phone: for dashboards and tools designed for large screens.

Composition

• Put the largest device in front or in the centre; phones beside or slightly in front of it.
• Keep devices in believable relative sizes. A phone as big as a laptop looks wrong even to people who can't say why.
• Use a quiet background so the three screens don't compete with it.

Option 2: The Scrolling Video

A still shows the top of each layout. A video can show the whole page adapting.

• Scroll each device through the page, pausing on sections with interesting responsive behaviour: navigation, a feature grid collapsing to one column, a pricing table becoming stacked cards.
• Keep the scroll smooth and slow enough to read.
• 10 to 20 seconds is plenty.

A website-to-video tool can do this in one step: render the page at a MacBook and an iPhone size, and animate a scroll through both.

Option 3: The Focused Comparison

Sometimes one specific decision is the story, such as how the navigation becomes a menu or how a complex table adapts. Zoom into that component on each device, side by side, with a short label for each.

This works well in case studies, where you're explaining your thinking, not just showing the result.

Capturing Each Layout Accurately

The most common mistake in responsive presentations is fake responsiveness: the desktop screenshot scaled down into a phone frame. It looks wrong instantly.

Render at the real viewport

Each device should show the site at its actual viewport width:

Website mockups that render the live page at each device's viewport get this right automatically: the phone gets the real mobile menu, the laptop the real desktop layout.

Capture the full page for scrolling

For videos, capture the full page, not just the first screen, so the scroll can go all the way down. Watch for lazy-loaded images and animations that only appear when scrolled into view.

Clean up

Hide cookie banners and chat widgets, and make sure fixed headers behave as they do on the real site.

What to Point Out

Viewers appreciate responsive work more when you name one or two decisions:

• "The pricing table becomes swipeable cards on mobile."
• "Navigation collapses into a bottom bar within thumb reach."
• "Images switch to tighter crops on small screens so the subject stays visible."

Use a short caption, a callout on the screen, or a sentence in your case study. One or two points are enough.

Common Mistakes

• Scaled screenshots instead of real layouts at each viewport.
• Too many devices: five devices means five tiny screens.
• Unrealistic sizes: a phone as big as the laptop.
• Busy backgrounds competing with detailed screens.
• Only the hero: the top of the page is the easiest part; show the harder sections too.

Where to Use It

• Portfolio and case studies: the multi-device hero plus a scroll video.
• Launch posts: a short scroll video of the new site on laptop and phone.
• Client presentations: the focused comparison, to explain decisions.
• Your agency or freelancer site: a looping multi-device video as a hero.

A Worked Example: Presenting a SaaS Redesign

Let's put this together for a realistic case: a SaaS company has redesigned its marketing site and wants to show it off in a case study, a launch post and the agency's portfolio.

The hero image

One scene: a MacBook in front, an iPhone to its right, slightly overlapping. Both show the new homepage hero, rendered at their own sizes, so the laptop shows the wide two-column hero and the phone shows the stacked version with the menu collapsed. A soft background in the brand's primary colour, and no headline, because the case study page provides the context.

The scroll video

Twenty seconds. Both devices scroll together from the hero to the pricing section, pausing for about a second and a half on three sections: the hero, the feature grid (four columns on the laptop, one on the phone), and the pricing table (a table on the laptop, stacked cards on the phone). A small label appears at each pause: "Hero", "Features", "Pricing".

The detail shots

Three focused comparisons for the body of the case study:

1. Navigation: the full desktop menu next to the mobile menu open, with a callout on the thumb-reachable call-to-action button.
2. Feature grid: desktop and mobile side by side, explaining why the order of features changes on mobile.
3. Pricing: the table and the cards, with a note on how the most popular plan stays first on small screens.

Why it works

Each asset has one job. The hero says "this works everywhere" at a glance, the video proves it across the whole page, and the detail shots explain the decisions for people who want to understand the thinking. Nobody has to decode a strip of five screenshots.

A Responsive Presentation Checklist

Before you publish, run through this list:

Keeping It Up to Date

Websites change, and a responsive showcase goes stale quickly. Keep your presentation as a saved project rather than exported files only. When the site changes, refresh the capture and re-export, instead of starting again from scratch. For client work, it's worth re-capturing just before a pitch or award submission so the showcase matches the live site.

FAQs

What's the best way to show a responsive website in a portfolio?

A single scene with a laptop and a phone, each showing the real layout at its own viewport, plus a short scrolling video for the case study.

Should I include a tablet?

Only if the tablet layout is meaningfully different from both desktop and phone. Otherwise it adds clutter without new information.

Can I just resize my desktop screenshot into a phone frame?

No. It doesn't show responsive design at all, and people notice. Render or capture the site at each device's viewport.

How long should a responsive showcase video be?

10 to 20 seconds, scrolling slowly enough to read and pausing on the sections where the layout adapts in interesting ways.

Conclusion

Responsive design deserves better than a strip of screenshots. Put the real layouts side by side in believable devices, let a scroll show them holding up across the whole page, and point out the decisions you're proud of.

That's how invisible work becomes visible.

Which part of your site's responsive design would you point out first?