Pam Van Londen » Design http://pamvanlonden.com Corvallis Artist, Oregon Artist. Creating Every Day...paintings, web sites, and courses Oregon daily painter, murals and portraits. Corvallis Web Designer / Web Developer. Original abstract landscape oil paintings Wed, 16 May 2012 18:20:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Stylesheets for Handheld Devices http://pamvanlonden.com/stylesheets-for-handheld-devices/ http://pamvanlonden.com/stylesheets-for-handheld-devices/#comments Thu, 04 Mar 2010 02:27:34 +0000 Pam Van Londen http://pamvanlonden.com/?p=4112 To improve readability of your web site on smart phones and other handheld devices, add a handheld media type style sheet which simplifies the page layout, user interface, and eliminates unnecessary items. <!-- for other devices --> <link href="handheld.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 320px)" /> <!-- for iphones--> <link href="handheld.css" rel="stylesheet" type="text/css" [...]]]> To improve readability of your web site on smart phones and other handheld devices, add a handheld media type style sheet which simplifies the page layout, user interface, and eliminates unnecessary items.

<!-- for other devices -->
<link href="handheld.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 320px)" /> 

<!-- for iphones-->
<link href="handheld.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

Set the viewport

In the head section, set the viewport device-with property:

<meta name="viewport" content="width=device-width">

Now the media queries, below, will work for most devices.

Media queries in CSS

Mobile browsers can also be targeted using media-queries in the CSS file. The code inside of the @media brackets is only executed when the device width is less than specified (i.e. 320px). Media queries are also executed by resizing the browser window of a desktop or laptop. The example below would change the width of the page depending on the device width.

@media only screen and (device-width: 1024px) { #page-wrap { width: 1024px; } }
@media only screen and (max-device-width: 320px) { #page-wrap { width: 95%; } }
@media only screen and (min-device-width: 800px) { #page-wrap { min-width: 800px; max-width: 960px; } }

Key recommendations include using:

  • Single-column liquid layout, which does not use frames, popup windows, or JavaScript.
  • Useful alternative descriptions on images.
  • Simple, non-dynamic menus with links that look like links.
  • No floating:  * {float: none;}
  • A maximum width for images: #content img { max-width: 250px;}

Note: According to Jeff Starr, “the trick to getting Windows Mobile to recognize handheld stylesheets is to capitalize the media attribute value for the screen stylesheet.”

Resources

]]> http://pamvanlonden.com/stylesheets-for-handheld-devices/feed/ 0 Creating a stylesheet for IE http://pamvanlonden.com/creating-a-stylesheet-for-ie/ http://pamvanlonden.com/creating-a-stylesheet-for-ie/#comments Thu, 04 Mar 2010 01:45:49 +0000 Pam Van Londen http://pamvanlonden.com/?p=4108 Internet Explorer 6, 7, and 8 can often provide a different design than intended due to the lack of adherence to WC3 standards. To help make your web design look like it does in FireFox, Chrome, and Safari, try these options: Use IE-only hacks in an existing external style sheet. Use a conditional statement in [...]]]> Internet Explorer 6, 7, and 8 can often provide a different design than intended due to the lack of adherence to WC3 standards. To help make your web design look like it does in FireFox, Chrome, and Safari, try these options:

  • Use IE-only hacks in an existing external style sheet.
  • Use a conditional statement in the <head> section which calls embedded <style> definitions.
  • Use a conditional statement in the <head> section which calls an external style sheet build just for IE: ie.css.

Resources

]]> http://pamvanlonden.com/creating-a-stylesheet-for-ie/feed/ 0 Adding Style to Navigation Lists http://pamvanlonden.com/adding-style-to-navigation-lists/ http://pamvanlonden.com/adding-style-to-navigation-lists/#comments Thu, 23 Apr 2009 19:23:16 +0000 jamesholladay http://pamvanlonden.com/?p=2526 CSS pseudo-classes Notice the menus in this page have a pseudo-class applied to them for the link, visited, hover, and active, colors. For the site with no need for fancy menus, these pseudo-class changes in the style sheet can make tagging your pages fast. Where “a” is a link tag, “a:hover” is a pseudo class, [...]]]> CSS pseudo-classes

