Record a Mobile Demo of a Responsive Web App
To record a mobile demo of a responsive web app, record it on a mobile device, not a shrunken desktop: a phone-sized viewport with touch, so the app lays itself out the way a phone visitor sees it, taps shown as a ripple where the finger lands, and a phone frame around the result. With Klevo that is one word in the prompt. This guide covers the prompt, the format choices and the mobile-specific habits.
What is the prompt?
Record a demo with Klevo of adding a task on https://staging.acme.app/projects, mobile device, logged in with DEMO_LOGIN: open the Q4 launch project, tap Add task, type “Write the launch post”, save. Format 9:16, phone frame, smooth.
Three things differ from a desktop recording:
- Device: mobile. Klevo opens the page at a phone width with a touch screen and a mobile user agent. The app’s responsive layout kicks in: the hamburger menu, the stacked cards, the bottom bar.
- Taps, not clicks. There is no cursor on a phone. Each tap draws an expanding ripple where the finger landed, so the viewer sees what was touched. Swipes are available as a step too.
- The phone frame. Rounded corners, a notch, side buttons. The format decides the canvas around it.
Which format?
| Where it goes | Format | What it looks like |
|---|---|---|
| Stories, Reels, Shorts, TikTok | 9:16 | The phone fills the frame; captions at the top, clear of the UI chrome |
| Landing page, mobile section | 16:9 | The phone stands in the middle of your brand color with room on both sides |
| Feed post | 4:5 | The phone, slightly cropped, in a tall tile |
| Product Hunt gallery | 16:9 | Same as the landing page; the gallery wants landscape |
The device and the format are separate choices, which is the point: a mobile recording in a 16:9 canvas is the honest way to show “it works on phones” on a desktop landing page. Formats and frames by channel has the full table.
Android or iPhone?
Klevo’s mobile device is a current iPhone viewport. The frame is a separate choice: phone (a notch) or android (a hole-punch). Pick the one your audience holds. The tablet device and frame work the same way for iPad-shaped layouts.
What habits change on mobile?
- Fewer steps. A phone demo in a story plays for seconds; three to five steps is the range. How long should a demo be.
- Shorter captions. The frame is narrower; “Add a task” rather than “Add a task to the project”. Klevo places captions at the top on 9:16 so a thumb does not cover them. Captions that explain a flow.
- Gentler zoom. A phone viewport already fills the frame, so Klevo zooms less on mobile in every style. Mark only the tap that matters.
- Open the menu as a step. On a phone the navigation is often behind a button. “Tap the menu, then Projects” is two steps; record both so the viewer can follow.
- Scroll on purpose. Long pages need a scroll step to reach the control; a swipe up reads naturally on a phone.
How is the mobile layout checked as you go?
After every step the AI sees a screenshot of the phone-sized page and a snapshot of its elements, so if the responsive layout hides a button behind a menu, it finds out before the step fails and opens the menu first. If something is genuinely unreachable at phone width, the step fails with a screenshot, which is a layout bug worth knowing about. A failed step is a bug report.
Can you have the same flow on desktop and mobile?
Record the flow once on desktop, then ask for a mobile recording of the same prompt; the steps are the same words, the device differs. Keep both scripts: the landing page shows the desktop clip, the mobile section shows the phone, and after a release both render again on the current app. Keeping demos current after every release covers the routine. Rendering the three devices from one script in one call is on Klevo’s roadmap and not built yet.
FAQ
Can it record a native app? No. Klevo records web pages at a public URL in a browser; a native app needs a simulator recording.
Does the login work on mobile? Yes. The saved secret runs before recording on any device. Recording an app behind a login.
Can I see the taps as a cursor instead? No; touch devices show ripples. Record on desktop if you want a cursor.
What if my app blocks mobile user agents? Record on desktop with the tablet device, which is wider, or ask your team to allow the mobile view on staging.