Home arrow Design Usability arrow Page 2 - Easy as A,B,C – dynamic A to Z indexes
DESIGN USABILITY

Easy as A,B,C – dynamic A to Z indexes


It's a good idea to offer your visitors as many logical ways to navigate your website as possible. This gives them more chances to find exactly the product or information for which they came to your site in the first place. Sitemaps are a wonderful solution, but many of your visitors may find an A to Z index of your site easier to understand. Chris Heilmann explains how to implement such an index.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 37
March 30, 2005
TABLE OF CONTENTS:
  1. · Easy as A,B,C – dynamic A to Z indexes
  2. · Our friend the user agent
  3. · The Redmond spoiler
  4. · Making the list dynamic
  5. · Customizing the script

print this article
SEARCH DEVARTICLES

Easy as A,B,C – dynamic A to Z indexes - Our friend the user agent
(Page 2 of 5 )

The benefit of a one page A to Z index is that it shows immediately what is available, so the visitor can pick and choose without reloading. Properly marked up, it is easy to navigate and accessible to assistive technology such as screen readers, text browsers and keyboard navigation.

A lot of user agents let the user jump directly to a certain word simply by typing it in. Mozilla’s “find ahead” functionality, which can be activated at Tools – Options – Advanced - Accessibility, will highlight the word or link you typed in automatically for you.


This makes it easy to navigate in large documents.

Other assistive technology generates a list of headers and a list of links used in the document, and allows users to jump to them directly.

Taking these options into consideration, it is pretty easy to come up with the proper HTML for an A to Z list.

<h1>A to Z</h1>

<h2>Navigation</h2>

<ul id="atoz">

            <li><a href="#a">A</a></li>

            <li><a href="#b">B</a></li>

                        [… and so on …]

            <li><a href="#x">X</a></li>

            <li><a href="#y">Y</a></li>

            <li><a href="#z">Z</a></li>

</ul>

<div id="contents">

            <h3><a name="a" id="a">A</a></h3>

            <ul>

                        <li>Dummy</li>

                        [… and so on …]

                        <li>Dummy</li>

            </ul>

            <p class="back2"><a href="#atoz">back to navigation</a></p>

            <h3><a name="b" id="b">B</a></h3>

            <ul>

                        <li>Dummy</li>

                        [… and so on …]

                        <li>Dummy</li>

            </ul>

            <p class="back2"><a href="#atoz">back to navigation</a></p>

            [… and so on …]

            <h3><a name="z" id="z">Z</a></h3>

            <ul>

                        <li>Dummy</li>

                        [… and so on …]

                        <li>Dummy</li>

            </ul>

            <p class="back2"><a href="#atoz">back to navigation</a></p>

</div>

These lists are all we need to have a proper A to Z index (example: unstyledatoz.html). Users can click the letter of choice and get sent down the page to the appropriate list. Assistive technology offers the headlines as an extra list to make it even easier to reach the right list.

We add some styles, and voila, our A to Z list turns into horizontal navigation (example:buggyatoz.html). We indicate to the visitors that they interact with it via hover effects for mouse users, and focus highlights for keyboard users.

#atoz{

            list-style-type:none;

            margin:0;

            padding:0;

}

#atoz li{

            display:inline;

            list-style-type:none;

            margin:0;

            padding:0;

            padding-right:.2em;

}

#atoz li a{

            padding:.2em;

            background:#ccc;

            color:#000;

}

#atoz li a:hover{

            background:#333;

            color:#fff;

}

#atoz li a:active,#atoz li a:focus{

            background:#369;

            color:#fff;

}


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials