Ineluctable Modality of the Visible

Steven Pemberton

CWI/W3C, Amsterdam

About me

Researcher at the Dutch national research centre CWI (first European Internet site)

Co-designed the programming language ABC, that was later used as the basis for Python

In the late 80's designed and built a browser, with extensible markup, stylesheets, vector graphics, client-side scripting, etc. Ran on Mac, Unix, Atari ST

Organised 2 workshops at the first Web conference in 1994

Co-author of HTML4, CSS, XHTML, XML Events, XForms, etc

Chair of W3C HTML and Forms working groups

Editor-in-Chief of ACM/interactions.

100 Years Ago

June 16th 1904: Bloomsday, the single day of James Joyce's Ulysses

Stephen Dedalus (Joyce's character) goes for a walk on the beach, and closing his eyes as he walks along remarks "Ineluctible modality of the visible": i.e. it dominates our experience.

I experienced this strongly when I went to see the film of Ulysses one night...

The Essence

The Web is often treated as if it is a new visual space, but that is not how it is intended. The Ineluctable Modality of the Web is meaning.

HTML was designed to represent the structure of the document, not its look. An <h1> is the most important heading, not the markup for big fat letters.

Browser manufacturers, not understanding this underlying design principle went and added presentation elements, and basically made a mess of the markup. Looking at typical web page markup nowadays it is hard to extract the true information from it.

This is not to say that the visual is unimportant in the web, it is just subordinate to the meaning, and you shouldn't mix the two.

Style sheets

One of the first things that W3C did when it started was start a working group on stylesheets.

Stylesheets give you the power to define much better visuals than possible with HTML, and separates them from the markup itself.

And you can create great designs

CSS Zen Garden

This site consists of a single HTML file.

And hundreds of breathtakingly beautiful stylesheets applied to the one page.

Let's look at just a few examples. Remember, these are all exactly the same HTML page. Only the stylesheet is different.

Butterfly

Gemination

Zen Garden Party

Party

Post

Worm

By the way

This talk uses XHTML and CSS, not Powerpoint, and uses media 'projection' to give a full-screen rendering.

The Kiss of the Spiderbot

One of the reasons that the separation of content and presentation is important is that it is inclusive. Even blind people can read your web pages.

One day, all of us will be grateful to webdesigners who make accessible sites.

But even if you, or your client, can't find the resources to make a site accessible remember this:

Your most important user is blind. Half of your hits come from Google, and Google only sees what a blind user can see. If your site is not accessible, you will get fewer hits. End of story.

Who should design a website — Psychology and Culture

It is well known that you should never let the programmers design user interfaces (including websites).

That's why the Macintosh is so good, because they discovered that very early.

Why not? It's a question of psychology. They tend to design for themselves, and they are very different from the majority of the population.

Read for instance "The Goldilocks Theories" in the book Tog on Interface, where he describes, very amusingly, the difference between programmers and the majority of the population.

Bad news

You shouldn't let graphic artists design websites either.

Why not? It's a question of psychology. They tend to design for themselves, and they are very different from the majority of the population.

Most people avoid uncertainty. They like websites where it is clear what is what.

But not graphics designers. They like uncertainty, and tend to design more game-like websites.

Great. For graphics designers, but not the majority of the population.

Example

I debated with myself for hours whether I should include examples, in case the designers were in the audience...

Oh well, here goes

Example

In this example the stars were spinning round the central "n8". The stars were the links to the real information; each star had information about one museum.

You had to click on a star to read that information...

and once you had read it, you couldn't see which stars you had already clicked on...

Most users just gave up after a few stars.

Museum nacht 2000

Example

There was some really good information on this site...

But I could never find it...

DDS

The 4 most important properties of a website

Forrester Research did a large-scale survey of why people went regularly to one site than another that was essentially for the same purpose.

There were only 4 reasons. Can you guess them?

The 4 most important properties of a website

  1. Good content
  2. Usability
  3. Fast download speed
  4. Regularly updated

These all scored 50% or more. Reason 5 scored 14%.

The Semantic Web

We actually already have a semi-semantic web.

Take clusty.com, for instance. Here is a vanity search for me:

The search results are fairly normal, but on the left you have clustered results, based on things I am involved with.

Clusty

They seem to have discovered quite a lot about what I do, and who I am involved with

Clusty detail

The Real Semantic Web

However, we still have a long way to go.

If a website contains the text "Yesterday, the prime minister said ...", then if a search engine knew what 'yesterday', and 'the prime minister' meant, then a search for "Tony Blair" could find that page too.

Or if the browser knew that "Kruislaan 413, 1098 SJ Amsterdam" was an address, it could offer you the possibility of adding it to your address book, or of finding it on a map, or ...

The current first steps to more semantics, like RSS, require you to multi-author your site. This is a nuisance. Authors want single-authoring, with layering of semantics.

Google and other search engines are already adding some new semantics, to say "this link is not important". (rel="nofollow")

To this end XHTML2, now in preparation, will have a set of attributes, RDF/A, that will allow you to layer semantics on top of your website.

The Future