::by Michael Penner

Learning the technical steps for managing the content on your own website can be frustrating and tedious, even if you are a little technically inclined. Web designers can ease this pain by considering what their clients must learn to take control of content, including images and video. While a content management system (CMS) promises to make this as easy as possible, the web designer’s build approach ultimately makes all the difference for client website usability.

Clients provided with a website but lacking a user guide or training face many questions. For instance, how are columns created on the website? What layout dangers await the mobile visitor after modifying the content? Are there tables of data that need to be changed? How easy is it to add or remove rows and columns to tables on the website? These are just a few website usability questions content creators face.

While marketers of the most popular CMS’s love to tout their user-friendliness, the fact is no CMS is so easy to use that non-techies can jump right in. Yes, that includes SquareSpace too. The only question a web designer needs to ask regarding client use is, “What can I do to make this easier for my clients but still hit our design goals?” The answer largely depends on how deep your clients expect to dive into the website as they update its content and how technical they are willing to become.

Let’s say the client is pasafarms.com. This page contains some table data: https://pasafarms.com/products/table-grapes/ . This is a WordPress website, so I could have hand-coded the appropriate HTML tables into the Text Editor and called it good. But that wouldn’t help my client later if they needed to add or remove table columns or rows because they would have to possess the same expertise I do when crafting HTML tables. Instead, I opted for a trusted plugin called TablePress. This plugin provides an intuitive interface that non-technical people can use. It creates responsive tables that work well on mobile and allows great presentation control. It’s also easier and faster for me to create the needed tables using this plugin. 

CMS Page Builders

Aside from specific elements within a website, a broader usability issue exists. How do users update content within their pages, generate web forms and place them on a page, or add new layouts to a new page? These are just a few of the many actions a client might need to take, and every CMS provides a different method for making this happen. Page builders address these concerns in WordPress, while in SquareSpace the interface is already optimized for easiest use as long as the design remains relatively simple.

Page builders provide non-technical people with tools they can drag-n-drop, or in some way add to a page, for modifying the page in a way that otherwise requires knowing how to code. They can do a lot more than that, but for our purposes this definition is sufficient.

Returning to WordPress, I decided to start using page builders in my web builds because of that one magic question, “What can I do that will make this easier for my clients?” I’ve been training people on computer systems and websites since the 1990s. Sometimes I was in a room full of clinicians training them on clinical information systems, and sometimes I was administering software training to government employees. With FlexTech Media, I train my clients on their CMS. Because of my extensive background as a tech teacher, I can anticipate where people will have trouble, no matter how careful I am to build for client usability. That’s why I chose a page builder called BeaverBuilder instead of other excellent choices like Elementor. BeaverBuilder gave me the most straightforward path to client ease of use based on how I build websites.

But website usability isn’t the only consideration. How the page builder improves the website’s build process is just as important. BeaverBuilder allows me to create complex websites without introducing increased complexity to my client users. Still, there are serious usability questions to keep in mind as I build. Can my clients duplicate this page as a starting template for a new page? How do they promote blog posts to the home page with excerpts and a featured image? Will they be able to update image rollovers? How easy will it be for them to add or remove navigation menu items and still have it work on a mobile device? There’s more to consider, but you get the idea. It’s possible to use a page builder and still make a website that is difficult for business clients to manage. A page builder alone is no guarantee of better website usability than one built without such a system.

User Guides Improve Website Usability

Even the most straightforward CMS website can frustrate non-technical clients when it comes time to update website content. Well-written user guides and individualized screen-based training reduce perceived complexity by demonstrating the best ways to go about any content management task. It helps eliminate consideration of areas the client doesn’t need to bother with, such as modifying how images are processed or changing the shopping cart’s billing configuration. These aspects are implemented during website construction and are usually irrelevant to content management functions. By focusing a user guide on the knowledge clients must have to keep their site’s content current, more technical or obscure areas can be dealt with later or by the contracted web designer, depending on how technical the client wants to become.

Video user guides can also be essential to website usability. For instance, I’ve created a playlist demonstrating the basics of working with BeaverBuilder as a business client. You can see these videos here. In the case of truly complex websites, making user guide videos shows the business client aspects that might need to be clarified, or can demonstrate a principle covered in the written manual to provide greater clarity.

As a web builder, if I provide user guide videos, I record the website’s backend, revealing a lot about the plugins and themes in use, and maybe even including some customer data. For this reason, secure and private delivery of such videos must be a primary consideration. Streaming these videos from within your own website, or streaming through a secure Amazon S3 media player, are just a few ways to deliver such videos from behind a password-protected page or post.

Clients Need To Understand How To Handle Images

Optimizing images means resizing them, re-rendering at a smaller file size without ruining the image’s quality, or both. It’s an important task that impacts page load speed, especially on mobile. While there exist paid plugins that charge per-image fees to handle this elegantly, manually processing images before uploading them isn’t that hard, especially with free software that does it so well, such as GIMP. When building the user guide for the website, a section on ideal image sizes helps clients avoid trial and error when trying to figure out the ideal properties of an image. The user guide should also cover using a free image processor such as GIMP if no image processing plugins are used. Clients might not install GIMP, but at least the option is presented in detail in the user guide, during screen-based training, and in any tutorial videos.

Working With Conditional Displays

Some page builders allow you to hide or show content based on device screen size. A common web design approach places some content in containers configured to show up only on mobile or desktop. While this is a powerful feature for web designers, it can introduce confusion for non-technical clients and present challenges to website usability. Such an approach shows all possible containers in edit mode, presenting user-interface complexity that must be addressed in training materials.

A web designer should make sparing use of this capability if client content management is the goal because the potential for confusion will remain even after the training is over. Remember that the client will probably log in only a few times a month and might subsequently forget what all the different containers are for, or might need a refresher in a one-on-one support session to interact effectively with such containers. This is one of those times that using cascading style sheet (CSS) code should be the first approach of the web designer if possible. Now instead of dealing with multiple containers, the client only has to focus on the one that contains the needed content. The code deals with screen sizes and appropriate presentation.

Client Friendly Tech Support And Technical Documents

When complexity is removed for a client they will be more likely to update their website’s content, and do so more frequently. Web marketers must post or modify content often to reach their goals, so making content management as simple as possible is vital. But it’s also essential to give clients direct access to technical support that knows exactly how their website was built, along with its quirks. A web designer should offer some sort of technical support backed up by an aggressive Service Level Agreement, which focuses on helping clients after the training is over.

A technical document should also be available that allows another web professional to step in should the original web designer become unavailable. I call this a Site Integration Map. It’s a user guide for technologists that the client will have little use for themselves but which reduces the effort required for other technologists to get involved. It describes how the website was built, important code and plugins, and any odd aspects to watch out for.

After Launching A Website, It’s Still All About The Client

The maintenance and support aspects begin after training the client and launching their website. With this in mind, I can make coding decisions that attempt to minimize complexity from the start, assuring website usability concerns remain a priority. But complexity is a relative concept based on one’s understanding of a thing. Education improves understanding, which decreases perceived complexity. That’s why educational content and formal training sessions are crucial to customer satisfaction. When the support requests start coming in, the web design team should learn from them and use them as feedback to improve the current website and future build approaches. It’s always about the client, even after the project is done.