Web Design and Usability Techniques
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.
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.
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
Lesson 5: Effective Use of Color
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