Welcome back to our series of general guidelines to creating a successful website.  This is our third installment and don’t forget to check out our previous lessons on Content, Content, Content! and Web site Design: Function Before Form.

This article is going to focus on the design of your website:

Website Best Practices

What are website best practices? Just as the name would suggest a web site best practice is a set of “rules” that should be followed because the users of the web have been become accustom to a standard of how the web should look and act.  Ok, so that didn’t help very much did it.  If you remember from the previous lesson we talked about underlining text.  If text is underlined a user assumes that it is going to be a link (because it nearly always is), so the best practice is to only underline links and not for emphasis on the text. If you want to emphasize the text make it bold or italics.

Great, hopefully that cleared that up.  Now lets take a look at more best practices.  This is by no means a complete list, but we are going to touch on all of the big ones. Furthermore, none of these are rules; there are times when it is OK to break a best practice, it’s just not very often.

Navigation

  1. Consistent Navigation: This seems pretty common sense, but there are a lot of web sites that don’t follow this.  The navigation should be in the same spot regardless of the page you are on in the website.  Now a case to break this rule maybe after a user has entered into a logged in area; once a user logs in you may want to add or subtract items from the menu, or give a completely new menu.  Regardless of the changes, they should remain consistent once they have changed.
  2. Sidebar Navigation: Sidebars are not a website necessity, but they do allow for flexibility in for sites that have a lot of content.  This is one of the more breakable rules, but if you have navigation in the sidebar it the sidebar should be on the left side of the page.  The reason for this is so your eye will see that there is additional navigation before you get to the content.  If it appears on the right, a user may never see it.
  3. Drop-down/Fly-out Menus: Drop-downs and fly-outs can be very useful for websites that have a lot of information because it allows you to have navigation to many pages that may otherwise be buried. The big concern is to only have two-levels of fly-outs at maximum, any more than that, the navigation becomes confusing and difficult to understand.  Not good.
  4. Footer Navigation: Don’t neglect the footer of your web site.  It should contain some of the most important links on your site. Typically speaking, your footer should have your copyright information as well as navigation to your “Contact Us” page and your “Terms of Use” page. The reason these hide in the footer is because it isn’t your main content, but a user needs to be able to get to it from any page on your site. You don’t want it to distract from your message, but it is important information that needs to be there.

The Two-Click Rule

The two click rule is one of my favorites on the list. This rule states that no information on the web site should be more than two clicks away from the user.  The reason for this is that studies show that users will stop looking for the information they seek if they can’t find it within two clicks. There are many ways to combat this problem, you can use fly-outs or drop-down navigation, you can sidebars or columned layouts, make detailed footer navigation, but the best way is to reduce content.

Yes that’s right, reducing content eliminates clutter on your web site, ultimately making your site more user friendly. Web sites don’t need to contain all of the details of every program within your organization. More often than not it is better to reduce the content by combining information than to add another layer of navigation.

The 7-second Rule

No, this has nothing to do with dropping food on the floor. What we’re talking about is web site load times.  Did you know that American’s only have 7 seconds worth of patience for waiting for a web page to load?  Seems short doesn’t it? Time yourself the next time your waiting for a web site to load. It’s true. (I think we can see where this is going.) Your web site needs to load fast. 7 seconds fast! There may not be a lot a typical user can do about this, but if you notice your web site is loading slower than that, it’s time for a phone call your designer.

Content Below the Fold

“Below the fold” is a newspaper term for content that is below the fold line of the newspaper.  The content that is below the fold is considered secondary to the content that is above.  The content above is the attention grabbing, most useful, and captivating information.  The same is true on web sites except replace the word “fold” with “window.” When content is being generated the most useful and important information needs to be seen without any vertical scrolling. A lot of vertical scrolling can be distracting for a user, so make sure your user gets all the information then need before they start scrolling.

Horizontal Scrolling

Don’t do it… Period. Really, it is the worst thing you can do on a web site.

Custom Error Pages

Have you ever received a “4o4 Error: Page not found.” before? Probably. Well what that means is that you found yourself lost in a web site. Yes, it’s annoying, but if you have a custom page not found error page, you can make this experience a bit more palatable. On a custom error page you can include a search bar and a site-map of your site, so that a user can get back on the path they were on. This is highly useful in keeping users interested in your content; they are no longer just running into a dead end.

Site-map

Finally, is generating a site-map.  This can be a tedious process but it is ultimately worth it.  A site-map is a list of all the pages and sub-pages within your web site. This helps two fold: 1. It can allow users to see every page at a glance, so if there is content that is embedded, your user may have a chance to see that page. 2. A site-map is used by search engines to help identify what your site is about, and better categorize your site in search engines.  Hooray!


I hope you enjoyed today’s lesson, and even if you didn’t, I hope that you learned something. Our goal is to make the web a a less scary place, and we believe that unknown things are scary. I hope you tune in next time; we will be talking about Search Engine Optimization (SEO).

Thank you,
Anthony