Designing the wu website

Browse the language What is Wu? Look at an example pattern sequence Structure of the patterns
Comment on Wu Contributors Return to TriReme home page Links to related sites

Here we examine the thought process behind the construction of an actual, concrete site: the wu web site itself. We consider many patterns in the language and for each one consider:

The reader will notice that none of the workflow patterns have been used. It will also be noticed that compromises have been made due to time and budget pressures. This will mean that the wu web site will not be perfect. While even commercial sites with huge development budgets remain less than perfect we think this is understandable and excusable – even for a site concerned with web design.
1 ESTABLISH THE BUSINESS OBJECTIVES
Every web site should use this pattern. But this is easy in this case. The site is there to support readers of the book and provide a version of the language that is easy to navigate, exploring the connexions between patterns. There is an overriding requirement to work with a low budget in terms of both cost and time. Because of this we will have to work with only the crudest of web authoring tools. The site we are working at has no license for Dreamweaver or the like. We identify a risk: can we do this entirely with Word?
2 BUSINESS PROCESS MODEL
There is no business to model so we reject this pattern.
3 ESTABLISH THE USE CASES
There seem to be four:

4 TIMEBOXES
This is a controlling pattern in this project. The site must be ready by the time the book is published.
5 GRADUAL STIFFENING
The site will continue to evolve based on experience and feedback.
6 AUTOMATED TESTING
The low budget precludes the use of such tools.
7 USABILITY TESTING
The low budget precludes the use of formal sessions but the site will continue to evolve based on feedback.
8 GET-IT?
Friends and family will be used.
9 RETEST WHEN CONTENT UPDATED
Of course!
10 TWO-YEAR-OLD BROWSER
This may be tricky considering the low budget and the primitive authoring tools in use. The intention is to make the site work on IE and Netscape.
11 CLASSIFY YOUR SITE
It’s an information site and stateless. It could be regarded as a typical exploration site.
12 SITE MAP
The diagrams in Chapter 3 were the basis of this.
13 USER-CENTRED SITE STRUCTURE
Not applicable. The content is the chief determinant of structure.
14 SEARCH BOX
This is not applicable because we want people too buy the book and use its index for this kind of use. Also the budget has restricted us in this respect.
15 SENSE OF LOCATION
Use a pointer in the navigation scheme and display pattern names as page headers.
16 AESTHETICS
We will do our best.
17 CONTEXT-SENSITIVE HELP
Not applicable. What you see is what you get.
20 THE RHETORIC OF ARRIVAL AND DEPARTURE
This is managed by the site map and the links to related patterns.
22 SYMMETRY AND IDEMPOTENCY
The links to related patterns should be symmetrical. We expect some errors in this respect to show up in testing.
23 BREADCRUMBS
We will not use these because the use cases do not indicate a need to navigate in this way.
24 SITE LOGO AT TOP LEFT
We use the Chinese character for the Wu language.
25 NAVIGATION BAR
It must be at the top of the page, to the right of the Wu icon.
26 THREE-REGION LAYOUT
KISS says we can do it with just two because of the site map organization.
27 NO FRAMES ON PUBLIC SITES
We will not use frames.
28 HOME PAGE
29 TRITE FOUNTS
Since we are developing in an MS environment we will use only Arial and Times New Roman. This should cover most users. In a later timebox we plan to put in fount substitution code.
30 THE HUMAN TOUCH
It’s littered throughout the site.
31 LINKS TO MANY SITES
There is a page of links to related sites. To avoid copyright restrictions we will link to the pages used for sensitizing images. This means that we cannot predict that they will be the same as they were when the book was produced but it seems a fair trade off on a non-commercial site such as this.
34 GO BACK TO A SAFE PLACE
The Wu icon should take you back to the diagram that you reached the pattern from unless it appears in two diagrams, in which case you go back to the diagram selector page. If you are not on a pattern you get back to the home page. This is a complicated scheme but seems to work.
35 BACK BUTTON
Leave the browser to do the work here. But we need to test that you can get back when we link to other sites.
42 DOWNLOAD TIME
The slowest part of each page will be the sensitizing image. We will put these in separate pages and make them optional, with text describing what they are.
43 DESIGN PAGES FOR SCANNING
We highlight the problem and solution in a different colour.
44 SHORT TEXTS
We will break up the content so that there is one page per pattern. Perhaps we should go further and only display the problem, solution and links, making the body of the pattern optional to view. Gradual stiffening says: do this later.
45 ANCHORS AWAY
Version 0.1 of the site had anchors, but it took aeons to download. We must get rid of them.
47 SEPARATE PRINT PAGES
This is for a later timebox.
51 THE HALT AND THE LAME AND THE STRANGER AT THE DOOR
This is for a later timebox.
52 INTERNATIONALIZATION
This is for a later timebox.
55 CONTENT BEFORE GRAPHICS
Download the pattern and make the images optional.
56 NATURAL METAPHORS
The leading metaphors are Alexander’s patterns and the idea of a network of patterns shown graphically by the site map.
57 WORDS BEFORE ICONS
There should be no icons.
58 WHITE SPACE SEPARATES CONTENT
Use colour to delineate text segments.
59 BROKEN BUTTONS
Apart from the navigation bar, there should be no buttons other than the site map images and links to other sites. Put links on a separate line.
60 MAGIC MARGINS
This is for a later timebox.
62 UNIQUE NAMES FOR PAGES, TITLES AND META-TAGS
Use the pattern names for page names.
64 STORE CONTENT IN A DATABASE
This facility is not available.
76 CONTENT IS LINKED TO NAVIGATION
See the site map.
79 DISPLAY THE OPTIONS
This is achieved via the navigation bar.