Joomla! Template Tools Part One

Written by | 01 July 2010 | Published in 2010 July
The enormous power and flexibility of the Joomla! Content Management System adds complexity and time to the task of creating a truly custom template. In this series of articles, Team EaSE looks deeply into several of the Joomla! Template Community's solutions to greatly speed that process.

The Joomla! community has so many manufacturers offering templates for our content management system that there's almost always a template to license that will suit anyone's taste. When you want a site to have a truly unique look and feel, though, you will need to create something original. It’s not necessary to re-invent the wheel. Many template manufacturers have begun employing template frameworks on which to base their templates.

Flexible Design Requires Careful Coding Choices

If you've ever tried it, you may have discovered that beginning the development of a Joomla! template from scratch is a drag. As with any web project, you'll need to convert the creative concepts of your graphic artist into HTML, graphics and CSS. But the powerful features of Joomla! web site add complexity to this task. A successful Joomla! template, even a graphically simple one, requires special attention to the dynamic nature of menus, modules and native Joomla! page elements.

Custom Joomla! Templates: Where to Begin?

When creating a template for your Joomla! site, you have three options:

  1. Commonly, you might use a template from a template manufacturer and modify it for your needs. By changing the logo, colors or other key elements, it’s possible to make a more individual experience from a template used on many sites worldwide.
  2. Another option is to make your own template from scratch. As we’ve pointed out, planning for all the contingencies of a powerful Joomla! site—for instance, styling a login module, creating classes and ids for collapsing module positions not in use can be quite time consuming.
  3. And lastly, you can use a Template Tool.

The Spectrum of Frameworks and Tools

In this—and in a few subsequent issues of the Joomla! Community Magazine—we will:

  • explain what Template Frameworks and Template Tools are;
  • discuss the significant advantages that they present the aspiring creator of a custom template;
  • and evaluate several Template Tools and Template Frameworks, and explain our methods so that you can make informed choices.

Blank Templates

A “blank Joomla! template” which has already defined the CSS styles and some modules is perhaps the most basic labour-saving tool for the custom template creator. Whilst these provide a good starting point, blank templates often do not include the “extras” which make a Joomla! site a more exciting user experience. What do we mean by extras? Consider, for instance, Javascript-enhanced menus such as Suckerfish; dynamic date and time displays; or font resizing features that make your site more accessible to visitors with visual impairments. Properly used, these features greatly enrich the experience of the visitor to your web site.  Yet writing—and testing—the code to implement such features adds significant complexity and time to the process of creating your custom template. Wouldn't it be easier if a lot of it was somewhere out there for us to use—something like a lending library of code for templates?

Template Frameworks

Happily, there is. Many template manufacturers are now offering the ready-made and developer-friendly templates frameworks, rich with  features, which they use to make the completed templates they offer their customers. These frameworks define many layout choices with collapsible modules and offer snap-in feature sets such as advanced menu systems. You can use these highly configurable templates as building blocks to make a stunning template for your site, saving you a substantial amount of time. You leverage the manufacturer’s code by adding your graphics and binding them to create your dream site's template.

Template Generators

Lastly, some Joomla! developers are offering point-and-click desktop software or web services to fully configure a custom template from pre-loaded graphics, color selections and common template features.

Our Evaluation

The manufacturers of these template tools have had very different goals in developing their solutions. What they all have in common is the noble goal of allowing the easy creation of Joomla! templates by focusing on artistic elements than fighting with code. Diverging from there, each company has had their own approach to customizing the code needed for a template. Some have stellar documentation, some none at all. Some are highly intuitive to use, some require a lot of reading. As with all software, choosing one—or none at all—is a matter of both of taste and informed choice about the capabilities of the product. We hope to offer you some insights into the latter.

Now that we’ve framed the big picture, join us on our exploration of the world of template tools!

Check out Issue 1 Comparison Spreadsheet .pdf below

Artisteer

Artisteertemplate-generator-iconArtisteer is a Web design Template generation tool that can be used to quickly and easily create Joomla! Templates without requiring deep understanding of CSS, HTML, or Javascript.

The tool is especially useful to those who are just learning how to build Templates or those who work with a number of other Web site environments, like WordPress, Drupal, DotNetNuke and Google Blogger. The software can be used in Microsoft Windows XP, Vista, and Windows 7. A beta copy of Artisteer is available for the Macintosh.

The user interface is recognisable for those who use MS Office. A simplified learning curve makes it easy for entry level Joomla! users and template designers to quickly create Artisteer Templates. The choices available in the environment are impressive. There are thousands of randomly generated mock designs. Design elements, such as layout, background, header, menus, fonts, buttons, tabs, colors, and color schemes, are very easily configured and changed.

The layout of every Artisteer template has 22 modules positions. With a working knowledge of Joomla! template development, designers can modify their template and add additional module positions. The power of template overrides does not accompany Artisteer generated templates, but can be easily added using overrides - see additional information link below. Template overrides are recommended for more accessible output.

Once your design decisions have been made, you can export your Joomla! template by simply pressing a button within the Artisteer interface. This creates a standard Joomla! template .zip that installs in Joomla! like any other Template. Once the Template has been installed, it can be modified and further customized in Joomla!, just as any other Template. An Artisteer template can also be exported as files for further offline editing. Artisteer is a very flexible tool and it works nicely with Joomla!.

Artisteer Advantages:

  • Easy point and click dialog boxes;
  • Quick development of basic Templates;
  • Familiar MS Office User Interface;
  • Ability to build Templates without deep knowledge of CSS and HTML;
  • Limited knowledge required of underlying content management systems;
  • Support for multiple content management systems;
  • Well documented software with tutorials;
  • Supports Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 1+, Google Chrome 1+;
  • Produces valid XHTML 1.0 Transitional and CSS 2 output;
  • Support forums for license holders.

Disadvantages:

  • Table based layouts used;
  • Menu requires use of Javascript;
  • No support for RTL;
  • Not SEO friendly;
  • Only beta support for Macintosh at this time.

Links & Further Information:

Summary

Power, function and flexibility is what you find when researching template tools throughout the Joomlasphere. In this first issue we focused on a group of randomly selected frameworks that serve the needs of the entry level user to the advanced designer/developer. Artisteer, Joomla Bamboo's Zen Grid, You!Joomla's You!Bubble, and Rocket Theme's Gantry framework each bring strength and versatility to the Joomla template development world. Although different in many ways, each template and/or framework tested shares some of the same basic elements.

In the August 2010 issue, Team EaSE will continue the evaluation of Template Tools with an in-depth look at offerings from three more manufacturers, as well share our insights on the impact a well-crafted Joomla! template can have on Search Engine Optimization.

Return to Top

Read 93386 times Tagged under Extensions and Services Evaluations
Team EaSE

Team EaSE

Current Team EaSE Members: Bo Astrup, Babs Gösgens, Brian 'Sully' Sullivan (Team Lead), Miljan Vujosevic

Grateful thanks also to Steve Burge

Past Members: Hilary Cheyne, Amy Stephen, Nicholas K. Dionysopoulos, Neri Valentin-Macias