August 2008

2008-08 Joomla! Community Magazine

Joomla! Community Magazine - Features

Joomla! 1.5 Web site Per André Rønsen Soul Kids

Per André Rønsen combines creative talents in theology, music, and design with Soul Kids!

Sometimes designing and building a Web site is a long and tiring process. One of my latest projects SoulKids.no was nothing like that; it was quick and easy! Pure fun. SoulKids is a children’s choir starting up this fall, and my job was to design and build a basic site for promo use.

The design process

The design obviously needed to communicate to the parents. At the same time, I wanted to demonstrate that this is not the typical children’s choir; this is an urban, up-to-date group doing modern RnB, Hip hop and break dance. If a mother asks her son if he’s interested in joining, and he’s not convinced, she can go: "Look here, it actually looks like something you would like!" At least, that was the goal.

Graphically, I was inspired by the kind of back-to-the-80’ies t-shirts that are popular among young European girls these days; long t-shirts with short arms, and large, black print. After I was done with the logo design, I really wanted to keep the feel of the large fonts. I drew a simple mock up by hand (I always do that, even though I’m a terrible drawer), and roughly laid out the different parts. And since the site was not overly complex, I simply gave the logo half of the home page view. Big is beautiful!

The home page had two purposes: To say a few words about what SoulKids was all about, and to urge the visitor to make contact. To illustrate the fun and lively side of the choir, I grabbed a stock photography of some kids, cropped it, and added some Photoshop candy. A custom photo would be better, but since the choir is all new, this was the best solution.

Except for the work on the front page picture, I did all of the design in Adobe Fireworks. To me, Fireworks is a lot quicker for putting up boxes and elements, dragging them around and changing colors. Besides, it has a nice Pages-function for designing sub-pages without having to duplicate the common design elements. For this site, I only designed the front page, though...lazy, I guess!

Implementing Joomla! goodness

I already had a super basic b/w custom template at hand that I use for Joomla!-stuff. The code is easy to read, it has some semantic div’s and classes in Norwegian, and it validates nicely. This way, the actual xHTML/CSS is done after I have installed Joomla! locally (using MAMP). In fact, I always keep a custom Joomla!-installation in Norwegian ready for use. It has my custom template as default, and it has has some lovely extensions pre-installed:

• JoomlaPack
• JCE
• Mass Content
• Google Analytics Tracking Module
• Xmap

This installation also has a couple of menus ready for use, and some menu elements linking to static pages (like About us, etc). When I build a new site, I let JoomlaPack make me a copy, and I’m good to go.

For SoulKids the only really interactive part is the contact form. I needed something simple that I didn’t have to fight with, so I went for ALFContact. Yes, it is a funny name, but it works! The standard contact form in core would work too, but it’s not as quick to implement and simplify. For a static gallery, Ozio Gallery is a good choice; it has some nice features, and it’s easy to customise. Nice and flashy!

Why Joomla!?

There is always an option to build using pure HTML. But building with Joomla! is really building for tomorrow. Today this site is pretty static, but after some time, there will be a need for posting news, events and articles; that’s when a fullblown CMS comes in handy. Besides, theming for Joomla! is really simple! This project took less than three days from start to finish. Don’t tell the client ;).

Tools in use

• MAMP
• Smultron (I love the snippets )
• CSS Edit (I love the folders)
• Cyberduck
• Firefox w/ Firebug + Web developer extensions
• Adobe Fireworks + Photoshop
• Macbook + LG screen