Notice the menus in this page have a pseudo-class applied to them for the link, visited, hover, and active, colors. For the site with no need for fancy menus, these pseudo-class changes in the style sheet can make tagging your pages fast.

Where “a” is a link tag, “a:hover” is a pseudo class, which can have a different look for each type of navigation on your page. The footers at the bottom of this page have a “a.footer:hover” pseudo class applied, which works because a class called “.footer” is defined.

When list items are used to create menus, stylesheet definitions can easily transform them to vertical or horizontal bars with tabs, borders, and rollover effects. Examples:

This code:

<nav>
     <ul class="toolbar">
       <li><a href="#" title="one">one</a></li>

       <li><a href="#" title="two">two</a></li>
       <li><a href="#" title="three">three</a></li>

     </ul>
</nav>

…and this style sheet:


ul.toolbar {
  margin:0; padding:0; text-align:left;
}

ul.toolbar li {
  margin:0; padding:0; display:inline; list-style-type:none; font-size:12px;
}

ul.toolbar li a {
  margin:0; padding:10px; text-decoration:none; color:#6600CC;
  border: 1px solid #6600cc;
}

ul.toolbar li a:hover {
  margin:0; padding:10px; text-decoration:underline; color:#fff;
  background-color:#6600CC;
}

…give you a menu that looks like this (roll over the menu items to see them change):

 

Additional Resources

]]> http://pamvanlonden.com/adding-style-to-navigation-lists/feed/ 0 Server Side Includes http://pamvanlonden.com/server-side-includes/ http://pamvanlonden.com/server-side-includes/#comments Thu, 16 Apr 2009 19:42:37 +0000 jamesholladay http://pamvanlonden.com/?p=2406 What makes a web page different from a web site is how the pages connect to each other visually and mechanically. The purpose of a template is to provide a consistent message to the users, via color, navigation, content, and placement of elements, no matter what page they land on. Once you have a page [...]]]>

What makes a web page different from a web site is how the pages connect to each other visually and mechanically.

The purpose of a template is to provide a consistent message to the users, via color, navigation, content, and placement of elements, no matter what page they land on.

Once you have a page layout, color scheme, and navigation items defined, this initial page can become a template which is applied to all other pages. The beauty of this is when you need to add or change menu items, colors, or move a section, then all the pages with the template applied (Dreamweaver .dwt templates, that is) will change as well. If you aren’t using a site management application like Dreamweaver, then building a page with server side includes (ssi)—sometimes called components, snippets, libraries, or assets— for each section will still save you time. And, you can combine ssi with Dreamweaver templates to improve efficiency.

Start by bringing your prototype design file into Dreamweaver, either from the slicing up of a Photoshop, ImageReady, or Fireworks file, or from creating a block/div layout. Then choose one of the following methods to break out the areas of the page into easily updateable snippets of code and content:

  • Service Side Includes (.htm, .txt, or .inc) These are called with ssi statements.
  • PHP include files (php, .htm, .txt, or .inc) These are called with php code.
  • Library files (.lbi, Dreamweaver only) These are called with proprietary statements.
  • Component files (GoLive only) These are called with proprietary statements.

Readings

Apache Tutorial: Introduction to Server Side Includes
Some heady information and some practical solutions.
Server Side Includes (SSI)
OSU Central Web Services Tutorials.
Webmaster’s Guide to Server Side Includes
Alex Rylance. Web Reference.
Server Side Includes
Ross Shannon. Your HTML Source. Many notes about controlling with the .htaccess file.
Comprehensive guide to .htaccess
Read the section on SSI; you may need to use .htaccess depending on the server options available.

SSI, PHP, and JavaScript meet different needs

Explanation supplied by student, Ben Jansen

While SSI can be used to add some dynamic content to pages, it is no replacement for a true server-side scripting language, such as PHP.

If you merely want to use library-like functionality, SSI is a good choice. However, if you plan to use PHP, there is no need to use SSI at all. PHP can do anything SSI can and much, much more.

