How to use templates for fast website redesign
by ZetaGecko | 6 Comments | Web Design
When was the last time you made a design adjustment to every page of your website? When was the last time you wanted to make a design adjustment to every page of your site? If the two dates aren't the same, I'm guessing that you're not making optimum use of website templates. Today, I'll discuss the whys and hows of using templates for fast website redesign.
Let me start off by saying that the two dates aren't the same for me. I've been wanting to add my photo to some of my blogs, put a nice photo into the header of others, and completely rearrange the layout of still others. Why do I keep putting it off? Because, although my blog pages are all template based, if I want a template change to be reflected on all of the pages of the blog, I have to republish the entire blog. Today, beginning with Extreme Website Makeover, I'm switching to a modularized blog template so that most of the design elements will be updatable across the entire site by modifying and uploading a single document. So, let's get to the details.
On my non-blog websites--sites that I build by editing and uploading each page, as opposed to using blogging software (Blogger, to be specific)--a consistent layout and quick updatability are achieved by creating two documents for each page, and using a template to hold it all together. The hierarchy of my website dirctory looks something like this:
/www-root
/website-a
/index.php
/document1.php
/website-b
/index.php
/document1.php
/tmplts
/website-a
/layout.php
/content
/index.php
/document1.php
...
When a web browser requests www.website-a.com/document1.php, it gets /www-root/website-a/document1.php. The contents of document1.php look something like this:
<html><head>
<title>This is document 1</title>
...
<?php
$content='document1.php';
include '/www-root/tmplts/website-a/layout.php';
?>
As you can see, not much is happening here. Let's look at layout.php, which is responsible for the overall look and feel of the site:
<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/menu.css">
<script src="/js/menu.js"></script>
</head><body>
<div style="position:absolute;top:17px;width:770px;padding:8px;">
<?php include "/www-root/tmplts/website-a/content/$content"; ?>
</div>
<?php include "/www-root/tmplts/website-a/menu.php"; ?>
</body></html>
This is a fairly simple example of a layout template. It imports the site's main stylesheet; loads a stylesheet for the menu; loads a JavaScript that runs the menu (side note: the JavaScript for the menus I use on some of my sites is only used by certain browsers, like Internet Explorer, which aren't able to use pure CSS menus. More on that some other time); loads the content of the page (/www-root/tmplts/website-a/content/document1.php) in a div that's 17 pixels from the top of the page, 770 pixels wide, and has 8 pixels padding; and loads the menu itself (which positions itself in that 17 pixel gap at the top of the page).
One question that might arise, which will help to illustrate the power of site templates, is why the menu is in its own file rather than in the layout file. I do that partly because it keeps things cleaner and simpler. But the main reason is that I use the same menu in conjuction with a variety of layouts for various websites. So while I can change the layout of one entire website by modifying layout.php, I can update the menus for multiple entire websites by modifying menu.php.
So, if I decide that I want to put a photograph below the menu on all of my webapges, what do I have to do? I change layout.php to look like this:
<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/menu.css">
<script src="/js/menu.js"></script>
</head><body>
<div style="position:absolute;top:57px;width:770px;padding:8px;">
<img src="/img/sitebanner.jpeg" alt="..." style="top:17px;width:770px;height:40px;" />
<?php include "/www-root/tmplts/website-a/content/$content"; ?>
</div>
<?php include "/www-root/tmplts/website-a/menu.php"; ?>
</body></html>
Easy! Just move the content div down and position the image in the space that just got opened up.
Like I said, this is a pretty simple layout template. A more complex layout might have a header, a navigation bar running down the left side, some links and a copyright statement at the bottom, etc. However simple or complex it is, it makes it very easy to update the layout of every page on the site without having to repeat the same changes over and over and re-upload every page.
In the case of a Blogger-powered blog, things look a little bit different because Blogger doesn't support the splitting of a page into two documents (one in /www-root/website-a and one in /www-root/tmplts/website-a/content). The way to handle that case is to move everything but some of the document header, links to the archives, and the blog posts out of the template that you upload to Blogger, and put those parts into a few different documents that sit in your templates directory. Your Blogger template ends up looking something like this:
<html><head>
<title><$BlogTitle$><Blogger><ItemPage> - <$BlogItemTitle$></ItemPage></Blogger></title>
<BlogSiteFeed><link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedURL$>" /></BlogSiteFeed>
<$BlogRSDUrl$>
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" />
<?php
$blogsubdir='extreme';
include_once "/www-root/tmplts/blogs/$blogsubdir/first.php";
?>
<Blogger>
<BlogDateHeader>
<h3><$BlogDateHeaderDate$></h3>
</BlogDateHeader>
<BlogItemTitle><h2><$BlogItemTitle$><a name="<$BlogItemNumber$>"> </a></h2></BlogItemTitle>
<div class="blogPost">
<$BlogItemBody$><br />
<div class="byline">
// posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemDateTime$></a>
</div>
</div>
</Blogger>
<p id="bloggerBug"><a href="http://www.blogger.com"><img width="88" height="31" src="http://buttons.blogger.com/bloggerbutton1.gif" border="0" alt="This page is powered by Blogger. Isn't yours?" /></a></p>
<?php include_once "/www-root/tmplts/blogs/$blogsubdir/second.php"; ?>
<h6>ARCHIVES</h6>
<ul>
<BloggerArchives><li><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></li></BloggerArchives>
<ArchivePage><li><b><a href="<$BlogURL$>">Current Posts</a></b></li></ArchivePage>
<ItemPage><li><b><a href="<$BlogURL$>">Current Posts</a></b></li></ItemPage>
</ul>
<?php include_once "/www-root/tmplts/blogs/$blogsubdir/third.php"; ?>
As you can see, everything on the page except that parts that Blogger needs control of has moved out into first.php, second.php and third.php. Thus, the blog's layout and appearance can be modified by editing those three documents without having to republish anything from Blogger.
Two important notes if you're going to do this with a Blogger-based blog! First, you'll need to change the filename extension of your blog filename (in Settings > Publishing) to whatever is appropriate for your system to enable server-side processing--".php" in my case. Second, if you enable server-side processing of you blog pages, do not enable comments! Doing so would enable visitors to your blog to insert code into your pages which would be executed by your web server--a serious security risk! (I reported this to Blogger a few months ago with suggestions for helping their users to stay safe--hopefully they'll take action on it soon).
Expect some changes to the layout of this blog soon.
August 15th, 2005 at 3:31 pm
Definitions of Redesign on the Web:
a term which, in Reliability Centered Maintenance, means any one-off intervention to enhance the capability of a piece of equipment, a job procedure, a management system or people's skills
http://www.plant-maintenance.com/terminology.shtml
Changes to an existing workplace or to production equipment to make it suitable for more employees; also, the reexamination of job requirements and their patterns of occurrence. Redesign is more expensive than incorporation of ergonomic principles in the initial design of a job.
http://www.workriteergo.com/ergonomics/glossary.asp
To change existing work environment making it more suitable for the employees comfort and productivity.
http://www.ergoworkstations.com/glossary.htm
design anew, make a new design for
http://www.cogsci.princeton.edu/cgi-bin/webwn2.1
August 15th, 2005 at 4:37 pm
Is there a point to the preceding comment? I'd think it was comment spam and delete it--and I may yet do that--but it doesn't contain any actual links (just URLs--one of which is invalid, by the way).
August 16th, 2005 at 10:39 am
You're right. One of the links is now invalid. I'm sorry. Nerver wanted to spam anything. Just thought there could be a posibility for linkshare. And as I'm right you're looking now on the comment.
Are you interessted in a linkshare?
It would be my pleasure to receive your eMailanswer to globalnet@gmx.de
thx a lot in advance,
chris
October 10th, 2005 at 1:59 pm
Hi Antone,
I used a dreamweaver template for this site
http://www.greathomessonoma.com
I like the simplicity, but Evertime I need to change something on the template, I would have to apply the changes to all pages in the site then upload every page to the server. Is there an easier way to do this? Can I just apply the template chage directly to the files on the server?
March 3rd, 2006 at 5:13 pm
Your idea is a good one, but you'd be better off using a PHP templating engine like Smarty.
http://smarty.php.net/
March 5th, 2006 at 12:01 pm
Manila from Userland is a great templating blog/website system - the original "Edit This Page" technology and you can try it out at http://clubhause.com