Desktop and mobile demo production

The working approach

Record the desktop workflow at its native viewport.
Repeat the task in a fresh mobile browser.
Edit each recording for its own reading distance.

Match outcomes, not identical clicks

A desktop sidebar and a mobile drawer may lead to the same destination through different actions. Plan equivalent outcomes in both viewports rather than insisting on identical navigation. Record the viewport as part of the source metadata. This makes it possible to distinguish a true phone capture from a portrait composition containing desktop footage when the assets are reused later.

The edit also needs a separate reading check. A desktop view can establish context across several columns; a phone view often benefits from a single focused state. Do not shrink the entire interface simply to make room for more captions. If the main control is unreadable at the actual placement size, choose a closer native view or a different scene. Test the finished mobile video on a phone before approving it.

A concrete example

On mobile, capture the menu opening, destination loading and menu closing. Use the unobstructed destination as the main shot.

Before recording this scenario, write down what the starting screen contains and what should be different at the end. This gives the reviewer an observable result to check, rather than asking them to approve a general impression.

The mistake to avoid

Cropping a desktop table into a phone frame hides the responsive experience.

If the source cannot support the intended message, narrow the claim or capture the missing evidence. A transition, caption or voiceover can explain a real change; it should not manufacture one.

Put it into a production brief

Replace the bracketed fields before using this brief. The scenario is illustrative; keep only the actions your product actually supports.

EDITABLE PRODUCTION BRIEF

Purpose: Desktop and mobile demo production.
Audience: [specify the viewer and their familiarity with the product].
Decision: [what should the viewer understand or do next?].
Approach: A vertical canvas does not prove mobile usability. A phone recording should expose the navigation and layouts a phone visitor actually sees.

Required evidence:
1. Record the desktop workflow at its native viewport. Show the relevant entry state, action and completed result.
2. Repeat the task in a fresh mobile browser. Show the relevant entry state, action and completed result.
3. Edit each recording for its own reading distance. Show the relevant entry state, action and completed result.

Reference scenario: On mobile, capture the menu opening, destination loading and menu closing. Use the unobstructed destination as the main shot.
Avoid: Cropping a desktop table into a phone frame hides the responsive experience.

Deliverable: [duration], [format], [placement].
Use only recorded product behaviour. Preserve the full original.
Acceptance: check each claim against its visible scene, review at actual viewing size, and test the final file.

Review before delivery

Evidence: can a new viewer identify the result described in the example without being told where to look?
Reading distance: are the relevant controls and labels understandable at the intended placement size?
Continuity: does each cut preserve the relationship between the action and its result?
Accuracy: does the final caption describe the visible product state, including any limits?

Using this with Demovela

The automatic URL workflow currently supports Postraid and Adfolio. Other product scenarios on this page are production-planning examples, not compatibility claims. Adapt the brief to your own recorder or editor. Demovela preserves originals and creates separate outputs; review the resulting file before publishing.

Check the current preview scope →

Keep the workflow moving

Choose the next resource based on the decision you still need to make.

Browse the complete resource library →