Joomla Template Semantics

09Feb

Joomla Template Semantics

Written by Barbara Rudlin Published in Bamboo Blog 3 comments

When a designer creates a Joomla template there are various elements involved. The main elements include the graphics of the site, how the various elements link together, the typography available, alternate colour schemes and, in the case of Joomla based templates, there are also the many modules and their positions to be taken into account.

As a designer I like to have a large variety of module locations available to me, however there are times when the sheer volume of modules makes naming them very tricky.

Naming Conventions.

When faced with a template just where will the module ‘User6’ appear? The naming convention used isn’t very helpful to me as a designer in locating the position. I personally would prefer a more helpful location-based naming convention to be used in templates, something that will give me a hint as to where ‘Advert3’ will be displayed when I select it.

Wikipedia defines semantics as the study of meaning, usually in language. The word "semantics" itself denotes a range of ideas, from the popular to the highly technical. It is often used in ordinary language to denote a problem of understanding that comes down to word selection or connotation.

If we are to use a semantically based naming convention then module names would be based upon their position resulting in modules such as top left, top right, menu, left column etc. I have come across template designers in the past who used names such as these, but unfortunately they were not in the locations described when the template went live. Very confusing and it looked unprofessional too.

Naming hilites, classes and other template features.

In addition to the naming of the individual modules there is also the option to create different versions of modules within the Joomla template framework. I believe that the different options controlling the CSS formatting, available to a particular module, should be clear from the name of the highlight choices available. This will also make editing any underlying CSS files simpler.

I feel that names such as ‘Hilite1’ should be dropped in favour of the more descriptive terms light, dark, red, grey, purple, bold, shaded etc. All these phrases are far more applicable to the description of the module versions than a generic version number 1, 2 or 3.

When creating a template the designer should be considering the following elements:

Is there a graphic available for reference? – If so semantic names are not necessary, although they are useful
Do the names given to the modules have any consistency, user 1-5, advert1-3, that would help define relative positions?
Are the names based on the function of the module rather than position? Such as search, login, vote etc.
Double and triple check to ensure the all modules are positioning as expected, a module named left appears on the left and any demo content reflects this.

There are many different reasons and choices when it comes to naming conventions. There is no right or wrong choice however a designer should attempt to be consistent, clear and keep the end user in mind at all times.

Read 1262 times

Barbara Rudlin

I have been working in IT since the early 90's and have held just about every IT related job there is from Helpdesk, Developer, Busines Analyst, Application Tester to Project Management. I run my own web consultancy company Fiery Phoenix and provide all manner of internet based services to clients around the world. I love to blog, tweet and play with my kids which just proove that I am a child at heart.

E-mail: This e-mail address is being protected from spambots. You need JavaScript enabled to view it

More in this category: « Keeping a site organised for the disorganised Whats in my Joomla template toolkit? »

3 comments

09.02.10
Andy Neale Comment Link

Hi There,

Great and informative article on a very pertinent topic, especially in the world of Joomla where position names become very confusing and the generic use of the positions. Especially when making templates for other people to use as this kind of throws a spanner in the "semantic works" so to speak. This is because its impossible to guess what a user is going to use a particular block for.. ie, the meaning and purpose of the contents.

I have to slightly disagree with one thing, and that is that using names like "top left, top right, menu, left column etc. " are semantic. Maybe menu is the most semantic of all of them, but naming based on position, goes against semantics (from my understanding), as its meant to be about the meaning and purpose, rather than position.

One reason is because it creates less dependencies, such as if you now move the "left col" to the right, all the css has to now change etc, vs if it was called "Secondary content" or "navigation" However the primary reason is giving meaning and importance to the contents of the labeled container. A general rule is to name classes and IDs after their purpose rather than appearance.

This is providing a semantic name that is now based on the meaning or purpose rather than the position on the page or appearance... after all the primary idea and purpose of semantics is to provide meaning through code and labeling of our elements.

Other definitions of "semantics" that explain this are

"of or relating to meaning or the study of meaning; "semantic analysis"

"Of or relating to semantics or the meanings of words; Reflecting intended structure and meaning"

The obvious problem in Joomla and is that the use of a block is very generic and dependent on the user. What they will use it for is up to them, so how can we name based on meaning and content?

We have had to make sacrifices in certain areas with our products and use non semantic names to cater for this, but where possible we ensure we use names which give as much meaning to the intended use as possible, but often have to opt for the position.

There is an excellent post on this entire issue form last year by Gnomeontherun.

http://www.gnomeontherun.com/item/10-how-to-improve-joomla-module-nomenclature-and-semantics

The only solution I can see for this is that Joomla allows users to add a "role" to a module as well as the position name, and the role is what a user ads to the module when building his website and this si output to provide the meaning. So for example, a user1 module is used to add a newsflash, the tole he the inputs would be "newsflash" or "search" for the search etc, but this is way more complicated in practice.

YUI CSS grids have added roles to try bring meaning to their CSS framework which uses non semantic classes for layout.

Thanks again for a great article, I hope I have provided some insight :)

This e-mail address is being protected from spambots. You need JavaScript enabled to view it
11.02.10
Mark Jones Comment Link

Very interesting article, thanks!

This e-mail address is being protected from spambots. You need JavaScript enabled to view it
16.02.10
Anthony Olsen Comment Link

@Andy apologies for the delay - just returned from a week of surfing :)

You are right in terms of the definition of the word semantic and maybe we should have used another word for it. But I think Joomla is a pretty special case because of the complex layouts that you can achieve and so maybe sensible module position names need to be less based on its function but rather its position.

My personal feeling is that positions should be named relative to the main component space since the focus for a page really comes down to whats displayed in that area. So in that sense the meaning comes down to the module's relationship with the main content.

Thanks for the input - its much appreciated.

Anthony

This e-mail address is being protected from spambots. You need JavaScript enabled to view it