How to make a website mockup on a laptop and phone
To make a website mockup on a laptop and a phone, take two screenshots of the site, one at a desktop width and one at a phone width, then place each on a device in a mockup generator and export. A laptop shows the full layout, a phone proves the site is responsive, and together they read as one product.
What is a responsive website mockup?
A responsive website mockup shows the same site on two or more screen sizes, usually a laptop and a phone, sometimes a tablet too. It answers the first question a client or a reader has: does the design hold up on mobile?
It is a presentation image, not a prototype. Nothing is clickable; the goal is a clean picture for a case study, a landing page, a portfolio or a pitch deck. If you are not sure where a mockup ends and a prototype begins, see wireframe vs mockup vs prototype.
What size should the website screenshots be?
Capture each screenshot at the device's own screen proportions and at 2x or 3x scale, so text stays sharp when the mockup crops or tilts the screen. A screenshot that is too small turns soft on a large laptop screen.
- Laptop: a 13-inch MacBook Air screen is 2560 × 1664 px, which is 1280 × 832 in CSS pixels at 2x. Set the browser window to that width and capture at 2x.
- Phone: an iPhone 17 Pro screen is 1206 × 2622 px, or 402 × 874 points at 3x. Capture the site at a 402 px wide viewport and 3x.
- Tablet, if you add one: an 11-inch iPad is 820 × 1180 points at 2x.
The easiest way to get both sizes is the device toolbar in your browser's developer tools: in Chrome, open DevTools, turn on device mode, enter the width and the scale, and use Capture screenshot. More phone sizes are listed in iPhone screen sizes and resolutions.
How do I put the screenshots on a laptop and a phone?
Open a laptop scene and a phone scene in an online mockup generator, drop a screenshot on each screen and export both in the same style. In the ls.graphics mockup generator it takes a few minutes and no Photoshop:
- Open the laptop mockups in the editor and pick a scene with a clean background.
- Click the + on the screen and upload the desktop screenshot. The editor fits it to the screen; check the top of the page is not cut off.
- Export a PNG for the web, or a layered PSD if you want to finish it in Photoshop.
- Repeat with the phone mockups and the mobile screenshot, in a scene from the same series so the light and the background match.
Some scenes hold more than one screen. There each screen has its own + and its own proportions, so you can put a different screenshot on each one; add designs to several screens shows how.
How do I make the laptop and phone look like one set?
Use scenes from one series, the same background color and the same angle of light, and show the same page on both devices. A viewer should see one site in two sizes, not two different projects.
- Pick the same section of the site for both screenshots, usually the hero, so the eye can compare them.
- Match the background: recolor it or paint a gradient in the editor so both images sit on the same tone.
- Keep the phone smaller in the final layout. On a landing page, place it in front of the laptop or beside it at about a third of the laptop's width.
- Export both at the same size, for example 3200 px wide, so they scale together on a page.
Should a website mockup show the whole page?
Usually not. A laptop screen shows one view, so show the part that sells the site, the hero or one strong section. For a full page, a long scroll mockup or a short video of the scroll works better than a squeezed screenshot.
A video works well for case studies: record a slow scroll, put it on the laptop screen and export an MP4. The steps are in how to make an app or website mockup video.
Website mockup examples
Laptop and phone scenes from one series, ready for your screenshots:
- MacBook Air on a stand, a straight front view for a full-width hero.
- MacBook from above, an angled view for a case study cover.
- iPhone on a ribbed surface, the matching phone for the mobile layout.
- iPhone 15 Pro on a metal rail, a close phone view with room for a headline.
- Floating MacBook Pro, a free laptop scene on a light background.
More scenes are in website mockups.
FAQ
How do I make a website mockup for free?
Take the screenshots in your browser, then use a free laptop or phone scene in an online mockup generator. On ls.graphics the scenes in free mockups can be edited and exported once you sign in.
Can I make a website mockup in Figma?
Yes. Design or paste the page into a frame of the device's size, then use a mockup plugin to place the frame on a device. The ls.graphics Mockup plugin pastes the result next to your frame.
What is the best laptop for a website mockup?
A MacBook is the most common choice because readers recognize it at a glance and its 16:10 screen fits a typical web layout. For a Windows audience, a Surface or Galaxy Book scene works the same way.
Do I need Photoshop to make a website mockup?
No. An online mockup generator places the screenshot and exports a PNG. Photoshop is only needed if you want to edit the layered PSD afterwards; how to use a PSD mockup in Photoshop covers that.