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
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]

she assigned each site section a unique colour and shape — these have been applied to buttons, decorative section graphics, breadcrumbs, text and background colours
the entire site was put through tidy to aid the conversion from the old HTML to CSS styles
she then moved styles to external stylesheets for screen and print, as well as an additional stylesheet that Netscape 4.7+ would ignore
the print stylesheet was written to hide navigation elements only needed for the screen
she moved the site navigation to the top of pages
a link to the home page was added to the new navigation panel in the form of the PPIG logo
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
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)
all local navigation lists were placed on the right-hand side of pages
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
she created a consistent style for links to related pages and links to headings on the current page
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.

[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
(after the 2002 redesign)

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

Redesigned newsletter

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

Redesigned workshop index

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

Redesigned workshop programme

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

Redesigned site contents

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.