skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Page Content

February 6th, 2009 by Erick Beck

Keep file and subdirectory names short and descriptive

Give your files and subdirectories short, descriptive names and always use lower case. By doing so, you simplify your URL. Any time you refer to a URL in media or places other than the Web – especially verbally – shorter and clearer is always better. Ask yourself: could someone find this Web page if I gave them the URL over the phone?

Good: http://www.tamu.edu/go/to/this/page/
Bad: http://www.tamu.edu/randomDirectoryName/miXedCase/PaGe/

Keep in mind that Unix systems, such as www.tamu.edu, are case-sensitive, making the above example doubly problematic.

Dynamically-generated URLs are often long and complicated. Try to convert them to friendly URLs that are human-readable.

Good: http://www.tamu.edu/president/speeches/bioHouston2008
Bad: http://www.tamu.edu/president/speeches.php?actionType=display&category=default&id=157311

Use a consistent URL for periodical newsletters or publications

For sites that wish to keep links to current publications or publish online newsletters, it is important to consider ways to minimize the need for changing links. So if you publish a January newsletter you might be tempted to name it january.html. While that is good for January, when February rolls around, every link to “Latest Newsletter” must change to february.html. Consider creating a /current/ directory or a current.html file for the latest version to make it easier for others to link to the latest version.

Make link text meaningful

When you are creating a Web page, any portion of text can be a link. It is not necessary to tell a visitor to “click here”. Instead, make your link text describe the page it links to. Use intuitive, memorable URLs, titles and link text. File names should be lowercase, using hyphens instead of underscores or spaces (Google likes that too).

Here is an example of good link text:

Here are some examples of poor link text:

In each case, the second clause is not only redundant but also clutters the page with more text. The reader should be able to click on the words “frequently asked questions” and expect them to link to the FAQ page.

However, keep your audience in mind. If you intend your page to be printed out, you should consider spelling out the URLs or amending your print stylesheet to include them so that the URLs show up on their printed page.

Organize files into logical subdirectories

If you are a Windows user, it may help to think of a subdirectory as being similar to a folder. You can organize your HTML files by topic in subdirectories, so you might create several different subdirectories. If you have a number of files that can be grouped together logically, such as forms or graphics or CSS files, then they should be placed into an appropriately-named subdirectory. Dividing your site into a few category folders is also an easy way to create simpler, meaningful URLs. For example, URLs such as http://naut.tamu.edu/degrees/graduate/ and http://naut.tamu.edu/degrees/undergraduate/ can explain themselves.

Use index.html, index.shtml, or index.php as the name for the primary page of your Web site

If the primary page is called index.html, index.asp, etc., you do not need to specify it when linking to that URL. And while http://www.tamu.edu/visit/index.html may be valid, http://www.tamu.edu/visit/ is much easier to remember.  Note that this may be dependent on server configuration, so if the server is not set up to allow this, you should talk with your system administrator about doing so.

The ability to omit the index page name also helps avoid broken links if it changes, either on your site or a site that you’re linking to. If pages link to /visit/index.html and it gets changed to visit/index.php, or default.asp, for example, there is the possibility of a broken link if it is not found and changed. However, if those same pages had linked to /visit/, the links would work regardless of the index page and extension.

Make your Web site easier to navigate

