Version 2.1 Released - Flexi Template Skeleton

Written by Lisa | 04.19.10

EMC23 - Web Development Blog

I have had a chance to use this template skeleton more than a few times over the last few months, and in doing so, I have been able to debug and fine-tune it further.

I've uploaded v2.1 with various changes added since the last release in February.

Relevant notes and screenshots for version 2 are available here.

I corrected a few simple mistakes, and I included a few minor CSS rules that I found myself adding each time, more out of personal preference than anything else. The more significant additions and revisions are discussed here.

I have gotten into a SEO routine lately too, so I've included a xml file that can be used as a sitemap template, and then submitted through Google Webmaster Central. This file needs to be placed in the root folder as per the guidelines.

I've also included the relevant files for custom error pages, as discussed here.

The most significant change was that of removing the h1 and h2 tags from the logo in the header, which I had based loosely on the Beez template.

This revision came about because I was informed lately that all h1 instances should be unique and there should be only one instance per page.

According to Matt Cutts (Google's SEO frontman), you can use multiple h1's if the page really, really needs it. However most pages don't and I just wouldn't do it. According to Aaron Wall (SEO Book), it's a bad idea. There may also be issues with aural style sheets and forward compatibility with html5.
tricky D

The Joomla Beez overrides outputs the Page Title as h1.componentheading, whereas the typical Joomla output (for example, rhuk_milkyway, which has no overrides) is a div with a class value of componentheading, within a table that is responsible for the entire main content layout.

The Beez overrides provide the improvement of removing most of Joomla's tables used in layout. The added class valueto the h1 is convenient because one can retain the semantic emphasis of the h1, yet style it differently to the generic h1.

By having the Sitename as h1 permanently in the header, I was breaking these standard SEO rules. The Page Title, if enabled, would become the second h1 per page and the Sitename, as it appeared as h1 on every page, would hardly be considered unique.

Here's what it used to look like:

<div id="logo"><!--logo based on BEEZ-->
<a href="/<?php echo $this->baseurl ?>/index.php" title="<?php echo $mainframe->getCfg('sitename');?> Home"><img src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" border="0" alt="<?php echo $mainframe->getCfg('sitename');?> Logo" /></a>
<h1>
<a href="/<?php echo $this->baseurl ?>/index.php" title="<?php echo $mainframe->getCfg('sitename');?> Home"><?php echo $mainframe->getCfg('sitename');?></a>
</h1>
<h2>
<?php echo ('EMC23 Flexi Template'); ?>
</h2>
</div><!-- end logo -->

The obvious adjustment is to remove the h1 and h2 and create divs instead, then add new CSS rules to the layout.css and theme.css, to emulate the previous placement and text style of the h1/h2.

So the new header looks like this:

<div id="logo">
<a href="/<?php echo $this->baseurl ?>/index.php" title="<?php echo $mainframe->getCfg('sitename');?> Home"><img src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" border="0" alt="<?php echo $mainframe->getCfg('sitename');?> Logo" /></a>
<div id="sitename">
<a href="/<?php echo $this->baseurl ?>/index.php" title="<?php echo $mainframe->getCfg('sitename');?> Home"><?php echo $mainframe->getCfg('sitename');?></a></div>
<div id="slogan">
<?php echo ('EMC23 Flexi Template'); ?></div>
</div><!-- end logo -->

Lastly, it was brought to my attention by a fellow templater that a comment I had included in templatetools.php was triggering Quirks mode in IE 6, 7, and 8. As much as I like to pretend IE does not exist,  I was delighted that Johnny was so kind as to point it out. So I have removed <!--Modified from JA Purity--> from above the doctype in templatetools.php, and replaced with /*Modified from JA Purity*/ after the php statement, as per Johnny's comment.