A Beautiful Baby Of A Design

Having chosen Blosxom as the engine for driving this blog, I next needed to think about the template. I had a very clear idea about the navigation structure I wanted, but the design itself and its implementation took quite some thinking about.

Best Tools For Blog Website Design

A couple of years ago, when I built websites for friends or myself as a hobby, I used Microsoft Frontpage. I had no time to learn Dreamweaver. Frontpage was fairly intuitive to use and suited my purposes. But, then I learned about CSS. What a revelation! What a change to the way I build websites.

The ONLY software tools used to build this site:

• NOTEPAD2. A great little text editor, designed as a setp up from the Notepad that comes with windows.

• PAINTSHOPPRO V9. I usually prefer free or open-source software but I hate the Gimp. PSP is great.

• FIREFOX with the WEB DEVELOPER extension. What a fantastic tool. When you switch it on you can directly edit CSS in-browser to see the effect on the live page. So many other features. Sometimes, I will use the FIREBUG extension which has some similar features but is a more complex to use.

• FILEZILLA for FTP. It works perfect and does everything I need. You can set it so that when browsing your remote directory, by clicking on a file it automatically pulls the file into Notepad2; when editing is complete it will automatically re-upload the file back to the remote directory.

• FASTSTONE CAPTURE. A truly great piece of free software. I use it every day. It has a very easy colour-picker tool, as well as being able to capture full-screen, part-of-screen, or even a complete web-page (by automatically scrolling the window).

That's it. No Frontpage. No Dreamweaver. Just Notepad and a few utilities.

The Layout and Design - Online Resources

I wanted the design to be simple, but with enough 'panels' for navigational elements as well as content. Also, I am not a designer and don't have a lot of time to try to do anything fancy... I am not one for re-inventing the wheel.

Here are the online resources I used:

• YUI Reset CSS This code is used at the top of the CSS stylesheet to reset fonts and settings, to make sure the look of the site is consistent across all browsers. In fact, I use the 'Foundation' code which includes Grids as well.

• Grid Builder this is a very useful tool for creating a standard CSS-based framework. For example, it generates the code to make a 3 column CSS template instantly. There's plenty of flexibility as to number of rows, columns, column-widths, etc.

• RoundedCrnr this amazing tool creates the CSS, HTML and images for the rounded panels on this site - both the solid background as well as the rounded borders. Chuck at Roundedcrnr asks for a small donation, but it is well worth it.

• ColorSchemer an easy to use tool for picking colours.

And that's it. A small selection of tools, but powerful.

tag:geek