OnVoiceOver{{

Skip to Contents menu

Q&A: WebPatterns

by John Lampard

John Allsopp is a Sydney based software developer and co-founder of Westciv, producers of CSS editor, Style Master. He is also an organiser of the annual Web Essentials conference, and was one of the first members of the Web Standards Project.

In the first of our Q&A interview formats, we speak to John about his latest project: WebPatterns.


OnVoiceOver (OVO): So just what is a web pattern?

John Allsopp (JA): “Design Patterns” have been used in software development for coming up to 20 years now, and well known for at least a decade. The probably slightly badly named idea of “patterns” started in the early 1970s in the field of architecture, with a group of academic architects centred around Christopher Alexander.

I say patterns are probably misnamed because they instantly cause us to think of something visual, or ornamental, like the pattern of an oriental carpet.

But in this sense, a pattern is “a problem which occurs over and over again… and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice” (in Alexander’s words). So it’s a pattern in the sense of a “pattern of behavior”.

A web pattern is the application of these ideas to web design and development. Now, what might this mean in practical terms?

Web designers and developers solve the same problems over and over again. Let’s take developing a new site – almost all sites fall into one of probably a dozen major types (or patterns) - blog, wiki, portal, intranet, and so on.

Within a site, most pages will themselves will fall into one of a reasonably small number of types: front page, site map, contact page, search page and so on.

This is not to say that all sites look the same, or pages look similar, more the purpose of the sites, or pages, the problems they are trying to solve are similar, and the way of implementing solutions to those problems is similar.

This idea works at a more fine grained level than just sites and pages; log in widgets, search widgets, navigation parts of a page like navbars, breadcrumb trails, blog rolls and so on, are all patterns.

The beauty of a well developed pattern system, or pattern “language” is that the patterns work together, so a site is made up of different pages, and a page is made of up different page pieces and so on.

OVO: Where did the idea to start the WebPatterns project come from?

JA: The general idea started with thinking about how most pages have very similar elements on them, but developers tend to call them different things – there are no good conventions for what to call a block of content at the top of a page with site identity information, or the main navigation for a page, two name two obvious examples.

Originally my interest was in a more rigid “template” approach, the idea being that certain kind of sites would have specific elements, with particular class and id values and so on.

Over time, and in part through discussions with Russ Weakley, a great supporter of the idea, I came to realise that patterns (which I’d been exposed to with Object Oriented programming, and which had piqued my interest more generally, leading me to the work of Alexander with architecture).

Why a project like this? First I recognized that trying to document even a reasonable proportion of the design patterns in web development would be far beyond my individual resources, and experience. Others have made starts, and even done a considerable amount of work, but it seems clear that one person can’t do it all.

I’ve been increasingly interested in wikis for collaboration, and so it seemed to make sense to me to center the efforts around a wiki (the first wiki was actually developed for a design pattern project). The Microformats effort, which is related (a microformat is a particular type of pattern centered on data) seemed a good model; a small number of people driving the project, with many more contributors.

OVO: Just to get everyone on the same page, what would be a “real world” example of a web pattern as far as the “everyday” designer or developer is concerned?

JA: Suppose your client comes to you and says, “We need a kind of online journal, for communicating with our customers. We’ll have frequent stories on our products, and how to use them, as well as other things that might be of interest to our customers. And it would be great if it could be kind of ‘two way’, where they could let us know what they think about us, our products, our service and so on.”

While this is a far cry from what Kottke or Scoble do, we can recognise that what they want is a blog. Why? Aspects of their needs (the problem they want to solve) are very common to blogs, so the blog pattern fits quite well for their problem.

Now blogs come in all shaped and sizes, but there is a “core” to the blog; reasonably frequent articles, immediacy with the audience. But within that scaffolding, we can implement a blog in many different ways – with or without a “blog roll”, a calendar or posts, a search facility and so on.

OVO: In a similar vein to Dan Cederholm’s SimpleQuiz, you will be conducting a “PatternQuiz” series, as a way of identifying and understanding web patterns. Why did you decide to go with a quiz format? What do you see are the advantages of a quiz format in finding answers or consensus?

JA: A really important thing about patterns is that they capture current practice. The aren’t about innovative solutions to brand new problems, they are about problems which recur frequently in our discipline of web development.

So, the idea behind the quiz is to: 1) get people thinking about and discussing patterns in a real world, practical sense, and 2) harness the collective experience of many experienced web developers.

SimpleQuiz generated a lot of interest, discussion, and thought about semantics, and so seemed a perfect model for generating interest, discussion and thought about patterns.

OVO: If the sometimes extensive discussion and debate that accompanies some of the SimpleBit’s quizzes is anything to go by, how will you go about resolving possibly numerous and conflicting points of view that some issues might raise, and still find a clear answer or solution?

JA: I don’t know!

In many ways, patterns are more complex than what SimpleQuiz was focussing on – so the prospect for differences of opinion is only increased. But patterns are meant to be flexible – not to prescribe one particular solution, but more importantly to capture the problems developers try to solve, and discuss solutions.

But hopefully the discussions themselves will lead to solutions, it’s all part of the fun.

OVO: Who can get involved, and when does it all kick off?

JA: Just before Christmas 2005, I posted the first PatternQuiz, it relates to different kinds of web sites. There have been quite a few really detailed contributions, this will be followed up with further PatternQuizzes, focussing on other aspects of web development, as well as a pattern wiki, where people can contribute ideas and patterns in more detail.

The best thing to do is get along to WebPatterns, read the original article on WebPatterns, then start contributing to the PatternQuiz.