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.
- 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 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 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.
- 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.
- 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.
- 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 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 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.