Nikon D80

Hugh's Photography

Some Rights Reserved

Intro

This site is my hobby, I do real work for a living :-)) so time is limited. My goals are to showcase results from my other hobby: photography and equally to play with and learn about web technologies Let me know wat you think about either (or both).

Design

The layout and styling are primarily intended to show photographs. That's why I have a dark grey background, on screen this usually gives the best color perception. I kept all text in a (very) light grey to minimize contrast, again so the pictures come out best. The same holds for the symbols like the previous and next image arrows in the galleries.

The layout is designed to be simple and intuitive; I find there are already way too many websites that shout at you with a riot of colors and flashy animations. The header consists of the usual stuff: a banner with an icon, "branding", menu and navigation area (and copyright). Then there is a content area, which in the case of a galery consists of a main picture in the middle and an thumbnail strip at the bottom. The site is heavily Javascript based, so you'll need it enabled in your browser, but that is pretty much standard these days.

Construction (for geeks :-)

This site is build using HTML for structure and content, CSS for styling, and Javascript for behaviour. AJAX techniques are used to download the main picture and the thumbnails.

The HTML is all strict HTML 4.01 or -in rare cases- XHTML. I try to validate all pages using the W3C validator. Because I only want to keep one copy of the menu, I use PHP to include the menu on the server side and generate the full HTML. In the future I may use PHP for other purposes as well, e.g. to filter out my private pictures unless you are logged in. Note: I wanted to use Apache's Server Side Include but unfortunately my service provider does not allow this to be configured. Also they did not allow me to configure Multiviews to hide the ugly file extention (".php" in this case).

All styling (font, color, alignment, etcetera) is done using Cascading Style Sheets (CSS). This also includes the operation of the menu, which is based on an example by Stu Nicholls of CSS Play an excellent site on CSS in general an CCS based menus in particular. The CSS is included as a seperate file, this is easiest for maintenance. The main problem here is to ensure that it not only works well on Mozilla Firefox (which I really recommend, it is an excellent browser) but also on Microsoft's Internet Explorer. Generally Firefox is no problem, as it is nicely standards compliant, but IE can be a major challenge, although this has become much better with IE8. Like for HTML, the CSS is validated with the W3C validator.

Finally, the site's behaviour is controlled by Javascript. This includes the loading of all images, scaling, and centering of the main image, and scrolling of the thumbnail bar in the galeries. The operation of the next and previous image arrows in the navigation area as well as the loading of external site links in a new window are also implemented using Javascript.

Typically I test the pages in the latest production versions of Mozilla Firefox (currently version 3.5) and Internet Explorer (currently vesion 8). Occasionally I will also check Opera and Apple's Safari. Depending on how hard it is (seems) I may give up and accept less than perfect behaviour (again, this is my hobby). If you have another browser where this site does not display well, please let me know. (but no old versions please - always upgrade, its almost always better for performance, standards compliance and security).