skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Navigation

Spotlight on Spotlight

We swapped out the Spotlight image of the WWW index page last Friday to utilize a little Flash plug-in ditty called SlideShow Pro (props to Ms. Leary for the idea). This has been helpful in allowing us to refresh the page easier, and allows us to show multiple stories, items, and features. It also lets us keep a story running without having to pull it down for a single event and then put it back up.

Erick and Walter added some Javascript to publish a base image and link to the Communications Group’s news page should someone not have Flash installed.

Monday, August 20th, 2007 Navigation 4 Comments

Cascading Style Sheets – Intro

We strongly encourage the use of Cascading Style Sheets (CSS) as a means of controlling the display of Web content and applications. CSS allows a developer the ability to separate content from design.  The X/HTML controls the semantic information and the CSS controls the presentation information. In other words, X/HTML should mark up what the page means, while CSS determines what it will look like. This then lets you make changes to either without touching the other.

Using separate style sheets rather than inline styles or style blocks in the page’s header allow authors to make wholesale changes in the way a site looks just by editing the style sheet.  This greatly reduces the amount of time spent on site maintenance and redesign.  If a site is well structured, the same content can be styled in any number of ways to make it look infinitely different.  See CSS Zen Garden as an example of this taken to the extreme.

Thursday, June 28th, 2007 Navigation No Comments

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:

• 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 is doubly problematic.

Wednesday, June 27th, 2007 Navigation, Style Guide 1 Comment

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 the links all 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.

Wednesday, June 27th, 2007 Navigation, Style Guide 2 Comments

Make link text meaningful

When you are navigating the Web, any portion of text can be a link. It is not necessary to tell a visitor to “click here”. Instead, write your link text to describe the page it links to.

Here are some examples of poor link text:

• For a list of frequently asked questions, click here.
• For a list of frequently asked questions, visit http://www.tamu.edu/sub/faqs.html.
• For a list of frequently asked questions, visit our frequently asked questions page.

In each case, the second clause is redundant. The reader should be able to click on the words “frequently asked questions” which itself is the link to the FAQ page. Instead, the sentence could be written:

• Our Frequently Asked Questions page provides answers to many common issues.

However, keep your audience in mind. If the page is intended 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.

Wednesday, June 27th, 2007 Navigation, Style Guide No Comments

Organize files into 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.

Wednesday, June 27th, 2007 Navigation, Style Guide No Comments

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. So, while http://www.tamu.edu/visit/index.html is valid, http://www.tamu.edu/visit/ is much easier to remember.  Note that this is 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.

This is also helpful for linking purposes if you or the site where you are linking changes their index page. If pages link to /visit/index.html and it gets changed to visit/index.php, for example, there is the possibility of a broken link if it is not found and changed. However, if those same pages linked to /visit/, the links will work regardless of the index page and extension.

Wednesday, June 27th, 2007 Navigation, Style Guide 7 Comments

Make your Web site easier to navigate

Let’s face it; there are too many pages in “tamu.edu”. That being said, it is our responsibility to help people get to the information they are trying to find. Some of this can be accomplished through some simple reminders.

  • With so many offices, departments, servers and sites at Texas A&M, navigating from one site to another can become confusing because many sites are so visually, structurally, and informationally different. So to ease possible confusion, use similar navigation, color and visual elements to the main WWW site and university branding guide.
  • 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 that 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.
  • 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.
  • Make thumbnail pictures clickable links. Users expect thumbnails to be links to the material they represent.
  • Make sure your organization’s name is on all pages. This can be accomplished using the title or header of the page.
  • 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, icon bread crumbs, or other wayfinding strategy.

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 “Staff” 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.

Also, 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 your <title> tag the same as the text title on your page.

Another thing to consider is naming list items in a parallel structure. So if your topic areas are action-oriented like “finding programs”, “contacting experts”, “choosing major”, naming your support link “help” would not be parallel. Instead name it “getting help” in order to maintain the parallel organization.

› Continue reading

Categories

Archives