Web Style Guide

User experience is an overarching consideration that involves a wide range of activities by anyone who makes decisions and takes actions that affect how people experience a web site. Every person on the web development team has a role to play. On many sites, users are active contributors, which means that they also influence whether a web site offers an enjoyable and accessible user experience. And providing a good user experience is a critical factor in the success of any enterprise. Nothing is better for building a loyal following than providing a good experience, where people are successful in accessing and using content and features that they value.

When we posted the first version of Web Style Guide on the web in 1993, “user experience” wasn’t a thing. The web offered only rudimentary design options and basic interaction through hyperlinks. Our guidance focused on basic best practices within the constrained available options: how to title a page to support scanning in a list of bookmarks, how to structure text to accommodate the reading habits of online readers. Over time and with subsequent editions, we were able to offer guidance on more attributes, such as page design and graphic design, as web technologies became more powerful and robust. Our early editions focused on the craft of web design, teaching how to use the available tools and materials to best effect. These editions had lots of code examples and coverage of technical concerns, like image and video compression algorithms, because building a web site meant knowing how to trick a rudimentary hypertext markup language into performing feats of graphic design, and how to deliver data-intensive images and media to people on slow modems. There was much more science than art in the early web.

Things have changed, and so has Web Style Guide. Now, more than twenty years later, the technology platform is more mature. Users are more demanding—less willing to compromise—and they expect to encounter accessible and usable sites. Organizations are realizing the importance of design and are adopting a more strategic approach to designing and delivering quality experiences. This fourth edition of Web Style Guide reflects a more serious and mature environment— one focused on users, not technology. It has fewer code samples. Knowledge of HTML and CSS is no longer required to be an effective web professional (although knowing what’s happening under the hood remains a distinct advantage). A new strategy chapter acknowledges that good user experience and effective design require vision and understanding. The next chapter, on research, demonstrates that understanding cannot happen in a team meeting room, on a whiteboard, but requires engagement with people— in all their diversity—who will use the site. And throughout the book there is a strong emphasis on quality content and interaction for meeting users’ needs and preferences. Previous editions bore the subtitle Basic Design Principles for Creating Web Sites.

This fourth edition of Web Style Guide reflects a more serious and mature environment— one focused on users, not technology. It has fewer code samples. Knowledge of HTML and CSS is no longer required to be an effective web professional (although knowing what’s happening under the hood remains a distinct advantage). A new strategy chapter acknowledges that good user experience and effective design require vision and understanding. The next chapter, on research, demonstrates that understanding cannot happen in a team meeting room, on a whiteboard, but requires engagement with people— in all their diversity—who will use the site. And throughout the book there is a strong emphasis on quality content and interaction for meeting users’ needs and preferences. Previous editions bore the subtitle Basic Design Principles for Creating Web Sites. The fourth edition subtitle is Foundations of User Experience Design.

With a shift in focus to user experience design, we mapped our chapters to the five planes of user experience described by Jesse James Garret in his book The Elements of User Experience. His classic diagram (which you can find at wsg4.link/jjg-elements) is both an exposition of the dimensions of user experience design and a road map for user experience in the design and development process.

The process of mapping the long-standing and new chapters of Web Style Guide was revealing. We have over time given more attention to providing guidance for activities at the base of the framework—the strategy and scope planes. Good user experiences require clear purpose and a close understanding of user needs and preferences, and successful projects require planning. And we have added a new and critically important plane, which we call Substance. The Substance plane is at the top of the framework, and includes text, images, and video. The past years have seen a growing understanding that “content is king,” and no amount of eye candy or fancy widgets can have more impact than content that appeals to users.

Figure 1: Building on Jesse James Garret’s planes of user experience, the foundations of user experience design encompass the activities and attributes that make up accessible and enjoyable user