“Well building hath three conditions: firmness, commodity, and delight.”

That is to say, good architecture

1. must be strong and durable (firmness)
2. must fulfill a purpose (commodity)
3. must be beautiful (delight)

According to Vitruvius, any structure that does not meet these basic criteria isn’t architecture – it might be sculpture (if it is beautiful but not useful), it might be some form of utilitarian construction (if it is useful but not beautiful), it might be many other things, but it is not architecture.

Of course, in the past 2000 years many building styles and techniques have come and gone and what constitutes “architecture” may look very different, but these three principles stand regardless of the technology.

Web Design hasn’t been around as long as Architecture, and although the technology is moving fast, we often don’t have the critical distance for any kind of historical/theoretical analysis. But, in this case there’s no need to reinvent. Web Design can also make use of these three conditions.

Regardless of the technology that you use to deliver your websites, if it isn’t stable and future proof then it is lacking ‘firmness’. If a website fulfills no purpose then it is essentially just sculpture. And if your website doesn’t have some positive aesthetic qualities, perhaps, as in architecture, we should say that it is not Web Design.

Besides upkeep and refurbishment there’s also extensions – anything from adding a conservatory to the back of your house, through extra teaching space at the local comprehensive to entire wings being added to existing hospitals.Of course, none of these additions would have been added in the original plans – usually because at the time there wouldn’t have been funding for them. But, the possibility of future extension is usually considered at some level.

So, how does this relate back to designing and building web sites/apps? Well, any changes to a building will be a series of incremental changes – and that’s something that’s the same. The most important thing is knowing what you need to build now, while still allowing for the changes that may or may not happen later.

Obviously in the case of a building this is ludicrous. For a start there would be insufficient space to put hundreds of rooms off one room in the real world. Even if it were possible, it would not be desirable; yet time and again it happens on the web. After all, they’re just files, right? Adding in an extra link is much easier than adding in an extra room – web pages don’t have a 3-dimensional size.

Parts of a building, however, do have a fixed size. In some cases the area will be determined directly by the client (“I need *m² office area”) or by the requirements of the intended use (“how much space do I need to provide for 25 workstations?”). Either way, before you can propose a design, you have to know how big any particular element is.

In many situations early building designs will be created using paper cut outs (or in some cases lego or plasticine) to represent a required area (or volume). Using this method it is less likely that any requirement will be overlooked, included twice, or occupy the same space as something else. Equally, when presented with an architectural plan it becomes much harder for a client to add new requirements when there is obviously no space for them.

So, given the confusion that over complicated website structure can cause, should we treat web pages as if they had a size limitation? The intangibility of web pages within a site structure makes it possible create ‘crowded’ content structure in cyberspace. Real world constraints help make it easier to adopt and promote ‘simpler’ content structure in the design of buildings.

The challenge with web content design is to constrain the possibilities provided by a pixel-thin medium, but still take full advantage of the flexible nature of the web.

I start with an idea – either in my head or something I’ve seen somewhere – a businesscard, a sunset, a circuitboard, a smell, a texture – whatever gets me thinking. I then translate this into a set of images, colour swatches, font swatches etc. I then piss about in Photoshop to come up with some basic building blocks.

I’ll do a rough sketch of what I want and where I want things to end up on the finished site – I find the back on an envelope is perfect for this. Any ‘clever’ things you want to try are worth sketching too (if only as an aide memoir for later) Bearing in mind, at this point, how your structural markup is going to work too. It is crucial that your page makes sense both with and without styling. I also find that a complete Photoshop mockup doesn’t always help. Squeezing yourself into an early corner is not particularly helpful.

And then I code, with the aid of syn Text editor, the edit styles bookmarklet, the web developer toolbar, the w3c validator service and frequent reference to Cascading Stylesheets: The Definitive Guide (btw. I’m still working off the first edition if anyone wants to get me an new one ), Eric Meyer on CSS, The Zen of CSS Design and the CSS Specifications. I also lurk on the css-d and WSG mailing lists, both of which I find invaluable.

You arrive at the shopping centre and enter through the big doors at the front. The main concourse is a large and full of doors of all shapes and sizes. On each door in large letters (in all sorts of colours, fonts, hey – some are even blinking on and off) is the word “DOOR” or “PUSH”. Each door leads to a shop. Each shop is also full of doors marked “DOOR” or “PUSH”.

