Posted 04.25.2013

How to Create Screencasts

One of the things that I’ve started doing recently for all my clients, when they get a WordPress site, is creating video screencasts for training. It’s so much easier than writing out documentation, submitting it as a PDF, and hoping they’ll be able to find it when they get ready to update their site.

Tools I’m Using


Screen Flow

This is probably the most expensive piece of the puzzle ($99). There are several different screencasting apps for you to choose from. I bought a license for Screenflow 2 years ago, so it was just one easy payment of $29.95 for the upgrade.

But, if you pay attention to a lot of the movers and shakers online, this is their weapon of choice.

Starting Screenflow
This software offers quite a bit of features. When you’re ready to go, just select “Record” from the menu and you’re off to the races. When you’re done, it launches an editing panel, where you edit your video. It makes it nice that it’s an all in one piece of software and I’m not having to switch to Premiere or Final Cut. Usually, I’ll just trim off the beginning and the end and export.


Mouse Pose

This is a little program that I found on the App Store ($4.99). I got purchased it when I was speaking at Women’s Forum last fall. For $5 the ladies there were just impressed with this program as they were with my talk…not sure what that’s saying…about me or about this program!

But, it allows me to spotlight my cursor, show red circles when I click on something, and then if I type, it shows an overlay of what keys I’m hitting. — Which is great, because I’m a huge fan of short cut keys. Most of the time, I don’t even think twice about it. So, at the very least, with this it helps the user follow what I’m doing.

Snowball Microphone


Snowball Microphone

I hate it when I go to websites, watch screencasts, and the speaker sounds like he’s coming through a tunnel. This might be a frivolous purchase to some, but IMHO for $68.99 dramatically increases the quality of production.

It was insanely easy to setup. I extended the legs on the stand and screwed on the snowball. Then, there’s a USB port on the back that plugs directly into my laptop. When I open up Screenflow, it automatically recognizes the microphone. I just make sure it’s selected in the dropdown. Done.

Vimeo Plus Account

I didn’t want to have to worry about compressing my videos, customizing a player, or storage. This was by far the easiest solution. It’s only $9.95, or I went ahead and paid $59.95 for the entire year.

Vimeo’s pretty slick. I knew I always preferred their video player to YouTube’s, but they’ve done an execellent job in refining their product. For example, I can connect my Dropbox account to Vimeo. When I export a video, I can simply drop it in Dropbox. Then, when I log into Vimeo, I can simply port it over. Of course, the upload button works too.

Vimeo Settings

Once I’ve uploaded each of the videos to Vimeo, I go into the Settings section. Under privacy, I changed the following settings:

  • Who can watch this video to “Hide this video from” only my clients need to be able to see this information. Besides, I don’t want to make it any easier for Joe Hacker.
  • Where can this video be embedded? to “Only on sites I choose.” Then, I’ll list my client’s URL and if the site is currently on a staging site, I’ll my staging server too.
  • Who can comment on this video? No one. Honestly, I’m not sure if this setting necessarily makes a difference because we already determined that we’re hiding it from Vimeo.
  • Additional Vimeo Settings

    At this point, I can grab the embed code. But, if you’re interested, there’s several other settings you can mess with, especially under the “Embed” tab. Like changing the color.

    WP Help

    WP Help PlugIn

    This is the last piece of the puzzle and argueably the most important. I install this plugin on my cleint’s site. It then provides a link in the left hand navigation that they can visit when they’re logged in. Then, I just add posts, similar to writing a standard WordPress blog post and copy and paste the embed code provided by Vimeo. That’s it.

    It’s pretty simple, but in a small way, I’m quickly adding a big value to the sites that I build for my clients.

    What other ways have you found that increase the value of your work? Do you make screencasts too? What’s been your experience? Do you use the same software?

39 Things to do to Guarantee a Perfect Site Launch

Many times, when people get ready to launch a site, they’re so excited about going live and calling the product finished, that they don’t do an adequate job of making sure the site is really and truly complete. It’s easy to do. I’m guilty. You’re ready to share what you’ve been working on for weeks, months even. But, skipping these steps doesn’t provide the quality that your clients need.

Over the years, I’ve compiled a launch checklist of items that help guarantee a perfect site launch. This list ensures I’ve dotted the final i and crossed the final t.

  1. No spelling errors
  2. Content is consistent (capitalization, tense / sense of writing, reocurring and common phrases)
  3. Content has been placed consistently
  4. No test content
  5. Page and content formatting has been tested
  6. Print stylesheets exist and tested
  7. Meta data has been included and is appropriate
  8. Setup accounts on Google Webmaster Tools and Bing Webmaster Tools
  9. Sitemap.xml created and submitted to Google and Bing.
  10. For redesigns, make sure old / existing URLs are redirected to relevant new URLs, if the URL scheme is changing.
  11. Images have appropriate ALT text
  12. Page titles are appropriate and SEO friendly
  13. Create metadata descriptions for important pages.
  14. Favicon has been created and displays correctly
  15. Footer includes copyright and a link to the site creator
  16. HTML has passed validation (W3C Validator)
  17. Check for canonical domain issues (e.g. variations in links to should be reduced to a single consistent style)
  18. CSS has passed validation (W3C CSS Validator)
  19. JavaScript is error free (JSLint)
  20. Minify/compress static (JavaScript/HTML/CSS) files
  21. No broken links, internal and external (W3C Link Checker
  22. Check for hard coded links to the staging server
  23. Displays and functions correctly in various browsers (BrowserShots or Litmus)
    • IE7
    • IE8
    • IE9
    • Firefox (Mac + PC)
    • Chrome (Mac + PC)
    • Safari (Mac + PC)
    • Opera (Mac + PC)
  24. Tested at 1024 x 768 Resolution
  25. Tested at larger resolutions
  26. Tested on iPad
  27. Tested on iPhone
  28. Forms have been tested and processed correctly
  29. Required fields have been tested
  30. Forms send to the correct recipient(s)
  31. Check internal search functionality (including relevance of results)
  32. Web statistics package installed and operational (Google Analytics, Clickly, Mint, or StatCounter)
  33. 404 page exists and informative
  34. Full web site build documentation (including platform definition, inventory log, and user, operator, systems, and administrative manuals)
  35. Use robots.txt where necessary
  36. Site backups scheduled
  37. Check and implement caching where necessary
  38. Check download time review and browser compatability: (Google’s Page Speed and Pingdom)
  39. RSS set up (FeedBurner)

Additional Resources / References

The list that I’ve creaed has come from my own personal experience as well as others:

Have I missed anything? Are there other things that you do before launching a site?