Robert Graves
Robert Graves
B.Sc. Honours
Computer Science,
Brock University

Download Resume
PDF Icon PDF (90 kb)
Word Document Icon Word (35 kb)

 
Web Design Practices

Good Web Design Practices

  • Consistency between pages (headers, footers, navigation, etc.)
    • Use the same design between different pages
  • Accessibility: understand how to develop a site for people with disabilities
  • Know target audience
    • Know who it is who is visiting your site. What are they coming to your site for? Design your site around your audience.
  • Clean, proper layout
    • 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”
    • 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.
    • Avoid burying information that people have to dig through pages to find
    • Less scrolling is better
      • Users prefer to scroll up and down rather than left and right
    • Always check spelling
  • Functionality is more important than appearance
    • 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!
    • 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
    • Consider using “last updated on” statement so users know how current the information is
    • 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
    • Use either PDFs or printable pages with less graphics / background colours 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!
    • Images can have what is called “Alternative” text associated with them.
    • This makes a piece of text appear when you hover over the image.
    • It is good to help people understand what icons / images mean, even if you think it is clear.
    • 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
    • Note: By default, text on web pages use relative sizing.
    • 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.
    • 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
    • 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
    • Web pages appear differently on different machines. It is important to test your sites on different machines and with different programs.
    • Test on both PCs and MACs
    • Test using Internet Explorer 5.x and higher
    • Test using Netscape 4.x and higher
    • Complex special effects often don’t work the same (or even at all) on different platforms.
  • Understand monitor resolutions
    • 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.
    • 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
    • Broken links to pages reflect poorly on your site, department, and even University
    • Some programs exist which can automatically check all links on your site for you:
      • Macromedia Dreamweaver
      • HTML Validator
  • WYSIWYG (What You See Is What You Get)
    • WYSIWYG Editors are web page editors that visually show you what your pages will look like as you are editing them.
    • These are especially good for people who don’t know the code required to create web pages.
    • These also make page generation much quicker
    • Good WYSIWYG Editors:
      • Macromedia Dreamweaver
      • Adobe GoLive
    • Poor WYSIWYG Editors
      • Microsoft FrontPage
      • Microsoft Word
      • Netscape Composer
    • Poor WYSIWYG editors are often free but produce pages that don’t work well on different platforms.

Poor Web Practices

  • Inconsistent headers, fonts
    • Too many fonts make sites look messy and often hard to read. Usually one font for headers, one for sub headers and one for regular text looks good
    • Inconsistent graphics, headers, footers, etc make the site look unorganized.
  • Small fonts which are too hard for some people to read
    • People with poor vision may find it hard to read the text on your site. Try to use a font large enough for everyone to read.
  • Unclear headings, uncommon icons, no Alternative text for images
    • Headings with unclear sayings make it difficult for users to know what information is listed underneath it (or for links, what is on the next page).
    • Icons that aren’t common also make interpretation difficult.
    • Alternative text for images (discussed above) is important to help users distinguish what icons represent.
  • Too much text that is not needed
    • Don’t use unnecessary text just to make your site look bigger. Users often don’t read large blocks of text on the screen. Short is often better.
    • Sometimes lots of text is necessary however – e.g. a formal report
  • Overuse of graphics
    • Too many graphics may take a long time to load – especially if the user has a slow Internet connection.
    • Graphics should not dominate the page over content. Remember, users come to the page to see the content, not fancy graphics.
  • Information is out of date
    • People may not realize it is out of date and make decisions based on that information!
  • Use of pop up windows
    • Most people find pop up windows annoying – especially if there is more than one of them. Often people just hit the “close” button on the window anyway.
  • Deviation from the norm
    • Using practices that are not common on the web (e.g. different styles of navigation). People likely won’t understand the structure and won’t take the time to learn it. This is not to say the web designers cannot be creative. Just be careful whenever trying something new. Ensure new practices are tested properly for usability.

Written and Created by Robert Graves, Copyright 2003