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 ~ Psychology of Programming Interest Group

Paola Kathuria

1995-2002

[Home page]
PPIG home page, December 2002

Paola was responsible for the web site of the Psychology of Programming Interest Group (PPIG) for nearly eight years. During that time, the site went through three designs and documented PPIG's fourteen annual workshops.

The site was completely redesigned and converted to CSS in December 2002, before it was handed over to another volunteer for hosting and maintenance.

Paola created the first PPIG web site in early 1995, before starting Limitless. PPIG organises annual workshops; its web site supports existing members by publishing workshop details whilst encouraging new members with PDF versions of workshop papers, and photographic workshop reports.

PPIG is a friendly and informal group with members from all over the world. Its annual workshops have taken place in France, Belgium and Italy as well as around the UK.

First redesign (1996)

[PPIG home page, before]
PPIG home page
1996-2002

The site was redesigned in 1996 to make use of the latest HTML standard, such as the addition of background colours.

Pages used a pinkish-brown background. The home page featured a pig's head in the style of a phrenology diagram, page headings were implemented as graphics with different shapes and the site navigation was in the page footers.

Second redesign (2002)

Paola redesigned the site again at the end of 2002 before handing it over to the new maintainer:

[Section graphic for the 'About PPIG' section]
  1. she assigned each site section a unique colour and shape — these have been applied to buttons, decorative section graphics, breadcrumbs, text and background colours
  2. the entire site was put through tidy to aid the conversion from the old HTML to CSS styles
  3. she then moved styles to external stylesheets for screen and print, as well as an additional stylesheet that Netscape 4.7+ would ignore
  4. the print stylesheet was written to hide navigation elements only needed for the screen
  5. she moved the site navigation to the top of pages
  6. a link to the home page was added to the new navigation panel in the form of the PPIG logo
  7. all functional text was taken out of graphics (such as page headings and the site name) and implemented in HTML; this allows the text to be resized and translated
  8. she took the main content out of tables for layout; this follows early results from limov.com's preferences page, as most people choose stretched lines (that is, text fills the available width of the browser window)
  9. all local navigation lists were placed on the right-hand side of pages
  10. she chose a light grey for the colour behind the main content — it's not a colour from the "web-safe palette", and it will shift to the lightest grey
  11. she created a consistent style for links to related pages and links to headings on the current page
  12. she added location breadcrumbs to all pages

Navigation panel

The new navigation panel includes the site name in text, the section links as combined graphical button and text label, a link home and a colour-coded section graphic. In this panel and the breadcrumbs, the HTML links are in the section colour.

[Section panels, after] [squashed navigation panel - 334px wide]

The mark-up style allows the whole page to become very condensed without the need for horizontal scrolling (335 pixels). This is useful in high-resolution environments where multiple browser windows are not uncommon, and also on devices with smaller screens, such as PDAs.

Button states

Besides applying a unique colour and shape to the main sections, Paola introduced three button and link states for the main navigation panel dependent on whether a link should be clickable, selected or both:

  • clickable means that it is an active link, and that clicking on it will take you to another page (a section page)
  • selected indicates that the page is in that section

The sets of links below are as interactive as those in the actual site's navigation panel; the links are to pages on the PPIG web site (www.ppig.org).

Level 1

All section buttons are unselected and clickable.

about   newsletters   workshops   resources   contents

Button labels are hyperlinked in the section colour. Buttons are in the section colour and have a white border. Mouseover shows the level 2 version of the the buttons and the text links become blue and underlined.

Level 2 (section page)

The current section button is selected and unclickable.

about   newsletters   workshops   resources   contents

On a section page, the section's button is selected (you're in that section) and unclickable (you're on the page the button would link to). The section button is in greyscale — its border is in the section colour. The text label is bold, unlinked and black.

Level 3+ pages

The current section button is selected and clickable.

about   newsletters   workshops   resources   contents

On pages within a section, the button remains grey but has a white border. The text label is bold, in the section colour and a link. Mouseover shows the selected and unclickable version of the button (consistent with its appearance after you click on it), and the text label is shown blue and underlined.

Main changes

Next, five pages are compared from the old and new design (shown here at the same scale).

Home page

The image map was removed as well as the text in graphics. In the new design, the introduction, section links, PPIG logo and latest news fitted into a smaller space. The section graphics are coloured versions of the 1996 graphics, which were based on the PPIG logo.

PPIG home page
(after the 1996 redesign)
[PPIG home page, before]
   
PPIG home page
(after the 2002 redesign)
[PPIG home page, after]

Newsletters

The contents of each newsletter were moved to a panel on the right-hand side of pages. The main headings were given a background colour in the section colour to visually divide the sections of each newsletter.

Original newsletter
[Newsletter, before]
   
Redesigned newsletter
[Newsletter, after]

Workshops

Previously named by the workshop number (such as 11th annual workshop), workshops were renamed by year. Links for each workshop were moved to the right-hand side of the page. Links to the annual and extra workshops are at the top of the page. Background colours in the section colour are used to distinguish one workshop from another.

Original workshop index
[Workshop index, before]
   
Redesigned workshop index
[Workshop index, after]

The presentation of workshop programmes and information has been standardised, with the help of external stylesheets. Links to papers are marked according to whether they were local, off-site, to web pages or as downloadable files.

A standard header style was created for workshop pages, to include the workshop name, date, venue and page heading. Links to other pages related to the workshop are in a "See also" panel on the right-hand side of all the workshop pages, where appropriate.

Original workshop programme
[Workshop programme, before]
   
Redesigned workshop programme
[Workshop programme, after]

Site contents

The site contents page is included in the main navigation panel as the last link. Pages on the site are listed in three columns, grouped by section. The section button or colour-coded squares are used to show each page's depth in the site.

Original site contents
[Site contents, before]
   
Redesigned site contents
[Site contents, after]
[Maintenance guidelines, new]
Submission guidelines

Submision guidelines

Besides the public pages, the PPIG web site includes a private section describing guidelines for people who want to submit material to the site.

Maintenance manual

Paola also provided an illustrated manual for the new maintainer in web form. It covers topics such as the house style, mark-up conventions, stylesheets, button states and graphics.

Mailing lists

The two PPIG mailing lists, announce and discuss, have been active since 1996. Paola administered both lists until 2008.