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

{tab=Artisteer}

Artisteer 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:

• Improve accessibility with Template Overrides and Additional Information
• Transcript of Interview with Konrad Musial Extensoft/Artisteer .pdf below
• Check out Issue 1 Comparison Spreadsheet .pdf below

{tab=JoomlaBamboo}

Joomla Bamboo's Zen Grid Framework has been available since November 2009, with many improvements added. It is used to Joomla! Bamboo to produce their commercial Template designs. It is a very simple to use and designed to help even those with limited HTML, CSS, and Joomla! Templating skill.

Installation of the Zen Grid framework is as simple as installing any other Joomla! Template. Once installed the user can access the slick administrative interface, which allows for complete management of the layout and design of the template. A 960 css grid based tableless layout, hidden pop-up panel, and basic html tag overrides are just some of the features that come rolled into the Zen Grid.

Four sub-panels labeled as follows make-up the administrative panel: Overview, Appearance, Layout, Scripts and Extras. There, you can control the Fonts, Tag Lines, override the CSS, control the layout sizing and column widths, and adapt the Logo as needed, along with many other types of modifications.

It is a very well constructed interface, clearly documented, and very easy to use.

Template Designer

Designers will appreciate it the 960 Grid System. The Style Overrides interface makes defines the Template Features, like the Banner, Footer, Frontpage, and so on, and allows the designer to specify their own layouts needed. This creates ability to design very unique styles for a customer.

Packaged CSS includes Joomla! core and standard element styling. Defaults are automatically used, which is helpful for beginners, but Template Designers will find useful tools for overriding the styles. Menu and panel options make available the type of interaction that is industry standard and expected by customers today.

Zen Grid Framework is a great option and the support at Joomla Bamboo is excellent.

Zen Grid Framework Advantages:

• Installs like any other Joomla! Template;
• Font, layout and color changes are easy to make by beginners;
• Accessible tableless output;
• Comes with a set of K2 layouts;
• Menus work with, or without Javascript;
• Works with Joomla!'s Media Manager which makes uploading images easier;
• Ability to easily add JS plugins without the need to create Joomla! Modules or Plugins;
• File compression for JS and CSS files, resulting in performance gains and SEO improvements;
• Mootools is removed for those who prefer jQuery;
• Framework provides for core CSS layouts by the Template can override values;
• Excellent documentation;
• Professional 960 grid system and ability to easily change layouts and columns;
• Supports multiple browsers and browser versions;
• Excellent support forum for club members;
• Produces valid XHTML 1.0 Transitional and CSS 2 output.

Disadvantages:

• Not GPL so it's not useful for a developer to add to or include in a distribution;
• Somewhat limited in terms of what can be done or how it can be extended;
• Does not use the Joomla! JS Framework (although many prefer jQuery which is used);
• No RTL support.

Team EaSE Podcast: Anthony Olsen interviewed by Nicholas K. Dionysopoulos:

{mp3remote}http://cdn.akeebabackup.com/audio/jcm/EaSE_interview_JoomlaBamboo.mp3{/mp3remote}

Download JoomlaBamboo Podcast 15163Mb .mp3

Links & Further Information:

{tab=RocketTheme}

The Gantry Framework is a very powerful and flexible Template Framework for building and creating Templates. It can be used by people with a wide range of skill sets, including those who are just starting with Joomla!.

It is also an exceptional tool for developing professional Templates with modern Ajax interfaces and clever design. In fact RocketTheme creates all of their commercial Templates using the framework and have made it available free of charge, licensed under the GPL, for the Joomla! community.

There is nothing tricky about installing the Gantry Framework. It works just like any other Joomla! Extension. The support website is loaded with videos and tutorials to help you get started and to learn everything there is to know about this powerful tool.

Template Designer

Designers will appreciate it the 960 Grid System. It is easy to use to define different layouts and looks, and then assign those designs to a Web site based on Menu Item. Gantry introduced the concept of Template Styles, which will be available in Joomla! 1.6.

65 module positions are more than enough to develop nearly any Web site, but if you need more, it's easy to create more positions and to make your own layouts. The output is accessible and does not use tables for layout.

Packaged CSS includes standard Typography and Joomla! core element styling. You can use the defaults provided or adjust as needed. This alone makes custom site development much easier. Those just getting started would not even need to change these settings.

Developers

Gantry's XML driven overrides and customization environment allows you to create innovative interfaces. You can create professional Templates with defined presets for your customers. Browser recognition is available, enabling you to offer browser specific CSS, as needed.

The AJAX communication layer makes it easy to interface with Joomla! AJAX Extensions. The framework allows establishment of parameters by URL, Cookie, Session, or Preset, providing developers with many tools for innovative interfaces. All of your configurations can easily be stored in INI files for packaging.

