I’ve been busy redesigning the site which is why I’ve been quiet recently. It’s the first change in appearance since 1999, and long overdue. Although back then the site looked pretty modern, perhaps even advanced, it’s been looking rather dated for some time now.

I also took the opportunity to move away from tables for layout. Waiting for widespread CSS support to allow this is one of the reasons I put the redesign off for so long.

If you’re still doing your websites the “old” way and using tables to position elements on the page, all you really need to do to switch to CSS positioning is replace each table with a

tag and unique ID.

Here’s a simplified example to give you an idea:

<.div id="main_table_replacement">
<.div id="content_table_replacement">
CONTENT HERE
<./div>
<.div id="navigation_table_replacement">
NAVIGATION HERE
<./div>
<./div>

Then in your CSS file you will define the size and appearance of each section, e.g.

#main_table_replacement {

background: #FFFFFF
width: 800px;
margin: 0;
padding: 10px 10px;
text-align: left;
font-family: Arial, serif;
font-size: 1em;
}

I’m not going to explain the CSS above. My purpose here is just to let people see that moving to a CSS layout is not something really complicated and difficult. Once you grasp the idea, it’s easy enough to look up the bits of CSS you need from the [CSS section on W3.org->http://www.w3.org/Style/CSS/learning]. Alternatively, there are several applications which enable you to create a CSS file using a WYSIWYG interface, which at a minimum will teach you what different CSS commands do. Although I’ve not tried it, [Xylescope->http://www.culturedcode.com/xyle/] is an application that enables you to analyze the underlying CSS for any website by simply clicking on the page to see how aspects of the design are created.

I’m hopeless at design, so what I’ve come up with is clean and simple (you might call it bland), but it serves its purpose, namely:

1. Give an up-to-date appearance
2. Divorce code from content
3. Speed up page load

Whilst I haven’t gone for a full-blown database website, I have taken the opportunity to move to dynamic pages and template files using PHP. So I still have real pages in directories, but they contain nothing but content. All the HTML is in the templates. When a file is requested, the page elements are “pasted” into the template and displayed in the browser. I went this way instead of using a database for 3 reasons:

1.To switch to a DB driven site I’d need to spend time educating myself or explaining my requirements to someone else.
2. I’d then need to spend even more time feeding all the current content into a database. Modifying static HTML files is faster because I can do multi-file find and replace routines to strip and re-organise the file’s contents
3. As far as I can tell, I wouldn’t be able to update the website piecemeal as I am doing now. The advantage of this is that I can do a section here and there as time allows, doing the most important areas first without any downtime or missing pages.

Although I’ve not applied the new design to this section yet, I have prepared the Wordpress theme files and expect to get around to testing sometime next week when I get back from Singapore. You can see how it will look [here->http://www.nowsell.com] (still needs some tweeking, but basically that’s it).

No Responses to “ Site Redesign ”

Comments:


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>