Web Design and Usability Techniques

Course specifications

Course number: 077-912
Course length: 2 days

Hardware/software required to run this course

Windows 95, 98, NT or 2000, or Macintosh OS.

32 MB RAM

A 486 or faster processor (Pentium or equivalent is strongly recommended).

An 800 x 600 or higher resolution color monitor set to a minimum of 256 colors. For best image quality, we recommend setting monitors to High Color (16-bit).

Microsoft Internet Explorer 4.0 or later.

Netscape Navigator 4.x. Some concepts and exercises in this course discuss support issues in Navigator 4.x.

A working connection to the Internet.

Microsoft Personal Web Server (PWS)

Browser Sizer: Download a free copy at www.applythis.com/browsersizer/

(Optional) PowerMapper: Download an evaluation copy at www.electrum.co.uk/mapper

Mac users: Download the Macintosh version of the W3's Tidy program at www.geocities.com/SiliconValley/1057/tidy.htm. Once there, click on the "download" link to access the Macintosh download page.

Course description

Overview: This course is designed for individuals getting started in Web design and development, and focuses on creating static sites. Dynamic, database-driven sites involve additional design approaches that are beyond the scope of this course. However, the concepts in this course still apply to dynamic content, since the focus is on what the user sees, rather than how the content is generated. This course is designed for anyone interested in learning some important principles of Web design that apply to just about any purpose or theme. You will explore several pitfalls of Web design and how to avoid them, and a variety of design tips and guidelines that you can use no matter what your Web site project entails. Students taking this course should have at least intermediate-level experience with HTML, including tables and forms, and familiarity or experience with Cascading Style Sheets (CSS).

Delivery: Instructor-led, group-paced, classroom-delivery learning model with structured hands-on activities.

Performanced-based objectives

• Identify common problems in Web design.
• Effectively plan a Web site project.
• Create designs that focus vital content above the "fold".
• Identify image formats.
• Use images effectively.
• Use color effectively.
• Recognize the benefits of valid HTML 4.0 code.
• Identify structural problems.
• Use server-side includes to organize and maintain code templates.
• Apply CSS styles that break down gracefully.
• Critique a site's usability.
• Apply techniques that enhance usability.
• Recognize effective navigation techniques.
• Create accessible Web sites.
• Design for different monitor resolutions.
• Use browser detection scripts.
• Publicize your Web site.
• Write effective meta content.

Course content

Lesson 1: Overview of Design Issues

Common Problems in Web Design

Lesson 2: Planning a Site

The Planning Phase

Choosing a Site Metaphor

Content Outlining and Storyboarding

Lesson 3: Design Guidelines

Choosing a Design Approach

Using Site Mock-ups

Page Design Considerations

Lesson 4: Effective Use of Images

Choosing the Right Image Format

Optimizing Graphics

Lesson 5: Effective Use of Color

Color 101

Color and Design

Lesson 6: Writing Good Code

Authoring with HTML 4.01

Validating Your Code

Organization and Maintenance Techniques

Lesson 7: Safe CSS

Styles that Break Down Gracefully

Web Typography with CSS

Lesson 8: Creating Usable Sites

Principles of Usability

Simple Usability Techniques

Designing Effective Navigation

Lesson 9: Accessibility

Creating Accessible Sites

HTML and CSS Accessibility Techniques

Lesson 10: Dealing with Browser Incompatibilities

Browser and Platform Issues

Using Browser Detection Scripts

Lesson 11: Publicizing Your Web Site

Promoting Your Site: Meta Content

Lesson 12: Review

Apply Your Knowledge

Appendix A: Quick Reference