Choosing whether to use a website template can be a little controversial. Some website designers believe themselves to be purists and think using other peoples templates makes for a bloated website that can be difficult to maintain. Personally, I believe one of the main reasons for the introduction of CSS was to allow artistic people to handle the visual design and for technical people to handle the implementation. Besides, there are templates and there are templates – some look amazing, some look err well not so good.

For the websites are designed I’ve chosen to use templates from http://www.templatemonster.com I am not an affiliate I do love their products. What I particularly like is that after my initial consultation with a client unable to choose a selection of web designs that I think offer a good starting point. This serves two purposes, first the client can visualise what I’m trying to describe and second using a template as a starting point saves a good number of hours which translates into cost savings for the client.

Traditionally this as being any real compromise but having used several of the templates from templatemonster.com I have found them to be of a very good quality and the layout is very meaningful and obvious. Sure there’s always one for improvement and I will write a second blog on one area that I think requires particular attention, namely, handling navigation for flash-based websites for users that don’t have Flash installed.

Most of the templates on offer are around the $64 mark. When you think about the number of images, the basic layout and a starting CSS template; this represents excellent value.  Most of these templates come with a small JavaScript file that handles sizing of boxes and it works very well. There is a very good selection of templates arranged into categories and if I were being picky, I would suggest this is one area where the website could be improved. When I last looked there were over 16,000 templates to choose from and it can be rather tedious scrolling through trying to find a suitable template. However, with so much to choose from you are never short on choice.

Flash templates

These templates offer some nice visual effects and an enhanced user experience without much work required from the web designer. Nearly all of these, use Flash for the site navigation and this could be improved by allowing the page names and the button labels to be controlled via an external XML file rather than requiring a copy of Adobe Flash in order to rename pages. Whilst this is possibly just me being a little picky, I believe, this really would add value to anyone who doesn’t own a copy of Adobe Flash.

Similarly, the templates that I have used have only had a very basic text message for when Flash is not installed. For my sites I have now amended the background CSS to allow the navigation from the non-Flash version of the website to be substituted when Flash is not installed. I’ll be writing another blog post to cover how I did that for anybody that interested.

Seperate Content from Design

Layout.CSS

One thing I particularly like about the templates I have used is that the styles.CSS has been separated from the layout so that pages are laid out in one file and the visual theme is handled in another. Maybe I’m just overly organised but I particularly like this feature. I’m not a big fan of the default page names used (because my work doing a SEO has led me to believe that the page name plays a huge part in improving your Google ranking). The first thing I do is to rename my pages; however this is pretty easy as I use Adobe Dreamweaver and it handles fixing all of my links. However, when using flash-based menus you still need to update the Flash file to point to the new page names, as I said before using an external XML file would make it much easier.

Summary

To wrap up, I really enjoy using the templates from template monster.com and would recommend them to anybody. The quality of the background CSS, the images, the layout and the overall look and feel are always of a high standard. For the price, choice and quality you can’t go wrong.

Pop over and take a look http://www.templatemonster.com

We all love Flash because it looks great and add real wow and visual impact. The problem is that if you have a Flash based menu system then users without flash (like the iPhone) can’t navigate your site. I want to have the best of both worlds, I want a Flash template that drops back to being non-Flash when it’s not  installed.

The aim of this post is to give you a little help and insight into how to enhance your TemplateMonster flash-based templates. One of the limitations of using a flash-based navigation system is that if a visitor to your website doesn’t have flash installed, they’re not likely to stay for very long.

I was recently using a template from TemplateMonster that has a Flash-based navigation system and this looked (in my opinion at least) amazing, however I was naturally concerned that my customer might not think very much of me if I locked out everyone that didn’t have flash installed.

I read yesterday that over 97% of Internet users have flash installed. I don’t know if this is accurate or not, but sounds right to me. That said, 3% of Internet users is a lot of people; who would want a website that didn’t care about them? Also, many SEOs believe that letting Google see all of your content is a good thing, personally I’m not sure your menus make much difference but hey this technique will solve that also.

Some of the background to what we need to do requires a little research. For example if you’re not very familiar with CSS the most of this will be confusing and won’t make much sense. The best thing I can do view at this point is to refer you to an excellent resource on CSS and XHTML that I have used. HTML dog is an excellent website that will walk you through starting to understand both HTML and CSS and take you through to a level of competency that will mean you will find one about the site fairly straightforward. So if you’re new to these topics head over to  HTML dog

Alternate content