Javascript is a completely different beast. It operates on the client computer. SSI and PHP are both server-side technologies. Javascript therefore is only useful for applications that can be handled solely by the client computer. For example, it is good for validating form input without forcing the client to make a trip to the server. Javascript is also good for modifying pages after they have been sent to the client, without server interaction.

So, while it is rather useless to utilize both SSI and PHP, SSI with JS or PHP with JS are complimentary combinations.

Server Side Includes (SSI)

With the ssi method, a page is built when a visitor requests it with within a browser. So the server does the work of compiling the sections of a page, rather than the web author putting a copy of all the sections in each page individually.

For instance, instead of leaving all the code for the masthead in the template page, move it to a new file. Leave out all the code that is already used in the template (doctype, body, etc.); take just the snippet that renders the masthead. Replace it with an include statement to "call" it when the page is requested by the user:

Masthead
<!–#include virtual="/masthead.htm"–>

which includes the logo, site name, and classes needed for the top portion of the site.

Navigation
<!–#include virtual="/navLeft.htm"–>
which contains one set of navigation.
Footer
<!–#include virtual="/footer.htm"–>
which contains the second set of navigation and the copyright statement.
Date last modified
<!–#config timefmt=’%B %e, %Y’ –><!–#echo var=’LAST_MODIFIED’ –>
which dynamically displays the date the file was last edited and posted on the server.

The reading above at the right, Apache Tutorial: Introduction to Server Side Includes, has this to say about paths for include statements:

The include element can determine what file to include with either the file attribute, or the virtual attribute.

The file attribute is a file path, relative to the current directory. That means that it cannot be an absolute file path (starting with /), nor can it contain ../ as part of that path.

The virtual attribute is probably more useful, and should specify a URL relative to the document being served. It can start with a /, but must be on the same server as the file being served.

Example

The CS 295 course web site (summer 2004) contains an include file for the masthead and global navigation, a separate one for the side navigation sets, which change each week, and an iframe for the content area. These areas reside in the main template, along with a call to an external style sheet, and is applied to each page.

When combining ssi files with Dreamweaver Templates, it is helpful to either:

  1. Make a template for each level of directories the site will use.
    • For example, navigation links can be coded with a relative path to their pages, but the file that contains these links is called by the template page using a relative or absolute path. Clone this page for the files that reside in one level of directories from the root, but change the path to the included files.
  2. Put the statement in an editable region of the template so the path to the file can be customized for each level of directory the page resides in.

If you use SSI with Dreamweaver, set the preference that allows you to see the include file while you’re working, otherwise, it is not visible until posted to the server.

Readings

PHP and MySQL for Dynamic Web Sites
Larry Ullman. Visual QuickPro Guide. Peachpit Press. 2003.
Pages 77 to 86; using external files.


PHP includes

PHP includes work like ssi includes but the statements are written differently. Save your snippets in separate files and call them from your template like this (note single quotes):

Masthead
<?php require(‘Templates/masthead.htm’); ?> or use require_once; good for connecting to a database. It will provide an error message if it fails.
OR
<?php include(‘Templates/banner.htm’); ?> good for cosmetic files; also provides error message if it fails. Use @include if you want to suppress the error message.
Page title
<?php $page_title = ‘Title
of Page’ ?> Add this other places in the page so you only have to type it once!
 
Date last modified
<?php = ‘Updated ‘  . date(‘F j, Y’, filemtime($_SERVER['SCRIPT_FILENAME'])) . ” ?>

Save the page as .php rather than .htm.

Library (.lbi) files

Libraries (Dreamweaver uses this term; GoLive calls them components) are items that get repeated on more than one page. Some examples are sets of navigation, copyright and disclaimer statements, logos, ads, contact information, and links to plugins.

Readings

HTML for the World Wide Web, 5th Edition
Page 117 to 132; chapter 7
Inserting and Managing Assets
Dreamweaver tutorial. Macromedia Support Center
DHTML and CSS For the World Wide Web, 3rd Ed
Page 370-371. JavaScript alternative to Dreamweaver’s templates and libraries.

