Tips on Building Websites With a Content Management System

May
24
2010

One question that we often get from new clients is where to start when building a new site. A while ago we created a Getting Started Guide that can help. However, in this post I'd like to discuss things a bit more generically and talk about strategies for building sites with any Content Management System (CMS).

When a CMS is used to power a site is natural to assume that in a lot of cases the person managing the site content will not be a website developer. In fact, they probably have no idea what HTML is and wouldn't know that a class is used for styling and not something related to school. Because non-technical people are going to be adding content it's important that the CMS is setup so that the user can't break the site.

Here are a few guidelines to keep things easy for your clients.

  1. Keep the HTML simple. By this I mean to try and not put classes or ids on tags or other tag attributes for the parts of the page that the user will be editing. Most likely the user will not remember that they have to add that class that is vital to the styling of the page. Use a class or id on the <body> tag to target specific pages if necessary.
  2. It's ok to use tables for layouts. Now I don't like to use tables for layouts, but sometimes some concessions need to be made to make it easier for someone to edit a page. If you have a two column layout you could float some divs or use a table. Floating divs is the recommended approach for modern sites. However, when a client is editing some text in a Rich Text Editor like TinyMCE its' sometimes hard to see where one div ends and the other begins.  A table is clearly laid out in the editor and is easier for the client to edit.

    Now a different solution if you're using Aptuitiv Studio would be to create two different content blocks and have the user edit them individually. Use the floated divs in the template and only present the user with the minimal HTML needed to edit the content.
  3. Don't use definition lists. Definition lists are notoriously difficult to edit in a rich text editor. 

Those guidelines apply for areas where the user will be editing the content in a rich text editor. For pages where the content is managed by an app you have a lot more freedom with the HTML code as it's common for the CMS take the different content pieces and build the page. 

For example, in the Aptuitiv Studio Blog add-on the blog post title, author, date, content and abstract are all pulled together by a content template, mixed in with the necessary HTML and then displayed to the visitor.

The biggest guideline for developers that make it easier for both developers and clients is to focus on building reusable HTML.

What I mean by this is to try and find similarities between pages and build reusable templates or snippets that can be applied to more than one page. This makes it easier to keep things consistent, makes it faster to build the site and makes it easier to add onto the site later.

Do you have any tips that you'd like to share?

Leave the first comment