Q&A: "How Do You Make Video Coding Guides?"

Written by: Reinder de Vries, December 9 2015, in Indie App Business

Last week a blog reader asked me a pretty good question: “How do you make your coding guide videos?” I figured it’s a common question, so I wrote up a short Q&A-style blog post on the tools I use to create coding guides and videos.

You can use it as a starting point for producing your own screencasts and step-by-step guides.

Video Recording

One of the best tools for recording screencasts (recordings of your Mac or PC screen display) is Screenflow. I’m using Screenflow 5 to record my Mac display in tandem with a voice recording. Often, I also record short blurbs of face-to-face video.

Screenflow

Screenflow

When exporting, I use these settings:

  • Screen Size: the native resolution of my MacBook Air, 1440x900.
  • Encoding: H.264 at 1.2 Mbit/s with AAC audio at 256 kbit/s (relatively high).
  • Framerates are set to Automatic, which means a key frame is made for every significant change in the frame and/or every few frames.
  • As for H.264, I’m using the “Main Profile” which is similar to the standard definition digital TV MPEG–4 format. If I’m making a video that’s largely facetime or needs a lot of color, I’d use the “High Profile” format.

Generally, a bit of ghosting and color loss occurs. Given that most videos are 80% screen recordings, that’s OK.

Physical Recording Gear

It’s not all software, quality comes down to physical gear too. This is what I use:

  • A MacBook Air, late–2013 model. Read here how my most important piece of equipment broke down, one time…
  • A Logitech HD Pro C920 webcam. It has great quality and an easy mount screw.
  • Two generic brand softboxes for diffuse lighting. This is key for recording naturally-looking videos. Put one on 1–1.5 meter on both sides of your face.
  • A Røde SmartLav+ lapel microphone. This is key for clear audio and voice recordings.
  • A Griffin iMic. This is technically just a USB soundcard, but it’s making a huge difference in audio quality. Analog jack inputs don’t really work well in MacBooks, too much noise interference from the laptops internals. Using an external soundcard clears that up. And a plus: music quality is definitely better with an iMic!

This is how I remember text I need to say…

Poor-Mans Autocue

Poor-Man’s Autocue

I’ve had some trouble getting the SmartLav+ to work with my MacBook Air. It turns out the TRRS jack doesn’t work, and it’s output voltage is too low for the MacBook to pick up. I think this only happens in some models, though. Ultimately, I got the iMic and a TRRS-TRS converter and it all worked out fine.

Writing Coding Guides

A ton of coding guides on Swift are published every day, but 90% of them is garbage because the coder wasn’t thinking from the reader’s perspective. Here’s my Quality Assurance checklist for creating killer coding guides:

  1. Make sure you explain everything in great detail. Write an “aside” that explains theory next to the practical step-by-step coding guide.
  2. Explain how every line of code works. Don’t skip any code lines, and don’t assume the reader knows immediately what you mean. Use diagrams if needed, and repeat yourself if needed.
  3. Use the correct terminology. It may seem boring at first, but you can’t just call everything “stuff”. Plus: if the reader wants to Google “nil-coalescing operator” you’re glad you didn’t name it “?? thingie”.
  4. Create clear screenshots. I use Skitch for that; it’s got pretty cool quick-add-an-arrow-here-and-here features.
  5. Sit down and make a video. It’s a ton of work (about 2 days for a 10.000 word guide), but it’s much easier to follow than just a written guide. That said, I think a text guide in tandem with a video makes the best programming learning experience.

This is the workflow I use from idea to published guide:

  1. Build the app or feature I want to create a guide of. Make it as simple as possible, but not simpler.
  2. Write the coding guide itself. Cut into comprehensible parts. Make screenshots, diagrams, etcetera. Usually, I end up building the app for the second time.
  3. Attempt to follow the guiding guide myself. Refine the steps where necessary.
  4. Record a video of the guide. Usually, I do this in one sitting because it takes time to set up and tear down.
  5. Edit the raw video footage. Depending on the amounts of eh’s and err’s, this takes about one hour per 15–20 minutes of footage.
  6. Upload the video, publish the guide. DONE!

Over time, and depending on feedback, I rewrite part of the guides and restructure them. Also, quite often I have to update guides because parts became obsolete thanks to changes in Swift.

Concluding With: The Secret Ingredient

Want to know the secret ingredient for making awesome guiding guides?

Electronic Dance Music! I’m a big fan, and listening to a solid beat definitely gets me into the productivity groove. Check out: Oliver Heldens, 3LAU, White Panda and Boiler Room.

Get started on your own video guide: download Screenflow, put your face in front of the camera, and start screencasting!

Join 11.000+ app developers and marketers
  • Get a weekly curated list of app development tools, articles and resources in your inbox
  • 10x your app installs with relevant App Store Optimization and app marketing strategies
  • BONUS: Grab a free copy of the App Toolbox 2017 to supercharge your next app project
Yes, Sign Me Up!

Most Popular Content

Written By: Reinder de Vries

Reinder de Vries is an indie app developer who teaches aspiring app developers and marketers how to build their own apps at LearnAppMaking.com. Since 2009 he has developed over 50 apps for iOS, Android and the web, and his code is used by millions of users all over the globe. When Reinder isn't building apps, he enjoys strong espresso and traveling.

Got a killer app idea?

Grab the App Toolbox 2017 to learn how to save time building your app,
and how to 10x your app installs in the App Store. With the toolbox, you'll immediately know how to move forward to build better, more profitable apps.

Get The App Toolbox

Comments & Thoughts


Leave a Reply

Markdown is supported. Your email address will not be published. Required fields are marked with *

On The Blog


  • Escaping Closures In Swift 3 With @escaping
    Escaping Closures In Swift 3 With @escaping

    January 29 2017, in App Development

    As of Swift 3 closures are non-escaping by default. What does that mean for you as an app developer? What are escaping closures, anyway? This article sheds a light on closures, escaping vs. non-escaping, capture lists and retain cycles, and what that might mean for your day-to-day as an app developer.
    Learn more...
  • 10 Networking Tips For Your iOS Development Career
    10 Networking Tips For Your iOS Development Career

    August 28 2016, in Indie App Business

    So you’re a junior iOS developer, starting out in your new career. But finding your first job isn’t as easy as you thought. You’ve got the skills, but without the experience you’re struggling to even get an interview. Don’t worry, if you follow our tips you’ll soon be getting some much needed human contact again, and a job to boot!
    Learn more...
  • Effective Strategies For Learning How To Code
    Effective Strategies For Learning How To Code

    April 5 2017, in App Development

    Learning to code is easy to begin with, but hard to master. Where do you start? How can you keep going? This article answers those questions, and helps you learn with better strategies.
    Learn more...
  • The 2-Day Weekend Project Plan: Make Your Ideas Thrive
    The 2-Day Weekend Project Plan: Make Your Ideas Thrive

    August 16 2015, in App Development

    Making your own apps is a challenge, and often aspiring coders make the mistake of not planning properly. They get caught up in the high of a great idea, but that motivation quickly burns out by the time they're facing the first real challenge. Here's a project plan that will definitely help you out. It enables you to move from idea to execution quickly, and test the idea in the meantime. Go go go!
    Learn more...