Design Patterns Conversation

June 14th, 2006

A few months ago, Yahoo! announced their Design Patterns Library, and made their work freely available. It’s something I’ve meant to note here for some time, so I am belatedly doing that now.

Luke Wroblewski, Principal Designer at Yahoo! at his fantastic personal site, “Functioning Form” has been hosting an in depth conversation about design patterns with the big names in the field, like James Reffell from eBay, Bill Scott from Yahoo!, Jennifer Tidwell, author of the seminal Designing Interfaces, and Martijn van Welie, who has done a significant amount of work cataloguing web site design patterns, which I have referred to in detail.

It’s really worth a good long look.

Just in the last day or so Luke has posted a detailed conversation we had regarding web patterns at his site.

Plenty of very useful reading in this area which seems to be gaining momentum.

More on Webpatterns presentations

May 2nd, 2006

Quick note to say I’m speaking at the Melbourne Web Standards Group on webpatterns on Thursday (May 4), and Canberra Web Standards Group on May 11. Free for both, just follow the links for more details and see you there.

john

Belated April 1st post

April 16th, 2006

It does seem quiet about here right now, but rest assured, there is quite a bit happening behind the scenes. I have three presentations on webpatterns coming up in Sydney (at OpenPublish) Melbourne on May 4th (Web Standards Group) and Canberra (Web Standards Group on May 11th) in the next couple of months, and spoke last week in Perth at Ideas3 on Webpatterns among other things. The ideas really seem to appeal to web developers and designers, which is very encouraging.

I’ve got a few posts up my sleeve, including a new patternQuiz, but for now, a nice, if belated link to an April 1st post by Matt Magain, who uses the webpatterns approach to analyze reality TV. While it is meant as a joke, I actually think it shows the versatility of pattern languages.

WebPatterns discussion at the Web Standards Group

February 4th, 2006

Recently, the excellent web standards group mailing list had a discussion on reusable HTML chunks, which also included a little discussion of webpatterns. I posted a shortish comparison of how patterns compare with reusable code snippets, which I’ll repost here, as I think the issue is important.

Probably the biggest problem with web patterns is the term “pattern”. Most of us think about persian carpets or something visual when we hear the term “pattern”. But it has a precise technical meaning in this context, so I decided to go with it, despite the potential for confusion.

Originally, when I was first thinking about this whole issue (years ago now), I was thinking in terms of “templates” or reusable chunks. This is something which Doug Bowman and I chatted about a lot in the aftermath of WE04, and more recently Russ Weakley and I spoke more about, which took me more in the direction of patterns over more simple “templates”.

The drawback with shared templates is while these are immediately useful, they are also trivial. In the sense that they can be unthinkingly used, and by using them, no one gets anything other than the short term benefit of a shortcut to a quicker page. In real world situations, while little reusable chunks are very useful, the whole idea does not scale up well. One you reach even major page fragments, they tend to become limiting, so people would start bending them to suit their needs, and all of a sudden you don’t actually get the benefits of reusable chunks anymore.

How do patterns differ? Well, a pattern (such as “login box”) certainly should include an example implementation, even a “canonical” one, but more importantly, would also outline the

  • typical use cases for the pattern
  • other patterns which work well with this pattern
  • patterns which this pattern plays a part in
  • when NOT to use the pattern (simple example, radio buttons and checkboxes are often used interchangeably - but they are separate patterns, radio buttons should not be used when you want to choose more than one option out of three)
  • Semantics - the pieces of the pattern all have usable semantic names - in the login example, the whole chunk itself would have a name, then each of the individual pieces may have names - so you get common semantics for “free” - that way you can all of a sudden reuse CSS as well as HTML. Cool eh?

So along with resuable code, you a whole wealth of knowledge which has been acquired by developers over time (an important thing about patterns is that they aren’t novel inventions, rather, they capture and formalize well established current practice - they “pave the cowpaths”)

Hope this helps make more sense of the aim of web patterns - at https://webpatterns.org and with the patternquiz there, I started in a top down way - but the bottom up way would work well too.

webpatterns interview

January 23rd, 2006

John Lampard interviewed me recently for his new publication onvoiceover. John really got to the heart of webpatterns with his questions, and I think it might be the best effort I’ve made so far to describe the possible benefits of patterns for web development. Go and take a look.

john

technorati tags webpatterns

PatternQuiz Ia

January 16th, 2006

Given patternQuiz kicked off in the weeks before [insert appropriate festive season here], (smart move John) and just after it was announced typepad had their major outage (you can imagine the panic), pulling the Quiz for a couple of days, and then I moved it to its new home webpatterns.org, I was really pleased with how well the first installment went. After asking the first question, I realized it was a big expectation to have you submit a fully thought out pattern description for whole sites, yet quite a few people did it anyway. Before we continue with navigation patterns, which was my next planned patternQuiz, I thought I’d make it a bit easier, by asking: “what types of web site are there?” No need for a detailed description if you don’t like. So far, we have detailed descriptions for

blog
wiki
academic sites
online store
web application
forum/message board
gallery
“brochureware”
conference site

What others can you think of - and what aliases do they go under?