When you build your site, create empty pages for each item in each navigation set and link to them from your template page. Then…

  1. Select the text/items to add to a library file.
  2. Modify->Library->Add Object to Library.
  3. Next time you need to add the library to a page, drag it from the Assets pallet to the page. It will appear highlighted and can be edited when you click Open in the properties panel.
  4. Edit content in a library file by selecting it, then using the properties pallet or library/asset pallet.

Note: since you’re building a site with consistent navigation, the relative address of the page to link to, rather than the absolute address, will suffice. Using the relative address will allow applications like Dreamweaver to update links automatically when you move files around.

One advantage SSI has over Dreamweaver Libraries is updating time. If you have a site with 500 pages, and all use a particular library, it takes a great deal of time to check the files out, make the update, wait for all pages to receive the update, and post them back to the server. With SSI, the change is made to just one file and when posted back to the server, the change appears in the effected pages with no time lost.

Readings

PHP and MySQL for Dynamic Web Sites
Larry Ullman. Visual QuickPro Guide. Peachpit Press. 2003.

Read
page 78-97 and 190-194.

HTML for the World Wide Web, 5th Edition
Pages 415 to 421; chapter 26.
Customizing templates with Dreamweaver and Fireworks
Macromedia Support Center.
Consistent web design with Dreamweaver MX templates
Mark Fletcher, Dreamweaver Developer Center.
An Introduction to Dreamweaver MX Nested Templates
Donald Booth is co-author of "Inside Dreamweaver MX" (New Riders) and works for Macromedia Technical Support as a team lead for Dreamweaver.

Template files

Templates typically store the title, meta tags, logo, navigation sets, and page layout for each section of a site. And on each page, there are defined areas where content can be edited outside the template, such the main content area (called an editable region by Dreamweaver).

Save your prototype file as a template file (.dwt) and apply it to all pages.

  1. File->Save File as Template…
    • The file extension will change to .dwt and be placed inside a new Templates directory within your site structure.
    • Select the content area and add an Editable Region.
  2. Open each page of your site and Modify->Templates->Apply template to page…
    • Save each page.
  3. Upload and test.
    • Check to see that all links work.
    • If not, make adjustments in the library and/or template file so that all links are automatically updated.
]]> http://pamvanlonden.com/server-side-includes/feed/ 0 Finalize the Masterpage design http://pamvanlonden.com/finalize-the-masterpage-design/ http://pamvanlonden.com/finalize-the-masterpage-design/#comments Thu, 16 Apr 2009 19:23:36 +0000 jamesholladay http://pamvanlonden.com/?p=2400 Masterpages method is more efficient than using individual snippet files called to content pageReadings Formatting for Accessibility Van Londen. 2004. Approximating Master Pages in PHP Spinning the Web. 2006. An Introduction to Accessibility on the Web Macromedia Training Cafe Accessibility Techniques for Dreamweaver MX Macromedia Training Cafe How to make skip navigation links this technique allows visitors who listen to websites (rather than read them) to jump over [...]]]>

Readings

Formatting for Accessibility
Van Londen. 2004.
Approximating Master Pages in PHP
Spinning the Web. 2006.
An Introduction to Accessibility
on the Web
Macromedia Training Cafe
Accessibility Techniques for Dreamweaver MX
Macromedia Training Cafe
How to make skip navigation links
this technique allows visitors who listen to websites (rather than read them) to jump over the navigation links on each page so they don’t have to listen to them over and over.
About Favicons
Wikipedia.com

Need more templates?

When you finalize the design of your masterpage, you can make additional masterpages for other uses, such as:

  • Subtopics which need new color schemes, imagery, or functions.
  • Content-only popup pages.

Additional templates are based on the original template, so that there is consistent use of color color, fonts, and layout.

The purpose of a masterpage/template is to provide a consistent message to the users, via functions, navigation, content, color, and placement of elements, no matter what page they land on.

