This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Project Facade

10th February 2005

After two months of blood, sweat and tear-soaked tags, today we finally launched Project Facade on behalf of new client, respected artist and all-round good chap Paddy Hartley and his team.

screenshot

Working with Paddy has been a dream, as he has provided masses of inspiration, images, copy, site ideas - and coffee. If you wanna know a bit more about how this beast was built, read on…

Understanding the project

The most difficult aspect was trying to collate the various elements of this multi-layered project, and somehow reflect the onion-skin nature of it through a website.

Over the course of the next two years, Paddy Hartley will be creating new sculpture in response to the patient records of First World War Servicemen from The Gillies Archive held at Queen Mary’s Hospital, Sidcup. These documents provide a rare and unique insight into the origins and development of surgical facial reconstruction techniques pioneered by New Zealander Sir Harold Delf Gillies and his surgical team during and after The First World War. A major aim of the project is to trace family members of some of the servicemen treated by Gillies and his team during this period and tell some of the personal stories and recollections of how these extraordinary men coped with their injuries in everyday life.

Paddy will also collaborate with Dr Ian Thompson in the Department of Oral Maxillofacial Surgery at Guy’s Hospital, London developing casting techniques to produce tailor-made patient injury specific Bioactive glass facial implants for the repair of boney injuries and defects of the face.

By frequently visiting Paddy’s amazing studio by the Thames, and facing the Houses of Parliament, I was able to quickly build a thorough understanding of the goals of the project, learning a hell of a lot in the process. Paddy provided a myriad of source material for me to photograph and scan, including original patient folders, and the majority of images used on the site are based directly on this material.

Starting to build

A fresh install of Expression Engine, and the wonders of Basecamp got things off to a quick start, but deciding on the best method of site architecture was tricky. Luckily, Paddy provided site map ideas and together we worked out a fairly rigid site structure.

This was broken down into weblogs and categories in EE, and soon we had a navigable skeletal website. Due to the sheer volume of data constantly being given over from Paddy, it was important that we could get this uploaded throughout the build - especially when it came to the complex Case Studies section, which uses beyond-complex custom MySQL tags to attach image galleries to weblogs, in turn making the section work a little like a relational database.

The importance of standards

Paddy gets standards - he understands the importance of accessibility and usability, and I worked with him to decide our best approach. The potential audience for the site is broad - elderly relatives of WW1 servicemen, educational institutes, gallery visitors, schools - and obviously a percentage of users with dis/abilities. We opted for some obvious methods such as large text/small text style switching, plus a styled text-only version. The access keys conform (where possible) to UK Government guidelines, and with quite a few text-blocks revealed by Javascript, we put great emphasis on providing alt content for those without JS. Hopefully, all the various image replacement methods are also working properly cross-browser.

Sure, we have some tabular data in there, and I’ve not yet debugged for older versions of I.E, but on the whole I hope the site is accessible to all.

detail

Which visual route?

Project Facade has so many strands to it, that deciding which visual route to take was difficult. To choose between the WW1 archives wicked-worn route, the textiles/sculpture/needle and thread route, or the contemporary science/Bioglass technology route was difficult. Eventually we opted to go with the archives route, as Paddy was able to provide so much raw material and inspiration for this approach that it seemed most appropriate. Still, the Art/Science pages do retain a certain minimalism/sterile environment feel (for now).

The site relies heavily on background images, and where possible these are duplicated and repositioned to maximise their use. I still think some of the images need sharpening and refining, and performance-wise they probably need further optimization, but on the whole I’m happy with them.

credits apge

Other bits and pieces

If you ain’t got Lucida Grande on your computer, you’ll get Verdana. I do recommend viewing the site on a Mac, just for the sheer clarity of the text if not for the fact that Macs are better (cheeky). I’ve also got a bit more refinement to do in certain sections, so please forgive any obvious mistakes for now. The thing validates as Strict, although the CSS is a bit messy, despite being split across several imports.

Moving on

So, Paddy now has a fully editable site with which to document the next two years of solid graft. We’re aware that some sections are a little light on content, but that’ll be coming soon. Also, if you are a bit squeamish, I advise you don’t visit the Case Study galleries - there are some pretty severe injuries documented in there. Beware. Still, that’s what war does to people - no point in pretending, ain’t that right, Mr. Bush?

I still need to work out some spacing issues, there a bit of divitis in places, and a couple of data tables still have some presentational markup in them. Tut-tut!

Let me know if it looks buggy in a particular browser. Also, if you see room for improvement, I’d like to know. That said, working on this with eight other projects at once has been kind of exhausting, so go easy on me.

Responses

# Mark Boulton responded on 10th February 2005 with...

Spot on Colly. That is a nice looking site. Really liking the use of background images, especially on elementslike the calendar.

Good job.

# James responded on 10th February 2005 with...

