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.
{ 32 } Comments
John, interestingly enough I’ve been thinking about what constitutes a good academic website, more precisely a website done or managed by a secondary or post-secondary instructor, and the patterns involved. What has vexed me is that there is precious little pertaining to an academic website online or in the literature, despite the fact that there are millions of academic or course websites. Most academics interested in constructing an academic site have taken their cues from business sites, but this presents problems. How, for example, can an academic be branded or have a logo. The quick, simple answer is that an academic would use the institution’s logo and brand. For a variety of reasons, this approach runs counter to the academic personality and imposes institutional constraints. Many schools, colleges, and universities provide simple housing for an academic or course site and little in the way of tools such as PHP, Ruby on Rails, and other interesting stuff. This is especially true for those in the humanities.
I hesitate to list my own site as an example because it is in the process of thorough-going revision as I work my way through these problems and bring it up to standard and compliance. The Semantic Syllabus, however, should be ready in a few days. Meantime, I’ve taken a shot at your schema. I very much hope that educators can be included in these discussions such as these.
Pattern type:
Site
Pattern name:
Academic
Also known as:
course website, syllabus
Description:
An academic is a website for which an individual normally associated with an educational institution periodically generates text, photographs, video, audio files, and/or links. It may include or be associated with a blog, wiki, or other patterns, but it is essentially defined by the presence of one or more course syllabi
Examples:
archiva.net,
Patterns which it plays a part of:
to be added later
Patterns which make up an academic:
Class Time/Location Table, Syllabus Schedule Table, Header, Footer, Content, Nav, Book List, Annotated Book List, Footnote/Endnote, Citation, Bibliography, Annotated Bibliography, Caption
Comments:
Academics are typically non commercial and subsume a variety of sections or topics, including a list of classes, office hours, contact, research commentary or papers either online or downloadable, a vita or bio, informal research essays, pedagogical aids for teaching and, most important, syllabi for classes. They may also make use of a blog, wiki, or, more rarely, free-standing, interactive assignments. Frequently academics are generated willy-nilly by whatever is at hand in their most elementary form, or may be generated by a commercial cms, such as webct or blackboard. Most rare are sites designed and written by the instructor that attend to accessbility, semantic correctness, and design. Consequently, academics vary widely in their structure and presentation, and there is a an utter absence of conformity to these patterns across their forms in comparison with other kinds of site patterns.
Tags
syllabus, class schedule, academic, course site, footnote, endnote, bibliography, annotated bibliography, citation
Paula,
thanks for kicking us off with such a detailed well thought out pattern.
You would think there was a very common basic structure to a syllabus site. And within it many sub patterns (as you’ve well documented above). Which there is, bit of course as you say, these are actually marked up in a huge diversity of ways.
thanks again,
john
Hi John.
Having just finished wireframing & prototyping an online store, I thought I’d try my hand at this (hopefully HTML works…):
Pattern type:
Site
Pattern name:
Online Shop
Also known as:
Internet shop, online store, webshop
Description:
Online shopping is the process consumers go through to purchase products or services over the internet – Wikipedia
Examples:
, ABC Shop
Patterns which it plays a part of:
to be added later
Patterns which make up a shop:
catalog, shopping cart, checkout, [registration, authentication]
Comments:
Online shops are usually commercial in nature, most often selling physical goods that will be delivered to the user, although there are variations selling services, downloadable materials, etc.
They usually share a very similar structure: a product catalog (usually categorised in some way), a ‘shopping cart’ to hold items the user wishes to purchase, and a ‘checkout’ where the user enters their payment information, shipping address, etc. Some online shops also require users to be registered with the site, and require registration and authentication systems.
Tags:
store, shopping cart, catalog
Lindsay,
thanks for that, it’s a great example.
look forward to more contributions in future,
john
John—great initiative, here’s what I came up with:
Pattern type:
Site
Pattern name:
Web application
Also known as:
web app, web service
Description:
According to Wikipedia a web app is “an application delivered to users from a web server over a network such as the internet or an intranet.”
Examples:
Basecamp (www.basecamphq.com), Campaign Monitor (www.campaignmonitor.com), TracksLife (www.trackslife.com)
Patterns which it plays a part of:
to be added later
Patterns which make up a blog:
to be added later
Comments:
Web apps are responsible for the much maligned idea of “web 2.0” and all the ambiguity that comes with it. There are many web application standards that developers are already following to build these apps and that is already resulting in a type of pattern concerning layout, structure, etc. Almost always there is an intro, a few screenshots or demos, a sign-up form, a user area, a F.A.Q. or help section, contact form, and many, many etc.’s
Tags
application service “web 2.0”
John, a slight variation on your blog pattern, but enough of a difference to warrant it’s own pattern.
Pattern type:
Site
Pattern name:
Forum
Also known as:
message boards, bulletin boards, discussion groups
Description:
An Internet forum is a facility on the World Wide Web for holding discussions – wikipedia. A forum website/web application enables people to start threads (discussions) and reply to other people’s threads.
Examples:
forums.devshed.com
Patterns which it plays a part of:
to be added later
Patterns which make up a forum:
registration, login and user control panel, latest content listing, paged navigation, comments submission
Comments:
Forums are typically non commercial, and generally target a specific subject. Frequently forums are generated by a specialized form of content management system, known as a forum software, for example vBulletin and phpBB. Consequently forum patterns are strong, and there is a high degree of conformity to these patterns across forums, in comparison with other kinds of site pattern.
Tags
Adam,
In my draft language I have web apps as a separate pattern altogether from sites, but that’s not really right in a way – they are certainly a type of site. So I think perhaps Webapp is a subtype of site. I’ll be posting a draft of my ideas for the structure of the WebPatterns language shortly,
thanks
john
Scott,
I definitely think forums and wikis are different patterns (WordPress now have a bulletin board style forum app, different from WP).
In fact, I think there are at least two very distinct patterns for forums – the bulletin board style (thread oriented), and the slashdot style (article oriented), though they definitely comprise many of the same sub patterns.
I happen to prefer the slashdot style (I wrote an article about this when we chose Geeklog, a slashdot style forum for http://support.westciv.com).
But both are, it seems to me strong existing patterns.
Thanks for the definition, great stuff
john
I’d shy away from overuse of the phrase “frequently” (or other other words of that ilk). For instance, I’d dispute that a blog “typically [generates content] on a daily basis”. Most of the blogs I read are hardly updated every week, let alone every day, so I don’t think it’s necessary to reference that aspect in the definition. But I won’t start an argument about your example …
Some other site patterns could be:
– Shopping sites (Amazon, gap.com, iTunes)
– Galleries (Web Standards Awards, Favorite Website Awards)
But after having just tried to think of a few patterns, it’s actually quite hard … what would you call flickr? What else is like flickr? “Photo-sharing applications”? It could be a blog—people frequently generate photos for it on a daily basis.
How about a brochure-ware site? The sort of site that a small business would have. Something that just says what a company does, what products they have, and how you can contact them? “Small business site”?
Cam,
thanks for the fine thoughts. The description was from wikipedia – must have been a whgile back when people did update frequently – now it only applies to kottke
But seriously, patterns are not hard and fast rules, so some equivocation is fine!
Lindsay has weighed in with a store pattern (Cam’s comment was on my other blog where this was originally posted, before Lindsay’s post – I brought it here to consolidate comments).
Galleries – good, excellent thought. Given Adam maintains a gallery, he might be well placed to add that.
Yes, you are right, patterns get tricky the more you thinnk about them. Perhaps my rule of thumb would be, if its tricky, it might not be a pattern yet. Flickr is a good example – the overall site might not conform to a pattern, but aspects of it do. Slideshow is clearly a pattern, not unique to flickr by any stretch. The pages themselves comprise many common patterns – navigation bars, a footer, a login part. So even where a whole site might not conform to a pattern, parts of it will most likely (there I go again with qualified statements). So even in these situations, patterns can be very useful
I can’t wait to get to the finer level of patterns!
thanks again Cam,
john
Just want to let you know that that there is a website about web patterns over at Martijn van Welie’s site. There are several lines of site documented as site types.
http://www.welie.com/patterns/
Thanks SPike,
I discuss Martijn’s project in my original article
http://westciv.typepad.com/dog_or_higher/2005/11/webpatterns_and.html
And there’s also a link in the resources section of the front page of the site
john
Pattern type:
Site
Pattern name:
Brochure
Also known as:
Static
Description:
Like their offline printed counterparts, brochure sites exist to encourage further action from the visitor, without themselves enabling that action. For instance, a brochure site might contain information and marketing copy about a product, without offering e-commerce facilities to purchase the product.
Examples:
http://www.rentachef.nu/
http://charlottegraymovie.warnerbros.com/
Patterns which it plays a part of:
to be added later
Patterns which make up a brochure site:
to be added later
Comments:
Brochure sites tend to be small in size (some are little more than online business cards) with a heavy emphasis on graphic design.
Unlike blogs and forums, brochure sites do not require regularly updated content.
Unlike e-commerce sites or web apps, brochure sites do not expect or encourage all interaction to occur on-site. Instead, further interaction is often deferred to other forms of communication such as telephone or mail.
Tags:
brochure static promotion advertising
Thanks Jeremy,
a few years ago, this would have been the only site pattern
john
One kind of web site which I’ve been thinking about for some time is the academic conference web site. Typically this evolves over time: from the first announcement to registration and submission of talks, then on to arrival information and hotel bookings, and finally a proceedings, containing records of talks (pdf, doc, ppt etc) and photos.
The time evolution is fairly strict, but can be thought of as “transient”. The “steady state” is the final proceedings. It may be useful to add field(s) to your pattern for pattern specification which ask for evolutionary history of a web site pattern. As web sites become more widely used content addressable retrieval systems for documentation, you might find more collaborations using them (our scientific collaborations already do this, and if there are tools I don’t see why stage productions will not one day be planned this way).
Pattern type:
Site
Pattern name:
Academic conference
Also known as:
conference
Description:
An academic conference is a web site which is dedicated to a single academic conference. It has a strict time development (usually over a period of less than a year): starting with announcements, following (in order) with registration and submission of papers, hotel bookings and arrival information, announcement of schedule of talks, links to given talks in various electronic formats and other electronic records (such as photographs, chat room, video). The final product is sometimes supplemented by a printed proceedings.
Examples:
Quark Matter 2005
Lattice 2005
Patterns which it plays a part of:
to be specified later
Patterns which make up a blog:
to be specified later
Comments:
Contents of academic conferences are typically free access. At this time (2006) they have not entirely replaced printed proceedings, but supplement them in many ways. Academic libraries have not yet started cataloguing them as part of their collections.
Tags:
proceedings conferences
Hi John,
I’d suggest a slightly more detailed blog description, the current one doesn’t really distinguish a blog from any other kind of website.
To me, the defining feature of a weblog is that the site’s primary content is a linear stream of posts, usually dated according to publication date.
To put it another way, a blog is defined by the presentation of content in order of post date; rather than the frequency of posts.
Just a thought, anyway
I’ve often found it useful to classify sites not by type of content, but by the assumptions the IA makes about what’s interesting to visitors. Here are four common ones, although in practice it’s almost always a blend of these and others:
Content Stream
The most interesting content is the newest content, so the IA emphasizes the most recently added items, and might provide a calendar or archive to access older items.
Content Hierarchy
No content is necessarily the most interesting. Instead, the simplest possible access is provided to any and all content. Content is thus organized by category, cross-linked by topic and made searchable by keyword.
Featured Content
The owner of the site wishes to impress upon a visitor what is interesting. IA is designed to entice visitors to read certain articles or promotions, or click on certain links, etc. A visitor can’t necessarily find a specific piece of content through the IA unless he/she knows exactly where to look.
Content Vote
The most interesting content is what others have identified as being interesting. The IA is designed to show popular items prominently and to allow visitors to browse through progressively less popular content.
These may qualify as site patterns, or perhaps meta-patterns, or pattern components?
Greg,
it’s intertesting you should point this out. I agree, I think that the patterns are driven by the structure of the content, and the way users interact with it, not by the nature of the content. In patternQuiz Ia, quite a few of the suggestions are content oriented (this also tends to be the case with quite a few of van Welie’s patterns.)
It’s an easy habit to fall into, but I think problemmatic. Because, for example, an NGO might have a wiki based site, or a blog based site, because this best meets the needs of that site for that organisation in its present circumstance. Another NGO might have a totally different site pattern, and yet a bank may use a similar pattern to an NGO, despite being a profoundlyy different kind of organisation, with profoundly different content.
I think our challenge is to see the “meta patterns” (which are really just patterns), rather than develop a taxonomy of organisation types.
Also, I think your pattern components above are definitely pattern types, and in future patternQuizzes, I want to delve into each of these, and others more.
Soon, I’ll be publishing my first draft of what I think the structure of a webpattern language might be.
Stay tuned, and thanks for the thougthful comments,
john
Pattern type: Site
Pattern name: Social Bookmarks
Also known as: Folksonomy, Shared Favorites
Examples: del.icio.us, digg, reddit, furl, jots
Description:
A shared collection of links (URLs) that, unlike in traditional categorized lists (taxonomies), the user can freely assign keywords or “tags” to each bookmark.
Comments:
Some collaborative lists are restricted to a certain subject area such as technology, while the majority are general in scope. Most bookmarking sites provide features that display link relevance by popularity (weighted lists or tag clouds) and/or front page (most popular) bookmarks, RSS feeds for each tag (and often user) and a Web service API that allows developers to tap into the datasets stored by the system.
Have you read “The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience”?
Sounds very relevant to what you’re trying to do.
Josh,
it does.
I’ve not read it, but looked at the site, TOC and so on.
Whlie it uses the term “patterns”, from what I can tell, it doesn’t go into the whole issue of what a pattern is, and so on, in great detail.
I also link to it in the resource section of the front page of this site
http://www.designofsites.com/
thanks
john
John,
Certainly a good idea; am interested in seeing how it sorts itself out.
Wouldn’t it be easier to have a web-form to capture the results of your model above?
[It occurs to me, just as I’m about to write this that you have some basic patterns of site sections, such as: web forms, menus, navigation-bars, content, repeating content, that you could examine later.]
A couple of prominent ones that haven’t appeared yet:
Pattern type:
Site
Pattern name:
Search
Also known as:
??
Description:
An online tool to search the internet for content. Given the nebulous and ephemeral nature of the Internet, searches are now a daily necessity to traverse the wide open reaches of the World Wide Web. Consists of two parts: the search screen (a text-field and a submit button) and a results screen (normally containing 1-10 or 1-20 results, and a pager).
Examples:
Google. Altavista, Lycos
Related examples:
Yahoo, Wikipedia.
Patterns which it plays a part of:
to be added later
Patterns which make up a search:
a simple text-field, a submit button. Extra advanced fields. Pagers.
Comments:
There were extremely prevalent in the 90s, as people came up with newer and newer methods to search the ‘net. Google gained predominance in the last decade or so; so much so that “to google” something and to search the net for something is more or less synonymous.
Tags
Haoran,
my aim is to have awiki soon where people can contribute their own patterns. But I want to get a discussion going, before that starts, and I hope that this is a good way of doing so. I’ll transfer the patterns over to the wiki whe it is up and running.
Thanks for the contribution, excellent
john
What about a personal portfolio site / resume site.There are ,loads of them out there.
Steven,
There certainly are loads of them out there. Do they all follow a similar pattern, or small group of patterns? Many of them are blogs – a definite pattern. Got some example URLs for portfolio, resume sites? Do these constitute a particular pattern or patterns? Or do they fall into the same pattern as for example “brochureware”?
thanks
john
I definitely think forums are different patterns (WordPress now have a bulletin board style forum app, different from WP).
I think there are at least two patterns for forums – the bulletin board style, and the slashdot style, though they definitely comprise many of the same sub patterns.
I tend to agree that bulletin boards and slashcode style forums are different patterns, and as you well observe, they also comprise many of the same component patterns. This is the beauty of a pattern based approach – patterns work together to build other patterns (they are “generative”) and the sam patterns can work together to generate different patterns.
john
here are a few .. i think I am doing this right.
Pattern type:
Site
Pattern name:
Entertainer
Also known as:
Musician Site
Description:
A musicians site usually provides forms of rich content.
Examples:
www.ourladypeace.com
Patterns which it plays a part of:
to be added later
Patterns which make up an entertainer:
bio, discographies or history of work, videos, samples of material, interactive sections, photo gallery
Comments:
the entertainer site is not limited to musicians. however, there are certainly patterns in the content of most musician websites.
Tags
content provider music videos
Pattern type:
Site
Pattern name:
Community
Also known as:
Communal Site
Description:
A communal site serves members of a community with information on the common interest at hand.
Examples:
www.pacificfront.ca
Patterns which it plays a part of:
forums
Patterns which make up a community:
Events listings, member profiles, forums, resources for a given interest.
Comments:
Community sites can be commercial or non-profit based. Virtually any forum strives to attain some sense of community, and having simple structures such as an events listing, resources for beginners, forums, and an opportunity to connect directly to others are what is necessary to create cohesion amongst those with a common interest or goal.
Tags
community collective forums interests interactive
Pattern type:
Site
Pattern name:
Photoblog
Also known as:
n/a
Description:
a website made specifically to push photography as content
Examples:
www.davingreenwell.com
Patterns which it plays a part of:
blog
Patterns which make up a photoblog:
photos
Comments:
A derivative of blog.
Tags
photos photography blog photoblog
On the blog front, I know several blogs that are published daily, so it isn’t as rare as some people are implying. I reckon you should put flickr in with stuff like meebo (www.meebo.com) and so on, as web apps.
I’m obviously a bit biased, but I definitely think the patterns in the Design of Sites are patterns. We have been working in this area for over 7 years now and have read most of what is out there (from Alexander onward). I encourage you to at least go read it rather than ignore it after simplying taking a look at the TOC. If you want to continue to wait, a new edition is coming out in August or September. We have been working hard for the last 6 months to update the book (~25% new/updated patterns).
James,
I’m sorry the comment gave such short shrift to the book. One problem is being all the way down in Australia, particularly older books can be very hard to come by (yes we know about Amazon, but we tend not necessarily to get great joy in that department all the way down here). I didn’t want to ignore the book, indeed at the homepage of webpatterns.org you’ll find it listed as one of the three books in the books section (along with Alexander et al. and the gang of four).
I imagine Chapter2 “Making the Most of Web Design Patterns” does go into considerable detail on the bit I mentioned – namely what are patterns, and how do you benfit from them. And I certainly didn’t mean to imply that the patterns in DoS aren’t patterns.
So sorry for any poor expression on my part that might have lead to any negative impression.
I really look forward to the new edition,
john
Well written article. You should expand on the benefits and usage. I’d imagine that gathering these patterns is the biggest challenge but once there I can see it being very worthwhile.
{ 3 } Trackbacks
Web Patterns
John Allsopp launches webpatterns.org to promote the development of a pattern language for web development.
...
[...] This massive undertaking requires the input and assistance of many web developers, to provide as broad a depth of coverage and discussion as possible. The first stage in the process, Pattern Quiz 1 – collecting pattern data for the site level, is underway now, and you can participate by proposing a site level pattern at the webpatterns.org website. [...]
Dave
Interesting topic… I’m working in this industry myself and I don’t agree about this in 100%, but I added your page to my bookmarks and hope to see more interesting articles in the future
Post a Comment