CRASH, the construction and property industry charity for the homeless, asked for our help to design and redevelop their existing web site when it became too difficult to maintain.

We built the new site, making it interactive and dynamic, and easy for CRASH to maintain. Major site-wide changes can be made by editing a single file, and CRASH can update and add content with the minimum of mark-up.

CRASH Projects (graphic design by Denison Design)

Limitless Innovations are proud to have been able to donate 90% of our time to the development of the CRASH web site.

Voluntary agencies who provide shelters and other premises for the homeless in the UK request help from CRASH. The agencies have a variety of construction needs, usually materials or professional services; CRASH connects the agencies with construction and property industry companies that then meet the needs at cost or for free.

Some of the features of the CRASH site are described next. These are followed by a description of how the site came about.

Features

The site structure, section colours, page headings and link text are controlled by a single CSV file;

A single row is added to a file with the quote text which is formatted automatically when displayed

CRASH can add a quote in the house style to a page without the use of any mark-up;
CRASH can define general and page-specific META tags by changing a single file and without needing to know how or where they're added to pages;
CRASH can add dated news items to the home page and to the news page, or events to the event diary, or links to the links page without using mark-up;

The site contents list is created dynamically from a CSV file at the time it's displayed.

The site contents page is created dynamically;
Three short lines of LML will add a clickable exhibition photo to any page with the appropriate caption;
The two most recent news items automatically appear on the home page;


What looks like two different web pages is actually one physical web page (pic.lml) spoofing pages as they would appear in different site sections.

The site contains a general-purpose system for displaying pictures which come in small and large sizes. Clickable captioned thumbnails can be added to any page with just three lines of LML.

The picture page it links to displays the captioned picture at a large size and mimics a page in the same section but at a lower depth from the referring page.

A typical web page using the alternative Print Preview stylesheet.

There is a separate stylesheet for printed pages which is also available as an alternative stylesheet Print Preview.

In this stylesheet, site navigation is hidden, text is in Times Roman and specified in point sizes, and any text that would otherwise display white is shown grey or black.
CRASH can add press releases and project case studies without the need to create actual web pages - they just update a CSV file and create a file with press release marked-up text.
The project list is completely data-driven - four sorts are available, including viewing subsets - without the use of a relational database;

A checkbox as it appears the contact form.

CRASH can add or change checkboxes to the contact form without the need to edit any web pages and with the minimum of HTML.

The "hover text" of section links lists the sub-section pages.

Link title lists sub-section pages.

Milestones

The CRASH web site was designed and developed along these milestones:

Requirements definition;
Prototype;
Visual design;
Development;
Maintenance tools & resources;
Design reviews;
Testing and launch.

Working out the structure of the Help CRASH section

Requirements definition

We started the project by running a full-day requirements workshop meeting. CRASH's PR & Communications Manager and Administrator, a Patron (RMC) and a CRASH supporter (Naomi Cleaver, Echo Design Agency) attended.

They discussed CRASH, what it did, who it dealt with, current issues and future goals. As the workshop progressed, ideas for specific content and functionality came up, such as the ability for a supporting company to get a list of the projects they've supported. By the end of the day, a loose site structure had been designed. In addition, issues to include in the design brief were covered.

Site structure of the Help CRASH section

We wrote the discussions and decisions into a requirements document, and completed the site structure which was included as several 2D diagrams, showing the public and private areas of the site. The requirements document is available in web form.

Prototype

Navigation and content prototype of the Help CRASH section page

Once the requirements document had been refined, we built a page prototype to test the following aspects:

site structure and navigation;
page headings and link text;
determine whether the (now reduced) site still addressed the original goals.

The prototype did not address actual copy or visual design (buttons, colour, page layout, look and feel).

Visual design

The Help CRASH section page at launch

Once CRASH was happy with the prototype and the written requirements, we and CRASH met with Denison Design to go through the design brief that we had written.

