February 23rd, 2009


Help designing your website

In the past, websites were easier to make. You just drew a bunch of tables (probably using Dreamweaver or some other software) and slotted your content into the table cells. You didn't much worry that you were using tables inappropriately, that you were making things far, far harder for yourself in the future and that you were going to completely confuse blind users.

Things moved on, of course, and people started to think about standards, future development and accessibility, and good web designers turned to CSS (cascading style sheets) to lay out their pages.

There's a basic principle to this: You build your website in layers.

The first layer is the 'content'. This is the HTML some of you are familiar with. You start building your site by putting in your content in plain HTML. You don't include anything to do with the appearance of the website or its layout. This is pure content. No colours, no fonts, no tables-for-layout. You leave everything in the default settings of the browser. You should only have your text, images, forms and markup (html code).

When you look at this in a web browser, it looks boring. It looks a bit like a Word document that you've typed in straight.

This is what you want.

You now apply the second layer. This is the 'design' layer. The appearance, if you prefer. This is where you put in all that fantastic design and layout you want to make your site look fantastic. You'll be changing fonts and colours, adding background images for decoration, shifting elements around. Anything that might be called design.

You do this with your CSS, and you put all these styles in a completely separate stylesheet.

The problem with this, of course, is that while it's relatively easy to find out how to change the colour and size of text and add background images with CSS, it's not so easy to work out how to do the layout of the site if you've never done it before.

And if you never have, and you only want to build your own website, you probably decide it's not worth learning.

There have always been plenty of free layouts on the web for you to use, but finding one that works feels more effort than it's worth.

Enter Jacob Myers who has put together a collection of 224 different basic website layouts, all of which work on any decent browser (and several indecent ones... Internet Explorer, I'm looking at you...). You can find them at: http://layouts.ironmyers.com/

Just about any layout you might want is there.

These layouts were all created by Yahoo!, who know what they're doing, and are just compiled here into an easy-to-grab selection.

All this might seem a little over-complex. After all, if you can do it with tables, why would you go to all the trouble of using stylesheets?

Well, the answer is redesign.

At some point, you're going to want to change the way your website looks. If you've done it all the old way, you're basically going to have to start all over again. If you've got two pages, that's not so bad. If you've got 50, it's a pain the butt. If you've got over a hundred, you're going to be tearing your hair out by the time you're done.

With CSS layouts, you can simply swap your stylesheet, make a few minor changes to your HTML, and you'll have a new layout without recreating each page. (Note that the Yahoo/Myers examples require more fiddling with the HTML than you would normally do if you'd created your layouts yourself, but it's still very little by comparison.)

I should also mention that there's a third layer to websites, that of 'behaviour'. Behaviour is the 'added extras'. The user-interaction, if you like. That's done with JavaScript, and I'm not going into it here.