Gordon's WebLog

Just what does a visitor do when your carefully designed web site first appears before their eyes ? What part of the page do they look at first ? How far down do they scroll before leaving your home page. What are the important areas of your page ? How about the text size ? And what about graphics ?

These and many other questions were used in experiments on web users by Eyetrack and their web site makes very, very interesting reading.

It seems that there are certain patterns which visitors eyes tend to follow when looking at a web page. There are a couple of interesting graphics (reproduced below - click the image to view the original larger version) which show "heat maps" of the most important areas of the page, and the track visitors eyes tend to follow.

One very interesting thing that came out of the research was that smaller text tends to be read more then large text, which tends just to be scanned.

Although the research was carried out a couple of years ago, I think it makes very interesting reading and may provide clues to web masters and bloggers when designing web pages. Do have a look at the site - you can even download a 300 page pdf file of all the results to keep as a reference.

Related to this subject, but on a different web site, there is a posting here which may shed more light on the subject.

Once again the web site is at Eyetrack.

On many web sites you will see blocks of information surrounded by rounded corners - a most pleasing effect.

Whilst this is fairly easy to implement using graphics, there are other ways. Recently I have been investigating a system called Nifty Corners

See HERE for a very full and recently updated explanation of how to achieve this effect.

BAsically, it's all done with DIVs, CSS sytles and a little bit of JavaScript magic. The interaction of the various JavaScript and CSS elements is a bit daunting at first, but is quite logical. I have posted a test web page using this system HERE.

Several people have suggested that I show visitors small picturs of my various web sites - so here they are. You may use the menu at the top of this screen to visit the various sites, or just click on the small pictures.

First, of course, this web log.

The template used for this web log is my own port for Thingamablog of an open source template for Serendipity by Rebecca Hemstad (BEX).

Next my own personal web site.

This site uses an open source template by Dave Reeder Design.

My photo gallery.

Finally, but not least, my church web site.

This site is based on my own template developed for the Etomite Content Management System, a brilliant PHP/MYSQL system.

I've just come accross a wonderful new template by Dave Reeder called Fluidity, available here.

I am now using it on my own web site

Do have a look. I think it's great.

Careful testing of any webpage should be top priority, so it's been validated and tested the template in the following browsers:

Internet Explorer 5.5, Internet Explorer 6.0, Mozilla Firefox 0.8, Opera 7.54u2, Netscape 7.2

Controlling the columns

One, two, three or even four columns, in any mix on a page, all done with css.

Of course, the columns do not have to be of equal proportions. You could specify one column that was a quarter of the screens width and another which was three quarters. Simply specify a column in the xhtml with a class name that corresponds to the relevent column in the CSS.

I have somewhat adapted the template port by Anislie Johnson, and added a small amount of css from andreas04 (the orange backgrounds to the post headers), and I think it looks quite good.

Oh, and MOST important, I have added a print-preview css file, basically the site css file with most elements marked as "display:none;" and all colours changed to black.. It looks good.

Here is a screen shot.
>

Illustration at the end of the page.

NOTE. There is also a TAMB port by Ainslie Johnson which is used on this TAMB blog site.

New Features:

A new horizontal menu that will support multiple levels of sub-pages.

Parent page and current page highlighting.

Now features 14 different colours to select from.

Colour coded links to match the header colour.

The new horizontal menu is controlled by the WP-PagesNav plug-in by Adi Sieker that has been modified and inserted into the theme functions file. The plug-in is coded into the theme because the menu just won’t work without it and it seemed to be an easier option for the end user than having to download and install the plug-in separately.

Illustration at the end of the page.

Many thanks to Martin Mihalev for the smashing Rusty template.

Just a little bit different. Great use of colours and graphics, fast to load.

It really is SUPERB ! Well done Martin.

Illustration at the end of the page.

Yet another template theme by Andreas Viklund which has been "WorPressed" and "Widgetized".

Lovely colour scheme, with left hand contyent and 2 righ hand sidebars. A really splendid theme.