Web Design Navigation

 

Page 2 of 212

This second page of website navigation options are less commonly used, but many are still effective and necessary for certain website layouts. it is important to remember that the primary determinant of any navigation option should be whether it works effectively in the layout, and if the menu can be viewed effectively by all website visitors. Note that "text links in tables" and "Frames" should not be used on internet websites, and were included here since many of the websites we evaluate have them in place currently.

 


DHTML Menu Systems

Navigation Sample DHTML stands for Dynamic HTML, which as it name suggests is a mixture of JavaScript and HTML. This type of menu system provides drop-down functionality, CSS styling for menu/text colors, and the ability to embed images into the content. Note that DTHML menus were very popular in the past, but is less common today since most are complicated to code, are memory intensive, are not always cross-browser or device compatible, and many are not ADA accessible. For compliancy most DHTML menus would employ the <noscripts> tag (hidden unless JavaScript is disabled) and embed a list menu. The newer DHTML menus fair better in this regard, but most designers will use a newer JQuery menu when advanced functionality is needed.


Flash Menu Systems

Navigation SampleFlash Menus were once very popular, but much less so now. The reason for their popularity is that Flash allows for customization in look by employing frame-by-frame animation that is impossible to get with other options; yet, the downside is that Flash menus are complicated to build and script, and are not search engine friendly (the content can't be read by the engines) so in effect a Flash menu is like having no menu. In some cases a Flash menu is absolutely needed, often the case where the menu is integrated into the Flash header, and in this case it would be necessary to provide an additional SEO friendly navigation menu, such as footer links noted above.


Graphical Menu Systems

Navigation SampleBack when I started designing, Graphical Menus were the popular option. You would see them as buttons and navigation bars in a variety of stylings, and in many cases the button would have two or three aspects that would be linked to the button action (non-active state, mouse-over state, and active state) by JavaScript ... known as an image-rollover. Much like with Flash, graphics allow one the freedom to make the button or navigation bar look anyway desired. The problem is that graphics, like Flash, can't be read by the search engines though "alt" tags will help. So for example, if you have a button titled "services" with the text added by a photo-editor, then the search engine will read the link, but not the button title. Since navigation titles are very important for SEO, this just doesn't work, and of course it doesn't work for adaptive technology either. The solution is to add the button name as text on top of the graphic, and use div tags or list menu (not tables) for the layout. Some designers do this, but many still don't.


Image-Mapping Systems

Navigation Sample Image maps are effective when you wish to have "hotspots" defined within a single image; this is created by assigning hyperlinks (clickable regions) to coordinates within the image location. This would be useful in a case where you have a picture with doors and windows and wanted each to link to a separate page, or for an Advertisement that is part of a graphical header. In some cases the better option though is to simply "slice" the image (the image is cut into pieces) and then combined together with tables (less often now) or CSS code to join the parts into a visual whole.


Menu Systems in Frames

Navigation Sample Frames were often used in the past by employing a "Frameset". This allowed for one to have fixed portions of the website, ie. the header, left column, footer, etc, with the primary content area changed by targeting that specific content frame in the navigation column frame. The advantage here is that the content portion could bring in any page (or an external website page), and the URL of the content is not visible. Frames are rarely ever used anymore since they too are not SEO friendly; note that what a search engine finds when they come to a frame's page is the frameset (not the content), and being that the frameset is merely a structural object used to join the different frames it has no indexable content on its own. There are a few ways to help in this regard, but as a rule, Frame websites are not recommended for internet websites.


Form Menu Systems

Navigation Sample Form Menus use the "form" element (as with contact forms) to create navigation links. This is not a common option, but in some cases it can be an effective way to provide a vertical drop-down menu system within a page's content area, or on a sidebar. Form menu systems generally use the form's "select" or "Jumpmenu" fields with a "go" or "submit" button, though a button is not necessary when javascript is employed.


Text Links in Tables

Navigation SampleNot long back many designers would use tables to layout their menu. With tables you can assign a background color, a border color, the width of the table and individual cells, padding/margin, and a cell roll-over color which allowed for some nice, albeit simple one level, navigation menus. Professional designers don't use tables anymore since the layout options are limited in comparison to what the more advanced menu systems offer (CSS can do all this and more), and since tables are not ADA compliant.

Page 2 of 212

© 2002-2012 E.Curtis Designs. All Rights Reserved | CA Bus Lic #150552 | Privacy Policy