Why some web applications are more usable than others (part 2)
March 14th, 2008 | by David |After the DotNetNuke desaster I settled down to the more classic way – nice and understandable PHP CMS software. After some consultation I had to decide between using typo3 and Joomla!. Joomla! made the win (I just thought typo3 was a little too complex for the given situation), but it was no easy task…
For PHP stuff testing purposes I usually consult my local XAMPP installation. This is an easy to use Apache/PHP/MySQL package that is preconfigured and runs out-of-the-box – at least as long as you don’t need full pear support with commandline installer and everything, but that is another story to be written.
Joomla! is based on the Mambo CMS and was forked during some quarrel over the development roadmap and commercialization issues a few years ago. There are 2 versions available: 1.0.x and 1.5.x. While the 1.0.x path bears more resemblance to the original Mambo code, the 1.5.x series was designed with modularity in mind and is easier to extend and maintain. I decided to take the latest version, even though the first release of 1.5.0 is only several weeks past.
The installation completed without any troubles and after 3 hours of studying the backend I had a fairly good knowledge of how Joomla! works. Of course there is much to learn yet, but so far this was fine. The next step was to continue where DotNetNuke had failed: change the template of my page. My template of choice was Siteground J15-22 (Demo). It has a variable (adjustable) width, is fully XHTML compliant and looks quite nice. The template installation was as easy as it could be: save to template folder, activate in admin panel, done.
There was one thing though that annoyed me: when using sub items inside the sidebar menu, they appeared only if the parent item was selected – this is the default behaviour and ok for me. But when I activated the option to always show sub menu items, they were visible but no longer recognizable as sub menu items because they look the same as the parent items. WTF?
After seeing through the code I found out that both Joomla! and the template share their parts in this issue. The menu is made of an unordered list, and all the items bear a different CSS class parameter like this: <li class=”item53″> or <li class=”item54 parent”>. The currently selected item looks like this: <li class=”item24″ id=”current”>. Come on, this is bad! There are even space characters in the class names!
Shouldn’t the class and id tags be the other way round? What is the use of having lots of menu items with completely different css classes? Was the developer who did this on some psycho-pushing substance – like, erm, caffeine – or just thinking “nobody will ever have to define CSS classes for their menu items, so this is fine” or just simply ignorant? My point in this is the following: you can’t have grouped menu items with this design. You can’t assign 1 or 2 menu items a specific style (oh, you can… but if the item ids ever change, the style will be gone or even be assigned to the wrong item!). It just feels bad, and this is why I had to undo this in the mod_mainmenu PHP code.
I also fixed the style sheet so that sub menu items are always indented. Personally I would have preferred to use something like a .subitem{} CSS class – at least this would have saved a lot of CSS code. But defining the style through the structure alone is perhaps the even better model, so I kept with that.
OK. So far the style was ok, the menu was working as I would expect it, and I filled in some of the content from the DotNetNuke installation that had been fixed by my colleague in the meantime – he had a full backup from before me meddling around with it.
The next chapter in this small series will be about the transfer to a LAMP web host and how the real trouble with Joomla! began.