Next you need to understand a little about alternate content. When the browser tries to open Flash content but cannot find Adobe Flash installed, you normally get a simple message and a link to Adobe. There are various ways to approach this and leave it to you to choose your preference but another very good place to look is on the deconcept websitehttp://blog.deconcept.com/swfobject/ and of course you’ll also want to look at http://code.google.com/p/swfobject/

What I’m about to suggest here though is another alternative.

When you look at a Flash template from TemplateMonster they commonly have some alternate text for when the browser cannot render the Flash content. In the example I’m looking at template number 24076, the text is as follows

FAIL (the browser should render some flash content, not this).

Most of the Flash templates come with a non-Flash version and asiI said before I wanted to have the best of both worlds, but maybe I’m just greedy. I want a Flash template that drops back to being non-Flash when it’s not  installed. I set about reading and researching this and at the end of the day, it was far easier than I’d imagined. We already have a space for some HTML that is rendered in the event of Flash not been installed and all we need to do is change what is rendered here.

If you look back at the non-Flash version of the website supplied you’ll see that the background to the menus uses a static image, and the buttons are a CSS unordered list. We can simply copy and paste the HTML from these pages into our Flash pages.

<div id="noflashheader">

<a href="index.html"><img alt="" src="images/logo.gif" /></a><br />

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="products.html">Products</a></li>

<li><a href="news.html">News</a></li>

<li><a href="team.html">Team</a></li>

<li><a href="contact.html">Contact Us</a></li>

<li><a href="faqs.html">FAQs</a></li>

</ul>

</div>

But that all looks screwy

That’s okay because we just need to do some very minor tweaks to the background CSS. If you didn’t already learn about CSS I suggest you go back up to the top of the post and read through the related webpages, if you really can’t wait this is quite straightforward and you can probably learn by example.

In the style.CSS you should find a class

/*header*/

#header .flash{ margin:0 -51px 0 -51px; position:relative }

In the layout.CSS you should find a class for header that looks something like this

/*======= header =======*/

#header {height:318px;  background:url(images/top.gif) no-repeat  bottom center}

With a little bit of changing these can be made to serve both purposes we just need to do some comparison between how the Flash version and the non-Flash version work.

In my example the style.CSS in the non-Flash version has some extra content for handling the menu and in the layout.CSS I can’t copy the header layout used in the non-Flash format so I just make a new class of header called #noflashheader and wrap the HTML in a DIV of that class.

So my amended files look something like this (the new content is in green)

index.html

<div>

<div>

<div>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"

width="980" height="290">

<param name="movie" value="flash/header3_fv8.swf?button=3" />

<param name="quality" value="high" />

<param name="wmode" value="transparent" />

<param value="false" />

<!--[if !IE]> <-->

<object data="flash/header3_fv8.swf?button=3"

width="980" height="290">

<param name="quality" value="high" />

<param name="wmode" value="transparent" />

<param name="menu" value="false" />

<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />

<div id="noflashheader">

<a href="index.html"><img alt="" src="images/logo.gif" /></a><br />

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="products.html">Products</a></li>

<li><a href="news.html">News</a></li>

<li><a href="team.html">Team</a></li>

<li><a href="contact.html">Contact Us</a></li>

<li><a href="faqs.html">FAQs</a></li>

</ul>

</div>

</object>

<!--> <![endif]-->

</object>

</div>

Style.CSS

/*header*/

#header .flash{ margin:0 -51px 0 -51px; position:relative }

#header {font-size:0.875em; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif }

#header .logo{ margin:90px 0 93px 82px   }

#header ul{margin:0 0 0 82px; padding:0; list-style:none;   }

#header ul .last{background:none}

#header ul li{ margin:0; display:inline; float:left; background:url(images/bg_menu.gif) top right no-repeat;}

#header ul li a{color:#090909; text-decoration:none; display:block; float:left ; padding:4px 30px 3px 29px}

#header ul li a:hover { text-decoration:none; color:#0c8fc6}

#header ul li .current{ text-decoration:none; color:#0c8fc6    }

Layout.CSS

/*======= header =======*/

#header {height:318px;  background:url(images/top.gif) no-repeat  bottom center}

#noflashheader {height:318px;  background:url(images/top.jpg) no-repeat top center}

This article is aimed at pointing you in the right direction rather than a step-by-step tutorial and I don’t have time to really help people one on one with their personal projects, but if you post questions, I will help when and where I can. I really hope this hopes someone who is trying to get this right on their own project and knows what the want but not where to start.