Webmasters 
Alabama District

Page/Site Design

Take some time to think through your plan for your site and your page layout.

Well Organized/Logical Page Layout

A visitor to your website should be able to understand how your page is structured and the logical order within just a few seconds of visiting your site.  Those things that should be most clearly obvious include:

  • Site identification area - this is usually an area at the top of the page that contains name, address, and logos
  • Site navigation - an area that is basically the same on all pages so the visitor can understand where they are in the website and how to get to where they want to go.  Do NOT make the site navigation vary from page to page.
  • Date updated - while not absolutely required, it sure is nice to know when a page was last updated so you can get some clue if you might be looking at stale our out-of-date information.  The date-updated area is very frequently at the bottom of the page along with any copyright notice that might be applicable.

You might be asking as to why it is important to have the Site identification area on every page?  You must remember that very frequently visitors may come to your site by way of a Search Engine like Google or Yahoo.  The search criteria may return one of your secondary or tertiary pages (in other words one of the pages that is NOT your home page).  If you don't have Site identification and navigation on that page the visitor will have no clue what they are looking at.  These days, more and more people are finding our local chapters by doing web searches.  We need to make sure that they find something that will entice them to coming to one of our events.

A really great site for site design as well as page layout is the Web Style Guide.  Another fun page is Web Interface Design.

Simple Use of Fonts & Text Color

Sometime take careful note of professional publications.  Look at newspapers, advertisements, brochures, posters, and professional websites and notice the use of fonts, text-size, and text-color.  What you will normally see is that there are no more than three fonts on a page (in this case bold and italic are considered to be styles of a font).  Unless you are dealing with a very rare case you will see no more than four text-sizes.  Those sizes are not randomly chosen either.  It will be for things like: titles, sub-titles/headers, body-text, and captions (generally legal notices at the bottom are considered something completely unique).  And you will usually only see three text-colors (this does not include the colors used for links).  Styles like bold and italic are used very sparingly.  Just take some time and look.  Whenever you are in a doctor's office or waiting around somewhere look around at the professional publications.  If you parrot what you see over a time you will become better and better.

Screen Width Madness

One thing that is very frustrating to me is when I visit a website whose webmaster assumes that everyone has a screen/monitor that is as wide as theirs.  Having to use the horizontal scroll bar to see the contents of page is just a real pain.  Many site visitors will become frustrated and leave.  A good rule of thumb is that the page should either be scalable, which means that if you change the width of your browser then the page will adjust to fit the new size.  This can be a challenge but is very nice when it is done correctly.  Or at a minimum the page should be no wider than 800 pixels.  Preferably it should be less.

Site Test

Use the following link to confirm how well your site handles two primary issues.  Having no back button, and a screen width of 800 pixels:

Site Test


Alabama District
www.Alabama-gwrra.org
Gold Wing Road Riders Association
www.gwrra.org