A masterpage should include the following components:

  1. Masterpage Functions
    • Scripts such as PHP allow the masterpage to be "included" or "called" by each content page creating an efficiency when updates to the graphic design are needed.
    • For example, if you decided to update the name of the menus, one change in the masterpage is automatically applied to all pages of the site because they each include a call to the same masterpage.
    • Click the diagram to see a legible illustration of the concept. Masterpages method is more efficient than using individual snippet files called to content page
    • Learn more at Spinning the Web:
  2. Complete title tag
    • Name of the page.
    • Name of the site.
    • Short description of the site, written using the most important keywords.
  3. Meta tags
    • Some search engines still index your site by looking at meta tags. These are the most common to include:
      • Description of the site
      • Key words and phrases that visitors would use to search for the site.
      • Author of the site
      • Rating
    • If you don’t want your site indexed, then add the exclusion meta tags:
      • Noindex, nofollow, to keep site from being listed in search engines.
  4. Accessibility features
    • To ensure everyone can use your site, keep in mind that not all users have hands, ears, or vision. So consider incorporating these features:
      • Skip Navigation, to allow visitors who listen to pages–rather than view them–to jump over the navigation items each time they go to a new page.
      • Font-size enlarger icon. Many visitors do not know that the browser has a menu to increase or decrease the font size when they have trouble reading the page. Many new sites use a toolbar which includes skip navigation and a font-size enlarger to make it easier for the visually impaired.
      • Legible text and images. Many people are colorblind or have poor vision (and perhaps higher or lower resolution monitors than yours), so use text that is large enough, has enough contrast with the background, and does not flicker or blink when reading. Important details must not rely on subtle color changes to provide critical information because not all visitors can perceive color changes.
      • Images are quick to download, having file sizes smaller than 20k (10k or smaller is preferred).
      • Media files are labeled with links to necessary plugins and note the load time so visitors can choose whether to wait longer before viewing.
      • Downloadable files use appropriate formats. Label each with file type, links to necessary plugins, and are virus-free. Appropriate online file formats include:
        • Acrobat Reader (.pdf) files optimized for online viewing or download.
        • Text-files (.txt) work on all platforms without plugins and generally download quickly.
        • Graphics files (.gif, .jpg, or .png). Note that .bmp, .psd, .eps, and .ppt are not online formats and may be too large for some visitors to download quickly.
        • Media files (.ra, .qt, .wmf, .mov). New media file formats become available often, so test your files for download time and quality before asking your visitors to. Consider offering more than one format and size for visitors with slow internet connections.
        • Inappropriate formats for online deliver include .doc, .ppt, .xls, unless they are converted to web pages.
  5. Site and page name and purpose
    • Make it obvious what the site is about. Don’t rely on the <title> tag or menus to give all the information a visitor needs to understand at a glance what they can do at your site.
    • In the header area, use the name of the site and a brief description that uses the main keywords.
    • In the content area, use a descriptive headline.
    • Continue to describe the site or page’s purpose in the first paragraph.
  6. User Interface / Navigation sets
    • At this stage, link names are set, but the pages are not created for them to land on.
    • If using database-driven menus, testing of the links can be done at this stage.
  7. Legal statements
    • Copyright date and holder.
    • Link to a policies/legal page that describes what visitors are allowed to do with the content of the site.
  8. Date last modified
    • If using php pages, add this function to the footer or article byline to tell visitors when the page was last updated. Visitors want to know how old or fresh the content is.
      • <?= 'Updated ' . date('F j, Y',filemtime($_SERVER['SCRIPT_FILENAME'])) . '' ?>
  9. Contact information

    • Phone and address but NOT an email address.
      • Spammers will siphon the email address and begin sending you irritating email.
      • Adding a contact/inquiry form page during the content production phase will help alleviate unwanted email.
  10. Layout defined

    • Will the layout be suitable for the home page as well as the content pages?
      • If not, make addtional masterpages with customized designs.
  11. Add a favicon to help identify your site in the browser bookmarks list and tabs.
    • For FireFox, a .gif file will suffice.
      • <link rel="icon" type="image/gif" href="favicon.gif" />
    • For Explorer, an .ico file works best.
      • <link rel="icon" type="image/gif" href="favicon.ico" />
    • Convert most graphic files formats to ICO format with FavIcon from Pics’ free image converter.
      • Uncompress the .zip archive the converter provides and place the .ico fie in your images folder.
  12. Print the template to ensure no text is cut off, excess white space does not create extra pages, and excess ink is not wasted on large masterpage graphics. See instructions below.
]]> http://pamvanlonden.com/finalize-the-masterpage-design/feed/ 0 Including Redundant Components in the Masterpage http://pamvanlonden.com/including-redundant-components/ http://pamvanlonden.com/including-redundant-components/#comments Thu, 16 Apr 2009 19:11:00 +0000 jamesholladay http://pamvanlonden.com/?p=2389 Visitors to your site will want menu items listed on each page so they don’t have to click back and forth to move to a new topic. In addition, the visitor will want each page of the site to be a quick-read—once they see the home page, and understand it—they should not have to think [...]]]> Visitors to your site will want menu items listed on each page so they don’t have to click back and forth to move to a new topic. In addition, the visitor will want each page of the site to be a quick-read—once they see the home page, and understand it—they should not have to think about how pages are structured again. A consistant look and feel throughout the site will help visitors find what they want quickly and easily.

