About us RCL 20 Projects Colour Selector Library
Projects
Contracting
Paola Kathuria
Frank Wales
Clients with several projects
the-racehorse.com
BBC
CRASH
Oxford University Press (1997-2005)
Redesign of OED Online
Redesign of OED marketing site
General & technical consultancy
Redesign of OED Online Help
OED Online Tour
OED marketing site
OED Online prototype
@ Limitless Innovations (2000-2003)
Berry Bros. & Rudd
Cardata
One World Telecom
Scott Morrison Photography
Sysao
Gratis & personal projects
Paolability Jewellery
Windsor Half Marathon
Psychology of Programming Interest Group
InetUK Usenet FAQ
Other sites by Paola
@ Limitless (1995-1999)
SilverPlatter Health & Safety Publishing
Institute of Physics Publishing
EU & UK ISP surveys
New Millennium Experience
Moorfields Eye Hospital
totally-essential.com
Cybersport
Ace Records
Embassy of Japan
Reuters Insurance Information Services
Carsource
IBM Global Networks
Barclays Bank BarclayNet
Sainsbury's Wine Direct
@ Zengrange (1984-1990)
HP-41 Emulator for HP-48
Technical services

Web site ~ Scott Morrison Photography

Paola Kathuria

2000

[Scott Morrison Photography home page, 2000]
Scott Morrison Photography, 2000 (graphic design by Jones Design Associates)

We worked with Jones Design Associates to design and build a small web site for the photographer, Scott Morrison. The purpose of a site was to generate interest in his work by people are sent a mailer, seen an ad or who have heard about him through word of mouth.

We started the project by reviewing other photographers' web sites; we wanted to see how photos could be navigated and what steps photographers took to protect copyright.

The site was to contain photos grouped by theme. We suggested the addition of an information pages and that thumbnails link to pages with the photo in a large size.

Icon- and colour-coding

[Section pages]
Icon- and colour-coded section pages (graphic design by Jones Design Associates)

Each section of the site was icon- and colour-coded. Every page included Scott's phone number and navigations links to the home page, the three photo theme pages and the information page. These links were implemented in a combination of a graphical button (to convey the section icon and colour) and an HTML text link.

The section colour was applied to the button, page tile, text label (unlinked) and telephone graphic. The section icon was applied to the section button and a section graphic.

The combination of graphic with an HTML text link has several advantages:

  • Section colour and icon can be easily conveyed in a graphic;
  • People recognise colour before shape and shape before text;
  • The use of shape and colour answers "where am I?" and "how do I get back to...?"

Button states

[Home page (level 1)] [Section page (level 2)] [Photo page (level 3)]
[Buttons (home page)] [Buttons (section page)] [Buttons (photo page)]
Button and HTML label states in the three site levels (L-R) home page, section page and a photo page

We asked the designer to make two version of the buttons, showing "clickable" and "unclickable" and made the decision that button labels would be implemented as separate HTML text links rather than be part of the button graphic.

When we constructed the web site, we used formatting of bold and section colour to denote the level of a page in the web site:

  1. Level 1: (home page) button clickable, text label linked;
  2. Level 2: (section page) button unclickable, text unlinked, in section colour and bold;
  3. Level 3: (photo page) button clickable, text label linked and bold.

Separate HTML text links have several advantages:

  • the text can be resized in the browser;
  • can be translated (e.g., with AltaVista's Babelfish);
  • they're easier to change;
  • quicker to download;
  • (usually) easier to read;
  • conforms to WAI accessibility guidelines.

Photos

[Photo pages]
Photo pages (graphic design by Jones Design Associates)

To present the photos at their best whilst not making them easy to copy, we decided to split each photo into four pieces.

Photos could still be copied by making screenshots; slicing the images made it cumbersome to save images from the page. It also thwarts robots which take copies of web site graphics and search engines which provide an image search facility.

[Sliced photo + drop shadow graphics
A sliced photo with separate drop-shadow graphics

Photo pages showed photos with a drop shadow - these weren't part of the photo graphics but were separate 16-colour graphics that were appropriately stretched and placed alongside the bottom and right edges of photos.

The advantage of this implementation is that the drop-shadow graphics could be cached and the photo compression level could be lower.

File size targets were set for thumbnails (5K) and larger photos (50K).

Pages tiles

[Page tile (shown 10% actual size)]
Page tile at 10% actual size (shown here bordered)

The design called for a cropped circle in the top-left corner of the page. Although Scott wanted pages to work with minimum vertical scrolling, we created tileable page tile images so that circles would appear complete at large screen resolutions.

Filenaming system

[skip to the end of this list of contents]
Graphics filename conventions
Prefix or formatMeaning
b-Buttons
b-????1Selected buttons (unclickable)
b-????0Unselected buttons (clickable)
b-tTelephone T graphic
h-Page headings
hh-Home page heading
s-Section graphic
pPhoto
pt-Photo thumbnail
pt-????-h.jpgPhoto thumbnail on the home page
p-Enlarged photo
t-Page tile
ds-Drop shadow graphics
- end of list of contents -

The manual also documented the file-naming convention used for web pages and graphics. We've used similar filenaming conventions for many years with web sites, for instance using a prefix b- for buttons and h- for headings in combination of a section name (or 4-letter id).

The advantages of a naming scheme include being able to locate specific images quickly and to be able to reference groups of files by their name parts.

Manual

Maintenance Manual & Style Guide Contents

Page types

  • General style rules
  • I. Home page
  • II. Section page
  • III. Photo page
  • IV. Information page

Photos

  • Thumbnails (pt-)
    • Dimensions
    • Drop shadow
    • Home page circle colours
    • Thumbnail filenames
    • Creating and saving thumbnails
  • Enlarged (p-)
    • Creating and saving enlarged photos
  • Replacing photos

Reference

  • Page headers
  • Type
  • Button & label rules
  • Web page filenames
  • Graphics filename conventions
  • Graphics
    • Buttons (b-)
    • Telephone number (b-t)
    • Page headings (hh-, h-)
    • Enlarged photo drop shadows (ds-)
    • Page tiles (t-)
    • Section icons (s-)

The web site was to be hosted by Scott's ISP and maintained by someone else so we prepared a maintenance manual and style guide.

[4 pages from the 22-page maintenance and style guide manual
Pages from the 22-page web site manual

The maintenance manual explained how pages were constructed and highlighted mark-up conventions; the style guide gave details of the section colours and how they were used. Step-by step instructions were given how to update or add new photos to the site.

After the site was made public, we spent a day registering it with the main search engines, sending a summary report to Scott. Scott commented that the quality of the large photos on his site were better than the ones he had at a well-known stock photography web site.