The brief included requirements that site navigation should be along the top and right, each section should have its own colour and icon, and that sections links would be visible on all pages in the form of the icon graphic and HTML text label.

Denison Design presented four design routes; after one was chosen by the original planning group, Denison mocked-up pages in PhotoShop for feedback before the final web graphics were created.

Denison provided site graphics and defined the house style, in terms of typefaces and use of colour. We designed the content and functionality as they were added to the site during development.

Development

A typical web page on the CRASH site

The site was developed using LML, Limitless's extended mark-up language, that allows, amongst other things, true programming constructs such as conditionals, variables and loops, plus the reading and writing of files and the sending of e-mail.

For the purposes of flexibility and maintenance, the page is divided into individual areas, each controlled by a separate LML file. This means that most site-wide updates can be made by changing a single file.

CRASH maintains CSV files and copy files which are shown emphasised on the diagram below. Marked-up copy appears between the main page heading and the page footer; CRASH doesn't have to deal with any other part of the page.

This diagram shows how a typical web page is split into separately-maintained areas.

Accessibility

[Extract of the page navigation as seen in Lynx]

An extract of the page as seen in the text-only browser, Lynx. The heading and navigation portions of the page are shown.

Pages include extra information so that they are accessible to other kinds of browsers. This includes setting ALT text for otherwise decorative images (that would normally have empty ALT text) so that they become functional in a text browser or screen reader.

In Lynx, the side navigation panel directly follows the page heading. There is an extra link at the start of the navigation links which is only visible in Lynx or a screen-reader and it allows the visitor to skip over the site links.

A featured quote as it appears in a graphical browser.

The same quote when seen in Lynx.

Another example is the coloured lines around featured quotes.

These lines are graphics with ALT text set to "[start of quote]" and "[end of quote]".

Tools and resources

During development of the CRASH site, we created custom tools and resources to provide support when CRASH maintained site content. Most of these tools are dynamic (such as reading directories on the web server to obtain lists of files) and are effectively interactive portions of the maintenance manual.

Check links

[Check internal and list all off-site links]

This tool searches every line of every content file to see whether links to pages on the web site are valid. It also checks page references in CSV files.

It then searches content and CSV files for off-site links and lists them all for CRASH to check.

Page id look-up

All the pages in the CRASH site are referred to by a unique page id. This page dynamically generates a list of all the pages ids and the web page that they refer to.

Content look-up

For every page on the site, this dynamic tool lists its content and CSV file source.

How the CSV files are used

For every CSV file used by the site, this lists the pages that can or do use the file, together with a short description.

Exhibition photo mark-up

This dynamic page gives the three lines of LML required to add a clickable captioned exhibition photo to a web page.

Thumbnail mark-up

This dynamic page gives the three lines of LML required to add a clickable captioned thumbnail to a web page that is linked to the general-purpose picture page.

Check ids

This dynamic tool searches the CSV files to see whether columns of unique ids contain any duplicates.

Entities

A look-up list of the HTML mark-up for special characters. For each entity, only one mark-up option is given.

Design reviews

Once final copy was in place, we spent a day at CRASH for a content and functionality review. They discussed whether the site met the original site goals, whether each page provided adequate information or functionality and what things needed to be addressed in the visual design.

After implementing the agreed the changes, we spent a further day with Tessa Denison of Denison Design for a design review. We brought a list of issues to discuss as they toured the site. For most of the suggested improvements, we were able to implement them immediately for Tessa to check.

Project database

Paola Kathuria

2000

In the process of planning a CRASH web site, we found that the information that CRASH wanted to display on the site was not currently available in a structured way.

We worked with CRASH to help define the requirements of a projects database system; we set up spreadsheets as an interim solution until a custom application could be developed.

Requirements workshop

we ran a requirements workshop with CRASH for an application that they could use to enter project information, generate reports, perform searches and provide data for use by the web site. The workshop was an information-gathering exercise so that we, calling on our experience in database development, could write a short requirements document for CRASH to show to their existing database supplier.