In order for web authors to provide that positive experience for visitors, and to keep from spending too many hours making redundant changes to the code or layout, efficiencies are built into the site’s design from the start.

Site versus Page

What makes a web page different from a web site is how pages connect to each other visually and mechanically.

Readings

HTML for the World Wide Web
Chapter 7.
DHTML and CSS For the World Wide Web, 3rd Ed
Chapter 18.
The Unusually Useful Web Book
June Cohen. New Riders. 2003.
Pages 110 to 119.
250 HTML and Web Design Secrets
Molly E Holzschlag. Wiley Publishing. 2004.
Page 72, 84.

Recommendations for efficiencies:

  • Include the following components in a masterpage (sometimes called a template), which is then called by each page, rather than hard-coded into each page:
    • headers (site name, logo, contact info)
    • footers (copyright, legal, contact info)
    • navigation sets (menus for audience, topics, locations, etc.)
    • dynamic content (rotating articles, news feeds, staff highlights, advertising, product highlights, etc.)
  • Within those components are often graphical elements that can be handled by the style sheet and masterpage files.
    • logos
    • icons
    • buttons

Navigation Sets
Adding Style to Navigation Lists

]]> http://pamvanlonden.com/including-redundant-components/feed/ 0 PHP Master Pages Method http://pamvanlonden.com/php-masterpages-method/ http://pamvanlonden.com/php-masterpages-method/#comments Thu, 09 Apr 2009 18:40:31 +0000 Pam Van Londen http://pamvanlonden.com/?p=2306 Masterpages method is more efficient than using individual snippet files called to content pageReadings Approximating Master Pages with PHP Spinning the Web. 2006. PHP using a typical ASP concept. Manage Your Content With PHP Christopher Robbins. A List Apart. 2002. This method uses a cookie to store a visitor’s’ preferences. Other Templating Systems Templating systems provide separation between presentation and application logic. mod_perl Documentation: Choosing a Templating System [...]]]>

Readings

Approximating Master Pages with PHP
Spinning the Web. 2006. PHP using a typical ASP concept.
Manage Your Content With PHP
Christopher Robbins. A List Apart. 2002. This method uses a cookie to store a visitor’s’ preferences.

Other Templating Systems

Templating systems provide separation between presentation and application logic.

One goal of efficient web development is to keep the content separate from styles and navigation. One standard way to accomplish the separation of content from styles is to use external style sheets.

And one way to keep content separate from other components such as navigation is to use include files. In CS 195 and CS 295 we’ve explored the use of Server Side Includes (SSI) and PHP include functions. That method generally includes components in a content page so that when a content page is requested by the visitor, a header, sidebars, menus sets, and a footer are combined with the content.

Another method is to use just one include file; the master pages; which already includes components such as page layout, headers, footers, and navigation. These master pages then “include” the “content” when requested by the visitor.

Read the following blog post/tutorial to see how output buffering and one include file (rather than many) can streamline site building:

Approximating Master Pages with PHP
Spinning the Web. 2006. PHP using a typical ASP concept.

