Signal dossier // imping.digital
Website mockups from the live browser: why screenshots are not enough
Website mockups show real pages on devices. Screenshot templates fail on login, responsive, and updates — live browsers solve that.
Anyone who needs website mockups knows the detour: take a screenshot, crop it, drop it into a device template, pull the perspective. Start over on every copy update. And as soon as the page sits behind login or only exists on staging, the workflow becomes unusable.
Website mockups from the live browser solve exactly that problem: the real page runs in the browser on the device — not as a frozen snapshot.
What are website mockups?
A website mockup shows a website as it looks on a concrete device: MacBook, iPhone, iPad. Typical uses:
- Portfolio and case studies
- Client pitches and approvals
- Social media and ads
- Internal documentation of product states
The value is not in the frame, but in the credibility of the content: if the page wraps differently on iPhone than on desktop, the mockup has to show that — not just drop the same crop into another shell.
Why screenshot templates hit their limits
Classic mockup kits (PSD, Figma, online generators) expect a finished image. That creates three typical gaps:
- Login and staging: Dashboards, customer areas, and internal tools cannot be screenshotted publicly. That is often where the decisive product moments happen.
- Responsive truth: A cropped desktop screenshot in an iPhone frame is not a mobile layout. Responsive mockups need the real viewport view.
- Freshness: Every copy change, every feature state means a new screenshot, a new crop, a new drop-in.
For one-off marketing pages that can be enough. For day-to-day client work and product work, it is friction.
Live browser instead of screenshot upload
The alternative approach: the website is loaded in a real browser and placed onto 3D device models. You navigate to the desired state — including signed in — and export the scene.
That changes the sequence:
| Step | Screenshot workflow | Live browser |
|---|---|---|
| Content | Prepare an image | Open URL, navigate |
| Devices | Fill a template | Responsive view per device |
| Login | Often impossible | Session in the local browser |
| Update | Photograph again | Reload the page |
In short: browser instead of screenshots. The category remains website mockup — the source is the live page.
When which approach fits
Templates / screenshot kits, when:
- the page is public,
- you only need one state once,
- no login and no staging are involved.
Live-browser mockups, when:
- you have to go behind authentication or onto staging,
- desktop and mobile should show real layouts,
- the state changes often,
- you need PNG/JPEG in fixed formats (up to 8K, optionally transparent).
Practice at imping.digital
For exactly this daily work I built Webdm — a native Mac app in the Imping Labs. Webdm loads the live website in WebKit, shows it on MacBook, iPhone, and iPad, and exports pixel-accurate mockups. Now on the Mac App Store — one-time purchase, no subscription.
Webdm does not replace design tools. It replaces the screenshot detour when the real page is the content.
What to take away
Website mockups are only as good as the state they show. Screenshot templates scale poorly with login, responsive, and updates. Live browsers put the real page onto the devices — and with that, credible mockups without collage work.
Product page: Webdm — Website mockups straight from the live browser. Mac App Store: Webdm — Website Device Mockups.
Signal fully received