Elly Williams’ Weblog

Caught Between Industries

Validation and Reliance on Third Parties

So, I have a slight problem getting my site to validate at the moment, which I’d appreciate some help figuring out. It goes something like this:

  • Wordpress produces XHTML
  • Therefore, this site has a lot of XHTML in it that I can’t control (my php skills are not up to editing anything server-side)
  • del.icio.us automatically posts my link entries as HTML (minus the eX)
  • Therefore, this site also has a lot of HTML in it that I can’t control
  • Some of the XHTML won’t validate as HTML and some of the HTML won;t validate as XHTML
  • Therefore, my site doesn’t validate.

So, I guess my problem is

  • How much does it matter?
  • How much do I care?
  • Can I do anything about it either way?

Vitruvian Web Design

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.

Incremental Building

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.

Lessons from Architecture - Space Constraints

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.

Fear of Legal Action

While reading the Interview with Andy Clarke over at accessify.com, I came across this quote which got me thinking:-

Like the Millenium Bug before it, accessibility has become a new opportunity for people to exploit fears of legal action and it is a practice which I abhore.

In October 2004, Part III of the Disability Discrimination Act (DDA 1995) came into force requiring businesses to “take reasonable steps to tackle physical features that act as a barrier to disabled people who want to access their services.” Now, this should be a great thing for disabled access. It should mean more ramps, better signage, wider walkways, and so on. What appears to have happened tho is that any shop, cafe, restaurant etc with a stepped entrance has a sign outside requesting that “Anyone requiring assistance to enter the property please attract the attention of a member of staff”. Hardly a great improvement.

Now, I understand that building things takes time (especially in public places) and I’m hoping that the situation in the ‘physical world’ will improve - but the ‘online world’ changes much faster and I’m worried that all that the increased ‘fear of legal action’ (however much of an abhorrent practice it may be, it’s out there) is going to produce is similar stopgaps (’text only’ options anyone) when the people who need the changes really deserve something better.

Accessibility Alegebra

Zoom Layout Microformat + Javascript + Greasemonkey = “I know Kung-Fu”…. or rather, I wish I did.

Process Stories

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.

If Some Web Designs Were Shopping Centres.

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.

Malarkey Redesign

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.

My First Plugin

About a month ago I updated my blogroll to add in XFN relationships. Not being a coder I was fairly proud of myself at the time.

Anyway, after a month of not getting around to it, I’ve released it properly for anyone who wants to use it and the plugin now has it’s own page.

Liquid Layout - Learning to Lose Control

After writing my own Fixed Width Article last week, I decided it was time for a change. If people are building fixed width layouts because it’s ‘the done thing’ then surely having a fixed width layout puts me in the ‘part of the problem’ camp, rather than the ‘part of the solution’ camp.

So, yes, I now have a liquid layout. What used to be a single image in the header is now a three part sliding door, and I can now be much more liberal with the length of my post titles.

And anyway, it’s been quite fun to do. And I fully intend to do lots more exciting things with sliding doors having only discovered what they’re called at SXSW - despite the fact I’d been using them since January

Fixed Width Layout - The Desire for Pixel Precision

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.

Sowing the Wrong Seeds

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.

XFN-blo.gs-blogroll!!

You might have noticed my site died a bit today. If not, you missed a rather persistent parse error message. Basically, I’ve been trying to ‘adapt’ the blogroll plugin I use (which pulls in stuff from blo.gs) to pull in my xfn data as well, as I couldn’t find a plugin anywhere which displayed how I wanted it to.

The last time I coded anything without someone sat next to me was when I was about 8. And that was in Basic. I don’t know php. So, naturally a few things went wrong, and something went so wrong I couldn’t fix it until about an hour ago because it wouldn’t let me log into Wordpress.

But it all works now, and I’m xfn’ed and generally quite pleased with myself.

In Short…

There are a growing number of things which we don’t refer to in full. From everyday things like TV and PC to shortened expressions like LOL and (the infuriating)IMHO. And that’s before we start on the multitude of web based acronyms (CSS, XHTML, DOM, etc, etc)

What’s my point? Well other than I’ve just proved that I can write a post which contains more markup than content, in order to not confuse too many people I may have to learn to spell “acronym”

is an Architecture Student and Web Designer based in Newcastle-upon-Tyne, (UK)