Screencasting & Recording

Screen recording and screencasting are both important tools for being able to visually show a solution or provide context to spoken words.

This particularly comes in handy when working with code, as often code needs to be placed in precise locations combined with other code in order to function as expected. Additionally, being able to provide spoken context while walking through the code visually, can be a powerful mechanism to help others understand complex topics.

The problem however is it’s easy to spend a lot of time and work on putting video resources together, only for those resources to be hard to consume, resulting in viewer frustration or low use.

With a few best practices, we can maximize our time and provide high quality resources to help create as best of a learning environment as we can.

Font Size and Resolution

How you configure your font size or resolution is one of the most important aspects of being able to provide a usable video resource.

The issue with recording your screen as you work, is often the size of your screen and font may be large enough for you to consume on your device, but when others view it on their own device, the text and objects may appear too small, making it very difficult to read.

YouTube by default utilizes maybe 2/3 of a full width browser

This could be for a number of reasons, including:

• Video playback is often not played at their device’s full size
• Scaling from large monitors to smaller devices not only factors the font size, but scaling from the bigger area down to a smaller area
• Watching someone else work is harder to follow along with at smaller sizes

What are some tools to help?

App-specific Font Size

The simplest solution is to increase your font size. This goes for all areas that you work, including the pages you’re visiting in your browser, the browser developer tools, and any code editors or terminals.

“Working” font size vs larger “recording” font size

Try to keep these sizes consistent as much as possible between the different applications, as it can be jarring moving from view to view having to adjust your eyes to now read a different size.

Changing Screen Resolution

A better solution is to change your display resolution to a “smaller” size. This naturally increases the font size of everything, including the operating system’s UI like the menu bars.

1728×1117

1280×720

Though it can feel a bit odd trying to work in that bigger-looking environment, it will provide a lot more value to the people watching your video.

Most operating systems also allow you to natively control the display size in your settings, but there are other tools available that can help.

Changing the text size on a Mac

If on a mac, BetterDisplay is a tool that adds a nice item in your menu bar allowing you to quickly make your selection, working between different resolutions.

Setting resolution with BetterDisplay

Accessibile Themes

Developers have a tendency to be very opinionated in how they theme their tools including their code editor and terminal. And that’s amazing! But it’s not always the best option for accessible video recording or screencasting.

No syntax highlighting, inaccessible terminal

Be conscious about the themes and styles you apply when recording. Here are some tips:

• Don’t use opacity controls
• Use high contrast
• Use themes with syntax highlighting
• Don’t use fancy code fonts, italics, or ligatures

The result might not be your favorite theme or style to code in, but your recorded videos aren’t for you, they’re for the person viewing the video.

What are some tools to help?

Code Themes

When it comes to VS Code specifically, a safe bet is to opt for the Night Owl theme which is specifically design for accessibility.

Night Owl theme

It has nice syntax highlighting and enough contrast to help people clearly see what’s going on.

Aspect Ratio

How you configure your aspect ratio largely depends on your recording format. Traditionally video platforms use a 16:9 (like 1920×1080). If trying to use a resolution that doesn’t fit that ratio, you’ll end up needing to crop the video or add padding, such as just black space.

Native Mac resolution with black space on the sides

This isn’t always the case though, as sometimes the 16:9 format creatively incorporates the non-standard resolution, as you may often see with those who live stream or interview guests.

But this isn’t standard and more often than not isn’t the best use of space.

Instead we want to try to make the most of the available space we have.

What are some tools to help?

Aspect ratio is a bit trickier. Some systems are easier than others to configure your resolution to non-native sizes.

Changing Screen Resolution

Similar to resolution above, if on a Mac, consider BetterDisplay which can help give more granular control over your resolution, including non-native sizes.

16:9 resolution with BetterDisplay

Screen Capturing

You can also consider using recording tools that allow you to only capture a portion of the screen, though this just not as easy to control.

Capturing only a portion of the screen

Monitor

If you happen to have an external monitor that’s at a 16:9 ratio, you could use that as the screen you record from, easily allowing you to fit into that 16:9 resolution.

Distractions

Your daily workflow might include a bunch of helpful apps, widgets, and code editor features that make your life easier, but when recording a video, these only serve as distractions for the person watching.

Autocomplete and tooltips

