Prerecording Talks for Online Conferences

swyx - Aug 17 '20 - - Dev Community

2021 Edit: Now given as a talk for Global Diversity CFP Day!


I've just given my 5th or 6th prerecorded talk this year, at React Rally 2020. Prerecorded talks are an increasingly popular way to do virtual conferences, because they reduce a host of conference organizer risks. However, they also present new challenges and opportunities to speakers.

A lot of folks start off doing prerecorded talks exactly the same way they do in-person conference talks. This is fine, but misses the opportunity to fully take advantage of the medium.

I'm no expert, but I realized I may have some ideas from my experiences that others may want to steal. Here they are.

Recording Yourself

  • Write a script. It's BETTER to have a script when prerecording. I rarely have a script when speaking live - it is more natural to be able to improvise and command attention when not scripted. But the prerecording restriction takes ALL the benefit out of speaking off script. Here, the expensive thing is now recording and editing. You should try as much as possible to reduce the amount of editing you need to do - and that means trying out words and phrases in writing first, instead of taking a million cuts and improvising. Writing a script may feel like extra work, but trust me that it saves rather than adds time.
    • You can still improvise!! Just have a script first.
    • Front-load value. People have a FAR shorter attention span online than in person. They could be deciding whether or not to listen to your 30 minute talk based on the first 30 seconds. They could be playing you in the background while working on something else. If you start out flat and monotone, I'm going to tune out. Grab attention. Use pauses, videos, cliffhanger stories, whatever you can think of to get them to actually watch.
    • You can set up a teleprompter for yourself (some use Glide Gear) if you feel you must look at the camera at all times, but honestly nobody minds if you look away every now and then, especially when your face is not the focus of attention
  • Good Lighting: You want your face to be lighted up nicely. This doesn't mean you have to shine a ring light directly in your eyes. I use a regular LED lamp and shine it at white paper taped on to the wall in front of my desk, so it bounces off the paper and then onto my face. Multiple lights will help you avoid shadows.
    • If you want to go beyond amateur, check this advice for youtubers covering fill light/rim light/practical light and this one covering white balance and colors
  • Interesting background: plain white is a little too plain. no Zoom backgrounds please. A good background tells a little about your personality, but isn't too distracting. Books, vases, plants, guitars, toys, paintings, shelves. You can take some inspiration from Jason Lengstorf, Sarah Drasner, Michael Liendo or Simona Cotin or Scott Tolinski. (More here)
  • Camera: Many laptops skimp on cameras, so the quality isn't that great. A lot of serious folks buy mirrorless DSLRs just for livestreaming, but if you are in the market for a cheaper option, I use a Logitech C9250-ish webcam. I elevate the camera with a few books so it is at eye level.
    • 2021 Update: I'm now getting a Sony a5100 DSLR which only cost me $400.
  • Microphone: A good microphone is important here - you can watch video with bad camera quality, but bad sound quality is unwatchable. Turn the gain down and stick the microphone close to your face. I use the standard issue eggheadio mic, I've carried it across 4 continents.
  • Misc: Watch what you are wearing - you are home, but you don't have to dress too "homely". Don't wear the same color as your background. Try to lean forward to prevent double chin.

I'm a relative cheapskate when it comes to recording setups. Here are people who have invested way more:

Check my video on Growing a Meta-Language. Dev.to Embed:

Recording Your Screen

  • MAKE. EVERYTHING. BIGGER. Statistically, half your audience will be watching on their phones. Even if they watch on desktop, your video may be shrunk down for any number of reasons (livestream banners). Make everything as big as possible without having to scroll too much every second. It also just forces you to get rid of everything not immediately relevant on your screen.
  • Clear Your Screen: this is worth a standalone point. Remove everything not relevant to your talk. This includes stray browser tabs and chrome extensions. You can use a clean Chrome Profile to do this (more from Dave Ceddia). Hide the activity bar and file explorer in your IDE when not relevant. Hide the Mac OS menubar unless you actually need it. This isn't just about reducing clutter for aesthetic purposes - reducing points of variance can help you record video with time skips so it can be easier to edit seamlessly later.

