Steven Pemberton: Okay, my name is Steven Pemberton. When I go to international conferences and give talks people say “oh you’re Dutch! You speak really good English!” And so I say “well actually my mother was English”, or I say “well I lived there for a while”, but the fact of it is I am actually English.
I am a researcher in Amsterdam. I am at the Dutch National Research Center, CWI, which by the way was the first European internet site. In fact CWI set up both the Dutch internet and EUnet which created the European internet. You can thank me afterwards.
In the 80s I co-designed the programming language ABC. Guido van Rossum was part of the group doing that, and he took ideas away which became the basis for Python. And in the late 80s I built, with my group, what you would now call a browser. Although at the time we didn’t call it a browser, if you saw it now you’d say, “okay that’s a browser”. It had extensible markup, style sheets, vector-graphics, client-side scripting, everything that you would recognize from the web now. And it ran on the Mac and Unix and Atari ST. So when the web came along, within our group we immediately understood what it was about. So, for instance, I then organized two workshops, one on client-side scripting, at the first web conference in 1994. The rest of my research group unfortunately went off and created the first Dutch internet company and then sold it at the peak of the market and they are now all “post-economic” bastards! Having a very miserable time with nothing to do, in large houses in the countryside.
But I went on to get invited to the W3C, and as a result of that I am the chair of the HTML and XForms working groups, and as a result of that I am a co-author of a whole bunch of internet standards, or recommendations as they are called, amongst others HTML4, CSS, XHTML in all its flavors, XML Events, XForms and so on. And until three weeks ago I was editor in chief of ACM Interactions, which is a journal about user interfaces.
Okay, so on to the technical stuff of my talk. Just like Peter this morning I’m going to start off with a historical quote. It’s just over 100 years ago that the day Bloomsday occurred, June 16th 1904, which is the single day that the whole of James Joyce’s Ulysses happens on. And Steven Dedalus, who is one of the three main characters in the book and actually represents Joyce, goes for a walk along the beach and closes his eyes and remarks “Ineluctable modality of the visible”. Now ineluctable means inescapable or something like that. But basically what he was saying was that it’s the visible that dominates our experience. Which was also interesting for Joyce, because he was going blind.
In fact funnily enough I experienced this ineluctable modality of the visible very strongly when I went to see the film of Ulysses. The film was made in the mid 60s, and is well known as being one of the first films to include the word “fuck” in it. In fact this is the first talk by a W3C speaker to include the word “fuck” in it as well. And this was so shocking at the time that at the premiere of the film they wouldn’t allow the speech with the word “fuck” in it to be heard. So what they did, they gave everybody a copy of the speech at the door, so they could sit in the cinema and read the speech and watch the film but not actually hear it. Which is sort of ineluctable modality of the audible if you ask me, because apparently it’s okay to read it, but not okay to hear it. But anyway when I went to see this film, as a result it had the image of being a dirty film by people who didn’t know anything about. It was actually just an arty film, but the general public thought it was a dirty film. I was there to see it for its literary value of course, but because it was being shown at midnight there were a bunch of drunken who thought, “hey there’s a dirty film! Let’s go and watch it.” So they were sitting there and having a lot of fun, and wondering when the dirty bits were going to come. And then when it gets to the point in the film where he says “ineluctable modality of the visible”, what the director of the film does is he turns the visible off … it just goes black. Now of course these drunken lads immediately thought something had gone wrong and thought the projector had broken, and started slow hand, and in the end they just left the cinema. But it was a very good illustration for me of the ineluctable modality of the visible, for these boys.
Anyway, the reason why I mention this is because the web is often treated as if it is a new visual space. But in fact that is not how it was intended, and I don’t think in the end it is how it will be. The real ineluctable modality of the web is meaning. For instance, HTML was designed by Tim Berners-Lee to represent the structure of the document. There is nothing in there, give or take, that is meant to represent anything visible. When you say “h1”, what you’re indicating is the semantics of that bit of text. You’re saying it is the most important heading, and you’re not saying it is the markup for big fat letters.
Unfortunately, the browser manufacturers seized control of HTML for a few years and didn’t understand this underlying design principle. So they started adding all sorts of junk to HTML to affect the presentation, which is not where it should have been. As a result of this, looking at typical web pages now it is a real mess, and it is very hard to extract the true information from a page. I’m not saying visual is unimportant. It is important, of course, but it’s subordinate to meaning and it’s important not to mix the two.
So when W3C was formed, one of the first things they did was try and seize back the initiative, and they created a working group on style sheets. Now, that’s turned into CSS. The nice thing about style sheets is that they give you the power to define just as good visuals than is possible with HTML markup. But it separates them from markup itself, which gives you a whole bunch of advantages. For instance you can define the house style of your whole web site in just one file; you change it, you save it, the whole site changes immediately. You can read all the advantages there on this slide, and the bottom line is it’s also cheaper: there are also financial reasons why you should do it.
But you can also create great designs. To show that CSS really does work, I want to talk about CSS Zen Garden, which is a site worth visiting. This site consists of just one single HTML file. This is it. It is about as vanilla HTML as you could possibly imagine. It’s just a few tags but nothing complicated. But apart from that one single HTML file, it’s got hundreds of breath-takingly beautiful style sheets applied to that one page. It’s a sort of showcase for designers’ abilities because anyone can submit new designs to show off their skill. What I want to do is just show you a few examples, but you have to bear in mind every screen I am going to show you is of the same HTML page. Only the style sheets have changed.
This is a fairly simple one; it’s a good-looking one. You can see all the text that was in the HTML there, but it’s been re-arranged and made generally more visually pleasing. Here is another one. What you can see here is the CSS Zen Garden: a demonstration of what can be accomplished on the road to enlightenment’. You can see all that text here again and it’s just been re-organized. Just to show you that you can do awful things with CSS, for those people who like to do awful web pages, you are not constrained to do beautiful things. Here is another nice example, this is my particular favorite, made to look like a post package. All this is done with text, all this text is selectable, and it is still exactly the same HTML page. This is also a particularly surprising one, a comic, a very long comic, and all the text has been added to speech boxes.
And I should also tell you that I wouldn’t dare use PowerPoint being the chair of the HTML working group. This slide set is actually in HTML with CSS: here you can see the actual underlying file. And if I want I can apply another style sheet to it. This is a style sheet just to give me an overview of what my talk is about: it just shows you the headings of each slide and numbers them as well.
One of the reasons that the separation of content and presentation is important is because of the meaning, and that the meaning is retained. Part of the reason that retaining meaning is important is that it is inclusive. Even blind people can read your web pages. For instance my father is now getting old and he’s going blind fairly quickly. His one joy in life used to be reading the newspaper and he can’t do that anymore: he just can’t read the small letters. It is really sad that he never learned to use the web because now he would be able to at least go in and continue to read the news. I would claim all of us in this room, one day or another, will be grateful for web designers who make accessible sites. We already heard a complaint from John earlier today about those web sites that are not accessible that he can’t read. But even if you, or the client you’re working for, can’t find the resources to make your site accessible, remember that your most important user is blind: that user is Google. Half your hits are going to come from Google. But Google only sees what a blind user can see, so if your site is not accessible then Google is not going to like you as much and you will get fewer hits, end of story.
What I am going to do is draw together a few threads and at the end knot them together. The question comes then when designing a web site, who should be given the task of designing a web site. Most of us I imagine already know you should never let the programmers design the user interface or the web site. That is one of the reasons why the Macintosh is so good, because Apple in the early days discovered that designing user interfaces is a task in itself, and there are specialists in this area, and you shouldn’t give it to the programmers. Why not? It is actually a question of psychology. Programmers tend to design for themselves. They understand what they need and they design for that. The problem is their psychology is very different from the majority of the population.
Let me give you a very nice quote here. This is a great book Tog on Interface; it is very old, by Bruce Tognazzini, who was an evangelist for Apple in the early days of the Macintosh. Where he describes the difference in psychology between programmers and the general public, he talks about different classifications of psyches and says that programmers tend to be more “intuitive”, as defined by Jung, and the general public tend, on the whole to be “sensorie”. He describes what these two are. He says,
Sensory people are firmly rooted in the here and now. If it cannot be seen, touched felt or measured it simply does not exist. When sensories drive to work they are aware of the birds, the trees, the hill turning green. They notice a cow lowing in the field. Sensories are attracted to fields such as accounting, high-level management and burger flipping.
Intuitives are the absent-minded professors, the dreamers, the explorers of internal worlds, the great discoverers, theoreticians, inventors. When intuitives drive to work they watch the tectonic plates deep in the earth’s crust rubbing together. They run into the cow.
Well now I have some bad news for you. And the bad news is, you shouldn’t let your graphic designer design your web site either. Why not? For exactly the same reasons: it is a question of psychology. They tend to design for themselves and they are very different in psychology from the majority of the population. The essential feature that graphic designers have that most of the population don’t have is that they are not scared of uncertainty. They have a low “uncertainty threshold”. Whereas most people like to avoid uncertainty graphic designers like uncertainty. So they tend to design sites that are more game-like and you have to explore a bit. That’s great. That’s great if you’re designing for graphic designers or for people who are looking for games, but it is not great for the wider public.
Ummm…now, III sssat for hours deciding whether I was going to do an example here or not because you never know if the designer might be in the audience! And I would end up being hated. The risk is here, so I’ve doubled my risk and I am going to give you two examples so at least the people who hate me can form a support group. Here is one site that I think very clearly illustrates the point. This is the original Museum Nacht web site for Amsterdam. It is also very good for this meeting because this has a starry background. Apparently that’s actually okay! What you can’t see from the screen is that the stars are all moving. They are sort of spinning around the “n8”, which actually in Dutch is “n-acht”. The stars are getting larger and smaller as they come in and go out. The problem with this is that the information is under the stars: you have to click on the stars, but the stars are moving! I watched people trying to use this site and I saw them generally give up after three stars. Firstly they had had enough, and secondly they didn’t know which stars they hadn’t hit yet. Beautiful web site.
The next example is a very old Digitale Stad site.
Audience: Oh, oh.
Steven Pemberton: Yeah okay, so the designer is here, so they hate me. I knew that there was really great information here and sometimes I found it. But I didn’t know how I found it. Probably there were people who enjoyed using that, but I wasn’t one of them even though I wanted to get to the information.
Just as a side issue. What is the most important property of a web site? Forrester Research did this great survey of more than eight thousand people to find out why they went to Amazon rather than Borders, or whatever. Why they went to one web site that did something rather than another web site that did essentially the same thing. And they had lots of possible reasons, but in fact the research showed there were only four essential reasons why people go back to a web site. Sometime I throw this out to the audience when I have more than five minutes but I’m not going to do it today. I’m just going to tell you straight away.
Reason number one, seventy five percent: good content. If your web site hasn’t got good content people aren’t going to go there.
Reason number two: usability, if people could navigate and find the stuff.
Reason number three: that it downloaded really fast.
And reason number four: that it got updated regularly.
Those all scored more than fifty percent. Reason five scored fourteen percent, so it is essentially noise. Just an interesting bit of information for you. Look to your content: the semantics are what’s really important.
There is talk about the semantic web: the semantic web is supposed to be the next generation of web. But we really already have a semi-semantic web. A good example of this is clusty.com, which is a search engine. If I do a vanity search on myself, I do a search on Steven Pemberton, it’s given me sort of Google-like results down there but you’ll see that it says “if you didn’t find what you’re looking for, try our clusters on the left”. I am going to zoom in on those. What it’s done is sort of clustered the links about me and it’s actually found out quite a lot about me, that I was surprised that it would know about me. It sees that I’m involved with XForms, it sees that I was the editor in the past of SIGCHI Bulletin, Leo Geurts is a colleague of mine, someone I wrote a book with, it sees that I’ve written some books, that I’m involved with design, that there are photos of me, I’ve done workshops, and I’m the top of HTML hierarchy, well there you go!
What I’m saying is: we don’t actually need to do very much to have a semi-semantic web. This is using fairly simple things, like Google does, that just says a link is a vote and so we are going to draw some conclusions about that. What it does is gathers everything that links to a central point and then tries to gather some standard meaning about that cloud of links. However, although that is great, it is still not great enough. There is still very much we can do. For instance, if a web site contains the text, “Yesterday the Prime Minister said…”, if a search engine could work out what “yesterday” meant and what “the Prime Minister” meant, then if you searched for “Tony Blair”, it could find that page for you as well, even though the words “Tony Blair” didn’t necessarily appear on the page. 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 finding it on a map, or… fill in the blanks.
We’re seeing more semantics being added to the web but with formats like RSS, which are site summaries that allow you to know when sites are changing. But the annoying thing about this is you have to dual-author your site, you have to have your site and your summary, which is a real pain. You have to write programs or you have to do something. There is no reason why you shouldn’t just layer the RSS semantics over your web site so that search engines could find it and say “okay I know what to do with this”.
Actually Google and other search engines together have recently announced that they are adding some new semantics to the semantic web, because people don’t like the fact that a link always gives a positive vote. They want to link to something but say “don’t count this as a positive vote, because I hate it”. You can actually put now on a link ‘rel=”nofollow”‘ and that tells Google not to take this as a vote. This is to stop linking-spam in wiki’s and similar.
To this end, XHTML 2, which is in preparation, hopefully to be out this year, will have a set of attributes exactly designed for layering semantics on the top of web pages, so you don’t have to dual author and to give more power to add semantics if you want to.
This is my last slide: the future of web design. What I think and hope is we’re going to see the end of the pixel-perfect page, and the beginning of visual semantics. Part of the problem is that our web graphic designers come out of a tradition of designing for paper. On paper you have control. On the web you don’t have so much control any more. You can’t say “this page is designed for 800 x 600” if the person is looking on a mobile phone, because what are they going to do, stretch out the screen? No, you don’t have the control, so it is no good saying it anymore. Your pages have got to have fluid design. It’s like when you design a house style; you design the notepaper, the business cards, the envelopes, you’ve got a visual semantic for the house style. And what you’ve got to do is represent that visual semantic in a style sheet so that no matter how big or small or wide or thin or tall your web page is, it still has the right visual semantics for that web page. But it won’t be pixel perfect anymore.
What I also expect is, once the ability to just layer semantics onto a web page is there, that people will start doing it. It’s how the web started. You started off with a very simple page, just linked a few things together and you slowly built it up. And when Google starts giving you some value of having more semantics on your web page, people will think “okay I’m going to start adding semantics” and everybody will benefit.
Okay, thank you.
Richard Rogers: Is there an urgent question for Steven?
Unknown: One question, I am not sure if it fits in with this topic, but how does XSL fit into all of this? Or is it totally different?
Steven Pemberton: Well, XSL started off as a style language. But it turned out to be actually two things together. It was a set of formatting elements and a set of transformations. In fact three things, if you take XPath out and treat it separately. So XSL definitely has its place and in particular for driving print, because it is more suitable for print. CSS was more designed for fast rendering on the screen, there are certain things you deliberately can’t do. XSL has turned out to be really useful for the transformation parts and for the use of XPath for selecting different parts of a document. It has a slight styling advantage for certain use cases, but in general it is the transformation and selection that is really useful.
Caroline Nevejan: How do I understand semantics? The word semantics could you tell me what your meaning is? It is a very important word you are talking about.
Steven Pemberton: Well, in a sense it’s whatever you want it to mean. It’s whatever meaning you want to prescribe to add meaning to your web page. So it is not an attempt to be too specific about what meanings you’re going to layer, because different groups want to assign different semantics to different things. What we’re planning to do is provide a generalized mechanism that people can use and then see what emerges. The accessibility community is already very strongly locking onto this to make websites more accessible and more easy to read. Funny enough the mobile web people, the telephone companies, are latching on to parts of it, because they think if you can add semantics about chunks of your web page, they can then transform it more easily into something sensible for a phone. We are going to wait and see what the world makes of it.
Dragan Espenschied: I would like to ask a very small question as well. Please go back. As you were showing here some web sites, I also want to ask you as a member of the Consortium, why is the padding outside of the width in style sheets in the CSS. Because this is really… I wonder who came up with this idea. I have the feeing as if…
Steven Pemberton: Why is it outside which bit?
Dragan: The width. You… there is the width of an element and then the padding is added outside, and I wonder how this happened? I wonder if this person ever made a web page or something.
Steven Pemberton: You’re talking about 1996! I don’t remember how we came to the decision. I could look it up for you if you wanted to.