Masterpages method is more efficient than using individual snippet files called to content page

]]> http://pamvanlonden.com/php-masterpages-method/feed/ 0 Dynamic Navigation http://pamvanlonden.com/dynamic-navigation/ http://pamvanlonden.com/dynamic-navigation/#comments Tue, 24 Feb 2009 22:24:29 +0000 jamesholladay http://pamvanlonden.com/?p=1828 Want to get fancy? Does your audience need your site to be fancy? Do you have time to devote to making your site fancy? Sometimes the simplest, most subtle changes will wow your audience, or at the very least (and most important) help them find their way and understand your message. Therefore, I recommend your [...]]]> Want to get fancy? Does your audience need your site to be fancy? Do you have time to devote to making your site fancy?

Sometimes the simplest, most subtle changes will wow your audience, or at the very least (and most important) help them find their way and understand your message. Therefore, I recommend your navigation sets be as simple as possible. That means:

  • Use seven or less main topics.
  • Keep them text-based rather than graphical.
  • Take advantage of a:link, a:hover, a:active, and a:visited styles in the style sheet.
  • Define different styles for each menu set and apply the pseudo-classes.
  • Ensure they are tab-key accessible.

OK. Ho hum. So what else is there? The sky is the limit! Your reading for this topic is a great overview of the most common options:

Form select drop down menu

Try W3Schools’ Drop Down navigation using the form select button. Does this method work best for your audience?

Try several of the other options listed on the Try-It-Yourself! .DHTML page.

Another option is this one if you’re looking for a keyboard-accessible menu:

Ultimate Drop Down Menu 4.2
Accessible Website Menu by Brothercake. Note the list of browsers which utilize the keyboard. Free for non-commercial use.

Adding the following to your <a href> tag will begin to make the menus tab-key accessible:

  • tabindex=0
  • onfocus=”MM_showMenu(window.menuitem,null,’idname’)”
  • onblur=”MM_startTimeout(window.menuitem,null,’idname’);”
]]> http://pamvanlonden.com/dynamic-navigation/feed/ 0 Navigation Sets http://pamvanlonden.com/navigation-sets/ http://pamvanlonden.com/navigation-sets/#comments Tue, 24 Feb 2009 22:19:26 +0000 jamesholladay http://pamvanlonden.com/?p=1824 Readings Zen Garden Templates applied to the same content. Style sheets are one aspect of style sheets. Accessify.com’s ListoMatic Online tool for generating menu bars. Adding Style to Navigation Sets Dynamic Navigation Read about dynamic options once you’ve learned to style them with CSS pseudo-classes. Many sites have more than one set of navigation: Site-wide/global [...]]]>

Readings

Zen Garden
Templates applied to the same content. Style sheets are one aspect of style sheets.
Accessify.com’s ListoMatic
Online tool for generating menu bars.
Adding Style to Navigation Sets

Dynamic Navigation

Read about dynamic options once you’ve learned to style them with CSS pseudo-classes.

Many sites have more than one set of navigation:

Site-wide/global topics

Keywords and phrases make up the main menu of a site. These words are the main reason people visit your site, so refrain from making the language too generic. For example, on the CorvallisArtGuild.org site, the main menu includes topics members want to read about:

Biannual Juries | Brush Strokes
| Buy, Sell, Free
| Call to Artists
| Discussion Topics
| ArtCentric Events | Clothesline Sale | da Vinci Days
| Fall Festival | Hanging Around Town | Online Art Tour | Regional Shows
| Monthly Meetings | Workshops

Each of these main topics might have subtopics, which include a list on the landing page for the main topic, or a submenu attached to the main menu.

Audience specific topics

Most web sites have more than one audience. University sites have several audiences, and a menu for each helps target the visitor’s experience and save time browsing and searching. OregonState.edu‘s audience menu includes the following:

Future Students | Current Students | Parents & Family | Faculty & Staff | Alumni | Visitors

Tools

