This is the final part of our current Template Tools series and we evaluate Joomlashack, Rumi, Shape5 and YooTheme together with two great articles. The first explains the various techniques of minification and compression (CSS & Javascript) used by Developers and the second examines those very important files - the robots.txt and .htaccess.
Less is More
One of the most notable things we’ve learned during our assessment of template tools is that there is a strong shared view among developers that “less is more”. As we had written in our lead article in this magazine’s first issue, minification and compression of static resources (CSS and Javascript files) can lead to a big positive impact on website performance. There are a handful of techniques used to accomplish that.
For starters, we have combination. This is the most rudimentary technique. All it does is take individual files and combine them into a single, big file. The only performance gain arises from your browser having to perform a single HTTP request in order to load the combined resource, versus the numerous requests required to load all of the individual resources.
A slightly more advanced technique is minification. This is a fancy word which refers to post-processing the resources to cut down their size. Most usually it is a simple process which removes comments and whitespace not necessary for the browser to parse the CSS and Javascript files. Some template tools might go even deeper, optimizing for example the CSS by combining several properties into one. The main speed gain comes from reducing the overall size of the files which have to be transferred to your browser.
One very important technique for modern browsers is compression (GZip). Instead of transferring the CSS and Javascript files as-is, some template tools will first try to compress them using the GZip algorithm, supported by all modern browsers, further reducing the amount of transferred data by a whooping 50% or more. The decompression takes place transparently as soon as the browser downloads the resource. On the down side, this technique won’t work with older browsers (like Internet Explorer 6) or some mobile browsers found in low-end cell phones.
One of the most intriguing techniques - and one sparingly used - is the use of Data URLs. This technique applies only to CSS files and its premise is that small image files can be “embedded” in the CSS file itself instead of being referenced by URL. The major benefit is that your browser no longer needs to perform HTTP requests in order to load several small files, such as gradient backgrounds, rounded corners and icons. On the downside, not only this processing takes more time and results in slightly bigger CSS files, but not all browsers support them. Most notably, Internet Explorer 6 and 7 do not understand them, which can impact a large proportion of your web visitors.
All modern template tools seem to embrace the “less is more” principle and provide quality off-the-shelf solutions for the minification and compressions of your static files. Some template frameworks, like T3, Morph and Warp, have taken this to a whole new level by supplying a generic solution which acts on all of your site’s files, not just their own core files. This makes us very optimistic that all template tools developers will eventually go there, letting our sites load even faster.
Template Tool Assessments:
Check out Issue 3 Comparison Spreadsheet .pdf below
{tab=Joomlashack}
Fresh is a free GPL licensed template distributed by JoomlaShack, the adept development team behind University; a Joomla learning space. As well developers of Wordpress and Drupal themes.
True to it's name, Fresh is a clean and crisp theme loaded with all the goodies needed to launch a practical website. Among the goodies under the hood are output overrides for all core Joomla components, for a complete tableless and standards compliant layout. The 960 grid system for clean and consistent content flow. 30 Module positions with the ability to publish upwards of 6 modules in a number of user positions. Module styles and source graphic files for total customization, makes Fresh a great base theme to power any web design project.
Features
- A selection of 6 light colored themes;
- 3 column layout built on the 960 grid system for modular layout management;
- 30 Module positions and 5 mod chrome color styles;
- CSS suckerfish menu;
- SEO friendly and valid XHTML markup;
- Completely tableless layout with output overrides for all core Joomla! components;
- Source graphic files for complete template customization;
- GPL licensed and freely available for download with submission of your name and email address;
- Thorough documentation and support forum.
Team EaSE Podcast: 'TJ' Baker interviewed by Neri Valentin-Macias
Links & Further Information:
{tab=Rumi}
The Rumi framework and MalangNews is a robust theme skinning solution. Mostly managed from the frontend Rumi ParamsBox developer panel, which is enabled in the template manager.
The ParamsBox is the driving force of the Rumi framework allowing the users to control the aesthetic and function of their website with ease. From standard configurable parameters to the control of error and offline pages, cufon fonts, meta data, and more; making Rumi skin management simplified for novices and developers alike.
Features:
- Typical Joomla 1.5 template install process bundled with the MalangNews skin;
- Front-end developer panel called the ParamsBox is enabled from the template manager with ip specific assignment;
- Cufon font replacement;
- 50 module positions with module chrome managed from the Rumi ParamsBox. There are a number of module styles available including; accordion, slider, and the standard module options;
- Error and offline page control;
- Built on the 960 grid system;
- 12 menu options;
- Thorough documentation site, showcase, and framework roadmap;
ParamsBox Overview:
- Skin parameters: Skin styling options and detailed information about the installed skin including a file list with size information;
- Layout Options: A selection of HTML doctypes including XHTML 1.0 Strict and XHTML Mobile 1.0;
- Typography: Enable or disable core joomla styles from this section of the panel. Options are also available to selection font type, override font size, font unit of measure, and direction for RTL support;
- Font Replacement: Enable or disable cufon font replacement, input for adding elements or classes, choice of 2 cufon font types, hover enabling after font replacement options, and input for entering drop shadow value;
- Background Options: Set background color and image from this section of the panel, as well as options for configuring background repetition and positioning;
- Other Options: Manage the enabling of go to top slider, styling of system messages, ie6 support warning and configuration, and an input for footer copyright text;
- Logo Options: 3 Logo presets which include; image, custom text, and text from sitename set within your Joomla configuration;
- Module Options: All 50 module positions are managed from this section and include chrome styling options. Options include; default, horizontal, accordion menu, tab menu, drop down and drop column menu's, normal, fisheye, outline, slider, 5 levels of XHTML, pathway, round, and table;
- Meta tag, SEO, and Tracking: Add custom sitename, title, meta descriptions, and keywords. Also inputs available for entering verification keys for the more popular search engines and analytics tracking code;
- Offline: Manages the display of a websites offline page. Enable or display the offline login form, input for custom offline message, add url to custom logo, and options for setting logo width and height;
- Error: Similar to the offline management options only this section is specific to controlling the 404 error page and includes the option for displaying upwards of 3 module positions;
- Developer Tools: These options display module positions and allow for debugging as well as tracking memory usage of the templates resources.
Links & Further Information:
{tab=Shape5}
The University theme by Shape5 is a slick Joomla template that includes some of the features and options that should accompany a well built template. The 3 column layout with options for fixed or fluid widths are just some of the features that can be adjusted through the template parameters.
Features:
- Default menu selection;
- Fluid or fixed width;
- Fixed width value;
- Left, Right, and Inset column values;
- Choice of Jquery or Shape5 javascript effects;
- Subtext labels for 10 default menu items with option to disable;
- Selection of 5 theme colors;
- Option to disable loading of components on the frontpage;
- Login, Logout, and Registration text label values;
- Color values and image sources for the website background, main body background, top background, bottom background;
- Options to enable or disable tooltips, multibox, multibox overlay, and multibox control functions;
- CSS3 styled typography;
- 32 Module positions;
- Excellent documentation and a support forum for club members.
Links & Further Information:
{tab=YooTheme}
Neo is a lightweight, flexible, and beautiful template built on the Warp5.5 framework by Yootheme. Beautiful typographic and module chrome styles are among the array of features that are included in this simplified, yet powerful framework.
Powered by the rule of golden ratio or divine proportion, this template boast a hybrid fluid-pixel based grid layout, allowing for a range of page layout options. The warp5.5 menu system adds it's own layer of beauty and function with the ability to easily create and configure accordion and dropdown styles as well as menu subtext and page backgrounds according to the active menu. Speed, function, and beauty combined with powerful JavaScript and Php tools afford developers and website designers with the ability to create sophisticated websites in little time...
Features List:
- Utilizes the golden ratio for a hybrid fixed or fluid 3 column layout;
- 12 Theme presets and 12 color selections for a multitude of color and theme combinations.
- 3 Compression options which include minifying js and css by combining files into one as well as the option to compress with gzip and image file request replacement with data URIs;
- Output overrides for all core Joomla! components for a completely tableless layout;
- Module system with 19 mod positions, dark and light color combos, subtext, and a plethora of module chrome styling including; badges, icons, polaroid, and post-it note;
- Menu system with options to configure dropdown or accordion styling. Other features include simple styling change with active menu selection, menu images, and menu subtext;
- Typographic styling for all common tags;
- Valid XHTML markup;
- Mobile layouts for iphone and ipod touch;
- Javascript and PHP toolbox to implement other features which include png support, slider menu, dynamic backgrounds, smooth scroll, etc.
- Neo and warp5.5 are compatible with all Yootheme products including their popular Zoo CCK;
- Sliced image source files for complete template customization;
- Well documented with video tutorials and a club members support forum.
Links & Further Information:
{/tabs}
Summary
For the past 3 issues of the JCM, team EaSE has looked under the hood of some of the most powerful templates and toolsets available to the Joomla community. Our goal is not to sell one framework or manufacturer over the other, but to provide insight into the plethora of resources available for Joomla template development. In our journey through the world of Joomla template development, we found that not all templates and/or toolsets are built the same, but they all strive to achieve some common goals. A simplified method or workflow for developing powerful, accessible, seo friendly, and unique front-end user experiences.
Team EaSE sincerely thanks all the Template Devs who took part in this first series and looks forward to revisiting this topic in the future.
Issue 4 - October 2010
In Issue 4 we will be assessing e-Commerce for Joomla! - just in time for you to set up your Christmas store! This will cover the three main free GPL Joomla! e-Commerce solutions in the first of this two-part series. Team EaSE is looking forward to this - we hope you are too.