So, you’ve designed and built a visually attractive website, uploaded the client’s content and you’re about to turn it over to the client to maintain themselves. You’ve used the latest in CSS to create a fantastic look and feel for the site, and you intend to add this site to your portfolio as a showpiece. The client is thrilled with how the site looks, and can’t wait to start search engine marketing or pay-per-click campaigns to get the traffic coming in.
Hold on just one moment… how much does your client know about CSS – and how long is the site content going to retain the look and feel they’re so pleased with if they’re not confident with HTML?
Clients aren’t coders.
Most of them, anyway – most clients know how to use Microsoft Word, but that might well be the extent of their design knowledge. And, if you’ve worked with Content Management Systems, you know that copying text from a Microsoft Word document into the CMS can cause some unexpected design complications, and can result in accessibility issues, including loss of W3C compliance. Inserting plain text into the editor helps, but what happens to the formatting?
Using inline formatting is certainly an option, and many clients will opt for this. It’s quite easy to highlight a segment of text, apply a font size and colour, then set the text alignment. This has the advantage of being truly WYSIWYG, as all changes will show up exactly as the user wants them to in the CMS editor window. There’s just one small problem.
If your client doesn’t know exactly what font sizes, colours and alignments are used in the content you set up for them – not to mention image spacing, table cell padding and other more advanced settings – it will be very difficult for them to replicate this when they upload their own content. An area of text that looks just about right in the content editor might not look like the rest of the page content when it’s saved and viewed on the front end.
But they can apply CSS styles and classes, right?
Of course, you could supply them with a list of the correct inline style codes or even classes to add for each formatted segment of text… it adds another page or two in the user manual, but it would ensure that they could produce new pages that look like the content you uploaded for them. Some clients are quite happy to click on that little HTML button and enter an instruction like class=”blah” in the correct part of the page for the content they’re uploading.
But many content managers don’t have any web design experience – they’re working with the content editor on the basis of a “Microsoft Word-like” interface. Looking at the HTML version of a page can be daunting. Those <p> and </tr> and <a class=”sausage” style=”margin: 5px; float: left; clear: both;” href=”/overthere.htm”> tags don’t make sense to anyone who doesn’t know that they’re looking at the start of a paragraph, the close of a table row or a styled link to a page. In that respect, it may not be reasonable to expect your clients to be able to add classes or inline styling.
What’s the solution?
I use a combination of two approaches.
First, in every CMS user guide that WSI Huddersfield produces, we include any applicable inline styling, particularly where <div> sections have been used to create columns or floating text areas, as standard CMS software doesn’t include an insert-DIV option. This is done by providing a block of code in the user manual with “your text goes here” sections in it.
Secondly, in the site creation process, we use CSS to define the appearance of a number of basic functions on the site, like paragraphs, headings and lists. Once this is done the customer can then use your styles with just a click or two to format their text and retain the same look and feel as the content you have uploaded.
For example, you may need a specific format for a Call-to-Action button. Trying to show a client how to do the Call-to-Action buttons with standard text and inline scripting could be quite problematic, even if you explain to your client exactly where to paste the appropriate styling text. But if you have set up the CSS so that using the Heading 5 option in the CMS will automatically make the text appear as a button with a fixed width, floated right and showing a background image and border, it simplifies things considerably. A client could then enter their normal text, highlight it, and click “Heading 5″ in the settings.
Style test pages
There is one down side to using the CSS styling in this way – the CMS is no longer quite so WYSIWYG if you’re using external style sheets, which do not show in the editor window. That formatted H5 wouldn’t have the styling applied to it, so it would simply appear as plain bold text in the CMS. This is why creating a Style Test page is important, so that a client can refer to what something looks like on the front end of the site, and click the right option in the CMS. This test page should show:
- Headings 1 – 6
- Standard paragraph text
- Links
- Bullet and numbered lists
- Any other formats applied to standard functions
This way, your client can see what they need to do to replicate the style of pages already on the site. And helping your client to do that will also help you – so that the site you are so pleased about will remain a showcase piece once your clients are maintaining their content themselves.
