Online Tool Store
· 5 min read
How to Show a Website on Laptop, Tablet and Phone
Manesh Jayawardhana
CIO & Co-founder
A client asks, “Does the new site work on mobile?” You could send three separate screenshots and let them work it out. Or you could send one image with a laptop, a tablet and a phone side by side, each showing the same page at its own size. The second one answers the question at a glance, and it’s the image that ends up in the proposal, the portfolio and the launch announcement.
The usual ways of making that image are clunky. Design-app mockup templates need smart objects and careful placement for every device. URL-based “responsive checker” sites only work for pages that are already public, so your staging build or a login-protected dashboard is out. And many of them leave you to take a screenshot of the result yourself.
What a multi-device mockup is for
A multi-device mockup, sometimes called a responsive mockup, shows one product on several screen sizes in a single scene. It’s shorthand for responsive web design: the layout adapts, and here’s the proof.
For a website, that usually means a laptop for the desktop layout, a tablet for the in-between breakpoint and a phone for the mobile view. For an app, it’s often a row of phones showing three steps of a flow, the kind of image you see on app store listings.
Why people get stuck here
- They only have one screenshot. Taking desktop, tablet and phone captures of the same page takes real effort, especially behind a login.
- Screenshots get squashed. Dropping a 16:9 desktop capture onto a phone-shaped screen either distorts it or leaves black bars.
- Full-page captures are too tall. A 3000px scrolling screenshot doesn’t fit a laptop screen. You need the top of the page, not a tiny thumbnail of the whole thing.
- Private pages can’t go through a URL tool. Staging environments and internal tools aren’t reachable from someone else’s server, and you shouldn’t want them to be.
What a good mockup looks like
Each screen shows the right capture
The most convincing mockups use a real capture per device: the desktop layout on the laptop, the tablet layout on the tablet, the mobile layout on the phone. If you only have one screenshot, it should still fill every screen cleanly while you collect the others.
Nothing is stretched
Each device screen has a fixed shape. A good tool scales your screenshot until it covers the screen, then trims the overflow instead of squashing the image. Trimming from the bottom works well for websites, because the header and hero section, the parts people recognise, sit at the top.
The scene suits the story
| What you’re showing | Scene | Tip |
|---|---|---|
| A responsive website | Laptop + tablet + phone | Use a real capture at each breakpoint |
| Desktop and mobile only | Laptop + phone | Good for simpler sites with two layouts |
| A mobile app flow | Three phones | Put three steps of the flow in order |
| A dark product UI | Graphite devices | Silver often suits light interfaces better |
Common mistakes to avoid
- Using the desktop capture on the phone. It works as a placeholder, but the phone then shows a cropped slice of the desktop layout, which proves the opposite of what you want. Take a real mobile capture before you publish.
- Capturing a full-length page for the laptop. Only the top screen-height will show. Scroll to the section you want to feature, or accept that the hero is what people will see.
- Busy backgrounds behind detailed screens. A loud gradient competes with small UI text. Go quieter, or transparent, when the screens carry a lot of detail.
- Mixing devices from different mockups. Devices with different lighting, colors or shadow angles look pasted together. Build the whole scene in one place.
How to do it with Screenshot Device Mockup
Screenshot Device Mockup draws the devices on a canvas in your browser tab and builds the PNG on your device, so unreleased designs and staging pages never leave your computer.
- Pick a scene: Laptop + tablet + phone, Laptop + phone, or Three phones.
- Paste, drop or choose your first screenshot. It fills every screen at once, so you see the full scene straight away.
- Select an individual screen and paste a different capture to give that device its own view, for example a 393px-wide mobile capture for the phone.
- Choose graphite or silver devices, a gradient, solid or transparent background, and turn shadows on or off.
- Download the scene as a PNG at 1× or 2×, or copy it to your clipboard.
Each screen keeps a real device shape: 16:10 for the laptop, 820 × 1180 for the tablet and 393 × 852 for the phone. A screenshot that doesn’t match is scaled to cover the screen and trimmed, never distorted. The trim keeps the top of the image and centres it horizontally.
If you only need one device with crop and letterbox controls, the Device Mockup Generator is the simpler tool. Our post on making device mockups from screenshots walks through that one. For a single desktop view in a browser window instead, see how to add a browser frame to a website screenshot.
Frequently asked questions
How do I make a responsive mockup with my own screenshots?
Choose a scene with a laptop, tablet and phone, then give each screen its own capture of the same page. Screenshot Device Mockup fills every screen with your first screenshot, so you can swap in the tablet and mobile captures one by one.
Can I use one screenshot for all three devices?
Yes, but treat it as a draft. Each screen is filled from the top without stretching, so a wide desktop capture shows its top-centre section on the phone. A real mobile capture on the phone screen is much more convincing.
Can I make a mockup of a page that isn’t public yet?
Yes. Because you work from screenshots rather than a URL, staging builds, intranet pages and logged-in dashboards all work. Screenshot Device Mockup processes everything in your browser tab, and nothing is uploaded.
Final thought
If the question is “does it work everywhere?”, answer it with one image, not three. Take a real capture at each breakpoint, choose the scene that matches what you’re showing, and keep the background quiet enough for the screens to do the talking.