Elly Williams’ Weblog

Somewhere around 25 BC Marcus Vitruvius Pollio wrote his “Ten Books on Architecture”. The most enduring quote from this work (one that architecture/architectural history students all learn fairly early on) is that:

“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.

Jeremy Keith has written a post about evolution of web sites/apps and how it doesn’t relate to the frequent “websites as buildings” mental model. After all, he argues, once a building is built that’s it, right? Except that’s not entirely true. If it were then then there would be half as many ‘home improvement’ shows on the TV.

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.

A while ago I wrote ?If Some Web Designs were Shopping Centres“. The post itself was somewhat tongue-in-cheek, but it had a serious edge. I made the point that in the case of some websites the entrance page was equivalent to walking into a room full of unhelpfully labelled doors.

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.

Fatbusinessman asks “how do people go about their designs?”, so here’s my attempt at an answer. This is not a definitive answer to how I come up with anything. This is frequently not the process I end up using… best laid plans and all that.

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.

This is a post I’ve been meaning to write since March, and kind of follows on from UI Hall of Shame’s “If some Software Developers built houses” found via Slashdot (which I just added to my list of feeds, which I suspect I’m going to regret)

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.

Aristotle supposedly said “There was never a genius without a tincture of madness” (although presumably not in English). I think Andy Clarke proves that today.

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.

Following on from a couple of Fixed vs Liquid discussions last week (notably from Jeremy, Molly and Jeremy (again)) I did a quick (ish) litmus test of my own using the fantastic CSS Zen Garden.

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 thought that occurred to me while wandering around the technology section of a bookshop…

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 BBC have an excerpt from an interview with Jakob Nielsen, talking about ten years of usability and improving web design.

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.

Quite a few people have sent me this link (or similar) along with comments like “look, isn’t this great - you’ll never have to build a model again”

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.

A fix for a problem I’ve tried to solve too many times. Needless to say I’ve used a few workarounds, none of which work reliably cross-browser. Nice to see I wasn’t alone……

“After one too many times wistfully wishing I could scale fixed-size elements according to their content in a cross-browser friendly way, I did something about it. Presenting min-height, without the min-height”

min-height: fixed; from mezzoblue.com

If only I’d known about this 6 months ago!!

Meri sent me this link from the NY Times about a new exhibition of concrete at the National Building Museum in Washington. And the big deal is that they’re showcasing a product called LiTraCon, short for Light Transmitting Concrete.

And how’s it done..?… well, a clever Hungarian Architect (?on Losonczi) came up with the idea of making concrete blocks with parallel optical fibres running throught it. Pretty clever… and pretty pretty too…and apparently you don’t lose much in the way of compressive strength.

And given that there’s not much loss in terms of compressive strength, you can do pretty much anything with it that you could do with any other concrete block….Once the price comes down that is…..

Alternative links
Boing Boing: Clear Concrete
optics.org: Concrete casts new light in dull rooms

This week’s OK/Cancel has a fantastic illustration of the cause of that well known phenomenon - designed by committee.

Having sat on far too many committees and group design teams recently I’ve seen scenarios like this pop up time and time again. In trying to get something that people will agree on it often gets to the point where ANYTHING that doesn’t cause a row is a “good idea”

Well, active debate and the bouncing about of ideas is what design evolution is all about - and “it’ll do” options are rarely an adequate solution.

And then, in trying to form a weak concept into a strong final product so much “added extra” has to be included that you end up with some kind of mediocre hybrid monstrosity.

I read something along these lines about trying to fit carrots and brocoli into sponge cake somewhere…. I can’t seem to find it again tho….

Both Simon and Tony have written about town and street planning in the last couple of days. In the respective countries they talk about the form the cities take ranges from the sublime (the US’s easy-to-navigate grid system) to the riduculous (the apparently haphazard method the Japanese employ)

Admittedly these are both from the perspective of the potentially lost and I can confidently say I’d rather be lost in the US that Japan.

But what about at home?

England also has it’s sublime and ridiculous examples of town planning.

Older cities (such as York) have a seemingly haphazard arrangement of streets based primarily on Medieval streets - which were planned around the river, a church or castle and firmly within a city boundary.

Georgian (18th Century - think Jane Austen) towns, such as the one I live in - Bath, are predominantly about theatre. Large open squares, circusses and crescents with continuous facades made up of individual houses. Who cares about what happens in between. This was England’s first attempt at town planning.

And have we managed to improve? Well - as Terry Pratchett and Neil Gaiman note in Good Omens

neither [Aziraphale (an angel) or Crowley (an angel who did not so much fall as saunter vaguely downwards)] claimed any responsibility for Milton Keynes, but both reported it as a sucess.