Try to avoid including these types of things inside of video recordings. Autocomplete for instance more often than not isn’t what you intend to write for the video. Tooltips just get in the way for your actual explanation, leading people to try to read that instead of listening or paying attention to what you write.

This includes other elements of your screen that you might not have considered such as the operating system dock and menu bar.

With Dock and Menu Bar vs No Dock or Menu Bar

They’re unnecessary items that might quickly draw someone’s attention and take space in your video frame.

What are some tools to help?

Operating System

There really aren’t any specific tools to help with this, the options will mostly be from within the tools you’re using such as changing how the Dock and Menu Bar work for your Mac.

Dock & Menu Bar Options on Mac

Code Editors

Some code editors have more flexibility than others. VS Code in particular has a lot of ability to customize your interface.

The Settings UI will likely require a lot of searching with trial and error to figure out what you want to hide, but a quick Google search will usually yield a Stack Overflow or the like that will tell you exactly what you need to do to hide it, including setting a custom configuration through the JSON-based settings.

JSON settings in VS Code

Another tip when working with VS Code, you can create multiple profiles, allowing you to have your “working” profile and your “recording” profile, allowing you to easily move back and forth between the two.

Audio Quality

Having great sounding audio is a critical component of delivering great video (or only audio) presentations. What you’re showing needs spoken context and it’s incredibly important for that context to be clear and easy to understand.

Some general tips:

• Stay close to the mic (but not too close)
• Don’t keep moving position, side to side, or near and far, this creates inconsistent volume
• Staying in a quiet room
• Get a decent mic

What are some tools to help?

Microphone

The microphones that come integrated into computers are not great for a variety of reasons, including being subject to the sound of fans running, not having optimal positioning, and just generally not having recording-level quality.

You don’t need to go out and buy a $1,000 mic though. RØDE for instance makes a great ~$100 mic.

There are also great cheaper options like this AmazonBasics mic. It’s not perfect, but it’s much better than what you get with your computer.

Stand / Boom Arm

Having your mic sitting on your desk is convenient but it can easily capture bumps and typing on your keyboard, which are distractions to the viewer. A boom arm is a great way to life the mic off of the desk and conveniently tuck it to the side when not in use.

Software

There are also tools to help you clean your audio if it still feels like it has some noise or artifacts, including Krisp with voice clarity and noise reduction.

Descript, a tool that has a lot of built-in audio and video tooling, also provides a “studio sound” feature which reduces noice and enhances speech.

Audio Levels

Be sure your audio levels are appropriate for your recording. Make sure to test this out before you create your real recording. You can use the built-in audio tools which will show a little graph or the software you’re using typically has this to view as well. If it’s too low, be sure to boost the levels. If it’s too high, be sure to lower it to avoid clipping audio.

Surroundings

Finally, finding a quiet space is important for this. Recording out in the middle of an office space isn’t a great option, as there will be a lot of ambient noise as well as others talking. Find a space where you can settle in and record as needed.

Video Quality

Adding someone’s face by simultaneously capturing a camera is a great way to build trust with an audience, especially when that same person is a regular streamer or contributes to a longer series of videos like a podcast, building a relationship with the viewer.

@midudev streaming talking about Cloudinary

What are some tools to help?

Camera

Consider what kind of camera you’re using as well as the lighting and environment.

The onboard cameras for devices currently aren’t amazing, even with Macs.

If you have both a Mac and iPhone, you can use their new feature that allows you to use your iPhone as a camera, which has seen some pretty great results! You’re just then stuck having to connect and set that up each time.

You also don’t need to go spending $1,000 on a camera. Starting off, Logitech has some great options around the $100 price point.

A step up, Elgato’s Facecam Pro (my current camera) does a great job at providing more natural colors and clarity, though won’t quite capture the same quality as a DSLR.

Lighting

Lighting is also an important factor in this, as the camera needs light to work properly, otherwise it’s going to look dark and grainy.

Try to see if you can position yourself or lamps to help get more light in front of you and less light behind you like bright lights or windows.

A cheap, simple ring light can also go pretty far in helping improve your lighting setup for the cost.

But beyond that, you can start to think about stronger and more strategic lighting that can help really elevate your picture quality.

Surroundings

Consider your surroundings as well. You don’t want distractions, but having some kind of environment in the background helps with framing and making the background more interesting.

Kevin Shen on Twitter provides a lot of great tips and examples of how you can improve your on-screen design.