Site Design
Chris Ryan [21030691] <chris@rhodeschroma.com>This page details a few of the design decisions made when putting together the latest major revision of the site, launched in January 2005.
Visual/Information Design
There are several notable aspects of the visual presentation of information developed for rhodeschroma.com.
The appearance of the site has always been tied to the Chroma's front panel design, at least for the main navigation (see the original panel; version 2.x of the site also had a ChromaTalk archives panel and Service Bulletins panel which were eliminated for version 3). For the third major revision of the site, the Chroma "visual language" was extended to the side navigation bar and, to an extent, page content.
Left Panel Navigation
The graphic at right shows various components of the left side navigation panel design (Sub-sections never appear at the same time as features, so the example is not realistic in that sense).
Section Title
"SITE SECTION" corresponds to the main navigation panel section button (e.g. HISTORY). It links to the main section page, unless that is the current page.
Page/Subsection title (not selected)
The appearance of a page (or subsection) that is not active is plain text without any borders.
Feature
This represents a non-active page (or sub-section) and is an functionally equivalent to the page/subsection title (and, when displayed, appears in its place). It is used to emphasize or "feature" a page which may be related to the current (active) page. The standard Chroma button is adapted to encompass a graphic.
Page Group
A non-active element that serves as a title for the pages below it.
Current page
The active page is displayed with an outline adapted from the standard Chroma panel button (the thick border is moved to the left side rather than the top). Orange buttons appear only on the left panel of the instrument, and are similarly used only in the site's left panel.
Hover state
A non-active page with a rollover (pointer hover) effect. White buttons only appear on the Chroma's left panel.
Subsection
A group of related pages. The group is only expanded when one of its pages is active; otherwise it appears as a Page/Subsection title. When the main page ("SUBSECTION" in this example) is current, there is no highlighting; when one of the sub-pages is current, its title is displayed in orange.
Alignment of Items
The blue guide shows the left alignment of text and features in the navigation bar. Active pages (including hover states) and subsections use the left margin to show state. The "features" do not as they are not active.
Other
The end of article marker 
is a small representation of the Chroma button design; the site also sports a "favourites icon" (favicon.ico, displayed in most browsers' address bar and bookmark menus, and displayed inset) that is colour and slightly more detailed, and suggests the Chroma's primary patch parameter (or first stored program).
Grid
Most page graphics align to a grid based on the primary navigation panel graphic (not shown at full size here — in order to fit within the grid!).
"Sparklines" showing ChromaTalk Activity
The small wiggly lines that are displayed alongside each year in the navigation for ChromaTalk list archives (e.g. 2005 
) denote list activity. The idea came from an early draft of Edward Tufte's Beautiful Evidence (2006).
I reversed the order of text and graphic (sparkline) in the navigation bar in order to maintain consistency with other items and to emphasize the years over the numbers. (Unlike the data in many of Tufte's examples, the year is not one of the values represented in the sparkline.) The graphics communicate, at a glance, how active the mailing list has been over time — and that it began in mid-1999.
Here is a sparkline for list activity from its inception in June 1999 through to November 2006: 
Interaction Design
The site is fairly straightforward static content, but there are a few things that I have tried to do to improve navigation and utility.
Links, links, links
Special care is taken in maintaining the Chroma site as a hypertext. In my opinion, many sites seem to rely too heavily on navigational elements, when contextual links (within content) are often more valuable to the visitor. When new articles are posted, they include appropriate links to content elsewhere on the site — and external to it. As ChromaTalk posts come in, I read them through as I prepare them for the archive, and add links. This may not seem particularly innovative or glamourous, but I really do think it improves the usability of the site. And, unlike some sites, I am not averse to linking externally: I am providing information, and if that information exists elsewhere, there's no reason to hide it. In fact, people will probably be more likely to return if the site is useful in this sense.
Owner Serial Number Links
One special case in terms of cross-linking on the site is the presentation of keyboard serial numbers along with owner names, both in the list archives and elsewhere (for example, in article bylines such as the one at the top of this page, "Chris Ryan [21030691]"). The instrument registry ties the site together in a sense by providing information and histories on individual instruments. By itself, this would not be terribly interesting. But linked from pages throughout the site, the owners might seem less anonymous, and the "Chroma community" is reinforced.
"Highlight" Links
Anchor links — links to a specific point on a different page — can be confusing because the intention is often to provide a bit of information that exists embedded in something larger. But the intention is not always obvious. So I added a bit of highlighting. For example, here is a link to how to clean key contacts which is part of a post to the mailing list; the relevant phrase is highlighted. (This is accomplished with some simple conditional PHP which displays a <span> tag.)
Side Navigation "Features"
The graphics displayed in the left side navigation bar (see above) seem to have contributed to site "stickiness," as the pages per visit have increased since the new site was launched.