Baxters Content Management System
The system we built for Baxters is remarkably flexible yet easy to use. Here are some of the key features.
- Easy to use editing view
- Dynamic Navigation
- Image Library
- Automatic Embedding of content images
- Quick "Snapback" navigation from editing to preview
Easy to use editing view
The interface to the CMS is designed to be as simple to use as possible, and follows the same brand identity as the main site. This makes it easier for people to switch quickly from the main site to the editing environment and back again.
Dynamic navigation
The site content is hierarchical, with some content categories that go to five levels deep after the home page. We devised a system that would dynamically build:
- the main navigation tabs from the level 1 content
- the sub navigation from the level 2 content
- the left hand navigation from the content of levels 3 to 5 in the current section
- a true breadcrumb trail showing the location of the current page in the site hierarchy
And it does all this using a single page to display the site content using a single URL parameter; the page above is reached by simply going to "display.asp?c=5". The importance of this is that you can enter a low-level page from a search engine or from a link on the home page, and the CMS instantly builds all the required context in the navigation areas.
Image Library
Baxters have some great product shots that clearly convey the quality of their products, and the site is designed to showcase much of this artwork. Images were to be used in a variety of ways, such as:
- logo images for different brand sections of the site
- incidental background images for either left or right bottom corners
- content images to be displayed in the main body area
- product images to be displayed in the right hand column
In order to help to manage the hundreds of images, we built Baxters a powerful image library feature. This allowed the site editors to upload any picture once then use it as many times as needed without having to upload multiple copies of the same image.
Embedded tags for content images
One of the limitations of a content management system is that content of the main content area is usually limited to text unless the user has familiarity with HTML; even with a visual editor that can insert images, the fact that we are using a central image library makes it impossible to insert images into the content area of the page without uploading a new image each time. In the Baxters CMS, however, we created a unique solution through our embedded images feature.
In the image library, an image can be assigned a simple textual tag, such as [audreysig]. To embed an image in the page content, the user simply types the tag in the correct place in the text. When the page is displayed, the CMS automatically substitutes each tag with the correct HTML for the image with attributes such as alignment and alt text predefined from the image library.
Quick "snapback" navigation from editing to preview
Very soon after the site launched, it became clear that one of the most frequent interactions that site editors did was to edit a page, save the changes and then preview it.
In the first version, this could be cumbersome when several edits were required in succession. You had to find the page in the CMS, edit it, save the changes, navigate to the main site, check the change, go back to the CMS, locate the page again, edit it, and so on.
We saw the requirement for easier editing, and quickly introduced a feature we called "Snapback" editing, which:
- allowed the administrator to instantly edit any live page by clicking a small icon that appeared when they were logged in.
- snapped back to the main view as soon as any edits were saved if the editor had used the instant edit button.
- returned to the main CMS view instead if they had edited the page from the CMS
This meant that editors saved a great deal of time compared to the original workflow.
We also introduced a preview function to make it easier to test and approve pages that were not due to go live on the site yet.
The icons are meant to be inconspicuous, but there when needed, since the editor is looking at the page to see how it will appear to the user. Title tooltips inform the user what they are.
From top to bottom the icons are:
- Edit this page
- View page list in CMS
- Go to CMS main menu
- Open Image Library
- Delete this page