Ryan Irelan

is building Mijingo and doing limited consulting.

Making the Craft Feature Videos

Since going indie back at the end of June 2014, one of the consulting projects I worked on is a series of videos covering major features of Craft, a CMS from Pixel & Tonic.

Here’s one on Craft’s Entry Types:

The video production process was much different than what I do to create my video courses at Mijingo. I took a Craft feature that Brandon Kelly at Pixel & Tonic wants covered and figure out a way to distill it down to 59 seconds (actually a little less because of the music lead-in and the closing graphic). It has to be clear yet compact. It can’t be too detailed because 59 seconds1 isn’t enough time; but there has to be just enough detail to demonstrate the feature.

It took us more than a few tries to find a process and formula that works. But when we did, the remaining videos were a little easier.

Pre-Production

For each video, my process started by reviewing the current feature page on the Craft website so I could understand how Brandon was marketing the feature. I jotted down some notes so I could try to use the same language.

For some of the videos I had a Skype call or chat with Brandon to hear thoughts and talk through some treatment ideas.

Then I wrote out the “Problem” and the “Solution.”

The videos start identifying the problem, then mention the solution, and only afterward show the solution in a (very) mini tutorial. For my prep, I listed out the steps of the video, with brief notes about the script and action on screen.2

Photograph of notes and storyboard for Craft video

Once I knew my approach and the general sequence of how I’ll cover the feature over 59 seconds, I started writing a script in Google Docs. After I completed a solid draft, I created a Final Cut Pro X project and recorded the voiceover over the music. Using the music right away helps me tweak the script so its pacing and syncopation fits with the music, and to discover and toss out words and phrases that sound terrible when spoken aloud. Reading the script aloud will always make wordy sentences and repeated words more noticeable.

With the script draft done and the voiceover test recording done, I shared both with Brandon for his feedback and edits. He owns the voice of Craft, so it was important that the script is consistent with the website copy and how he thinks the features should be described. He’s also great at giving the script some clarity.

Next, I quickly and crudely sketched a storyboard showing the different scenes. This helped me figure out what I (or someone else) needed to prepare for the sample site and film. We were working with the same sample project (Happy Lager) for each video and I build my examples around what’s available in the site.

Production

The production process started with reviewing the storyboard. I took stock of the “scenes” and “shots” (they’re all screen-based so it feels weird to call them scenes or shots). I reviewed everything to see if I don’t have the assets (something designed in the sample site or code) to pull off the shots. Once I’m sure I do, I proceed with “filming.”

If I had animations to do, I’d work on that first in Apple Motion. The animations aren’t complex but it did require pulling in current screenshots (or PSD exports) of the sample site and creating the different views (typically a one-up, two-up, or three-up of the sample site pages we’ll talk about). I’ve found that if I have to do a lot of scrolling of a web page, the best way to get smooth scrolling is to it in Apple Motion or as an animation inside of Final Cut Pro X. Trying to do smooth scrolling by hand is a feat not worth the time. Plus, I like to drink coffee.

Filming took place with my screen resolution set down to 1920x1080 and everything is full screen or maximized. I use Screenflow for capturing the screen video and save it out as a lossless file.

All of the interactions (filling out a form, selecting a drop-down) were recorded at least three times, sometimes more if I wasn’t able to get it right. What’s right? I want it to look natural but crisp and with intent. Wishy-washy mousing and interactions make for a weaker video. You can’t edit that in to the video (oh, I’ve tried) so you want to get it right during capture.

After the animations and screen recordings were done, I moved to post-production.

Post-Production

The first step of post-production was to re-record the voiceover. Depending on the script, timing, and sometimes how I felt, this can take 3 takes or 30 takes. I’ve done as many as 40 but I’m better at it after a lot of practice.

With the voiceover in place, I then edited against it. You need one constant while producing videos like this. Choose audio or video. I hope you choose audio.

