Improve your coding screencast's usability dramatically

The intuitive way to record a screencast is to use a screencast tool and start recording right away, either the full-screen or the current application. But there are a few things to consider to make a usable screencast. Here's a few mistakes and how to rectify them.

There are multiple articles on the web on how to make a good quality screencast. They all include the tips like

  • Get a good quality software/microphone
  • Fix the background noise, compress/EQ the volume
  • Clean the Desktop and working folders
  • Edit and clean up errors and typos

They all seem to be missing an important point, which is...

Stop Recording your screen at the maximum resolution

maxresdefault-(1).jpg

A lot of power users and programmers work on a large high-resolution screen, and while they're creating the screencast, the entire screen would be recorded. This is not only causes the text to display in an illegible font size but also becomes blurry at lower video bitrates. Another disadvantage of having the video recorded at a high resolution is that it forces the user to select the maximum available resolution on the video, which would make it even harder for mobile internet users.

Always set your screen to a lower resolution before recording, so that the video is crisp at lower resolution and bitrates. Egghead has an excellent article on this, where they also explain tools to set your [retina] monitors at certain unsupported resolutions. The suggested resolution is 1280x720 aka 720p or HD. For retina monitors, setting this using the RDM tool will make sure the recording is at HiDPI.

A few more factors that can improve the quality of the screencast

Crop irrelevant regions of the screen

You don’t need the entire screen if you’re recording a terminal window or a page. Crop out the area which is absolutely irrelevant to the video, without clipping the area of activity. Crop to the area of activity while keeping the context.

Use slightly larger fonts

It’s very hard to read text which are too small. You might be used to the 12px font size but the read might be comfortable reading a 14px or higher size font. 

Use appropriate terminal / code editor size

You probably don’t need a huge terminal window to be full-screen on a retina resolution monitor when it's only a few lines of code and it’s sometimes it might just be occupying the top left corner of the screen. Change the window to a smaller appropriate size, crop the recording area to the bounds of the terminal.

 

Rahul M. Hareendran