EE Tips: Improving Client Handover

08 Dec 10

Posted by Ian Ebden

0 comments. Filed under “ExpressionEngine”

Over the years I’ve experimented with a number of different ways to handover ExpressionEngine websites to clients, and I thought it would be good to give an insight into how I currently do this.

Why good handover matters

Handing over a project properly saves a great deal of future (and often recurring) aggro, and generally makes you look good. As a busy web professional you don’t want to be spending your time answering support calls or emails from your clients needing guidance on basic content management. If that’s the case, you’re probably not handing over properly. It’s obviously great to maintain ongoing communication with a client, but at the end of a project you want to be in position to handover the keys and never hear from that client again – except when they want to talk about new features or additional functionality.

So what are your options for handing over?

Documentation

In the past, like many others I would handover a website with a set of written instructions. Sometimes this is still necessary. But there are some inherent problems with this approach:

Clients lose stuff. Either by human or machine error, your documentation will inevitably vanish. Time to call the developer.
Nobody likes reading documentation. As a client, even if you can find the docs, it’s much easier just to call the developer right?
Version control. Every time you add a new feature to the site you will need to circulate a new version of the docs.

Control Panel Documentation

Adding specific instructions to fields on your ExpressionEngine publish pages is very useful but also very specific, and doesn’t help your clients grasp the overall concept of what they’re doing.

Classroom

Another approach I’ve used in the past—and may again in the right circumstances—is the classroom approach. This can be in person/on location to a group of employees, or via conference call/screen share on something like Skype. Problems with this approach however are that:

It can be expensive for the client if I’m traveling to them.
Unless it’s captured somehow, the training is one-time only, to only those individuals present. You can’t expect your clients to recall everything when they make their first edit weeks ahead.

Don’t just tell your clients how to use your ExpressionEngine 2 site—show them

Using short video screencasts allows your clients to watch and learn; instantly grasping how to perform even complex tasks. Combining these screencasts into ExpressionEngine (and therefore the publishing process) makes everything super-simple.

I’m by no means the first to do this. Matt Crest recently described how he does it using ExpressionEngine “Accessories”, and this is a nice solution. I’m not a massive fan of Accessories though, and having your screencasts crammed into a tab right at the bottom of the screen is less than ideal in my opinion.

Instead, I like to use ExpressionEngine’s “Quick Links” to link to all my screencasts. I like the way this list is available in the sidebar, and can be tailored for each individual member/admin. I tend not to use Quick Links for anything anyway, so they may as well start earning their keep!

Step 1 – Start capturing

Open your favourite screen video capture program (I use ScreenFlow) and start capturing your screencasts. You might create separate videos for each channel, or generic videos on topics like “how to moderate a comment”. Try to keep them short and snappy. I like to output as Flash videos.

When publishing your videos, make sure you name them intuitively—example, “moderate_comments.mp4”. This is important later on.

Step 2 – Create your screencast template

Create a new template group in ExpressionEngine—I like to call mine “tuts” (short for tutorials). You could create separate templates for each video but I like to just use the index template, with the URL segment controlling which video to display (more on that later).

Here’s my tuts/index template:

<!DOCTYPE html>
<html lang=“en”>
<head>
	<meta charset=“{charset}“>
	<title>Tutorials | {site_name}</title>

</head>
<body>

{if member_group==‘1’}
<video src=“path/to/videos/{last_segment}.mp4” width=“480” height=“320” controls></video>

{/if}

{if logged_out}<p>Sorry, you must be logged in to view the tutorials.</p>{/if}

</body>
</html>

Okay, pretty straightforward stuff. You probably don’t want Joe Public to see these videos so the condition on line 9 checks to see if the logged in member is a Super Admin. You could add any other member groups to this condition if you wish like so:

{if member_group==‘1’ OR member_group==‘6’}

Inside my condition (lines 10-12) is where I embed my video. I’m using HTML5 here, which is still a work in progress at time of writing. However, I know my clients tend to have modern browsers that support the HTML5 <video> tag so I may as well start using it.

Line 11 is where the magic happens, but first you need to create your Quick Link.

Step 3 – Create your quick links

In your ExpressionEngine sidebar, click on the “Quick Links” title. From here you can add your screencast links. When creating your Quick Links, make sure the last segment corresponds with the video filename. For example, our “How to moderate comments” link URL is:

/index.php/tuts/moderate_comments

Now, when you visit the link, your template will use the URL’s last_segment (“moderate_comments”) in your <source> tag to display the correct video:

<source src=“path/to/videos/moderate_comments.mp4” type=“video/mp4; codecs=avc1.42E01E, mp4a.40.2”>

That’s it. As long as you match your link URLs with your video filenames, you’re all set.