Skip to content

After a brief hiatus

Well, after an extended hiatus, webpatterns is back. The last year or so, I’ve been working hard on a related area, microformats, and from time to time, speaking on patterns, all the while thinking, sketching out my ideas, reading. The impetus for restarting the project with some earnest comes form a couple of quarters. In particular, a lot of thanks has to go to Donna Maurer, IA extraordinaire, and conference chair of this years IA Summit in Las Vegas. Donna encouraged me to propose a paper on webpatterns, which was accepted, and in fact, turns out to have been voted one of the most interesting sessions (well, in advance, it remains to be seen whether it is still one of the most populart after I do it). As part of the process, I have set up the long awaited Wiki, and outlined some of my ideas about the pattern language. In the presentation itself, I’ll focus on the fact that my interest in patterns is a little different from that of most pattern language, library and repository developers – it’s on language more than pattern. I’ve outlined extensively elsewhere why we need richer semantics for describing what we do as web designers, developers, IAs, indeed anyone who develops for the web. We need “a common vocabulary for expressing [the] concepts [we use], and a language for relating them together”. That’s the ambitous goal of this project. Many have tried – often quickly enumerating alist of commonly used page elements – in a well meaning, but as we can see by the lack of their adoption, less than productive process. I believe it requires a lot more than simply naming things we think we use commonly. We need to clearly identify and understand these thing – these simple, or highly complex constructs, We need to understand their nature – how they work, what they do, how they go together to make more complex constructs. When we have a clear picture, naming them meaningfully becomes much easier, and more reliable. I don’t think I have all the answer, nor many, indeed hardly any of them. We all do. It’s the process of crystalizing this vast, powerful shared, and largely implicit knowledge. Which I hope will happen through conversation, and collaboration. The wiki for this project is now up and running. Please feel free to contribute your thoughts on the patterns we use. Am I asking for others to do all the work for which I can then take the credit – I hope far from it. My inspiration for the project can perhaps best be summarised in this quote by Antoine de Saint-Exupery

If you want to build a ship, don’t drum up people to collect wood and don’t assign them tasks and work, but rather teach them to long for the endless immensity of the sea.

Technorati Tags: patterns

buy oem Adobe Photoshop CS2 V 9.0?

2007 03 24 john News Comments (3) Permalink

Design Patterns Conversation

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. buy software oem Adobe CS4 Master Collection for mac

2006 06 14 john Uncategorized Comments (0) Permalink

More on Webpatterns presentations

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. johnbuy software oem Adobe CS4 Master Collection for mac

2006 05 02 john News Comments (0) Permalink

Belated April 1st post

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.buy software oem Adobe CS4 Master Collection for mac

2006 04 16 john Uncategorized Comments (2) Permalink

WebPatterns discussion at the Web Standards Group

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.
buy software oem Adobe CS4 Master Collection for mac

2006 02 04 john Uncategorized Comments (3) Permalink

webpatterns interview

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 webpatternsbuy software oem Adobe CS4 Master Collection for mac

2006 01 23 john Uncategorized Comments (0) Permalink

PatternQuiz Ia

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. Johnbuy software oem Adobe CS4 Master Collection for mac

2006 01 16 john PatternQuiz Comments (7) Permalink

PatternQuiz is underway

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.

2005 12 16 john PatternQuiz Comments (1) Permalink

PatternQuiz I - Lines of Site

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.

2005 12 16 john PatternQuiz Comments (35) Permalink