IA Summit: Web Patterns

by Luke Wroblewski March 24, 2007

John Allsopp discussed using common markup patterns to add semantic constructs online in his Design Patterns in web site architecture and User Interaction talk at IA Summit 2007

  • Developers & designers use common elements in our sites but we don’t have a shared language
  • In a survey of 1,400 sites there were 4,203 unique ID values and 4,325 CLASS values appeared only once
  • Emergent semantic ID values currently in use: footer, header, content, logo, search, main, banner, container, top, sidebar, nav, left, right, menu, copyright, page, topmenu
  • Emergent semantic CLASS values currently in use: navigation, title, help, footer, content, section, menu, text, nav, main, header, copyright
  • The good news is developers are using constructs in the way they were intended: to create richer semantics. But some people label elements as type of item (copyright), others as presentation type (footer). Yet there is a fair degree of consensus about the kind of things we are working with.
  • But there is little consensus about what these are called.
  • Vocabularies should emerge out of practice. Let the profession determine names. By and large languages emerge from the bottom up. Look at what developers do, find patterns, and name them.
  • Advantages of common vocabulary: screen readers, maintenance/communication across teams, machine identification
  • Fundamental to any science or engineering discipline is a common vocabulary for expressing its concepts and a language for relating them together
  • Microformats is development effort for extending the semantics of HTML using existing features of language. Millions of objects online use microformats in just few years of development.
  • Classify pattern language by role: identify what something does in addition to what it is. What it is: class/id, in XHTML2 what it does: role.
  • A common vocabulary of 25 terms might cover 80% of our needs.