I exported the Screenflow documents and then import them all into Final Cut Pro X. One by one I dropped them in to assemble a rough edit. I wanted to see if I’m missing any clips I actually need or identify any pacing or ordering problems.

Export & Publish

I exported final video right from Final Cut up to Vimeo (via the handy export option) and then sent it off to Brandon Kelly for approval. After he approved the video, I then published it up to the Pixel & Tonic account for embedding on their website.

The Final Videos

Here’s a list of the final videos, as included on Craft’s Features pages:


  1. The music we chose was 59 seconds long and wanted to time it perfectly for a crisp beginning and end.

  2. Since working for myself I’ve been using paper notes and documents a lot more. My main repository of ideas and thoughts is a stack of white, blank index cards I keep on my desk.

Launch. A Startup Documentary

Today I ran my first 10k race (and my first race). The entire race I listened to part of the Launch. A Startup Documentary podcast. It’s the story of building and launching Drip, a bootstrapped lead generation/conversion email marketing tool by Rob Walling and team.

All through my 3x weekly training runs for the last 10 weeks, I listened to podcasts or audiobooks while I ran. I found they soothed me and helped distract me early on when the running was particularly hard.

Sling TV Review

David J. Loehr over on Jason Snell’s Six Colors:

One thing I really like about Sling: Say you put on Food Network and they’re in the middle of wall-to-wall Fieri3. You can scroll backward through the schedule and watch several days’ worth of shows on demand, or time shift the entire schedule, pretend you’re on Pacific time, whatever.

The inclusion of ESPN in these “cord cutter” packages is very tempting. It’s still what I miss the most after not having cable television for the last three years.

One huge benefit of no cable television is that we don’t feel compelled to have the television on at all. It’s the secondary or tertiary device now, with laptops being first, and iPhones and iPads in a close second.

(I’m watching House of Cards on my iPhone 6 Plus as I type this.)

University of Phoenix Declining

The for-profit university has lost half of its students. For-profit education companies are responsible for half the student loan defaults. Half.

It’s still hard to get a good job—and stay employed—without a college education (the stats don’t lie) but saddling yourself with tens of thousands of debt isn’t the answer.

There are better ways to learn, especially higher paying, higher growth jobs in web design and web development.

Pooling Resources

Middle class neighborhoods are going away:

The fact that the rich have walled themselves off is also troublesome, however. By self-segregating, wealthy families pool their resources in just a handful of communities. At the same time, they’re less likely to know middle-class neighbors and may be less likely to care about what’s happening in less fortunate corners of their city or town. As Bischoff and Reardon note, the more the rich keep to their own, the less reason they have to worry about public schools or parks for someone else’s kids.

A joy unknown to me in all my prior years

Dr. Paul Kalanithi to his infant daughter:

When you come to one of the many moments in life when you must give an account of yourself, provide a ledger of what you have been, and done, and meant to the world, do not, I pray, discount that you filled a dying man’s days with a sated joy, a joy unknown to me in all my prior years, a joy that does not hunger for more and more, but rests, satisfied. In this time, right now, that is an enormous thing.

Paul was a Stanford neurosurgeon that died on March 9, 2015 of non-small-cell EGFR-positive lung cancer. He was 37, his daughter is 8 months old.

He also wrote about being a doctor and patient here and here.

A New Mijingo

Over the last several months I’ve been working with AJ Lohman to modernize the Mijingo website’s design and code.

Last weekend I deployed the new site to the production server. Here’s a video I made to cover what Mijingo is all about and highlight some features of the new site:

First and foremost, AJ and I worked on modernizing the look of Mijingo. I didn’t want it to be too trendy (although the full bleed image is something I ended up asking for) and lose the ability to effectively server my customers.

I had two specific (perhaps obvious) goals in mind:

  • make a better impression on new visitors when they came to check out the course library at Mijingo and
  • improve the experience for customers after they make a purchase.

