How to record demo videos for web apps
Use these five tips to set up your browser to record demo videos that look great, faster.
/
0 min read
After recording plenty of demos for SaaS web apps, here are a few easy upgrades that most people overlook. They make setting up and recording ongoing videos for web apps much simpler.
#1 Create a dedicated demo profile in Chrome
Set up a separate profile in Chrome for recording demos. Each profile gets separate windows and settings. For example, hiding distractions like the bookmark toolbar and extension icons.
Keep in mind: Chrome profiles exist at the browser level, and are not the same thing as signing into multiple Google accounts in the same browser window.
In Chrome, click your avatar in the top right โ Add New Profile.
Don't link this profile to your Google account, since it needs to be separate and we don't want settings synced. I'd also recommend changing the profile's theme color, so it's easier to tell which profile you're working with. In the examples for this guide, the demo windows are dark purple.
"Why not use a guest profile?" Guest profiles don't save settings in between sessions, and you won't have access to extensions. Creating a new full profile is the best option if you plan to record repeatedly.
#2 Use a virtual desktop for demo recording
Both Windows and macOS support virtual desktops, which you can use to set up a dedicated space for staging and recording. They basically give you the ability to swipe through desktop screens just like your iPhoneโs home screen. You can assign different apps to specific desktops, which keeps your demo setup clean for recording.
How to set up virtual desktops on macOS
For macOS, to access via gesture, use three fingers to swipe up. You can also swipe left and right with four fingers. Alternative: Ctrl + Up via keyboard. Use the plus sign on the top right of the screen to create a new desktop space.
How to set up a virtual desktop on Windows
Similar to macOS, you can switch between virtual desktops via Windows + Tab or Ctrl + Win + Arrow key (left or right). If you're not seeing the option, you may have to enable it in settings first.
#3 Tab Groups
If I have multiple pages to show, Iโll use tab groups in Chrome to organize them in advance. You can collapse each group to keep your tabs tidy. I use this heavily when recording clips of workflows for larger product updates. You can also save tab groups, close them, and reopen later.
Right click a tab โ Add to Group.
#4 Resize browser windows to a consistent size
If youโre recording a window, the size of each can vary between recordings. Consistent sizes make the results look good and editing simpler. And future videos will have the same layout, so you can mix and match over time.
I use the Window Resizer extension to automatically the browser window to consistent sizes and window position. And yes, it does exactly what the name implies.
By default, it will scale the entire window (tab bar included) to the resolution. For web apps, Iโd recommend adding a custom preset which resizes based on the viewport, (the website part of the the window) instead. If you use an in-browser recorder to record a specific tab in Chrome, for example, you're only recording the viewport.
What's the best window size for screen recording web apps?
I record most of my videos on a 14โ MacBook. For me, resizing the 1440 x 900 is my default because it is a 16:9 aspect ratio, easy to crop, and stays readable when exported to smaller video resolutions. Hereโs what it looks like:
#5 Present screenshots in browser tabs
You donโt need to have a separate window to present existing files. You can drag images into tabs on Chrome to have it available alongside a website and keep the window a consistent size.
In Rally, you can skip this step and just drop in images or videos directly, and record your narration over screenshots afterwards like slides in a presentation.