Example accessibility features such as skip navigation, text-resizing, and theme changes can make up a toolbar, in addition to basic functions such as printing, emailing a friend, refer a friend, and bookmark this page/site. Sites that have members can include a member toolbar which allows them to register, login, get a password reminder, and logout. An ecommerce site might have a toolbar for checking the shopping cart, checking out quickly, or updating the account information. Here are some examples:

login | print | contact us | bookmark this site

skip | resize text | login | register | RSS

search | find a location | find someone | sitemap

UserID | Password | Register | Login | Password reminder

Preferences | Shopping Cart | My Account

report a bug | report broken link | contact us

Administrative/legal

Administrative and legal links are often hidden from view unless a visitor reads past the scroll line. Footers often include links to administrative or legal pages. In addition, they might include a repeat of main menus,and tools menus. For example, these sets of menus might appear at the bottom of each page of a site

  • Copyright date | Usage rights | Privacy Statement or Disclaimer | Webmaster email | Contact form
  • report a bug | report broken link | contact us
  • Main navigation
]]> http://pamvanlonden.com/navigation-sets/feed/ 0 Navigation Schemes http://pamvanlonden.com/navigation-schemes/ http://pamvanlonden.com/navigation-schemes/#comments Tue, 24 Feb 2009 22:16:06 +0000 jamesholladay http://pamvanlonden.com/?p=1821 Readings DHTML and CSS For the World Wide Web, 3rd Ed Chapter 18. The Unusually Useful Web Book June Cohen. New Riders. 2003. Pages 110 to 119. 250 HTML and Web Design Secrets Molly E Holzschlag. Wiley Publishing. 2004. Page 72, 84. Many sites have more than one set of navigation: Site-wide/global section topics Subtopics [...]]]>

Readings

DHTML and CSS For the World Wide Web, 3rd Ed
Chapter 18.
The Unusually Useful Web Book
June Cohen. New Riders. 2003.
Pages 110 to 119.
250 HTML and Web Design Secrets
Molly E Holzschlag. Wiley Publishing. 2004.
Page 72, 84.

Many sites have more than one set of navigation:

  • Site-wide/global section topics
    • Subtopics
  • Audience-specific topics
  • Tools
  • Footer (administrative)

Site-wide/global topics

Keywords and phrases make up the main menu of a site. These words are the main reason people visit your site, so refrain from making the language too generic. For example, on the CorvallisArtGuild.org site, the main menu includes topics members want to read about:

Biannual Juries | Brush Strokes
| Buy, Sell, Free
| Call to Artists
| Discussion Topics
| ArtCentric Events | Clothesline Sale | da Vinci Days
| Fall Festival | Hanging Around Town | Online Art Tour | Regional Shows
| Monthly Meetings | Workshops

Each of these main topics might have subtopics, which include a list on the landing page for the main topic, or a submenu attached to the main menu.

Audience specific topics

Most web sites have more than one audience. University sites have several audiences, and a menu for each helps target the visitor’s experience and save time browsing and searching. OregonState.edu‘s audience menu includes the following:

Future Students | Current Students | Parents & Family | Faculty & Staff | Alumni | Visitors

Tools

Example accessibility features such as skip navigation, text-resizing, and theme changes can make up a toolbar, in addition to basic functions such as printing, emailing a friend, refer a friend, and bookmark this page/site. Sites that have members can include a member toolbar which allows them to register, login, get a password reminder, and logout. An ecommerce site might have a toolbar for checking the shopping cart, checking out quickly, or updating the account information. Here are some examples:

login | print | contact us | bookmark this site

skip | resize text | login | register | RSS

search | find a location | find someone | sitemap

UserID | Password | Register | Login | Password reminder

Preferences | Shopping Cart | My Account

report a bug | report broken link | contact us

Footer links

Footers are often hidden from view unless a visitor reads past the scroll line. Footers often include links to administrative or legal pages. In addition, they might include a repeat of main menus,and tools menus. For example, these sets of menus might appear at the bottom of each page of a site

  • Copyright date | Usage rights | Privacy Statement or Disclaimer | Webmaster email | Contact form
  • report a bug | report broken link | contact us
  • Main navigation

Dynamic Navigation

Read about dynamic options

]]> http://pamvanlonden.com/navigation-schemes/feed/ 0