A job that small shop web designers often have to do that isn’t talked about much is creating documentation. Sometimes we have to do so to support our clients in using the features we set up for them. Sometimes we have to document problems when submitting a tech support help ticket. Either way, writing and illustrating procedures in an easy-to-understand way is not easy or quick. Until now.

Well, it still may not be a lot of fun but it got a whole lot easier with the introduction of ScreenSteps, a program that makes taking screen shots and creating documentation about as simple as it can get. It doesn’t seem that hard to do it the old way. Take a screen shot (Cmd + Shift 4), resize the image then insert it into the document. I used to use TextEdit. That’s used to. I’m not going back. (hopefully)

After downloading the demo, then following the very short “Getting Started” tutorial, I was ready to go. A client had called in the morning wanting me to come to her office and demonstrate how to add new addresses to her ConstantContact mailing list program.

Now, Constant Contact provides lots of very good documentation, including how-to movies. The problem may be that there is too much there and the client couldn’t navigate the sea of choices. Whatever. I added three new contacts she emailed me, using ScreenSteps to take screen shots as I went along. (Cmd + Shift + Ctr + 4). Now that’s an awkward keyboard chord but that can be changed.

ScreenSteps took the screenshots as I captured them, giving me an opportunity to crop the shots and add highlights to the image to direct focus to the important parts of the screen. It did this unobtrusively and arranged the shots in order as I continued the address adding process.

When I was done, I went back and annotated the steps. With a screen shot for each step there wasn’t a lot of writing left to do.

Click a button to export the project to PDF and it was ready to email. The client was able to add two more addresses herself.

This is one of those why didn’t somebody think of this before kinds of programs, easy to use and figure out. No bloat, no learning curve. Instant productivity gains. What more could you want?

Quite a bit actually. The software is pokey, very pokey when I re-opened the file to play with the HTML export function. The export went just fine and produced nice clean code. But opening the file tool over a minute on a 2 GHZ G5 iMac with 1 GB of ram. That’s slow. A couple of screen captures had a lag time too.

After saving the file again then going back to re-edit an image, ScreenSnap failed to export my new version. Not cool. Also the first time through, the program crashed on me. Still, I called the boss and asked him to buy a copy. I tried making 2 more quick tutorials and had no problems.

The PDF was pretty basic looking, but the HTML export was very nice. As ScreenSteps allows me to use custom HTML export templates, that part shows a lot of promise. There are workarounds for the clunky PDF exports by using the HTML, styling it copying the finished pages from Safari into TextEdit. Not quite instant RTF but not a horrible inconvience. Since I’m mostly interested in web based documentation this is reasonable.
Editing features are very basic. No font choices, no text resizing, though in the HTML export that’s not a problem for web pages as the program creates good clean code with an external style sheet. There may be a way to adjust how the PDF’s display text out but it wasn’t immediately obvious. On the plus side you can add hyperlinks to text or images.

Images are automatically resized to fit one of two built in page styles. Both worked. I’d like a couple more, but that’s quibbling. I would also love the ability to embed a thumbnail in the web page with a larger image that would pop up with a click.

If you need to crank out how-to’s or other documentation that incorporates screen captures, this tool can save you a lot of time and effort. If you don’t, the $40 price is a bit high to pay for a one trick program that won’t export to RTF or other editable desktop formats.

ScreenSteps http://www.bluemangolearning.com/products/screensteps/ $39.95

Ease of use: 5
Features: 3
Value: 4
Documentation: 4
Stability: 3
Recommended with reservations. For web based how-to’s ScreenSteps looks very good. For desktop published PDF’s the output is primitive. Though for quick and dirty documentation, nothing comes close to the speed and ease of workflow. As with many version 1.0 releases, you might want to wait until some of the bugs are ironed out before making the purchase.

Possibly related:

This entry was posted on Monday, January 15th, 2007 at 12:17 pm and is filed under Graphics, Software Review. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.