Digital Web Magazine

The web professional's online magazine of choice.

Web 2.0 for Designers

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > Web 2.0 Design: Bootstrapping the Social Web

By Richard MacManus

By Joshua Porter

Published on May 4, 2005

In Web 1.0, a small number of writers created Web pages for a large number of readers. As a result, people could get information by going directly to the source: Adobe.com for graphic design issues, Microsoft.com for Windows issues, and CNN.com for news. Over time, however, more and more people started writing content in addition to reading it. This had an interesting effect—suddenly there was too much information to keep up with! We did not have enough time for everyone who wanted our attention and visiting all sites with relevant content simply wasn’t possible. As personal publishing caught on and went mainstream, it became apparent that the Web 1.0 paradigm had to change.

Enter Web 2.0, a vision of the Web in which information is broken up into “microcontent” units that can be distributed over dozens of domains. The Web of documents has morphed into a Web of data. We are no longer just looking to the same old sources for information. Now we’re looking to a new set of tools to aggregate and remix microcontent in new and useful ways.

These tools, the interfaces of Web 2.0, will become the frontier of design innovation.

The evidence is already here with RSS aggregators, search engines, portals, APIs (application programming interfaces, which provide hooks to data) and Web services (where data can be accessed via XML-RPC, SOAP and other technologies). Google Maps (in beta) provides the same functionality as similar competing services but features a far superior interface. Flickr’s interface is one of the most intuitive and beloved around. Del.icio.us offers personal and social functionality, and reaches far beyond its own site. Interfaces like these are changing the way we store, access, and share information. It matters very little what domain content comes from.

Web 2.0 has often been described as “the Web as platform,” and if we think about the Web as a platform for interacting with content, we begin to see how it impacts design. Imagine a bunch of stores of content provided by different parties—companies, individuals, governments—upon which we could build interfaces that combine the information in ways no single domain ever could. For example, Amazon.com makes its database of content accessible to the outside world. Anyone can design an interface to replace Amazon’s that better suits specific needs (see Amazon Light). The power of this is that content can be personalized or remixed with other data to create much more useful tools.

There are six trends that characterize Web 2.0 for designers. In this introductory article we’ll summarize each of those trends and give brief examples. In upcoming articles we’ll explore each trend in more detail.

Writing Semantic Markup: Transition to XML

One of the biggest steps in realizing Web 2.0 is the transition to semantic markup, or markup that accurately describes the content it’s applied to. The most popular markup languages, HTML and XHTML, are used primarily for display purposes, with tags to which designers can apply styles via CSS.

These markup languages are not semantically dead, however. Designers can describe content, but only to the extent that it fits within the (X)HTML tag set. For example, designers can mark up content as headers, paragraphs, list items, citations, and definition lists using the <h1>, <p>, <li> , <cite> and <dl> tags, respectively. For some simple documents, these tags are adequate to describe content effectively. For most documents, however, there is no way to accurately describe the content with the (X)HTML tags we have available. In Web 2.0, this description is not only possible, but also critical.

Though HTML and XHTML give us only a glimpse of what it means, there is one technology demonstrating clearly the power of semantic markup. RSS is an XML format for syndicating content. It is an easy way for sites to tell people when there is new content available. So, instead of browsing to your favorite site over and over again to see if something is new, you can simply subscribe to its RSS feed by typing the RSS URI into a feed aggregator. The aggregator will periodically poll the site, notify you if something is new, and deliver that content. It’s a real timesaver.

Providing Web Services: Moving Away From Place

During the early years of the Web, before content had semantic meaning, sites were developed as a collection of “pages.” Sites in the 1990s were usually either brochure-ware (static HTML pages with insipid content) or they were interactive in a flashy, animated, JavaScript kind of way. In that era, a common method of promoting sites was to market them as “places”—the Web as a virtual world complete with online shopping malls and portals.

In the late 90s and especially the first few years of the 21st century, the advent of XML technologies and Web services began to change how sites were designed. XML technologies enabled content to be shareable and transformable between different systems, and Web services provided hooks into the innards of sites. Instead of visual design being the interface to content, Web services have become programmatic interfaces to that same content. This is truly powerful. Anyone can build an interface to content on any domain if the developers there provide a Web services API.

Two great examples of the shift away from place to services on the Web are Amazon.com and eBay, both of which provide an immense amount of commercial data in the form of Web services, accessible to any developer who wants it. An interesting interface built using eBay’s Web services is Andale, a site that tracks sales and prices to give auction sellers a better idea of what items are hot and how much they’ve been selling for.

Remixing Content: About When and What, not Who or Why

Associated Press CEO Tom Curley made an important and far-reaching keynote speech to the Online News Association Conference on Nov. 12, 2004. In it he said, “… content will be more important than its container in this next phase [of the Web]… Killer apps, such as search, RSS and video-capture software such as TiVo—to name just a few—have begun to unlock content from any vessel we try to put it in.”

Curley was specifically addressing journalists and the media industry, but this insight applies equally to the design profession. Web design during Web 1.0 was all about building compelling places (or sites) on the Web. But content can no longer be contained in a single place—at least not without going against the nature of the social Web and locking up your content in a secure site.

