Choose a recording size

A browser capture records the viewport, which is the area of the page inside your browser window. It is not your monitor, and it is not your screen resolution. Two people on completely different monitors who size their windows the same way produce identical captures.

Check the viewport in ten seconds

Do not trust the window size Windows reports, and do not trust the responsive toolbar in developer tools. Ask the page itself.

1. Press F12 to open developer tools.
2. In the tab strip along the top, click Console.
3. Type this at the > prompt and press Enter:

innerWidth + " x " + innerHeight

It prints something like "1440 x 810". That is exactly what will be captured. Resize the window, press the up arrow to bring the line back, press Enter again, and repeat until it reads what you want. Close developer tools before you record.

Why the size matters

A finished demo is displayed at whatever size its container allows. Demo Maker Pro scales a demo down to fit, but never enlarges it past the size it was recorded at. That one rule explains both failure modes.

If you record much larger than the space the demo will be shown in, everything shrinks to fit and the text gets hard to read. A demo captured at 2560 pixels wide, shown in a 1000 pixel wide box on a web page, is displayed at about 40 per cent of its original size. The same demo captured at 1440 wide is displayed at about 70 per cent, and reads comfortably.

If you record much smaller than the screen someone views it on, the demo will not stretch to fill. It sits at its recorded size with space around it. That is far less damaging than the other direction, which is why erring smaller is the safer mistake.

Where your demo will be seen

• A shared link, opened full window. Most laptop windows land between about 1400 and 1550 pixels wide, so a demo recorded at 1440 plays at close to its true size for a large share of viewers.
• Embedded in a page. The demo gets whatever width that page gives the iframe, which is usually much narrower than a full window. Record smaller when a demo is destined for an embed.
• On a large monitor. Nothing enlarges past the recorded size, so a modest capture shows at full sharpness with room around it rather than filling the glass.

Rules worth following every time

• Set the window before you start, and do not resize while recording. Each step remembers the viewport it was captured at, so resizing partway through makes the demo change size in the middle of playback.
• Keep every demo in a set the same size. If you are recording several walkthroughs for the same page or the same course, use one window size for all of them.
• Your monitor does not change the layout. A 1440 x 810 window captures the same thing on a 4K display as on a laptop screen. Only the window matters.
• Desktop Capture is different. It records images of an application window, so it captures whatever size that window happens to be. Size the application window before you start there too.

A note on scrolling

A smaller window means more scrolling, which is normal and fine. One thing helps the result: when you follow a link to a new page and then need to scroll down before clicking, click something on the new page first, then scroll. That gives the demo a starting point to scroll from, so viewers see the page move rather than arriving part way down it.

Next: Record a browser demo · All documentation