Wow! Really like. The design seems very in tune with the subject. Love the archives feeling of it and I especially like the layout of the text only version.

getting a slight prob on Firefox where the quicktime movie doesn’t sit in it’s frame, but otherwise this seems very solid. Not sure about some of the gruesome images though!

Any chance of expanding this article into more detail about how you put it together?

# Malarkey responded on 10th February 2005 with...

I loved this the first time I saw it. Well done Colly.

# Malarkey responded on 10th February 2005 with...

Posted to Stylegala :)

# Lee Hickman responded on 10th February 2005 with...

Well done Colly.

The bar has been raised again!

# Scott responded on 10th February 2005 with...

It looks fantastic.  The Large text link on the home page (but not some of the other pages I tested) brings up “page not found” (404?) and the small text option seems to alternate between that and just showing the unstyled version.

Fortunately, I don’t need any of the special display options to view it, So I can just appreciate how sweet it looks in the default config.  :)

# Scott responded on 10th February 2005 with...

P.S. IE 6, FF 1.0, Win

# Simon Collison responded on 10th February 2005 with...

Scott: Just fixed that - thanks for pointing that out. It was due to EE thinking that “css=skin2” was a template set, not finding it, and thus showing the custom 404. Got rid of that now, which means I need to make a new 404 - apologies that will be missing for a day or two! Otherwise, thanks for positive comments.

Malarkey: Thanks again. No idea why your stylegala link remains unformatted. Suddenly links aren’t being converted. Odd.

Thanks for the other positives, folks. Please report any more bugs here…

# sticklebert responded on 10th February 2005 with...

how come the background image doesn’t continue to the bottom of the page???

# Kevin responded on 11th February 2005 with...

The site is fantastic. I had never heard of this work being done in World War I. One of the better applications of Wicked Worn that I’ve seen.

To report bugs as you asked in Firefox 1.0 on Windows 2000 the Quicktime movie at http://www.projectfacade.com/index.php/about/
comments/tin_facial_prosthetics
is showing up partially out of the container it seems to belong in. It appears about 3/4 of the way down and comes out the bottom of the container.

# Simon Collison responded on 11th February 2005 with...

Thanks Kevin - Glad you like it! Someone else mentioned the quicktime being out of place. Not very often Safari and Firefox do different things.

I’m currently making a lot more changes to the site, so things might go a bit skewey tonight…

# Tim responded on 11th February 2005 with...

Colly, you should post a link on site intros at EE forums. Great job with the architecture. This is an important web site given the content.

I would love to hear more about linking the case studies textual content with galleries in EE. Maybe a future article?

# Simon Collison responded on 11th February 2005 with...

Tim: Good idea. Just done that in the Site introductions forum.

I will certainly try to detail how the galleries link to the weblogs in a tutorial soon. It’s bloody complicated, but it does work.

# Andy Budd responded on 14th February 2005 with...

Nice work Simon.

I’m really keen on exploring EE as a CMS so it would be great if you could walk us through your processes some time.

He is a member of the Brit Pack - a core team of a dozen skilled web designers who meet regularly in London, and help shape what we currently know of as web standards.

So is that what we do then? And I though it was just an excuse for a piss-up :-)

# Simon Collison responded on 14th February 2005 with...

Andy: Thanks for the positives. As well as a forthcoming book chapter about using EE, I will definitely be documenting some of the processes here soon, particularly tieing galleries to weblogs, which I’m getting many emails about.

He is a member of the Brit Pack - a core team of a dozen skilled web designers who meet regularly in London, and help shape what we currently know of as web standards.

Erm, I didn’t write that blurb about me. Comes over a bit grandiose doesn’t it?! I’ll re-write that. Yes, you’re right - more piss-up than anything else. Gutted to miss this latest meet-up, but you know what deadlines and clients are like.

# Biggest Apple responded on 17th February 2005 with...

Wow - what an incredible site and subject matter. You’ve done a great job of organising things into an intuitive interface. I recently watched a documentary on a man who made it his mission to put those disfigured in WWII back into society despite the obvious difficulties.

You should be very proud of contributing to such a a worthy subject.

# Simon Collison responded on 18th February 2005 with...

Biggest Apple: Your kind comments come on a day when I really need cheering up, so I must thank you very much for that.

# marny responded on 23rd February 2005 with...

I periodically check out what Paddy is up to will definitely be returning to this site to watch the progress…Paddy you certainly are a grafter and it looks like all the hard work pays off.

# Simon Collison responded on 2nd March 2005 with...

In a bad mood today, so I’m moaning. Bit gutted that Project Facade only made it into Stylegala’s Worth a visit/almost section.

What more could I do? Fed up now. Moan, mope etc…

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 379 Next

Superfluous Aside

Archived in ExpressionEngine, Design & Web

There are 19 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.