There are hundreds of thousands of pages in “tamu.edu”. It’s our responsibility to help people navigate these pages to find the information they want. Their journey can be made easier through simple reminders and hints.

  • To ease possible confusion, use navigation, color and visual elements that are similar to the main WWW site and university branding guide. With so many offices, departments, servers and sites at Texas A&M, navigating from one site to another can become confusing, if sites are too visually, structurally, and informationally different.
  • Include some visual clue that a page a user is about to visit requires a UIN or NetID log in. A user that visits a page and only sees a log in prompt, might be confused as to what has happened or unsure they are in the right place. If a linked page does require a NetID or UIN login, there should be a visual clue that designates this before the user clicks on the link, such as a NetID icon. Use similar clues to indicate links that go to downloads, such as PDF files, instead of other Web pages.
  • Do not link pages back to themselves. When a page does link back to itself, many users feel that they didn’t click the link properly because they are still on the same page. One strategy is to use the same navigation menu on each page, but to make the current page link non-clickable. This also serves as a wayfaring indication.
  • Make thumbnail pictures clickable links. Users expect thumbnails to be links to the material they represent. For example, studies show they expect a logo in the upper left corner to link to the home page.
  • Make sure your organization’s name is on all pages. Not all visitors come to you through your home page. Through a Web search, a visitor may enter your site at any point, then bookmark or print the page, and afterwards have no idea where they found it. If you include your organization’s name at the end of your page title, it will usually appear in the bookmark and on the printed copy.
  • Let users know where they are at any given time in the site. The navigational system should also show how the information is organized hierarchically. This can be accomplished by color, icons, breadcrumbs, or other wayfinding strategy. But for accessibility reasons, don’t depend on color alone. An example of effective breadcrumb navigation might be “Biology  >  Prospective Students > Graduate Studies > Programs.”

Make your Web site easier to understand

Part of developing a good usable site is organizing and conveying your information, links and visual cues in a way that makes sense for the end user. Here are some points that may help in that task.

  • Use consistent and parallel terminology. Be aware that one term can represent different kinds of information. For example, “Academics” is a section of its own on the Texas A&M Web site located at http://www.tamu.edu/home/academics/. But there’s also an “academics” section on the “Current Students” and “Faculty” index pages. In each case, the term “academics” is being used consistently to describe the section even though each page contains links specified for each audience.
  • Don’t use different terms for the same topic on different pages. For example, if you have a section of your site that is a collection of departmental policies, select the appropriate words or phrase to describe it and use it on all pages that refer to that collection or page. Avoid calling it “Policies and Procedures” on the index page, and then call it “Rules & Regulations” or “Policy Information.” The same can be said for making the contents of your title tag the same as your heading tag, and closely related to the link text in your menu (not “Welcome to Our Website”).
  • Consider naming list items in a parallel structure. So if your topic areas are action-oriented , such as “Finding Programs,” “Contacting Experts,” or “Choosing A Major,” a support link named “Help” would not be parallel. Instead, in order to maintain the parallel organization, name it “Getting Help.”

Use descriptive and intuitive links.

Link labels should match the title of the page that the link leads to. To use a previous example, when a user clicks on the “policies and procedures” link, they should be directed to a page entitled “Policies and Procedures” and not one entitled “Rules and Regulations” or “Information on Policies”. Similarly, if you are linking to a service offered by a department, link directly to that service page or description (this is called “deep linking”) and not to the department’s home page. Your visitors want to make as few clicks as possible before they find what they are looking for.

Spell out all acronyms.

Do not assume that users know what an acronym means, so the first time you use it, spell it out. For example, Texas A&M has at least three groups with the initials ITS: Instructional Technology Services (ITS), Information Technology in Science (ITS), and Information Technology Services (ITS), so spelling it out is encouraged.

Label items logically and add descriptive notes as needed.

If a term or a name of an office isn’t intuitive or explanatory, then make sure you provide a short description or details to provide clarification or identification. Consider removing “Office of” or “Department of” in front of names after the first mention to tighten up copy. If necessary, add titles to links, and always add alt descriptions to images. Don’t make your visitors wonder, “Who was this page written for?”

Avoid using only icons or graphics for information.

While it can be argued that a “home” or a “shopping cart” icon may be universal in their meaning, others icons are not. Cryptic “Search” or “Go” buttons may confuse a search engine user. Unfamiliar icons in navigation, even creative ones, may keep visitors from finding the information they need. Plus, depending on the style or treatment of the icon, the icon’s meaning may become lost. If you choose to use an icon, consider using related text links to help educate the user toward your use of the icons. Also if you do include an icon, remember to include the appropriate alt text equivalent for those with vision impairments.

Instead of using images for navigation, consider using styled text. Remember that text included in an image is still an image, but text is much more accessible to visitors and friendly to search engines. Rollover effects used to require multiple images and Javascripting, but with cascading style sheets, they are now possible even with text menus.

Categories

Archives