Next up, we’ll look at navigation patterns, and take the wraps off the wiki.

John

PatternQuiz is underway

December 16th, 2005

We’ve just started the first PatternQuiz. Starting from the top, in this installment we take on Site Patterns. There’s a detailed example of the “blog” pattern, but most importantly, get along and submit your own site patterns. In time, we’ll formalize these at the soon to be up and running WebPattern wiki.

PatternQuiz I - Lines of Site

December 16th, 2005

A few weeks back, before my life got just a little more hectic, I published the article WebPatterns and WebSemantics. In it I mentioned webpatterns.org, which I have set up to promote the development of a pattern language for web development, and promised the PatternQuiz, modeled (with his blessing) on Dan Cedeholm’s SimpleQuiz.

So, now its time to begin.

If you want to jump straight to the quiz, just click.

What’s the point?

The point of the overall project is to start collaboratively building a pattern language for web development. Pattern languages are widely used in Architecture, and many fields of computer science. In a nutshell, a pattern language is a collection of interrelated patterns, while a pattern is a “a problem which occurs over and over again … and … the core of the solution to that problem“. They provide us with a common vocabulary for talking about the things we already do, and strategies for solving problems which arise repeatedly, which in web development, might cover anything from page architecture, to form design, to navigation systems, to interaction design.

Patterns aren’t templates, which you use in a cookie cutter way - they are more sophisticated and flexible than that.

If you’d like to learn more about patterns, the original WebPatterns article has much more info, and links to lots of interesting resources.

Enough talk

OK, let’s get to work. My plan for this pattern quiz is for it to be open ended. Every few days, I’ll pose a question about a common problem area in web development, give an example “pattern”, and hopefully you’ll be able to suggest other related patterns. We’ll keep it informal, with the aim of collecting these patterns in a much more systematic way at webpatterns.org, using the wiki I’m setting up there (by the way, did you know the first wiki was invented to catalogue a pattern language?).

Pattern languages (as opposed to simple pattern collections) tend to both have some sort of organizing structure, and the patterns relate to one another (for example, complex patterns tend to be made up out of simpler ones.)

For this quiz, I’m using a top down strategy - we’ll start at the site level, then work our way “down”. It’s my belief that a hierarchical organization suits web patterns, but we’ll see as we go whether that hols up. And I’m a bit old fashioned like that, I love a good hierarchical structure.

So let’s begin.

PatternQuiz number one - Lines of site

Arguably, the highest level patterns in web development are sites (you might argue that a portal is a collection of sites, and so a higher level again, but I’ll suggest a portal is a kind of site).

Let’s begin with site patterns. I’ll leave the question of what a site is for you to discuss among yourselves, what I am interested in is different kinds of site, that is different site patterns. I’ll begin with an easy one, as a model, then I look forward to your suggestions for and definitions of other site patterns.

Pattern type:
Site
Pattern name:
Blog
Also known as:
weblog
Description:
A blog is a website for which an individual or a group frequently generates text, photographs, video, audio files, and/or links, typically (but not always) on a daily basis - wikipedia
Examples:
Kottke.org Simplebits Tantek.org
Patterns which it plays a part of:
to be added later
Patterns which make up a blog:
to be added later
Comments:
blogs are typically non commercial, and frequently politically oriented, but are becoming a more common in the commercial world. Frequently blogs are generated by a specialized form of content management system, known as a blogging tool, for example blogger, moveable type and wordpress. Consequently blog patterns are strong, and there is a high degree of conformity to these patterns across blogs, in comparison with other kinds of site pattern.
Tags
diary journal

Now it’s your turn! What site patterns do you use in your development? What other kinds of site come to mind. Some which come instantly to my mind are a wiki, a portal, a newspaper, but of course there’ll be dozens. I’m really looking forward to your thoughts. Please add them as comments, or trackbacks to this post. And there’ll be prizes for the best answers as we go!

Notes

We could be more formal, and add a lot more information to our pattern definitions, but at present, I’m not entirely sure what this might be, so let’s work that out as we go along too eh?

I’ve used the wikipedia description of a blog - I’m very much in favor of reusing existing intelligence where appropriate, rather than reinventing the wheel. Just as we’ve used the term blog, for this well known pattern. So reuse (with attribution) as much as possible.

For now I’ve left the related patterns part unfilled, as we don’t have any other patterns yet. As we develop the collection, these can be added.

For those familiar with pattern languages, I’ve eschewed the familiar “problem/context/solution” approach for the much less formal one here. When it comes to cataloguing these patterns more formally, that may be the better approach, but for this exercise, where for the most part patterns will already largely be very well known, the less formal approach should be helpful, and less fuss.

Lastly, I’ve added an obligatory tags field. This is to help free form searching of the pattern catalogue once it begins taking shape. Many, in fact most strong patterns don’t necessarily have a commonly agreed name, for example the title part of a page, called variously a masthead, logo, header, heading and others. While the “also known as” field might make tags redundant, I suspect that tags will be more general than “also known as”. For example, blogs are rarely if ever known as diaries, yet they have a great deal of similarity to a diary. So, if you were searching our catalogue for patterns to help solve a problem where an online diary was required, the diary tag would help greatly.