Success on egghead comes down to mechanics. This guide will help you nail the technical aspects of presentation and accessibility, so you can present lessons that are visually clear and accessible for all learners and devices.
Screencasting isn’t easy. It’s a difficult skill to nail—and on top of that, we’re very picky about the screencasts we publish on egghead.io. We can’t publish screencasts with small fonts, blurry text, and low-contrast color schemes that distract from learning. While egghead screencasts are diverse, they must also share a sameness of quality and presentation.
Always remember accessibility. A wide range of people will access your lessons on a variety of devices of varying quality. Maximizing the legibility of the code you present helps all learners absorb the information to the best of their abilities.
Before you do anything else, adopt these settings:
- 1280x720 (720p)
- 16:9 aspect ratio
- Stereo audio (you’ll set up your audio next)
- For best results, use HiDPI mode on your monitor
We deliver content at 720p (1280x720 in pixels). We want this to be a crisp and legible output for the viewer, whether they’re expanding lessons fullscreen on a 65" TV screen or watching them on the bus.
This video shows you how to prepare the screen and mic to do just that
HiDPI mode—also known broadly as DPI scaling, or Retina display on Macs—doubles each pixel, allowing for highly readable text on very high-resolution screens. Use it if possible!
On Windows, we've had success boosting the code fonts to max out the screen. Aspect ratio is key here, so set your screen to the highest 16x9 resolution and kick the fonts up.
Using DPI scaling features is helpful—you can scale the OS chrome and make UI more legible.
This article can tell you more about pixel scaling on Windows.
On Mac, you’ll get the best results if you record at 1280x720(HiDPI) mode. This resolution is achievable on 27" monitors and Retina MBPs. It effectively gives you a visible resolution of 1280x720, but it’s extremely crisp and readable on phones and tablets.
This mode is "hidden" by default. You can achieve it on a Mac with a software tool that exposes the option, like the RDM tool. On Retina MacBooks, the option works automatically. For external monitors, or non-Retina Macs, follow these instructions to enable HiDPI mode:
Another application that works well is SwitchRezX. It's shareware and requires a fee. If you can't use this mode, recording at normal 1280x720 or 2560x1440 are workable substitutes.
By constraining to this small window, you can fill the screen effectively for coding screencasts. The most import thing to get correct is the aspect ratio. We don't want to present with any black bars around the screen. We want to give the user maximum code visibility at all times.
The code is the champion of an egghead.io screencast, so it must be comfortably readable for all learners.
- Maximum space: Give your code maximum horizontal space by using an 80- or 120-character "column" for the code and bumping the font size up to fit.
- Padding: Allow some padding for the top and bottom of the recording window, which could get cut off by Player Chrome. For instance, if you're recording the terminal, commands toward the bottom might not be visible. You don’t want to frustrate or distract your viewers.
- 3-column layout: We will typically work in a 3-column layout, with the editor taking up 2/3s and a browser on the right side in the remaining 1/3 of the screen. You might prefer to flip back and forth between the browser and the editor—up to you!
We prefer this 2:1 ratio of code:example. It will look something like:
Notice that the code's font size has been increased to maximize the space available.
Place your example on the right, occupying 1/3rd of the screen. Consider that your example will need to fit in that space when you’re creating it. Choose a simple example with a minimally responsive layout, and you’ll be just fine.
In some cases, the example is replaced by a terminal, or a terminal window shares the right column with the example. In this latter case, the terminal window would be on the bottom-right section of your screen.
Remember that your lesson viewers are here to see the code. Make it the starring feature!
Here are some more settings that help remove some of the distractions:
"editor.minimap.enabled": false, "explorer.confirmDragAndDrop": false, "editor.fontSize": 18, "terminal.integrated.fontSize": 18, "workbench.activityBar.visible": false, "editor.quickSuggestions": false, "editor.suggestOnTriggerCharacters": false, "editor.wordBasedSuggestions": false, "editor.quickSuggestionsDelay": 1000000, "editor.parameterHints.enabled": false
If you will be showing your command line, we suggest using a minimal prompt to reduce distractions. This example prompt works well for screencasting:
You can use this one by updating your
~/.zshrc with the following:
export PS1=" [e[32m]W [e[m][e[34m]\$[e[m]"
Note: If you’re on Mac and using Bash, you also need to add a
~/.bash_profile with this:
This tells Mac to load your
~/.bashrc when loading a terminal emulator.
Now that your screen is ready to record, sound up. Time to get your audio ready.