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.
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.
The CRASH web site was designed and developed along these milestones:
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.
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.
Once the requirements document had been refined, we built a page prototype to test the following aspects:
The prototype did not address actual copy or visual design (buttons, colour, page layout, look and feel).
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.
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.
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.
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]".
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.
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.
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.
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.
This dynamic tool searches the CSV files to see whether columns of unique ids contain any duplicates.
A look-up list of the HTML mark-up for special characters. For each entity, only one mark-up option is given.
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.
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.
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.
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:
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.
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.
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.
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.
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:
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:
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.
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.
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.
Copyright © Limitless Innovations 2024