The Elements of Web Style

Every Web Site Is the Same

(You can also see the latest case studies on the blog.)

You can ask most anyone the question, “What is Web style?”, and the response may be as simple as a shrug or as complex as a theorem. That is, it’s anyone’s guess. But most people concerned about the matter would agree: it is an under-exploited element of the Web, with no commonly agreed upon standards or clearly identified best practices.

The concept certainly exists; we found one of the best summaries once on the Rice University Web site:

“Good web style is a complex subject, incorporating general principles of good writing style and good visual design as well as technical matters specific to the World Wide Web.”

You won’t find a more succinct definition or, more importantly, a full disclosure of the three critical ingredients of Web style:

Writing – Design – Technology

The Web has changed much about our writing. This is no longer the business of publicists and readers but of search engines and users. You have to write well to be discovered among millions of other Web pages. And your site might be found simply via a well-written link phrase. You also write a page to not simply be read, but scanned efficiently.

Of course, many beacons of writing style already exist. And good writing is still the imperative. “The Elements of Style,” the revered English 101 manual for the novice writer (willing or not), remains influential and relevant today, in spite of, or more likely, because of, the Web. Digital journalists still abide by the “AP Style Guide.” “The Chicago Manual of Style,” dedicates content specifically to electronic publications.

We now have astonishing control over the design of our medium. Dynamic, rich with color and typography, buffered by multimedia, the options are myriad and the results can be impressive or repelling. But what we have now is not only a “read” but also an “experience” and it is ours to decide how successful it will be.

The mother of Web style is, of course, the technology that fostered it. XHTML and Cascading Style Sheets give us the foundation to deliver our message to the world. Using these judiciously – via digits, cables and browsers – and integrating emerging Web standards, provides for the valuable experience so important to the user of our Web sites.

There are still outstanding questions. What exactly is different about writing for the Web? How are multimedia – hypertext, audio, video, graphics – incorporated into our style and overall message? Has the medium complicated the message, or at least the design and composure of it? Do we need a standard? Why?

The intent of this Web site and its author is not only to answer these questions, but:

• to add meaning to Web style and its use;
• to demonstrate that we all know Web style – because all Web sites are the same in fundamental ways – we just need to learn the language of Web style;
• to advocate for a standard system and lexicon of Web style;
• and to employ a “Web as Warehouse” analogy to the Elements of Web Style as eight simple objects or Cases for an ease of understanding, regardless of technical proficiency.

The Short of It

We can understand a Web site and its message much more easily by inferring eight simple objects of Web style using a “Web as Warehouse” approach via Cases, Units and Tags – The Elements of Web Style.

But also…

We can adopt a system of best practices that gives us a better understanding of how to create Web sites and their content, how to discuss them, and how to maximize them for the greatest user experience and comprehension.

This can be done via:

• a lexicon of style for dialogue about Web content
• a semantic means of writing markup language using that lexicon, aiding both the tech and non-tech user
• a framework of eight style “objects” to deliver our Web message

Who will benefit?

Though Web style is still within the domain of Web designers and developers (as those with control over their use), the Elements of Web Style aids:

• marketing and communications professionals
• Web writers
• students and teachers
• and just about anyone who’s ever used the Web personally or professionally

Did we leave anyone out?

Of course, this methodology isn’t really new since every Web site is the same, but it’s a new way of thinking about something that everybody already sees.

The Eight Elements of Web Style

“The task is not so much to see what no one yet has seen, but to think what nobody yet has thought about that which everybody sees.” – Arthur Schopenhauer

The Elements of Web Style have been with us since the introduction of the social Web. In fact, they are used on every Web site now and are inferred through their common usage.

These eight elements are containers or “Cases.” These Cases are the inventory stored in a warehouse we call the Web. Within that warehouse our Cases hold “Units” of content. Several can be used more than once on the same page. They may contain as many Units as desired. And those Units may also have “Tags,” giving them further distinction and purpose.

And those are The Eight Elements of Web Style.

• 1. IdentityThe Identity Case is a Web site’s distinct identifying mark. It may contain a personality, a name or a logo, thus providing the visitor at least a partial idea (depending upon the abstractness of the contained Units) of what purpose a Web site serves. Some web pages are only Identity, meaning that the Identity Case may also serve a dual purpose as the Impact Case.
• 2. Impact The Impact Case is typically the predominant spatial element on a page. It not only (usually) takes up the largest amount of pixel space on the page, but it holds the key message intended for the receiver. For an online news organization, it would be the lead story (or all of its headlines); for a marketing firm, it may be the services it offers. The prevailing message is typically “above the scroll”; that is, no further actions are required of the user (scrolling, clicking, etc.) to view at least the preliminary Units within that Case, but that is not necessarily the rule.Impact cases may not be contiguous; they might be fragmented by other cases such as Feature or Sponsor cases, depending on the priorities set by the Web site authors.
• 3. NavigationWhat single feature of the Web and its underlying markup language has done more to change communication than the hypertext link? No more plodding through volumes of text to find a specific quote. No more searching for an index or table of contents: it’s on every page! And that is what a Navigation Case is and should be: a table of navigable contents, whether a high level overview or a detailed list.
• 4. SearchThere isn’t really a need to say more about a search box, but each and every one has its own style.
• 5. FeatureThe Feature Case plays a subordinate role to the Impact. It is usually, but not necessarily, supplemental information that will aid the user’s experience on the current page they’re on. Its discrete and subordinate position grants it the power to be visually distinct from other elements.For instance, an online retailer may be having a clearance sale on some overstock weed cutters. However, the vast majority of users are not visiting this site for weed cutters; they’re going for books. But it is important for the retailer to move these items fast before the winter. So they place these items in a Feature Case ensuring that the latest bestseller still has its place in the Impact Case, but the receiver’s attention can still be brought to the weed cutters in the Feature Case afterward. Before they know it, the user a weed cutter they got for a song to use before the winter comes and a book to read during that dismal weather.
• 6. SupplementalThe Supplemental Case serves as a supplemental aid to a page visit. This may be some helpful links with synopses of each to help in navigation. Perhaps its useful reference materials or other related sites. Much of a Web site’s content can be considered supplemental content. That is, the driving message always exists, but supplemental material is often the supporting reference information that enhances the message or user experience.
• 7. SponsorThere is no ambiguity about the content of the Sponsor Case. It is content that has been paid for to support the Web site’s operating costs. A common practice is the integration of the Sponsor Case into the Impact or other cases. Web sites that have a substantial reliance on advertising may make an ad the most prevalent Unit on a page. More commonly, however, is the simple use of sponsored links on a page. Due to the inevitable use of ads, the Sponsor Case is the wild card of the Style Elements – it can be integrated as a sub-Case into nearly all of the other cases, and often is.
• 8. AdminThis case is often relegated to the bottom of a page, containing links to copyright info, privacy policy, terms of use, site administration,etc. It is an often-required case, regardless of its placement in the page hierarchy. It could be selected links that might need just a bit more attention than regular navigation, “Login” or “Register” links, for example. It could also be a site map link or credit to the site designer in other instances.