The previous site did the best it could but it was old. The design was outdated—hastily retrofitted to be responsive—and the code well beyond its prime.

We settled on a simple look. The focus was on the new course covers that AJ created using the Whitney typeface from Hoefler & Co and some custom shapes and color palate he worked up.

Course Library on Mijingo

You can see that on the Course Library with its “cover mode” listing of the products. The courses are color coded based on track: Design is red, Development is green, and CMS/Publishing is a purple.

The images are also large and beautiful. Why? Because we used SVG (Scalable Vector Graphics to display all of the cover art. No large bitmap images to load and the covers look gorgeous on all displays: big, small, retina or standard.

The second improvement—the logged-in experience for customers—was addressed by redoing how customers access their purchased courses.

The previous version of Mijingo.com provided the customer with a simple table that listed all of their courses, the videos in those courses, and links to stream the video on the site or download it to their computer.

Most customers chose the download option because the streaming option wasn’t ideal. For the new Mijingo site I really wanted to improve how customers can watch purchased courses right on the site.

I turned the table listing of purchased courses into a simple, elegant grid of covers. There’s no copy or information about the course other than what is contained in the cover art. Why repeat what’s already there. Plus, the customer has already purchased the course so they’re probably familiar with what they have.

Mijingo's My Course Library

Clicking on a cover brings you to a one of the following pages, depending on the course:

  • A table listing the course videos, with links to stream or download
  • The course video, ready to play (if there was only one video in the course)
  • A table listing the courses and their videos (for a bundle of courses)

This design is a first pass and definitely not final. I want to keep how customers access their courses as simple as possible so I started with an table approach that gets right to the point.

One change from before is that I broke out the downloadable course materials into a sidebar so they’d sit alongside the videos, even while watching the course. The course materials should be accessible at all times while watching the course not just when you are choosing which video to stream or download.

Watching the SVG Course

These aren’t final implementations but small steps (or giant compared to the old site) in improving the experience of watching a course.

I still have some more work to do—we have dozens of fixes and tweaks we’re tracking for the next deployment—including creating guide pages (pulling blog posts, tutorials, and videos into one page) for each major technology, and improving the performance of the site.

I’m proud of the update and it’s a solid foundation on which I can build. I hope you’ll check it out and learn something new with Mijingo.

Learn Git with Mijingo

Last week I released a brand new course over at Mijingo that covers intermediate Git usage. The course is 3 modules and several videos and is aimed at helping you go from a normal Git user (git-add, git-commit, etc) to someone with some power moves like git-bisect, git-revert, and customizing the output of the git log.

The course is 114 minutes long and includes a free, written course workbook, slides, and a long list of additional resources for you to use.

Check out the new Git videos.

The Professional by Steven Pressfield

What I love about Steven Pressfield’s The War of Art is that he preemptively calls out the people who over-glorify his own book:

The professional is acutely aware of the intangibles that go into inspiration. Out of respect for them, she lets them work. She grants them their sphere while she concentrates on hers.

The sign of the amateur is overglorification of and preccopuation with the mystery.

The professional shuts up. She doesn’t talk about it. She does her work.

The War of Art, p. 78

He calls out everyone who is on some quest to solve the mystery of getting things done, producing work or shipping. He calls out the entire cottage industry of you-can-do-its. And, yet, the book is one the canonical texts used to support it.

Everyone will be the same

North Carolina basketball assistant coach Hubert Davis:

One of the things that we tell the guys is that you have to do more than what is required. At some point in your career whether it is high school, college, or the NBA, you’re going to be at a level where every guy can do the same things that you can do. So what is going to differentiate yourself between you and the other guy that is just as talented is your willingness everyday to work on your fundamentals and your craft, before and after practice.

Coca-Cola Life

Oddly enough, I first saw this at the vending machine at our neighborhood bowling alley. I don’t drink many soft drinks but this is what I’d choose from the Coke lineup. Pretty good.

Recent Entries