Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing Pages for Linear Access

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

Ask any software and it'll tell you: When it comes to reading web pages, it's all about location, location, location. Why are we asking software what it's all about, you ask? Because software is the web's primary user, and its job is to read and render web pages.

You want some examples? Visual browsers read pages and render them with images and layouts. Text-only browsers read and render text with just a smidge of formatting. Talking browsers read and speak the contents of a Web page. Email harvesting programs read Web pages to extract email addresses. Search-engine software reads pages to place them in a Web page catalog.

And software generally reads by starting at the beginning of source code and working its way through the document. Because of linear access, information contained at the top of the page is the first accessed by software, and on today's web, more often than not, that primo real estate has little or nothing to do with the primary page content. So, from software's perspective, the web is not a good read. Instead of getting straight to the point, pages bog down under branding, advertising, and navigation.

When we talk about web design, we tend to focus on how aspects of the surface layer affect usability—color, type, layout. In this article, I look below the surface at how attention to source code design—specifically, document order—can improve linear access to web pages.

Document Order

If we peek under the hood of most web pages, rarely does core content appear at the beginning of the source code. More typically, pages begin with logos, advertisements, sponsorship information, and navigation systems. In a visual context, the "first read" is not affected by document order because visual users can skip over marginal elements and go directly to the main content. However, due to linear access, document order largely determines the quality of nonvisual web access, and readability suffers when users must wade through pages that are top-heavy with irrelevant information.

Document order is also a factor for mobile web users. Mobile browsers typically convert multi-column layouts into a single column, and the order in which elements display is determined by document order. When the source code begins with branding and navigation, mobile users have to scroll—often extensively—to get to the main page content.

To see the effect of document order, take a look at a page using Opera's Small Screen view (View > Small Screen). This view makes use of Opera's Small Screen Rendering (SSR) feature, which adapts attributes such as layout, color, and type to display more effectively in the mobile context. (Note that SSR only kicks in on pages that don't specify a "handheld" stylesheet.) This view makes painfully clear the fact that most pages are designed for visual display, with little or no attention paid to the effect of document order on linear access (see Figure 1).

Figure 1

Figure 1: Content on the New York Times article pages displays close to the top of the page when viewed with styling, but when linearized using SSR (inset), the page begins with navigation and ads. Note that the design attempts to accommodate linear access by providing a "skip to article" link, which allows users to skip directly to content.

Inverted Pyramid

Journalists commonly use the "inverted pyramid" style to communicate information based on level of importance, with the most important information composing the base of the pyramid and the least important, the tip. Applying the inverted pyramid style to source code design improves linear access by providing direct access to primary content. This approach works well on mobile devices as well by increasing the likelihood that primary content will appear on the first screen. Additionally, some search algorithms place importance on location, measuring content that appears first as more relevant than content that appears farther down the page. Ranking based on location means that pages index more accurately when information related to the subject of the page appears before information about the organization, sponsors, and links to other pages.

To see how rarely the inverted pyramid is applied to document order, look at pages that are designed using CSS for presentation, but view them without styling. The easiest way to view pages without styling is to use the Web Developer extension to Firefox. Load a page that uses CSS and disable stylesheets by choosing Disable Styles > All Styles from the CSS menu. (BTW, this is just one of the many incredibly useful things you can do with the Web Developer extension. In fact, it seems the only thing it doesn't do is wash dishes—yet.)

Without styling, the page elements display in document order. Note how some pages, such as Wired, required pages of scrolling before arriving at the page content, while others, such as NPR, have content close to the top of the page, even though the visual layout displays other elements before content. Clever, no? We'll talk about how this is accomplished next.

Designing For Linear Access

One way to provide direct access to page content is to create a layout that positions relevant content near or at the top of the page, followed by navigation, advertisements, and other marginal content. This approach may require that the navigation menu displays on the right side of the screen, which gives rise to the "which side is best—left or right" debate. But if you (and your client) are among those who favor right navigation menus, a content-first layout is a simple, straightforward way to design for linear access (see Listing 1, Example 1, and Figure 2).

Listing 1


HTML

<div id="content">
<h1>Products</h1>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.</p>

<h2>Widgets</h2>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<h2>Gadgets</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="solutions.html">Solutions</a></li>

<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Support</a></li>

</ul>
</div>

CSS

#content
{
	width: 75%;
	float: left;
}

#navigation
{
	width: 25%;
	float: right;
}

Figure 2

Figure 2: Content-first document order with content floated to the left and navigation floated to the right.

Unfortunately, top-heavy design has become such a standard that pages starting with content are few and far between. To see this design approach in action, take a look at the layouts at A List Apart and Boxes and Arrows—two magazine sites whose aim is to improve usability and accessibility on the web (hum...what a coincidence!). View article pages with styling and without, and enjoy the benefits of content-first (or nearly first) layout for both visual and linear access.

There are times when projects require non-content elements to be positioned visually before content—for example, menus along the top or down the left side of the page. Fortunately, it's possible to put content first and use CSS to create a different visual sequence. Example 2 and Figure 3 use the same content-first HTML code as above, but this time the content is floated to the right and the navigation menu to the left (see Listing 2).

Listing 2

#content
{
	width: 75%;
	float: right;

}

#navigation
{
	width: 25%;
	float: left;
}

Figure 3

Figure 3: The same document order with content floated to the right and navigation floated to the left.

The above examples are simplistic for the purpose of demonstration. Far more complex layouts can be accomplished using CSS to position elements while maintaining a content-first document order. For example, the following page from Wikipedia displays a logo and several navigation systems before the article content (Figure 4).

Figure 4

Figure 4: Wikipedia article page viewed with styling.

Viewing the same page without styling shows that, in the document order, content follows directly after a call for donations—which seems a reasonable compromise!

Figure 5

Figure 5: The same Wikipedia article page viewed without styling.

Resources

Designing for linear access improves usability across the board. Pages are more readable by software, and consequently are more accessible to users who are affected by document order—especially non-visual and mobile users. There are usability benefits for "typical" web users—visual users on desktop displays—because a content-first layout is more consistent with left-to-right reading patterns.

To delve further into the topics covered in this article, check out the following resources: