Screencasts are so 2005

Update: you don’t need Skitch invites anymore, just sign up.

Screencasts are powerful things. I’m one of the many people who discovered Rails (yes, and TextMate) thanks to the original screencast. My first encounter with online screencasts was a little earlier, the company Marketcircle produced excellent screencast tutorials for DayLite, their productivity application (and one of the best OSX apps ever). This was a novelty at the time, and very effective. These days screencasts are omnipresent, and so when it came time to think about the help section for a web app I am developing, my instinctive reaction was the screencast option.

But, screencasts have some drawbacks. If you include an audio track on your screencast, then you make things difficult for cubicle-dwellers. They have to either annoy their neighbours or watch your screencast in soundless confusion. Yes, I have earphones at my desk, and you probably do too, but believe it or not a lot of people DON’T have this much foresight. Taking this (and more general accessibility issues) into account, the alternative to an audio track is to overlay text on your screencast using something like Camtasia Studio.

Regardless of your choice of audio vs. text overlay, Flash vs. QuickTime, Jing vs. Snapz Pro, producing a professional-looking screencast is a time consuming process. Also, screencasts force a particular pace on the people watching them, which will, of course, be too fast for some and too slow for others.

As fate would have it, while I was writing scripts, recording early draft screencasts using Jing, and generally getting frustrated with the entire process, Robby Russell wrote about using Skitch for documenting bugs (in LOLCAT style, hence LOLBUGZ) and many other uses. I had seen earlier announcements for Skitch, and I really like ComicLife which is also from Plasq, but I didn’t chase up a beta invite and it slipped my mind until I read Robby’s article. My first thought was to just use Skitch for storyboarding my screencast, but as I progressed I realized that a slideshow of Skitch-enhanced screenshots would be adequate on its own and in many ways better than a movie. And, if your heart is set on a screencast then think about using a slideshow as a beta version of your screencast. Get feedback on the content, then after you’ve made any changes you can then do the expensive (in time if not money) screencasting and movie editing. One of the best things about using a slideshow is that if you want to make a change to a slide, you just replace that slide (using Flickr’s handy replace feature). You don’t need to re-record an entire movie segment.

I settled on using PictoBrowser for embedding a Flash slideshow in my site. While it is possible to embed Flickr’s native slideshows, these don’t really lend themselves to simple, straightforward navigation. They have too many options which are good for an interactive photo gallery, but not for simply guiding new users through a sequence of slides in a set order. With PictoBrowser there aren’t any visible navigation controls, but clicking on the slide or using the left/right arrow keys will navigate through the slides.

The first slideshow embedding script I tried was Flickrshow, but for some reason this wouldn’t always display my slides in the correct order. For a tutorial, order is important! ;-) Also, with Flickrshow when you click on an image it brings you to the photo’s Flickr page, which for this purpose isn’t a good thing to do. Finally, while I actually do like the Flickrshow visuals, PictoBrowser is much less intrusive. With PictoBrowser you can set any background colour, and if your embedded object is the same width as your images you won’t even see the background. (If you want a coloured border then just make the embedded object larger than your images.)

When producing screenshots, make sure that all your images are the same size. This stops the scale from jumping around as you navigate through the screenshots. This is easy to do with Skitch’s “Frame Snapshot” option where the Skitch frame becomes the boundaries of the image about to be snapped. But wait, why am I boring you with all these words…

So there you go. My recipe for quick FUN documentation. Good luck with the Skitch invites. Hopefully they’ll be out of private Beta soon.

Update: They are. :-)


Brian Caldwell 18 Dec 2007

What a great post! Thanks for sharing one of your uses for Skitch. I’ve just sent you 50 invites so you can share the Skitch love with more of your friends/readers.


Robby on Rails : SkitchCasting are so 2008? 18 Dec 2007

[...] her post, Screencasts are so 2005, Ana walks you through her process of finding a useful slideshow tool for her Skitch [...]

ana 18 Dec 2007

SkitchCasting… I like it. :-)

I have a pile of Skitch invites now so if anyone wants to try it out drop me a line.

Derek 18 Dec 2007

That’s super cool! I can’t wait to try it out… you know, as soon as some incredibly nice person sends me an invite. :P

Dr J 18 Dec 2007

I’ve got a few invites as well I can pass out

David Rice 18 Dec 2007

Totally spot on, there is such a cost in producing ‘good’ instructional content. I love the idea as a bootstrap for a startup or beta product where time and money are like oxygen, but I do think that screencasting and at least instructional content in video form wether it’s screencast or not is here to stay.

Going to give it skitchcasting a go next time I’m in that neighborhood :)

topfunky 18 Dec 2007

It’s great to see ideas come around in a different way. I’ve used FlySketch since 4 or 5 years ago and clients loved the immediacy of a marked up screenshot. But Skitch definitely has more bling.

Now that blogs aren’t such a novel thing anymore, it’s definitely time for new ways of communicating visually. I love the design of blogs that take both text and images into account, such as Garrett Dimon’s blog:

So do we need a new term for a blog comprised fully of Skitches? Maybe a Sklog?

Derek 19 Dec 2007

Thanks for the invite, Ana! Now I’ve simply gotta try out your SkitchCasting technique! :)