There are so many built in features like RTL Language support, Font-resizer, Google Analytics, "to-top" smooth slider, IE6 warnings and more.

Gantry Framework Advantages:

• Free of charge and GPL licensed;
• Extremely powerful and useful to a wide-range of skill sets from beginners to site builders and developers;
• Parameters can be defined once for the entire site, or on a per Menu-Item basis, and stored and reused as Presets;
• Excellent documentation, videos, and GPL'd Templates all with accessible tableless output;
• Many options for creating unique looks, including menus, CSS styles, Typography choices, and Font Resizing;
• Attractive, easy to use Administrator area for extensive configuration options;
• Professional grid system and ability to easily change layouts and columns;
• Advanced panel controls forced positions, feature order, enabling of code compression, RTL, title spans, page suffix, and other options;
• Supports multiple browsers and browser versions;
• Produces valid XHTML 1.0 Transitional and CSS 2 output;
• Built in Ajax System;
• Support options include IRC for all and forum support for RocketTheme members.

Disadvantages:

• There are so many options, it might be overwhelming to new people;
• Additional Gantry-specific Template commands (although these are well documented);
• Can be complex to debug;
• Easy to create Interfaces that are heavy on Javascript and slow if you are not careful.

Team EaSE Podcast: Andy Miller interviewed Amy Stephen:

{mp3remote}http://cdn.akeebabackup.com/audio/jcm/EaSE_interview_RocketTheme_Gantry.mp3{/mp3remote}

Download RocketTheme Podcast 4827Mb .mp3

Links & Further Information:

• More On Template Styles and Additional Information
• Check out Issue 1 Comparison Spreadsheet .pdf below

{tab=You!Joomla}

You!Bubble is a highly configurable Template that can be used to quickly and easily create unique designs for Joomla! 1.5 Web sites. It is a good option for those starting out with Joomla who want a starter Template that doesn't have a lot of weight. It's elegant design makes it suitable for many purposes. The fact that it's GPL licensed and free of charge certainly makes it a very good deal.

Take a moment to view the demo for You!Bubble. It is a very nice three column design with a handsome right column sidebard. The forms are styled very nicely and that tends to be a difficult job for new designers. There are several Typography choices available and the options are nicely presented. It makes good use of image lists that can dress up a page.

You!Bubble comes with several Module Styles that take advantage of Joomla 1.5 Module Chrome. (See below for tutorials on creating your own Module Chrome.) There are 12 Module Positions, sufficient for most designs. By specifying a Module Setting, you can take advantage of three distinctive style options.

Template options available are very good, allowing you to activate server side compression of JS and CSS files, set your top menu, select a color choice, establish the width of your site and columns, and set your font site.

It is also very helpful to have three choices in layouts and Menu types, including a split menu, to vary the effect of your site.

The You!Bubble template is installable like any other Joomla Template and can be further customized if you have skill in that area. Another nice feature is the ability to download the Template already packaged with Joomla and sample data needed to show off the Templates features.

Certainly, You!Bubble is a great option for many different uses and it's appreciated to have such a quality Template available at no charge.

You!Bubble Advantages:

• Free of charge and GPL licensed;
• Very fast with only three images weighing in at 23kb, which is good for search engine optimization;
• Server side compression of CSS and JS files, another advantage for search engine placement;
• Context help with toolbar popups help define configuration options;
• Tableless design;
• Many options to help designs create unique looks, including menus, CSS styles, Typography choices, and Font Resizing.
• Ability to easily adjust the site width and columns;
• Template comes with 12 collapsible module positions;
• Supports multiple browsers and browser versions;
• Produces valid XHTML 1.0 Transitional and CSS 2 output;
• Support forums for club members.

Disadvantages:

• Must signup to download the free Template, and it's difficult to find the Free Membership option;
• Options are more limited than a full bodied Template Framework or a Template Generator;
• Difficult to achieve unique design;
• Contrast and font sizing not very accessible;
• RTL Support not functioning at time of assessment;
• Updating Template requires uninstalling, which removes all customized settings;
• Does not use Joomla!'s site description and keyword meta. The "SEO Settings" in the Template Administration Panel might be confusing. These fields are actually for a hidden H1 Page Title and Link Description used beneath the logo. Users must be careful to change the defaults in the interface. It might be less confusing if the Template used the Global Configuration Site Name and Site Keywords instead.

Team EaSE Podcast: Dragan Todorovic interviewed by Miljan Vujosevic

{mp3remote}http://cdn.akeebabackup.com/audio/jcm/EaSE_interview_YouJoomla.mp3{/mp3remote}

Download You Joomla! Podcast 1117Mb .mp3

Links & Further Information:

• More on Module Chrome and Additional Information
• Check out Issue 1 Comparison Spreadsheet .pdf below