CMS Website Development

How is a CMS different from a regular website?

A traditional, or Web 1.0 website, is in it's simplest form a group of html or css-styled pages tied together by hyperlinks. In the mid and late 1990's, MS Word-created websites were fairly common - documents made in Word that contained text or images hyperlinking to another document. Dreamweaver and Flash-based sites function much the same - images and text hyperlinked to another document, or "page".

With a CMS, such as Joomla, there are no "pages". What we have is a collection of content - news articles, products, information articles, videos, etc. - that is essentially "in the cloud". Menu's are created to group content and built out the frontend architecture, pointing to the content, content category - or directly to an application that manages content in a special way.

Since the frontend of the website is basically a display of source content, it has three major effects:

1. The display of content can be controlled without changing the content itself
2. Rather than changing every page a piece of information is on, you can simply change the source content itself and the changes will be reflected anywhere the content is displayed on the website.
3. Menus can be changed, moved, added or removed without ever breaking any links. This means you can decide to put a news article under "News" today - and move it to "Press Releases" tomorrow in about 20 seconds, with no broken links.

Modules

On the frontend, modules (think of these as little widget's that can each display content in their own unique way) manage the display of source content. Modules can be placed in any available position on the template and moved around at will. There are all sorts of module types - Slideshows, Item Lists, a dropdown menu, accordion menu, Image Gallery, Twitter Feed, Login/Registration - even a simple logo image is a module. Most kinds of modules have display options, and they all have source content. If you wanted to display "Latest Products" for example, a module would be created that points to items in your product catalog. You would choose from the module's display options (example: number of items to display, horizontal/vertical, media on left/right/top, etc) and assign it to a module position on the template (example: left). If you didnt like it on the left, you could simply change the position. Additionally, you can assign it to whatever menu items you want the module to appear on.

This is where major differences begin to unfold. With a Dreamweaver or Flash, or any Web 1.0 traditional website, you would need to open several page files and manually update information for every page an item appeared on. With a CMS, you simply update the source content and every page it appears on will instantly be updated.

Templates

With Joomla, a template is essentially a "skin". The basic elements of a template are module positions, module variations, menu and of course graphics. Depending on the developer or firm, a Joomla template can be as old-fashioned as any Dreamweaver or Flash site - or can be truly state-of-the-art. This is because it takes a significant amount of development to create a modern frontend template that harnesses all the features we would expect - HTML5, CSS3, jQuery, etc.

Newbies often start out with a free template developed by a company specializing in Joomla templates. Sadly, the lack of technology in the template can give users the impression Joomla itself is a second-rate system.

Our approach to Design

In 2008, we made the decision to discontinue template development. "From Scratch" templates were discarded, and we began using base-templates from development companies dedicated to template production. As technology grew, it became apparent we would need to either double our production time - or start from a more complete foundation.

It can take up to 4 months to develop a Joomla template from scratch. Many of our competitors still continue to offer "PSD-slicing" and template design. The problems we've identied above are all apparent in their templates. Basic jagged-text fonts and poorly performing, non-cross device compatible templates are great for ensuring their clients keep coming back for revisions (client retention), but they leave much to be desired in functionality.

When a client approaches us with a "wireframe" or PSD mockup, we immediately look for a base template with similar layout, fonts and similar color scheme from one of the YooTheme Warp 6 templates. These templates are built with HTM5, CSS3 and jQuery, and come packed with loads of goodies. Matching mobile theme, web fonts, "profiling" and their exclusive minify+gzip+data urls compression to name just a few. Layout, as we discussed above, is essentially a matter of module positiong - so this is not typically a factor in base template choice. If we are trying to match a wireframe or PSD, it's simply a matter of customizing the base template to match color, fine-tuning the menu to be more similar to the mockup, and adjusting content into the modules positions of the desired layout.

Usually, there is no pre-defined look. Most of our clients are looking for help from a professional design team. Typically, we usually install several base templates to give our client a variety of front-end looks to choose from. After a direction has been decided, advanced customization of the CSS (colors, graphics, etc) commences. Our client's business is considered with every step in design, as a market-minded and targeted concept is critical to motivating visitors to do business with our clients.