2021 Edit: Evyatar from Svelte Society recommends using the Colibri browser and these VSCode settings to have maximize code on screen and minimize distraction:

  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "editor.fontSize": 52,
  "window.zoomLevel": -4,
  "editor.accessibilityPageSize": 17,
  "editor.lineNumbers": "off",
  • Make It Obvious: If your software supports it (i use Screenflow) add an indicator for when you have clicked something on screen (usually concentric circles). Make your mouse cursor bigger so it is easier to track. Speak what you are typing and doing on screen if it is something you are trying teach. "I cut this command here and paste it over there." "I search and replace all instances of this variable."
  • Be wary of recording the keyboard sound when you type and speak at the same time. This is why using a separate mic helps reduce that noise. You can also choose to record your screen first with some narration, throw away the audio, then record voiceover without any typing.
  • Think about where you are placing your face later when you edit these things together. If you are doing anything in the bottom right, be aware that you may have to move your face awkwardly. Also good practice in general to leave a healthy margin in all directions and don't do anything too close to the corner of any side of the screen.
  • Slides can be nice, but you need slides less than in live talks. Since you are prerecording, you can easily "live code" and never be at any risk of mistakes. Likewise, you can bring people around on websites and apps to demonstrate what you are trying to say and what things will actually look like, instead of having each thing be merely a bullet point. Show, don't tell.

Check my video on Vite + React for an example. Dev.to Embed:

Editing Opportunities

  • I use Screenflow. Free alternatives exist, like Kdenlive.
  • Try different layouts. Most people have their screen take up the full size of the video, and their camera/face floating/overlaid on the bottom right. It's fine, but it's boring. You can invert that - have your face/camera take the full video, and inset the screen. Alternatively, you can move your face around as a replacement of laser pointer, to specifically indicate what part of the screen you are talking about. Don't overdo it!
  • Transition scenes with quick fades instead of having hard cuts.
  • You can cut and speed up routine tasks in video so your audience don't have to wait for you, but you also don't have to take the cognitive loss of a jump cut.
  • You aren't limited to what's on your screen, or what's on your slides. You can superimpose even more content on your final video - more images to quickly reference what you are talking about, and even video and charts to illustrate your point. Don't throw too much or it will feel very chaotic, but adding good visuals atop audio can do a lot to break up the monotony of talking through a single slide for a whole minute. One every 10-20 seconds feels right. Examples:
  • Consider what the title frame/screenshot will be. This will be what most people see in YouTube before they decide to watch your video. make it good.
  • Since you're not live, take advantage of it to make your video AS CLEAR AS POSSIBLE. For example, if you have a 30 minute talk, with 3 parts of 10 minutes each, you could show a little overlay with text or diagrams as a visual reminder of where you are in the talk. This helps people follow along when you transition and change to the next point, as well as people on YouTube when they are scrubbing and skipping ahead.
  • Consider the final call to action - this is a VERY good chance to send people to related talks you have done and/or your personal blog/site/twitter for leaving comments on the talk.

You can see a very good example of editing in Rich Harris' Svelte Society talk. Dev.to Embed:

During the Talk

Finally you can relax! You've done all the hard work! But this is the last benefit from going prerecorded - you can still talk while you talk!

  • Provide onscreen links in the conference chat so that people can click to follow through
  • Respond to questions as they come in
  • Discuss other things you didn't have time to cover but point people in the right direction if they
  • Director's commentary - talk about the behind the scenes of what's going on in the video and tell stories what you had to do to get there
  • I also share my script and slides for people who want to read along. It doesnt have to be 100% faithful
  • Heckle yourself - have some fun with it!

Other resources

Your Turn

What other great tips from prerecorded talks have you observed?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .