External Websites:   Ext Link 1 -  Ext Link 2 -  Ext Link 3
Wondering why this website looks different when printed? An additional set of options has been added to make the website better adapted for printing.


^top Introduction

Hi! Welcome to my third design for OSWD. With this design I decided to follow a different way of designing, with a very full page layout rather than small bits floating everywhere. It is also quite a bit more formal than my others, and has the added advantage of a side bar for sub links when required. The colours evolved from the mountains picture, but I've delibrately kept the picture simple so that in theory you could either get rid of it completely or substitute it for something of similar dimensions. This can be easily achieved using simple cropping tools found in most images editing programs. The original picture is from valdisere.com, and is a free wallpaper that they provide.

This version (bf1) was submitted to OSWD literally minutes after the first, as I found a bug that came up after I'd changed something as a result of the validation. I only checked it in MSIE - bad move...! It now displays fine though. Also, Mozilla doesn't like the body margin:0px being defined externally for some reason, so I've done that through the tag directly.

^top About the Scripting

This website is written in XHTML 1.0 Strict, and uses DIVS for main layout, but with a few tables to get the colour blocks displayed correctly. As such, the website depends on CSS for layout, but it is useable without. It makes use of h1 and h2 tags to allow it to be used without CSS. Hidden headings also appear to explain the layout when CSS is not available.

A print stylesheet is provided. It removes non-necessary elements such as navigation, and cleans the page up, so that it spans the whole page. It also prints in black and white. If you are going to use this design including the print stylesheet, please remember to tell your users why their printed copy is different. I have done this with a no-display-s span (see the code for more details).

^top Browsers and Accessibility

So far, this website has been tested and found to be fully compliant with Internet Explorer 6 SP2, Opera 7.53 and Mozilla 1.7.1.

In MSIE, all font sizes work correctly. In Mozilla and Opera, all font sizes up to 130% are fine.

It has been found to display correctly on displays from 1024x768. At 800x600, the external links and main links wrap as they are in tables, but they are still perfectly readable. If you were to remove the tables and have the bars as a solid colour, this problem would disappear. (But then again, it would be boring...)

^top Using the Template

You are most welcome to use this template for any of your needs. Please send me the URL if you do, and keep the designer references that I've written in. If you have any problems with the design, please feel free to drop me a line and I'll do what I can to help. My email address is andrew_j_t@tiscali.co.uk.