The Working Area - Navigation Tools - Functionality with Flair
Email Me at Keith@theworkingarea.com
 
Home
About Us
Navigation Tools
Contact Us

Buttons, Menus, Tabs, and Links.

Navigation Functionality with Flair!

Unless your website is a static display, users are going to need to navigate between pages. This can be done through the use of hyperlinks, menus, buttons, or tabs. Here is a little secret; they are all hyperlinks. Web designers just use decoration to make a simple hyperlink easier to find and better looking. On the next two pages we list some "Do's and Don'ts" for creating a good website. Here are some examples of different navigation tools you can use, along with some pros and cons for each type. Let's start with the navigation buttons used in the header above. These buttons are strictly text defined, meaning that there are no images to load. One of the positive things about these buttons is the ability to change the look of the button for the page you are on. This feature is handy for both traditional monitors and newer touch screen devices. Hovering is used but the buttons are fully functional without it, so this is neither a "pro" nor a "con." The obvious downside is that they are not as flashy as some other tools.

Drop-Down Menus

The drop-down menu is really handy if you have a lot of menu items with sub-menus. This provides a single navigation point for all of the associated pages. The disadvantage is that it is a fixed size, meaning that as screen sizes get smaller (like viewing on a smart phone), the menu will wrap around, making the drop-down a little confusing. Another downside is that the menus cover up text or images on the screen as they drop-down. Lastly, the drop-down action is triggered by hovering over a button. Hovering is not a feature supported by touch screen devices. So, as more and more users are buying smart phones and tablets, drop-down menus are becoming less and less useful.

Image Animated Buttons

Home Services About Us Contact Us

Let's face it, animated image-rich buttons look cool, but there are some drawbacks. This menu bar contains eight different images; two for each button. Any time you add multiple images, you increase the loading time for your page. Many viewers hate waiting for a page to load because there are too many different images. A typical user will wait 5 seconds for a page before moving on. The biggest downside of animated buttons, however, is the introduction of touch screen devices. Hover doesn't work on a touch screen, so those glowing red eyes and flaming nostrils never even get seen on a tablet or smart phone. If you are reading this on a touch screen device, you may wonder what we're even referring to because these cool features aren't even displayed.

Menus

 

Menus were the first navigation tools used by computers. Before them, everything was done using command lines. If you wanted to go to a different page, you would type something like: "goto: www.theworkingarea.com/AboutUs.html." But with menus, enter a "hotkey" or number and you were off to the races. Microsoft© programs still offer navigation with menus and hotkeys. This probably dates back to their first operating systems, before the introduction of Windows©, but it can still come in handy if your mouse ever stops working. Today, most menus are hyperlinks that operate like buttons in a vertical row. The upside is that even if someone is accessing your computer on one of the original IBM boxes, they will be able to navigate your site. The downside is that coding hotkeys is done with a jquery function in Javascript, which is not supported in Chrome or Safari, thus excluding a huge portion of users who are unable navigate your site. Like hover-dependent navigation tools discussed earlier, we are against using something that will not work on all current browsers.

Tabbed Files

Tabs

This content appears on the first tab and is visible when the page loads.

The tabs change color in order to readily reveal which tab is active. Tabs are great for small amounts of information that you want displayed within a page.

next ➧

Pros

The "Pros" of using Tabbed Content.

Tabs are very distinctive, if not over used and they are a great place to put bits of information that you want viewers to find easily. They are easy to navigate as most users are intimately familier with tabbed folders in filing cabintets and even novice computer usrs recoginize that different information will be in each file.

Another advantage is that tabs, like these, are developed using CSS and HTML, not graphics. This is important because text loads a lot faster than image files.

next ➧

Cons

The "Cons" of using Tabbed Content.

In order to display properly, tabbed sections are not scalable. What that means is that they will be the same size regardless of the size or resolution of the monitor. If you expect your website to be viewed on smaller touch screen devices or smart phones, this can be problematic. Especially if the tabbed sections are greater that the viewing area of the computer monitor or portable device.

Another disadvantage is that tabs, are not supported by older browsers. Believe it or not, there are still people using Netscape and Internet Explorer 6. Those browsers will display the first tab only.

next ➧

Hyperlinks

As mentioned previously, hyperlinks are the foundation for all of the buttons and tabs you will encounter on the internet. A hyperlink is line of code that tells the browser where to go when a user clicks on it. It used to be that just be a word or phrase would be a different color from surrounding text in order to stand out as a hyperlink. For instance the word Home in this paragraph is a hyperlink that will take you back to the Home page. The upside to hyperlinks is that they are easy to code and most computer users have encountered them and know their purpose. The downside is that they don't really stand out if you have a lot of text, like this page. Hyperlinks work best when they are separated from everything and say something obvious like:

"Click Here To Visit Our Facebook Page."