EN

How to Record a Website in the Browser Without the Clutter

Record a website screen for a client without tabs, bookmarks, autofill or cookie banners in the way: a clean browser profile, the right zoom and smooth scrolling.

Nicolas Ricardi5 min read

In short

  • Use a separate browser profile for recordings: no bookmarks, no personal autofill, no extensions, no other clients' tabs.
  • Hide the bookmarks bar and set the page zoom before you start, so text is readable on a laptop or phone.
  • Deal with cookie banners and pop-ups once in that profile, unless the banner is what you're reviewing.
  • Use test data and a staging site, never a real customer's account.
  • Record the browser window, not the whole screen, and scroll slowly with pauses.

To record a website screen without the clutter, use a separate browser profile with no bookmarks, extensions or saved personal data, close every other tab, set the page zoom, dismiss cookie banners once, and record only the browser window. Then scroll slowly and pause on each section. Ten minutes of setup the first time, then it’s ready whenever you need it.

A website walkthrough is the most common client video for web agencies: the staging site for review, the finished site at handover, a bug on a specific page. The website is the subject. Everything else in the browser is noise, and some of it is private.

Use a browser profile just for recordings

Your everyday browser shows a lot about you: bookmarks with other clients’ names, extension icons, a tab strip of thirty pages, autofill that offers your home address the moment you click a form field. A separate profile starts empty.

In Chrome: click your profile icon at the top right, choose ProfileAdd Chrome profile, and give it a name like “Recording”.

In Safari: choose SafariSettingsProfiles and create a new one. Open a window in it from FileNew WindowNew Recording Window (the last item uses your profile’s name). Note that passwords stored in iCloud Keychain are available in every Safari profile, so a password manager may still offer to fill in logins.

In the new profile, keep only what the recording needs: no extensions, no bookmarks bar, no saved addresses or cards, and logins only for the staging sites you show.

Why not just a private window?

A private or Incognito window (⌘⇧N in Chrome) is clean too, and fine for a one-off. But it forgets everything when you close it: every recording starts with the cookie banner and the login screen again. A profile remembers what you set up.

Private window or recording profile
Private or Incognito window Recording profile
Setup ✓ none ~ a few minutes, once
Starts without your everyday bookmarks and tabs ✓ ✓
Remembers dismissed cookie banners ✗ ✓
Stays logged in to staging sites ✗ ✓
Good for A one-off recording Every recording after the first

Clean up the window

Browser window before recording

  • Only the tabs you’ll show are open.
  • The bookmarks bar is hidden.
  • Extension icons are unpinned from the toolbar.
  • The page is open at the starting point, scrolled to the top.
  • Zoom is set so body text is easy to read.
  • Cookie banner and newsletter pop-up are dealt with.

Hide the bookmarks bar. In Chrome, press ⌘⇧B. In Safari, choose ViewHide Favorites Bar.

Close other tabs. Tab titles are visible in the recording, and “Invoice overdue, Client X” is not something you want in a video for Client Y. Our screen recording privacy checklist has the full list of what to hide.

Set the zoom level

Websites are designed for people sitting in front of them, not for a video scaled down into a laptop window or a phone. Small body text and fine UI become hard to read.

Before recording, zoom the page in a step or two with ⌘+, and back to normal with ⌘0. The layout may switch to a narrower breakpoint as you zoom; check that it still shows the design the way you want to present it. If you want the exact desktop layout at a readable size, make the window smaller instead of zooming, and record the window.

On a staging site, the cookie banner, the newsletter pop-up and the chat bubble appear for every new visitor, which is what you are in a fresh profile.

  • If they’re not the subject, accept or dismiss them once before recording. In a dedicated profile, they stay dismissed.
  • If they are the subject, like a new consent banner you need approved, record a separate short video that starts with it, so the main walkthrough isn’t interrupted.
  • Chat widgets often pop open after a delay. Close them before you start or wait for them to appear and dismiss them.

Use test data, not real customers

If the walkthrough includes an account area, a checkout or an admin panel, log in as a test user. Real orders, names and email addresses in a video are personal data, and videos get forwarded. Use the staging site’s test accounts and test payment modes, and fill forms with obviously fake data like “Test Customer”.

Watch for autofill too. When you click into a form field, the browser may offer saved names, emails or addresses. A recording profile with nothing saved avoids that.

Record the window, not the screen

Record just the browser window or an area around it. The client sees the site and nothing else: no dock, no menu bar icons, no notification that slides in. Our guide to recording one window or part of your screen explains the options in the macOS Screenshot toolbar and in other recorders.

For a polished presentation, padding and a background around the window help; see backgrounds and padding.

Scroll like you’re showing it to someone

Fast scrolling is the most common problem in website recordings. You know the page; the client sees a blur.

  1. Start at the top and say what the page is for.
  2. Scroll slowly with the trackpad, or use the arrow keys for small, even steps.
  3. Stop at each section while you talk about it.
  4. Avoid the space bar and flick scrolling, which jump a full screen at once.
  5. Point before you click. Move the pointer to a link or button, pause, then click.

If the client might watch on a phone, a zoom on the small details helps; auto zoom: when it helps and when it hurts covers when to use it.

Mobile layouts and other cases

To show the mobile version of the site, use the browser’s responsive mode or a real iPhone; how to show a mobile site to a client from your Mac compares the options.

For handovers, where you also show the CMS and where things live, see website handover videos. For the basics of recording on a Mac, start with how to screen record on Mac.

Frequently asked questions

How do I record a website on a Mac?

Open the site in a clean browser window, close other tabs, hide the bookmarks bar and set the zoom level. Then record just that window, with the macOS Screenshot toolbar or a screen recorder, scrolling slowly and pausing on each section.

How do I hide the bookmarks bar in Chrome?

Press Command-Shift-B to show or hide the bookmarks bar in Chrome on a Mac. In Safari, use the View menu to hide the Favorites Bar.

Should I use a private window to record a website?

It helps for a quick recording because it has no history or autofill, but cookie banners and logins reset every time. A separate browser profile used only for recordings gives you a clean window that remembers your choices.

How do I scroll smoothly in a screen recording?

Scroll with the trackpad slowly, or use the arrow keys, and stop at each section while you talk about it. Avoid flick-scrolling and the space bar, which jump a whole screen at a time.

Written by

Nicolas Ricardi

Maker of JustRec, at Nube

Nicolas makes JustRec at Nube, a web studio in Italy. He built it for the videos Nube sends to its own clients: design reviews, handovers and quotes explained in a few minutes instead of a meeting.

www.wearenube.dev
Better videos