Invariably the smaller, more awkward shaped doors lead to shops with vaguely useful things in them – food stores, clothing stores, hardware stores, book shops and so on.

The largest doors either don’t open or lead to shops closed for refurbishment.

The rest of the doors lead to shops run by Nigerian Businessmen, gerbils, People helping you “Make $$$ in your spare time” or they are casinos.

When visiting a shopping centre like this is helps to take drilling equipment or high explosives in order to get out again.

There’s a bit of a story to this.

This morning, I notice amongst my Bloglines feeds a number of new posts from And All That Marlarkey. Skim reading, I learn that that’s because there’s been a major redesign over there. So I head across and have a look. In Internet Explorer (due to some unfixable mess in my default settings), I notice a high contrast black & white, fixed width design. A little bit later Jon Hicks notes in his sidelinks that the new design is liquid. As I’m fairly sure it’s not I head back. This time in Firefox…. and I am greeted by a completely different design in red, white & blue. After some initial confusion, I find out what he’s done.

Using attribute selectors is a useful way of getting the best out of browsers with good standards compliance. It is also a useful way of screening out browsers with poor CSS support (they simply ignore the selectors)…The new site makes extensive use of attribute selectors for that very reason. Not to be elitist or to discriminate, but to demonstrate what might be done for more modern browsers.

What clever things we can do with technology these days.

Of the 160-something Official Designs, only 13 are liquid (that’s 8%). 4 of these are from Dave Shea‘s original examples. Of those remaining 9 the most recent is from April 2004.

Jeremy Keith has a strong suspicion that many people are choosing fixed width layouts simply because it’s the done thing.And while I agree with him, I also have a strong suspicion that people are choosing fixed width layouts simply because they are easier to ‘draw’ in Photoshop.

A book on CSS/HTML/XHTML/other-web-design that doesn’t mention web standards is like a book titled “DIY Loft Insulation” where the first chapter is all about asbestos.

The web looks very different today than it did 10 years ago.

…

“Roughly 80% of the [usability issues] we found 10 years ago are still an issue today,” he said.

“Some have gone away because users have changed and 10% have changed because technology has changed.”

Some design crimes, such as splash screens that get between a user and the site they are trying to visit, and web designers indulging their artistic urges have almost disappeared, said Dr Nielsen.

Which is all very nice to know, although I would have to disagree that designers are less indulgent or that that splash screens have all but disappeared.

4 years ago, a web design unit (for an online CV) was included as part of my architecture degree, and we were advised (by this gentleman, who was teaching the unit) to add splash screens (as animated .gifs in most cases) and to be indulgent. We were also told not to use stylesheets, that table layouts were the way of doing things (ok, so 4 years ago they were) and cross-browser compatability was a footnote.

4 years ago, this made me angry. I had already waved a relieved goodbye to font tags, and as the only person in the year who knew any HTML, I did not see why I should be disadvantaged by having to unlearn anything.

Anyway, it was ages ago, the web has moved on, and I hope I have too… except that I (along with the rest of my year) have just graduated, and started getting jobs and I expect a number of my year will be going back and updating the online CVs that they built then, and as designers trying to make a first impression they are going to be indulgent and working to standards that were out of date when they learnt them.

Now I’m not denying that it’s cool, or that it has its uses – product manufacture, prototyping and the like ? but I?m not sure I can see it being used for architectural models. Not just yet anyway.

For a start there are a lot of technophobes and technocynics in and around the construction industry. There are also a lot of control freaks. Add the two together and you get people who know exactly what they want, how they want it and aren?t going to trust a machine to give them that. There are also a large number of architecture students who are quite happy to get model making experience (and staying up all night working experience) for very little more than the cost of the materials ? which is generally less than $100.

And just as CAD programmes (AutoCAD, AutoSketch, Microstation, VectorWorks, 3DStudio etc not to mention all the engineering ones that do all your calcs. for you) have changed how buildings are designed and built I think the use of this technology would too. Imagine if you had to design your buildings so that they could be printed in 3D? everything has to be supported from the bottom or the sides (or the top or sides if you print upside down I suppose.) So you can have ceiling fittings or furniture ? but not both. Stairs and balconies are probably quite hard to model too. And heaven forbid if want a model that comes to pieces so that you can look inside it. Very soon, you have to put as much design effort into building the model as you would into the building the real thing. And it?s not worth the time or the money.