Pattern Languages For Web Design & Development
Formerly titled: What is Good Web Design?
UPDATE 2. Oooh boy. I think the title is throwing people off…still. Let me change this and make some edits for clarity…to reflect the real emerging focus of what I want to talk about here. Also, if you haven’t already, please check out the post linked in Update 1, below, and there’ll be another one specifically about Pattern Languages up momentarily. Isn’t evolution fun, kids?
UPDATE 1. If you’re coming to this article from Andy Rutledge’s DesignView, welcome! And please have a look at this bit of clarification before coming back. Like life, blogs are a work in progress…please comment as much as you like, let’s keep it constructive, that’s all I ask.
Three blog posts got me thinking about the idea of “best practices” in Web design lately, from three different perspectives: process, standards and user experience design.
- D.Keith Robinson talks about differing web design processes, although the post digresses into a discussion of different working styles - how formal and informal, off-the-cuff or rigidly documented things get depending on the client.
- Joe Clark’s rant (possibly NSFW) about the general cluelessness of the Toronto web design community when it comes to even basic standards, much less accessibility. (via Boris)
- Lea Alcantara’s questioning of how we often justify our web design decisions on rather shaky empirical grounds.
In reading these essays, I feel like the Web world, as young as it is, is still grasping, making things up as it goes along, constantly reinventing the wheel. As commenter Joshua notes below, we’re still in the trial-and-error phase and the underlying technology is in constant flux. A few brave souls beat the drum for standards (Zeldman, Bowman, et al), people looking to solve their own problems invent tools and give them away, where they become widely adopted (SiFR, Textile, etc.).
But it’s still a kind of free-for-all. Unlike, say, graphic design or typography or even mechanical engineering, where hundreds of years’ worth of accumulated knowledge informs the practice, Web design has a scant decade or so behind it, and its democratic practice means that thousands of amateurs are out there, making their first 1000 mistakes at any given moment, in public.
I left a comment on Lea’s blog to the effect that it seems like we’ve moved awfully fast; the “printing press” was just invented yesterday but we’ve already leapt to David Carson-style deconstructed design without passing through the intermediate stage of defining a classical school of practice, as embodied in a pattern language.
Design patterns are essentially responses to consistently recurring problems; a very specific set of “best practices,” to invoke an overused phrase. They originated in the field of architecture and urban planning, and have since migrated to the software field.
To dispel any notions that this implies cookie-cutter design, pattern languages are collections of small, interactive, context-sensitive rules (or algorithms, if you prefer) that suggest a known, good way of doing something, without specifying form, materials, colours or other stylistic choices.
In the narrower sense of web design, design patterns exist for everything from the micro level, such as choices of style and colour, to internal mental models of how web pages are constructed: concepts like “divs,” “blockquotes,” and “ordered lists,” for example; the “expected” ways that browsers are meant to interpret these items are themselves design patterns. Pattern languages also encompass higher levels of order such as how best to prioritize headlines, columns, navigation elements, footers, graphics, and so on.
I don’t claim to be any sort of expert, but I do feel that the pattern-language concept could be useful for web designers and developers, and as time permits, I’m going to explore this further: I welcome contributions, constructive criticism and corrections.
April 18, 2006 10:24 PM
Comments
Hi Joe,
Those terms are in quotes because I’m trying to show that they first of all represent abstract ideas, and are design patterns in and of themselves.
It sounds obvious that a div represents a division of the page. From a technical standpoint, you can use frames to do the same thing, but nowadays we shy away from using them for several well-documented reasons.
Now, with ajaxy goodness, we can even achieve the same sort of “partial page refresh” that frames were useful for; perhaps at the cost of other tradeoffs, but it is clear that one design pattern (divs) has superceded an older, less satisfactory solution (frames).
At this point in web history, we can say that some design patterns have emerged that represent optimal ways of solving common problems. Some of them are more about the arrangement and type of content (how best to serve the user) and others are more behind-the-scenes technical (standards-compliant design for accessibility and/or SEO).
One can enumerate design patterns for all aspects of a website: how to do effective navigation and sitemaps, when to use drop-down selectors, pop-up windows, how to write lighter CSS, and what color the links should be.
I would argue that all of this is “design.” Design is not decoration or prettyfication; that’s ornament and styling.
And I hasten to add that not every pattern-complex applies to every site. A blog doesn’t need the same patterns as a commercial site, and news portals use other groups of patterns again.
wrote AJ Kandy on April 19, 2006 3:39 PM
I think the reason that we have not developed these aesthetic/developmental standards is because the base continues to change.
With printmaking there was a firm backend base. For instance, woodcut. You cut a piece of wood. You roll it up. You stick it through the press. But, we weren’t there for the “trial and error” period of press development. (Also, reference the history of photography and the evolution to the gelatin silver print.)
With the internet we are living in the trial and error period. The backend base has not been standardized/established, and consistent across the board. With printmaking if I have a piece of wood that I have cut (a design), I know that it will print the same on any press, as long as the roller to bed height is the same. With web design and development - we haven’t got to that level of consistency.
Further, we have initiated some standards for design (not development). For instance, menus go in the header which is at the top. Copyright info belongs in the footer, which is at the bottom. Comment sections of blog entries go at the end of the entry. If you multilist your entries they go in descending order from the most recent to the earliest. etc. etc.
However, these standards are logical standards - not design standards. Once there is a standard code to browser relationship we can begin putting all this fuss behind us - until then - we will continue to have people still coding in html3, using tables as their primary layout method, avoiding CSS, etc. And, finally, with so many software engineers developing codes for the web (Ruby, PHP, CGI, ASP, JAVASCRIPT, etc.) there are too many cooks in the kitchen, and too many recipe combinations to create a “standard” for web design or code design. Until then these debates and tutorials on the “right” way to do something will continue to abound. But, my chili may be just as good as someone elses, I just put in different spices.
wrote Joshua Bruce on April 20, 2006 6:23 PM
Joshua, you make some very good points. Pattern languages for user experience design may remain relatively static over longer periods of time, because one can think of them as being abstracted from whatever platform is beneath them (you could do the exact same site in Flash or CSS/XHTML, for instance). However, pattern languages for web development may continually evolve, fall into disuse, and new ones may replace them. As you say, we’re still in the trial-and-error phase here; I’m just thinking there’s a way to help people avoid too many errors the first time out.
wrote AJ Kandy on April 20, 2006 10:49 PM
You seem to be mostly interested in Web design, but Web standards are about development in all but edge cases. I suppose you could stretch it and say that divs, blockquotes, and ordered lists (none of which require “scare quotes”) are design choices inasmuch as Web semantics are a design issue, which is a precarious viewpoint.
wrote Joe Clark on April 19, 2006 11:33 AM