So you've agonized over text content and spent days (or months) getting it just right. Was it worth the effort? Only if you gave as much thought to presentation as you did to content. After all, what's the use of all this great text if nobody reads it? When you start formatting text content on your pages, remember that your best friend is none other than the humble list.

Catch The Visitor's Eye
Web users are goal-oriented: they look for specific information and expect to find it quickly. They're likely to overlook even the most valuable content if the text isn't formatted for easy scanning and reading.

That's why lists are so helpful: they're easy for you to code and for visitors to read. Lists attract the eye and highlight your most important content.

{xtypo_quote_left}What do visitors see first on a Web page? According to usability guidelines from the Northwest Alliance for Computational Science and Engineering (NACSE), the best way to help visitors locate key content is to use page elements that catch the eye.{/xtypo_quote_left}

Some of the most useful eye-catching elements are:

• Images
• Color
• Headings and subheadings
• Larger text
• Bullet lists

Both ordered and unordered lists are a great way to attract visitor attention to your most important page content. Here's an example: read the next paragraph and decide whether it's easier to scan than the bullet list above. They both contain the same content.

Some of the most useful eye-catching page elements are: images, color, headings and subheadings, larger text, bullet lists.

See what we mean?
Images and color add visual appeal to a page, so visitors tend to notice them first. But after appreciating the esthetics, most people are ready to give the text at least a cursory look. They'll pay close attention when they locate the information they need.

Coding Basic Lists

It's great when important stuff is so easy to code! The only difference between an ordered list and an unordered list is the opening and closing tag.

Here's the code for two simple lists:

1. Hide From Email Spiders


2. Create Custom Headers


3. Create Stylish Menus

• HTML Toolbox


• Search Engine Power Pack


• Browser Photo


• GIFBot

Here's how those lists look in a browser:

Note that we added the important TITLE attribute to both lists. That descriptive text gives valuable information to visitors using assistive technologies like screen readers.

{xtypo_code}These examples also show you how to include basic HTML formatting inside opening and closing{/xtypo_code}

tags to make the text bold or to make all or part of the link text a hyperlink.

Spacing List Contents
In a study done by the Software Usability Research Laboratory (SURL at Wichita State University, researcher Kelly Spain found definite user preferences in list spacing and presentation.

Spain tested survey participants' ability to locate specific information from a group of links displayed in three different list formats:

Participants were far more likely to locate the requested information if the links were either bulleted or had line spacing between the individual items. They complained that the no-bulleted, no-spaced list was too hard to read and interpret. At the conclusion, Spain noted that:

{xtypo_quote_right}"This data supports the hypothesis that bullets and spaces result in more accurate information retrieval than no spaces."{/xtypo_quote_right}

Of course, the drawback to both bullets and spaces is that you use up far more valuable real estate on the screen. If the list is simply a collection of one-line items (like those in our examples), a bullet list with no spacing is fine. However, if you're adding several lines of explanatory text to each list item, consider combining bullets (or numbers) and spacing.

By increasing the overall readability and usability of your Web pages, you make the site more attractive to visitors - all without adding a single extra image.