Web design in Web 2.0 is about building event-driven experiences, rather than sites. And it’s no coincidence that RSS is one of the key building blocks. RSS feeds enable people to subscribe to your content and read it in an aggregator any time, sans extraneous design.

Searches can also be mixed with RSS to let people subscribe to content via topic and tag RSS feeds (from PubSub or Feedster, for example). These so-called “future searches” not only let people mix content from various sources, but end up being yet another way for users to bypass a site’s visual design.

Because content flows across the Web in RSS feeds and can be remixed along the way, Web designers must now think beyond sites and figure out how to brand the content itself.

Emergent Navigation and Relevance: Users are in Control

As a result of the remixing aspects of Web 2.0, most content will be first encountered away from the domain in which it lies. Thus, much of the navigation that is used to reach a specific item might be far removed from the navigation specifically designed for it. This “distributed” navigation might come in the form of a feed reader, a link on a blog, a search engine, or some other content aggregator.

One of the side effects of this is that the sources of and pathways to useful information will continually change, and users won’t necessarily know where to go to find it. Fortunately, content aggregators have a built-in answer for this—they can track what people are doing. By recording what pieces of microcontent are most often visited, aggregators can use past user behavior to predict what users will find most relevant in the future. This is very apparent in Daypop, Del.icio.us, and Blogdex feeds. What people have found relevant in the past is likely to be useful in the future.

With relevance decided within these third-party interfaces, users might even be able to read content without ever visiting the domain it comes from. Navigation schemes, as we know them, will be used less. The most traveled navigation paths will emerge from user behavior instead of being “designed” specifically for it.

Adding Metadata Over Time: Communities Building Social Information

One feature of Web 1.0 that seemed to change everything about publishing was the ability to make changes to the primary publication at any time. There are no “editions” or “printings” on the Web like there are in the print world. There is simply the site and its current state. We are used to this paradigm now, and an optimist can hope that Web content will only get better with time: metadata will be added, descriptions will get deeper, topics more clear, and references more comprehensive.

What we see happening in Web 2.0 is a step beyond this, to where users are adding their own metadata. On Flickr and Del.icio.us, any user can attach tags to digital media items (files, bookmarks, images). The tagging aspect of these services isn’t the most interesting part of them, though. What is most interesting are the trends we see when we put together everyone’s tags.

Let’s say, for example, that we tag a bookmark “Web2.0” in Del.icio.us. We can then access del.icio.us/tag/Web2.0 to see what items others have tagged similarly, and discover valuable content that we may not have known existed. A search engine searches metadata applied by designers, but Del.icio.us leverages metadata applied by folks who don’t necessarily fit that mold.

Shift to Programming: Separation of Structure and Style

In Web 1.0, there were two stages to visual Web design. In the early years, designers used tricks like animated GIFs and table hacks in clever, interesting and horrible ways. In the last few years, CSS came into fashion to help separate style from structure, with styling information defined in an external CSS file. Even so, the focus was still on visual design—it was the primary way to distinguish content and garner attention.

Enter the Web 2.0 world, which is not defined as much by place and is less about visual style. XML is the currency of choice in Web 2.0, so words and semantics are more important than presentation and layout. Content moves around and is accessible by programmatic means. In a very real sense, we’re now designing more for machines than for people. This may sound like we’re in the Matrix, but in the words of Amazon.com CEO Jeff Bezos, “Web 2.0… is about making the Internet useful for computers.”

What does this mean for Web designers? It means designers have to start thinking about how to brand content as well as sites. It means designers have to get comfortable with Web services and think beyond presentation of place to APIs and syndication. In short, it means designers need to become more like programmers. Web 2.0 is a world of thin front ends and powerful back ends, to paraphrase Bezos.

Summary

The effects of Web 2.0 are far-reaching. Like all paradigm shifts, it affects the people who use it socially, culturally, and even politically. One of the most affected groups is the designers and developers who will be building it—not just because their technical skills will change, but also because they’ll need to treat content as part of a unified whole, an ecosystem if you will, and not just an island.

To summarize, these are what we see as the six main themes covering design in the Web 2.0 world:

  1. Writing semantic markup (transition to XML)
  2. Providing Web services (moving away from place)
  3. Remixing content (about when and what, not who or why)
  4. Emergent navigation and relevance (users are in control)
  5. Adding metadata over time (communities building social information)
  6. Shift to programming (separation of structure and style)

Our purpose in this column is to analyze those themes and figure out what Web 2.0 means for designers. We’ll explore the new technologies that are making it happen, take a closer look at the new interfaces that demonstrate its power, and ponder the social effects it has on the people who use it.

As we move along, we hope that designers who may be wary of the promises of new technology help us focus on the practical aspects of this one, the subtle but real changes that Web 2.0 is having (and will have) on design.

Got something to say?

Share your comments  with other professionals (27 comments)

Related Topics: Technology, Community, History of Technology

 

Richard MacManus is a Freelance Web Analyst/Writer from Wellington, New Zealand. His personal Web site is Read/Write Web.

 

Joshua Porter lives in Newburyport, MA, USA, and is the director of web development at User Interface Engineering. He writes about web design and usability on his blog, Bokardo.

Media Temple

via Ad Packs