Teaching Your Clients How to Use The Website You Built Them

So you’ve built your clients a website! That’s awesome. Let’s assume that part of the purpose of the project was to hand it off to them so that they can make changes themselves. What does that part look like? How can you make sure they are actually empowered to take on this job? You set it up, so it’s on you to not only hand over the keys but teach them to drive.

Have a meeting

That’s pretty obvious eh? Get all the people you need to educate in one place and walk them through everything they need to know. For instance, Raúl says:

[I get my clients into a] Skype meeting where I share my screen and explain to them the easy concepts of using X or Y CMS.

I usually use WordPress and my clients have loved it.

A video meeting is great because it means anyone can join the meeting no matter where they are physically. You could (and probably should) record it as well, and give it to them for reference. Even if you normally do meet in person, I might do this particular meeting virtually so you can record it. I’ve been using Zoom for video calls a lot.

Both screen sharing and recording are very easy.

Do some screen sharing

Alex Hardy says screen sharing while doing some content entry works pretty well. Kevin Lorenz says he’s had success calling it a workshop and Andy Bell says it might be even a few days of training. Lara Littlefield says:

… for larger groups of in house teams we typically lead a screen share training demonstrating their custom UI and how regular use is setup to operate.

Michael Fienen says you should sit them down at their own computer (rather than your own) because they’ll feel most comfortable and empowered there. Remember they can share their screens with you as well on a video meeting.

A meeting (or “workshop”) will go a long way in getting people on the same page and shedding any confusion or apprehension (you might want to tell them they can’t “break the website”). But… it may not a perfect long-term solution. Even if you did record the meeting, that’s not the easiest reference information. What happens when someone forgets exactly what to do?

Prepared Videos

Meetings are great and all, and important for the interactivity and Q&A possibilities, but you might consider actually preparing videos/screencasts for your clients. Daniel Matthews agrees here:

I like to provide video tutorials/screencasts. They can then hand this to other members of staff, and re-watch at their leisure.

I like the idea of a quick, prepared video of you telling your clients exactly what to do on their own website. So it doesn’t feel generic or like boring training, it feels contextual and delivers exactly the information they need.
I record videos pretty regularly that are a combination of video of me, video of my screen, and audio. I find Screenflow does a great job with that, allowing for lots of editing possibilities after recording.

That said, there are some products out there that are a bit more generic and targeted at teaching clients how to use their site from within the site.

For example, say you’ve built a WordPress website for your client, it might make sense for them to essentially understand how to use WordPress from a site management and editing perspective. One option for that is the WP101 Plugin which plops a bunch of training videos right into the admin:

Assuming they can log into the site, they can get to these. Same deal with Video User Manuals.

Or say you’ve used CraftCMS, you could use Craft User Manual:

Video may not always be a home-run though. Johnathan Christopher says that his clients rarely watched the videos he prepared and still asked lots of questions.

Provide written documentation

Even if you do videos and screenshots, to make this kind of training particularly successful you likely want to pair it with written documentation. Written documentation means quick-to-access and quick-to-digest information about how to make site updates. Perhaps your client just forgot the URL they need to go to in which to make edits. A video is a bit much to deliver that information – much easier to click a link in some docs.

Kelly Vaugh says:

I definitely go the screen-share route to walk them through each component of their site and how to update it. I dummy-proof it as much as I can to prevent anything from breaking, and provide written documentation as well.

Better yet, put documentation somewhere they can reference and you can edit. ElskahJ says:

I usually write out detailed steps on how to add content, pictures, etc, along with screenshots/videos. I write it as if they’ve never seen a website before, ever. It’s crucial to include are things they should not do without reaching out; adding every plugin under the sun, for example.

Usually a document in Google Docs or a PDF. If I assume everyone is an utter beginner at updating their site and write it accordingly, I get fewer emails requesting help.

Humour helps too in keeping them engaged.

So a Google Docs might be a good place keep documentation on how to update the site. Perhaps you could set up permissions such that only you can edit it, but they can leave comments and questions.

I quite like Notion as well, which makes very nicely formatted documents with great organization, and has a permissions model that should work great for this.

Something like Dropbox Paper or Coda would work as well. Karl Kaufmann says you might consider a page right on the website itself:

I normally set up a staff-only page with a quick overview—including annotated screen grabs.

And like Ann Junker says, remember to write using their terminology.

Send instructional emails

This is kind of hand-in-hand with written documentation, but I don’t want to forget about email. One of the beauties of emails is that, since we all use it, it’s right at our fingertips all the time. Hopefully, you (and your client) are using email software in which search makes it easy to dig up reference emails. That way you can email them instructional stuff, and they’ll be able to find it.

I know it’s often easier for me to find an old email than it is to find an old Google Doc that was shared with me.

Consider contextual help and information on the content entry areas

Video to allow your clients to level up their understanding of the CMS you’ve delivered to them might be just one part of overall training. Another thing you can do is provide contextual help integrated into the editing screens and other areas of the CMS.
Bastian Allgeier of Kirby says they make this easy:

… we offer ways to add inline-docs to the admin panel (form field help, infoboxes, etc.). We also encourage to split data in a clear form field structure with appropriate validation rules, to help editors as good as possible and minimize the learning process.

Matthijs says doing things this way has significantly dropped support requests. Here’s what that could look like in Kirby:

Greg Sweet builds WordPress sites and uses Advanced Custom Fields to create the content entry screens for his clients. This allows him to add fields he calls “fool-proof” and also include instructions on every field. Plus, this is the only thing he does training-wise and seems to work great for him. Here’s some screenshots of a customized admin site he’s done:

There are WYSIWYG editors as well, as David Yarham says, even though that concept is traditionally a bit laughed at in CMS land. Perhaps a system that allows for edits directly on the page itself could work in some situations, like Mavo.

Combinations

I’d say you’re doing a pretty good job if you’re providing written documentation, holding meetings, sessions, answering questions, and essentially hitting this thing from all angles. Becca Williams:

I created a training manual with screenshot tuts of how to do each thing (plus how to log in and where the buttons on the dashboard lead to).
Then we had a session with the client in front of the computer where we answered questions about things they were still unsure about

Maybe you should have those clients actually make some changes on their own time to make sure they get it. Drew Powers calls it homework:

Get a few pieces of starter content going—they have to see the end goal—then give them homework to complete the rest of the picture. If they’re partially responsible for the site launching, they learn and feel accomplished when it goes live.

You might want to keep them on retainer for a little while

Ryan Irelan likes to do meetings, video, and documentation as well, but also suggests a 1-3 month retainer period after the project ships. That’s probably smart for a number of reasons. The client might rest easier knowing they have you on speed dial if there are issues. Plus, presumably, you’re running a business and like money.

Alan Houser says he includes 2 free hours of training, and likely charges after that. Andrew Yee says he’ll just do the work for them, for a fee.

I heard from another person who said that they’ve built 100’s of sites for clients and maybe a handful of them actually update the site successfully. I mention that just to point out that all this might just not work. Perhaps your training didn’t hit home well enough. Even more likely, the client’s business wasn’t ready to handle it for whatever reason. Perhaps it never became clear whose job it is, so it becomes nobodies job. You can only do so much.

Click here to build your next great project on Media Temple.

About the Author Chris is a web designer and developer. He writes about all things web at CSS-Tricks, talks about all things web at conferences around the world and on his podcast ShopTalk, and co-founded the web coding playground CodePen. More by this Author