Web page Basics

Web designers should consider the following basic guidelines when creating web pages.
See also: Web Directory Setup, Web Image Capturing, and Club Web Site Tips

Site architecture:

• Organization is everything, so plan ahead
  • name files so they cluster together, OR
  • place them in a directory so they are easy to find
  • consider using an images directory for all graphics files
• Use directories to organize your information
  • name the directories carefully, as they become part of the URL
  • http://www.bates.edu/ils
• Every directory must have an index.html file (or index.htm)
  • web browsers look for that file first in every directory
  • without one, the directory's contents are listed
  • this looks tacky, and tends to lose your visitor

.htm or .html? they both work the same on either platform and for either browser, the .htm is standard for Windows, and the .html extension is standard for Mac OS. Just so that you don't accidentally specify a file that doesn't exist, pick one, and be consistent throughout your web site.

• index.htm and index.html are two different files
• WebMonkey.com: basics

Naming guidelines:

• File names are case sensitive:
  • only use capitals for emphasis/clarity in file names
  • filename.htm and fileName.htm are two different files
  • index.htm or index.html should be lower case
• Use only alphanumeric characters for filenames
  • Never use:
  • punctuation  , . ' " ; : ! ?
  • slashes or pipes  / \ |
  • special characters  @#$%^&*( )
  • spaces  file name.html
• You may use:
  • hyphens -  file-name.html
  • underscores _  file_name.html
  • mixed case  fileNAME.html

File types and extensions:

• Only certain filetypes can be read by web browsers
  • only one period (dot) followed by the file extension
  • the filetype and extension must match
  • .htm or .html for html files
    (pick one, be consistent)
    • file.htm and file.html are two different files to a web browser
  • .gif for GIF 256 color graphics
  • .jpg for JPEG photographic images
  • .pdf for Portable Document Format files

• File types continued:

• .css for Cascading Style Sheets
• .mp3 for MPEG (Layer 3) audio files
• .png for Portable Network Graphics
• .xml for eXtensible Markup Language

Information Design:

• provide information from the general to the specific
• Place most sought after information "above the fold" so that users don't have to scroll past the first screen to get it
• Let users know they are on the right (or wrong) track to finding the information they require on each page they access
• "Surface" particularly relevant information with additional links in key places
  • for example faculty/staff and student gateways
  • Make pages scan-friendly with headings, font size & color changes and indentation

efuse.com: The Basics of Navigation

Usability:

• Organize your information to capitalize on these habits:
  • in the information age, all of us have become scanners
  • in western cultures users read from upper left to lower right
• Consider the differently abled when you create web pages
  • alt tags describing or labeling all images accessibility, courtesy to slower downloads
  • make links mean something: NOT just "click here", for software that reads link names for the visually impaired and also for users who visually scan for information, it makes links easier to find
• Don't ever swap link colors
  (only change them if necessary)
  blue = unvisited link, purple = visited
• Pick page, text and link colors carefully
  • with sufficient contrast
  • dark text, light background, bright links, duller visited links
  • avoid using complimentary colors
    blue & orange, purple & yellow, red & green

Best practices:

• use the simplest technology to achieve required goals
  • if tables will work rather than frames, use them
  • if html will serve rather than an image, use it
  • if something only looks good in one browser/platform, change it
• Strive for fluid design practices
  • what a user sees on the web cannot be completely controlled so don't try
  • web pages are a unique medium for communication, so don't treat them like a printed page