Web Practices

Good Web Design Practices

* Consistency between pages (headers, footers, navigation, etc.)

o Use the same design between different pages

* Accessibility: understand how to develop a site for people with disabilities

* Know target audience

o Know who it is who is visiting your site.

o What are they coming to your site for?

o Design your site around your audience.

* Clean, proper layout

o Use clear headings

* It is important that people should know exactly what a link means. This avoids confusion and improves the likelihood that people will view a page since they know what to expect.

* Good Examples: "Statistics", "University Facts"

* Bad Examples: "Information", "Content"

o Use common icons that people understand

* Typical Windows or MAC icons are good because people are already familiar with them. They know what the icon means without requiring text beside it to explain.

* Good Examples:

o Avoid burying information that people have to dig through pages to find

o Less scrolling is better

* Users prefer to scroll up and down rather than left and right

o Always check spelling

* Functionality is more important than appearance

o Appearance is important but if the site does not work or the content they require is not available, people will likely not return to your site.

* Content is key!

o Remember, the thing people are looking for when visiting your site is almost always the content - not extra bells and whistles. Avoid using "cool" special effects simply because you can. Any special effects should always serve a purpose.

* Keep site up-to-date

o Consider using "last updated on" statement so users know how current the information is

o Your web site is a publication of information. People visiting your site expect that the information they see is correct and reliable. If they find out it is not, they will likely not return.

* Provide printable versions of large documents

o Use either PDF or printable pages with less graphics / background colors so that it will print nicer. Too many graphics on a page designed for people to print wastes the user's ink.

* Use Alternative text for images!

o Images can have what is called "Alternative" text associated with them.

o This makes a piece of text appear when you hover over the image.

o It is good to help people understand what icons / images mean, even if you think it is clear.

o These are also good for people who have slow connections and don't want to wait for all the images to load. The text will appear in the place where the image is waiting to load.

* Use "relative sizing" for text

o Note: By default, text on web pages use relative sizing.

o Users have the ability to change the size of all the text on their browsers as long as the Web page developer does not force a page's text to be a certain size. If the developer does this then the text is the same size no matter what the users "text size" settings are.

o If the user has poor vision, they are likely to set the text size to "Larger" or "Largest" in order to see the text on the screen. If they cannot do this on your site, it makes for reading the page more difficult for users with disabilities.

* Use site maps

o Site maps provide one-page access to all the pages on your site. In case people don't want to figure out how to find a page through the navigation you use, a site map provides a quick way for them to find the information they need.

* Test pages on different machines / browsers

o Web pages appear differently on different machines. It is important to test your sites on different machines and with different programs.

o Test on both PCs and Mac's

o Test using Internet Explorer 5.x and higher

o Test using Netscape 4.x and higher

o Complex special effects often don't work the same (or even at all) on different platforms.

* Understand monitor resolutions

o Monitors have what is known as "resolution". Some screens have small resolution which means that icons, text, etc is much larger and hence less information can appear on screen at a time. Larger resolutions allow for more information to appear on screen at once.

o Don't design the page too big for small monitor resolutions. They won't be able to see much on screen.

* Ensure all links work properly

o Broken links to pages reflect poorly on your site, department, and