Tuesday, May 26, 2009

Best Practices for Web Design

You need background knowledge on the following:

  • URL
  • Audience
  • Subject
  • Developer

Page Layout

  1. Appealing
  2. Consistent site header/logo
  3. Consistent navigation area
  4. Informative page title that includes

    -company

    -organization

    -site name

  1. Page footer area has

    -copyright

    -last update

    -contact

    -e-mail address

  1. Good use of basic design principles
  2. Displays without horizontal scrolling at 800x600 and higher resolutions
  3. Balance of text, graphics, and white space on each page
  4. Good contrast between text and background
  5. Repetitive information (header/logo and navigation) takes up no more 1/3 to ¼ of the top portion of the browser window
  6. 1024x768 resolution
  7. Home page with interesting information
  8. 1024x768 resolution for home page
  9. Home page shows up in 10 seconds or less

Browser compatibility has current and updated versions of

  1. Internet Explorer
  2. Firefox
  3. Opera
  4. Safari

Content Presentation

  1. Common fonts used
  2. Techniques of writing for the Web are used
  3. Fonts sizes and colors are consistent
  4. Content is meaningful
  5. Content is organized consistently
  6. Information easy to find
  7. Timeliness accurate
  8. Outdated material not included
  9. No typographical and grammatical errors
  10. Links to other related sites
  11. Avoids the use of "Click here" for hyperlinks
  12. Hyperlinks use a consistent set of colors to indicate visited/non-visited status
  13. If other forms of media are used to convey meaning, alternate text equivalent of the content is provided

Navigation

  1. Links are clearly and consistently labeled
  2. Easy to use
  3. Clear text links are in the footer section of the main page with images, Flash, or DHTML
  4. Structured
  5. Use of aids such as site map, skip navigation link, or breadcrumbs
  6. Hyperlinks work

Multimedia

  1. Each audio/video/Flash file serves a clear purpose
  2. Enhances suite
  3. Captions provided
  4. Download times for audio or video files indicated
  5. Links to downloads for media plug-ins provided

Functionality

  1. Hyperlinks work
  2. Forms function as expected
  3. No JavaScript errors generated

Color and Graphics

  1. limit background to 3 or 4 colors
  2. Use color consistently
  3. Good contrast with text
  4. Convey meaning with more than just color
  5. Graphics are optimized
  6. Graphics do not significantly slow download
  7. Each graphic has a clear purpose
  8. Image tags use the alt attribute to configure alternate text to display
  9. Animated images are not too distracting

Accessibility

  1. Use attributes designed to improve accessibility
  2. Use title and summary when appropriate
  3. Use the id and headers attributes to improve the accessibility of table data
  4. If the site uses frames, use titles and place meaningful content in the noframes area
  5. To assist screen readers configure the html element's lang and xml:lang attribute to indicate the spoken language
If you find web designing to be out of your interest of just too complicated, you can always outsource your next web design project to RemoteWorkmate. Hire a full time virtual employee for just $3.50 per hour

1 comment:

  1. A Web designing is a professional who designs, creates, tests and maintains Web pages and Web sites. Web designers are sometimes just graphic artists, though most use the coding language html extensively.

    ReplyDelete