This is actually an old version of For the latest and greatest, check out the new site.

Comhaltas Ceoltóirí Éireann

It’s a big month for Happy Cog. First, we launched our new site. Now we’ve launched a brand new project that we can be proud of.

A previously referenced European adventure has finally led to the fruition of a brand new site. Comhaltas is an organization that promotes Irish music and culture around the world. Their rich traditional heritage as well as the amicable nature of the group and people within deserves a great site, and also made it a great project to work on.

Designed by Art Director extraordinaire Rob Weychert, the visuals transcend the sterotypical "Irish" clichés and brings a fitting historical yet modern aesthetic. For more on the design, have a look at Rob’s write-up.

I was responsible for the front-end development of the new Comhaltas site. Some points of note include the navigation coming last in the markup and a well realized grid system.

One last thing to point out is the nifty language switcher, located by the logo. Because Comhaltas caters to both the older as well as younger generations, it was important to serve both user groups’ needs. Voilà! A site served in 2 languages. Here's where some advanced CSS come in. For the text replacement, we needed to serve different background images, based on which language was being viewed. I made use of the lang attribute like so:

#message a { background-image: url(message.gif); }
html[lang="ga"] #message a { background-image: url(message_ga.gif); }

(This is an abridged version of the code for the purposes of this example.) Since Internet Explorer 6 doesn’t support attribute selectors, we set a class of "ga" on the element and styled the element by class (instead of lang) within the IE stylesheet.

The back-end is powered by Expression Engine, and severely customized by wizard Mark Huot. A key feature of the back-end system is the amount of cross-linking that the site provides through relevant and contextual information. Since Comhaltas is a worldwide institution, the ability for each local branch to maintain a presence within a larger group was paramount. The “Locations” section of the site exploits Google Maps to plot branches around the world. Keen!

Lastly, the project would not have gone so well had it not been for great representation on their end. I've had the pleasure of working with some great clients, but none have been as pleasant or savvy as Breandán Knowlton, our point of contact on the client end. I’ve never met a client that could write copy, give great feedback, edit PHP includes, modify CMS templates, and run an organization, and all to great effect. Hats off to you, Breandán.

Aside from the work end of it, this project holds a special place in my heart for another reason. As part of a training exercise with Comhaltas, the Happy Cog team as well as our significant others had the opportunity to go to Dublin. During one night of our stay, I took my girlfriend, Emily, out for a nice horse and carriage ride, and I popped the question. Her response?

“Hell yeah!”

(There are some great pictures from the ordeal, if you’re so inclined.)

Happy Cog also has a launch write-up, as well as a case study on the project.

Without further ado, the new Comhaltas site!


Eric Puidokas said:

Nice work. I've never had any experience dealing with the multiple languages but I like your solution for IE6.

My one small nitpick of the site is that the #searchwrapper background image isn't aligned with the content. When you resize your browser window, the content slides over top of the background pattern. Centering that background image would fix that. Of course, it's possible there is some reason you have it the way it is that I'm just not realizing.

Again, nice work.

Posted on February 20, 2007 01:21 PM

Kirk said:

Well the results are superb. I'll likely be bothering you with questions regarding CSS and multiple languages in the future.

Oh, and a belated congratulations on your upcoming wedding

Posted on February 20, 2007 05:05 PM

Dan Mall said:

@Eric Puidokas: I can't seem to reproduce that bug. What OS, browser, and version are you using?

@Kirk: Thanks! Consider the invitation open to discuss multiple languages.

Posted on February 21, 2007 07:42 AM

Christian Ready said:

Congratulations on a well-designed and well-coded website. I did have one question - on the events page I noticed that there were no microformats used for hCard (and I guess no microformats anywhere?). Was that a conscious decision, a lack of support in the CMS or something else?

I'm always curious as to the decision process that goes into various designs.

Again, magnificent work!

Posted on February 21, 2007 09:46 AM

Dan Mall said:

@Christian: Embarrasingly enough, most of the project was coded several months ago, when I didn’t know much about microformats, so ignorance is to blame. :)

There are actually several attempts at microformats on the site (i.e. the Locations page), but, sad to say, they’re not ideally realized. In retrospect, I would love to go back in and do it right. Because of the great data on the events, they’d be ideal for some microformatting.

Posted on February 21, 2007 10:22 AM

Christian Ready said:

Not only do I appreciate your coding style, but your honesty as well :)

Posted on February 21, 2007 01:28 PM

Dan Boland said:

Quick question about the markup on the glossary page -- how come you used an unordered list and a definition list? Why not just a definition list?

Posted on February 22, 2007 10:26 AM

Dan Mall said:

@Dan Bowland: If there ever was a textbook example of definition lists, this would have been it. However, it’s actually a remnant of older code. There used to be more content with the definition, which made the list item a necessary container, but now that it’s just the definition, you’re absolutely right: a definition list would be the right fit.

I’ll have to bug Breandán to let me into the CMS to make that template change. Thanks Dan!

Posted on February 22, 2007 11:34 PM

Breandán said:

Go for it, Dan! I'm all about clean semantic markup, after all. :-)

Posted on February 23, 2007 05:20 AM

Blake Haswell said:

Hi Dan,

I plan to use the Comhaltas website for an assignment where I have to organise the usability testing of a website.

I was wondering if you were at all interested in hearing the results of said tests when I’m finished?

Great job on the site, I doubt many of my testers will find much wrong with it. ;-)

Posted on February 24, 2007 03:32 AM

Dan Mall said:

@Blake Haswell: I love the idea! Drop me a line if there’s anything I can do to help!

Posted on February 25, 2007 08:02 PM

Breandán said:

Blake - sounds like a great idea -- maybe you could let me know what you come up with as well?

Posted on February 26, 2007 10:15 AM

dave said:

How do you handle mutilanguage content with EE ? Are there 2 templates used that build 2 separate files? Or are there EE plug-ins that handle this duality?

Posted on March 6, 2007 06:16 AM

Mark said:

@dave: The multi-language support is handled by a simple plugin that checks a language cookie. If it's set to Irish it looks for fields ending in _irish (body_irish), if not it takes the default fields (body). This means that there isn't any duality in the templates, anywhere! Which makes it immensely easier to update.

Posted on March 10, 2007 02:04 AM

Steven Hambleton said:

@Christian Ready

There is no limitation with Expression Engine as far as Microformats go. In fact it's custom fields lend itself rather well to them.

Mmm I feel a blog post coming along!

Posted on July 25, 2007 06:13 PM

Sorry: comments are closed.