+353 (0)22 55002 info@spiralli.ie

Understanding Design For Content Management Systems

Now that everyone needs the ability to be able to update their own website, content management systems (CMSs) have become ubiquitous. Anyone using a good content management system knows that the system makes it easy to add, edit and delete content. You’ll also know that functionality can be added by installing plugins, modules, components, or whatever “bolt-ons” are called in your chosen CMS. All major CMSs have theme support too – the look of the website is entirely separate from the content and functionality of the site. This post is intended to illustrate the various options available when specifying a theme, as well as how the theme making process tends to work.

The Way It Was

In the bad old days, a website text edit meant you needed to call your web person, unless you wanted to get your hands dirty with editing arcane code. Any given webpage is made up of a number of code components. There’s the HTML code which contains the content and structure of the document – i.e. the text, headings, a content block for the header section, etc. Next there’s the CSS code which is pulled in by the HTML file to determine the style of the page – colours, fontography, layout, etc. Finally there may be some JavaScript – a programming language which handles dynamic behaviour and interactions in the browser. For example there may be an image slider that automatically rotates a number of slider images and allows you to manually navigate the images with a forwards and backwards arrow.

The traditional route to make a static website was to design an image of the web page in Photoshop, Fireworks, Illustrator, or some other graphic design program. This image would then be sliced, to make separate image files for each graphic component – e.g one for the banner, a section of the background pattern which can then be made to repeat indefinitely in the x and/or y axis, etc.  Using these images, a page theme would be constructed with HTML, CSS and JavaScript that created the basic page structure of header, footer and sidebar (basically everything but the page content). This theme would then be cloned for each individual page and the HTML code for each would be manually populated for each page.

The CMS Way

In essence, building a CMS theme relies on many of the same steps, going from graphic design to a HTML theme, but then this theme needs to be converted into dynamic theme. A CMS works by looking at the URL for the requested page and using this to query a database which stores the content. The content is inserted programatically. This means that the HTML theme would have a fragment of code where the HTML page content would be situated in a static theme. This fragment of code pulls in the content from the database when a page is requested, and then sends a HTML file to your browser with the code fragment replaced by the actual content. In practice there are more fragments of code in a theme – they handle things like meta tags, navigation, sidebar content, etc.

In fact, we expect a lot from modern CMS themes – they usually have a number of page templates – e.g. one for the home page, a full-width template, a sidebar template, etc. They’ll also usually have a number of customisation options so that an end user can brand the theme to their requirements without having to resort to editing code. Ultimately, there will need to be a compromise between uniqueness/functionality and price. You can have a completely original template built from the ground up and tailored to your exact functional and graphical requirements. This will probably be expensive. It can be hard for the end user to evaluate the work that has gone into a theme, but for a truly bespoke example it can easily run to 100 hours or more.

People use different strategies when building websites. Here are some of the common ones:

  1. Build from scratch: If your requirements are very precise and you have deep pockets, this is the way to go.
  2. Theme Frameworks: These reduce the overhead on the theme developer by giving them a theme infrastructure that has no design information, on which to build their own theme. Think of the framework as a scaffold covered in blank canvas upon which the theme developer can paint. The framework provides some design-agnostic base templates with a HTML structure, a CSS reset that makes the “un-design” look identical in all browsers, and some code to pull in the CMS content. In actuality, most frameworks do much more, but all will provide these basics.
  3. Free themes: If acquired from a reputable source, free themes can work very well, and the right one can sometimes look better than a poor premium theme. A link to the designer’s website will typically be hard-coded in the page footer, and it’s generally considered very poor form to try to remove this attribution. Some will allow you to remove the attribution from the theme control panel, but invite you to make a donation if you wish to do so. Generally speaking, free themes will have fewer page template and fewer customisation options. There is no guarantee that you will receive support if you have a problem with the theme, and less popular free themes are likely to have issues.
  4. Premium themes: Purchased from a reputable source, these offer great bang for the buck. Customisation options will usually allow you to make some colour changes, import your logo, select from a range of page templates, and have some control over the layout. You’ll also have access to support in case of trouble. The best option here is to get a developer that knows their stuff to build your site. They can reuse the basic theme structure by creating a child theme based upon it, and then heavily hack it to create something bespoke and unique at a fraction of the cost of developing from scratch. When buying a premium template, we seldom get to try before we buy, so it’s important to verify that all requirements are met before making the purchase. Again, an experienced developer/designer will know what to look for.
  5. Theme builders: Some theme builders are standalone programs. Others work as themes in the CMS and allow the developer to drag and drop. These theme builders have their place, but anyone with an eye for detail can usually spot the cookie cutter patterns, and often your design ideas will be heavily constrained by the parameters of the theme builder. Also the myriad of options available mean that, unless you know the system inside out, you’ll often spend ages trying to figure out how to implement small changes in the appearance.

In summary, every CMS uses a template. Some templates build upon the work of others, and that’s okay. By not re-inventing the wheel, you can get something that looks great and unique, and can be developed at a reasonable cost. When buying a website, be informed, and make sure you’re not paying artisan prices for a production-line service.