A few short months ago, I decided I wanted to make a site which incorperated all my interests, a page that I could easily update anytime I want to, even easily changing page layout. After reading several articles about standards compliant code & interface design, I came up with my design philosophy.

My Web Design Philosophy

• My website should use standards compliant code.
• My website should have an intuitive interface.
• My website should look clean & attractive.
• My website should load quickly.

There were a few more considerations than that, but I narrowed everything down to this. Today we'll be examining these criteria in detail.

Use Standards Compliant Code

What really got me started on my move toward standards compliant code was this article on Netscape DevEdge. It was their wish to be able to showcase what standards compliant code can do for a site. They had many of the same design goals I had in mind.

What qualifies as compliant code? Put simply, it is markup that complies with W3C standards for web design. This makes it easy to design a web page which will display correctly, regardless of what browser someone is using.

You can learn to write standards compliant code several places. I'd recommend the most excellent W3Schools.com HTML Tutorial

Have an Intuitive Interface

I certainly didn't want users of my website to have to hunt/search/pray for everything they wanted to find on my website. The number one reason why people don't use websites is because they can't find what they are looking for. That's why I split everything up into categories, then further devided them into subcategories. You can easily navigate to the section you want by looking at the links at the left side of the page, or using the menubar at the top.

I'm sure that this makes my site look similar to many other sites out there, but what this means to me is that this is a tried and true formula for sucess. Many of these site designs came as a result of useability tests to see if people can navigate their sites easily.

What's the best way learn good web design techniques? By looking at bad web designs. WebPagesThatSuck.com gives example of some of the best of these. You can also check their Daily Sucker for more examples. One favorite I've found is some guy's game page. Some of the games are pretty cool, but there's no desciption of any of the games just a title for each (almost hidden). Please use caution if you decide to use flash files for a web interface.

Consistancy goes hand in hand with intuitiveness. If pages look & feel consistant, users will be more likely to find what it is they're looking for. Bottom line: don't change styles with every page on your site.

Despite all your trying, some users will not be able to find everything for which they look. The easiest way to correct this is by adding a simple search panel near the top of your pages.

Look Clean & Attractive

To say nothing of the actual content of the site, I wanted my pages to look clean, sharp & attractive.

Articles on my site have a black border & white background so you can easily destinguish between content, navigation, & decoration. This is in sharp contrast to what one of my first designs years ago looked like. (Yes, I used to be guilty). Text should be highly highly contrasted from it's background but not in a way which may hurt your eyes to look at it.

Beauty is is only skin deep, but ugly goes straight to the bone. You should avoid the use of lots of pointless flashy animation, scrolling text & defining page sizes that may be larger than the resolution of your users.

Load Quickly

It's very important that your pages load quickly, a majority of internet users have dail-up connections. The over-use of large pictures, flash animations & scripts can be detrimental to your site.

In order to make the smallest pages possible, you should probably use Cascading Style Sheets. Using a minimum of HTML markup, you can use CSS to position anything, give it borders & color, change font attributes, & much more. To learn more about CSS, you should take a look at the W3Schools.com CSS tutorial.

In those cases when you absolutely need to use large pictures, you should select an image format that supports compression. The three most popular types of images on the intenet are GIF, JPEG, & PNG. I've choosen PNG because of the size of the files which it produces & the fact that it's compression is lossless. For more information about the best way to compress your images with PNG, you should read this article.

Sometimes the usefulness of a script can far outweigh it's performance hit that your site will take from using it. Sometimes non-compliant browsers can cause problems for the effects you want & you have to use scripts. Somtimes you just have to use scripts to get the effects you want. Smart (& sparing) use of scripting can help you with your problems. I'd suggest no more than two scripts for your pages. Often effects you want to script can be handled with smart use of CSS.

Tools of the Trade

We're not going to be using a WYSIWYG editor like FrontPage or Mozilla Composer to produce HTML pages. The HTML produced from these editor is bloated & often not standards compliant. These tutorials will lead you through creating hand written HTML markup with the following tools: The Gimp for making images, NoteTab Lite for the page editing, and HTP for templating. Gimp & HTP are open source & freely downloadable, NoteTab Lite is a freeware version of NoteTab.

The Gimp

The GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software suitable for such tasks as photo retouching, image composition and image authoring. Although it looks a little primative & it's not very at first intuitive, it's got some very powerful features. You can work with layers, add text, work with filters, clone & do many other things you see people doing in Photoshop.

NoteTab Lite

NoteTab Light is the ultimate free Notepad replacement and a capable HTML editor. You can quickly move around a stack of large files with it's simple tabbed interface. NoteTab also sports a clipbooks which will help write some of the markup for the pages.

HTP

Htp was intended as a HTML pre-processor. It is able to preprocess HTML, XHTML, XML and CSS files (htp could process any text based files). Its purpose is to assist you to maintain a consistent "look" over an entire set of web pages. This is done by allowing you to define your own tags as abbreviations for sets of standard HTML tags.