Web Design

Good web design is a blend of beauty and functionality.

A website should look attractive, and draw the user in with its visual quality. After all, the internet is largely a visual medium.

I like to design sites that are light and bright, with enough ‘white-space’ to allow easy reading of the textual content. Sites with content in a central column generally look much better than those that hug the left margin, or that extend the whole width of the browser window.

Graphics should complement the text, not distract from it. Colours should be chosen with care, and used to create the underlying ‘mood’ of the site. There should be unity and balance between various page elements, so that the page feels in harmony, not in discord.

The design should allow text-size to be increased without breaking the design of the page.

But a website that looks great is only half the story. It also needs to function well. A good looking website that functions poorly is like putting a lawn mower engine in a ferrari.

Separation of Content and Presentation

Badly designed websites use HTML tags to determine colour, font and other apects of the design. These HTML tags are often used for each new paragraph, and significantly increase the size of the HTML file - and therefore make the page take a longer time to open in a web browser. The big problem comes when changes need to be made. Font tags have to be changed on every paragraph of every page of the entire website, which can take hours, or days of work on a large site.

Using Cascading Style Sheets [CSS] removes all this presentational mark-up from the HTML file. The colour, fonts & other stylistic aspects of the site, as well as all positioning and layout, are handled by an external CSS file. The HTML stays clean, and changes to presentation are much simpler. A simple change to the CSS file will change the presentation of every paragraph on every page of the entire website.

The aim is to completely separate the textual content of the website from the rules that determine how that content should be presented.

Tables vs CSS

Many websites still use the HTML <table> tag to position design elements on the screen, and the HTML file gets filled with tables ‘nested’ within tables - it can become a real mess. It gets even worse if something has to be changed in the layout, because changing one table may affect other tables when they are deeply nested. A change to the site layout will often make it necessary to change tables on every page of the website, which can involve many hours work.

On the other hand, using Cascading Style Sheets allows all positioning and layout to be handled by the external CSS file. Using CSS to its to full potential allows the web designer to control the display of the web page more precisely than tables - and once again, simple changes to the CSS will instantly update every page on the site.