ThinkTank Development Team
190 WPI & Mass Academy
1735 WPI / Burncoat H.S.
155 Berlin FIRST

User Rating:

Nick Galotti graduated from WPI in 2005 with a degree in Computer Science. He has been involved in FIRST robotics since 1997 and now advises a team out of Burncoat High School in Worcester, MA. He is also active in FLL by writing the scoring software for all the Massachusetts tournaments and advising a team out of Burncoat Middle School. He also helped write and manage the ThinkTank.

Best Practices for Webpages

Average Rating:

A very basic overview of items to be aware of when designing/coding a website. These are not specific to FIRST but are of great use on any site.

Best Practices for Webpages

There are many things that need to be taken into account when designing a site.  Some of these are as simple as making sure each image always has an alt tag or can be as difficult as determing how many menu items to use.  Below is a list of best practices for designing a site.

Navigation

  • One of the most complicated things to decide upon in a website is the menu.  The goal should always be to have between 5 and 9 menu items.  Never more because it will start to get cluttered and harder for people to find what they are looking for.  This is known as the seven, plus or minus two rule and turns out to be very helpful in determining how to structure websites.  When there are too many menu items the best solution is to put everything into categories with submenus.
  • Menu items should be brief, about two or three words each.  Anything longer and people will not read them.
  • It is usually a good idea to always have the headline of a page be the same text that is used in the menu.  This helps a lot with consistency.

Accessibility

Accessibility can make or break a site and is often very easy to overcome. There are many parts to making an accessible site and here are just a few concepts briefly listed below.

Text Size

  • Text size should always be references as em's or percentages, never as points.  This will allow people to increase the text size on their computer to make it easier to read.

Images

  • All images should have an ALT tag.  There are many standards out there but the best seems to be to use what the picture conveys.  If it is a person sitting next to a tree, then say so.
  • Never resize an image by using the width and height attributes in the tag.  Resize it before uploading it to the server so that the download time is faster.  A significant amount of people are still using dialup.

Colors

  • When picking colors always make sure the text color and the background color are visible to those who are color blind.  About 8% of Americans have some for of color blindness.  These can range from red-green color blind to blue-yellow or even the ability to distiguish different shades of the same color.  Always try to have contrasting colors next to each other and always avoid having red and green next to each other and the same with yellow and blue.

Scripts

  • Anything that is accessible through a script should also be accessible by other means.  Some simple ways to do this is have your links always go to a URL but have the Javascript cancel that action if needed.  This way the same information is accessible through a static means but those who have Javascript will be able to have a more interactive experience.

Flash

  • Flash should almost always be avoided.  It should only be used for videos and small animations to make the page look better.  Navigation or content should not be solely accessible in Flash for many reasons.  The first is because screen readers often have a hard time with them and the other is search engines will have just as hard of a time with the content.  While some search engines claim they now search flash files they still are not able to link to that part of the file.  When they link to the page the user will see the first splash intro and not the content they are looking for.

Videos

  • Videos are a tricky matter but when possible they should always include a transcript.  This can be helpful when you want to find a quote fast or for those who are deaf.

Links

  • Links should always be consistent in color and formatting throughout the entire site.  The only exception to this should be the menu.  The color of the link should be distinctive from the color of the text so it is easy to find.  Nothing on the site should ever have an underline except links.  Over the years people have been programmed to believe that if some text is underlined then it is clickable.  The goal should always be to not frustrate the user and having underlines on text that is not a link will do this.  While links should have an underline they do not have to and users will be able to figure it out if they don't.
  • When using mailto's in a link the text that is in the link should always be the email address.  The main reason for this is if the page is printed then that information disappears which could be important.
  • The text in a link should always refer to what the link goes to.  Never use text like "Click Here" or "Read More" since it isn't descriptive and will not help the search engines.
  • When linking to a file it is a good suggestion to put the file type and size after it in parentheses or brackets.  This will allow the user to know that the link they are clicking on may ask them to download it or open it in a different program.
  • If there is a banner across the top it should always link back to the homepage.

Locations of Elements

  • When deciding where to put items on your webpage try to follow what everyone else has done.  For the most part search boxes always seem to be in the top or on the left.  Putting in on the bottom right will make it harder to find.  Login links, shopping cart links, and other elements also seem to have a standard location.  The less guessing the user has to do the longer they will stay on the site.

 

My Library

You can add articles you like to your library for easy reference.