User Interface Design – A Glance at Joomla Web CMS

The design of a user interface has traditionally been a team skill where we have designers, coders, and sociologists participating in defining the user experience. As with many other areas of information technology (Databases, Animations, etc.), we now need less and less people to make more complex content using new tools such as Adobe Suite, WordPress, Joomla, and Drupal.

What are Web CMS systems and why is Joomla so popular? A Web Content Management System is a program that manages information and layouts. Joomla CMS and Adobe Dreamweaver have the same ability – to create interactive web content. The difference is that Dreamweaver is a commercial binary executable program that you run under license in your computer, while Joomla is an Open Source program that requires no purchasing. There are three main CMS systems:

Drupal: For large and complex sites and programs that require lots of PHP/MySQL programming

Joomla: Adaptable size with many templates and modules and a large community. Some PHP required

WordPress: Easy CMS designed for anyone who wants to publish; Less flexible design options but no PHP knowledge required

How did Joomla come about? It is a product of the Open Source community and as such, has taken off in an exponential manner. Right now, we have Joomla 3.0 that was released earlier this year. 80% of Joomla sites and programs are on Joomla 1.5-2.5. This means that the capabilities of Joomla are far ahead of its current utilization. It is a truly amazing advent because when you think of commercial software, the idea is to keep shelling out newer versions to increase revenue. Here, it’s the opposite. The “Open Source Community” has fueled the development of Joomla in such a way that its features and capabilities are two to three years ahead of current utilization.

How does Joomla work? When we use Joomla, we tend to use predefined “templates” that act as the stage where we can setup our application. This application could be a traditional static web site, an e-commerce solution, or even a smartphone program. When we begin, we have a canvas which can hold “modules” in predefined positions. This is traditionally known as a Joomla template. Modules are template independent “gadgets”, things like calendars, menus, forms, and more. Finally, when we have these user interface elements ready for use, we can look at how best to position them. The module positions, layouts, and elements must all be configured manually in order to get the best result. The trick is to know how much of a given template is user friendly for your application and how much needs to be “tweaked”.

What is the key to making a CMS site optimal for the end user when designing? The ability to understand cascading style sheets from a usability perspective. For me, someone who understands that absolute positions in CSS are bad usually is a good UI designer. On the other hand, someone who changes the initial idea so that it fits into the template, i.e. leaving the CSS or even worse, using absolutes, is looking for trouble. Why is understanding CSS so important? Because the site/application that you will design must be iPhone ready, Android ready, iPad ready, PC ready, Mac ready…..need I say more? From a user interface design perspective, we need to make simpler interfaces, but we need to make sure that the interface transmits the desired message when viewed from all of the available viewing platforms (iPhone, PC, Android, and so on).