CRASH is a charity which uses its construction industry contacts to help other charitable agencies build premises for the homeless, such as shelters or day centres. Construction and property companies are approached by CRASH on behalf of the agencies requesting help. The companies provide materials or services for free or at cost.

Questions

The requirements workshop was attended by CRASH and an Access developer who had offered to build a system at a reduced cost. CRASH explained in detail how projects came about and the ways companies got involved. CRASH were then asked to list typical questions that they would have about projects. These included questions such as:

who are the suppliers to this project?
what materials have been supplied to this project?
what are the savings on this project?
what are the total savings with this supplier?
what are the savings with this supplier on this project?
how did this supplier's stock get used?
who supplies X?

Spreadsheets

While CRASH got quotes based on the requirements document, we created a simplified database system for them in the form of Excel spreadsheets. One sheet held information about projects and the second, bigger, sheet held information about materials or services supplied to projects.

Colour

We used different colours to denote information such as references from another sheet and calculated columns or cells. A separate sheet contained help information and instructions; for every data question listed at the requirements meeting, step-by-step instructions were included on how to extract the answer from the spreadsheets.

[Spreadsheet template]

The first Supplies template showing sample data

We spent time with the CRASH Administrator and adjusted the templates as a result of feedback and suggestions.

The spreadsheet system has grown and evolved over time; it has enabled CRASH to put a figure to the difference they make in projects. The figures are used to create reports for the CRASH Trustees and is used to generate CSV files which drive the projects lists on the CRASH web site.

Long-term

A spreadsheet approach isn't ideal in the long-term; referential integrity (ensuring the consistency of reference ids between sheets) has to be done by hand rather than automatically. But the CRASH system is a working model; the data can be imported into other applications and goes a long way towards ensuring that a custom-built project database application would fulfil their needs.

Web site redesign

Paola Kathuria

2005

In 2005, we redesigned the CRASH home page to make it work harder. We adjusted the page colour scheme and made some improvements to the general page layout.

The requirements were to:

Redesign the home page
Change the top blue band to red
Narrow the side navigation panel
Design the new Hard Hat Appeal page

The design was an interative process using mock-ups. When the design was agreed, we updated the code which generates pages.

Home page redesign

CRASH had clear ideas about what should be on the new home page and provided printed examples from other web sites showing introductory text and news items. The original home page included an animated image of project photos and the latest two news items but otherwise looked like an inner page:

CRASH home page, before the redesign

We created a two-column layout, the first with logos for campaigns and publications in the first column. In the process, we designed a logo for the No Christmas Card Campaign.

The main column contains a bold introductory paragraph - replacing all of the previous content - the latest two news items and a panel for a featured project.

Redesigned home page

We agreed that there should be a graphic for each news item. We created these for the archived items and created two generic photos to use when a graphic wasn't defined for a news item.

Content for each area section of the page is held in separate files. This means that CRASH only update those files that change and never edit the actual web page.

Red colour scheme

Acumen Marketing Communications have provided design services to CRASH for the last few years and have created a strong brand for CRASH publications and literature which involves red, black and white.

CRASH wanted the to feature red in the web site by changing the top panel at the top of pages in blue with the logo to red. The change made a dramatic and stylish change.

We also put the page headings on a black background instead of the original section colour so that the colours would not clash with the red.

Hard Hat Appeal

2006 is CRASH's 15th anniversary and the Hard Hat Appeal is a year-long campaign to raise £200,000. CRASH asked us to design the appeal page: a short version for the start of the appeal and a full version with photos and more information for when money had been raised.

Hard Hat Appeal page

The page included a 'thermometer' which shows how much of the money has been raised. This is displayed by the use of stretched GIFs. Money raised is represented by a red bar. To update the thermometer, CRASH merely entered the amount raised at the top of the content file; our code then automatically calculates how to display the graphics.