Web Design -- Continuing Studies CS

21

Fundamentals of Web Design - slide 2

The Making of a Good Design - slides 3-4
Typical Web Site Evolution - slide 5
The Process of Web Design - slides 6-9
Pre-design Work - slides 10-11
Influences on Design - slides 12-24
Technology, Content, Economy, Visuals, Usability, Conventions

Accessibility Issues - slides 25-26

Maintenance/Improvement - slides 27-28
Resources - slides 29-30
1

Fundamentals of Web Design

Purpose of Web Design
Inform/Educate
Persuade

Influences on Web Design

Technology Used by Both Target Audience and Designer

Nature of the Content
Economy (Budget, Time, and Scale of the Project)
Amount and Type of Visuals Included
Meeting Usability Objectives

The Making of a Good Design

Content is important, but content alone will
not make your site work.

The Making of a Good Design

Content is important, but content alone will
not make your site work.

Good Design is:

Understandable
Interesting
Easy to use
Uniform in look and feel
Done from a visitors point of view:
WYSIWYW (What You See Is What You WANT)

Good Design Maxims

Rules are only guidelines -- no single
model fits every situation, and there is no
such thing as the right way to create a
web site.
Remember WYSIWYW
Web users want control over the online
material -- they want to seamlessly obtain
the information they need.
Dont force visitors down a specific path -give them control.
5

Typical Website Evolution

Generation
Generation
Generation
Generation

1
2
3
4

-----

replaces paper information

has flashy elements
is bleeding edge, causing content to suffer
content and technology are integrated

Ideally, try to skip the problems of

Generations 1-3 by planning your web site
carefully.

General Methods for Design

Ad-hoc Process (seat of the pants)
Hastily put together
Created on the fly
We need a web site TODAY

A methodical, well-thought process

includes:
Planning
Quality-assurance testing

Pitfalls of Ad-hoc Process

Many under construction banners

Old content
Dated design and techniques
Errors (broken links, broken scripts)
Convoluted logic results in a confusing site
Spaghetti code in the CSS that only the
original designer understands
Difficult to update and maintain

Benefits of Ad-hoc Process

Sometimes quick and dirty is not only
good enough, its the best way.
Its useable for:
Sites that will have a short lifespan
Very small web sites
Sites designed for a very specific purpose (a
single survey, a single class, a specific
event, etc.)

Why take the time to design and

test before launching?
Although it takes a lot more time up
front, a well-thought-out web site:

Has fewer problems

Is more effective
Is more understandable
Is easier to navigate

and may end up taking less time overall

to create and maintain.

10

Pre-design Work
Consider your organizations mission
Define the target audience
Set goals for the web site
Immediate
Long-term

Gather content
Organize and establish hierarchy of content
Chunk content into logical information units

11

More Pre-design Work

Create an outline or plan for content
Create your web site on paper first
Use a flowchart to depict how visitors will go
from one page to another

Think about the actual HTML, PDF, graphic,

sound, and other files you will need in the
site
Where will they be placed?
How will visitors access them?

Organize the files logically, so that the

development team can understand the
hierarchy of the web pages.

12

Influences of Technology on Design

Browsers
Internet Explorer is the dominant browser
<http://www.w3schools.com/browsers/browsers_stats.asp>
<http://www.e-janco.com/browser.htm>

Operating systems
Windows XP is the most popular operating system

Connection speeds
75% access the Internet using broadband (DSL/T1/T3)
25% access it using narrowband (modem)
<http://www.websiteoptimization.com/bw/0609/>

User screen sizes

80% of users are using a display with 1024x768 pixels or
more and a color depth of at least 65000 colors
<http://www.w3schools.com/browsers/browsers_stats.asp>
13

Influences of Content on Design

The content drives how the web site looks
Sites designed for students look different than sites
designed for staff, which look different from sites
designed for potential faculty
Sites designed for current employees look different than
sites designed for potential clients
Sites designed to get people to purchase items look
different than sites designed to provide information

Use quality content from subject matter experts

Have site reviewed PERIODICALLY by key members
(CEOs, Department Heads, Supervisors, etc.) of the
group the site supports
Have non-affiliated people review content for clarity
Have others proofread for grammar
Fresh eyes often see things you miss!

14

Economic Considerations

Budget concerns
Staff time for creation
Staff time for maintenance
In-house vs. outsourcing

15

Usability
Browsers dont use web sites -- people
do. Dont design a site for a particular
browser -- design a site for the user.
There are no generic people. Try to
envision a real person accessing your
site.
Most users absorb data visually.
Most users will not expend effort to
remember things about how your site
works.

16

Visual items
Compare:

17

Visual items
Compare:

18

Usability -- Making It Easy To Read

Factors that affect readability

Poor eyesight of users

Smaller, older computer monitors as displays
Poor color perception of users
Cocktail-party effect -- lots of information on a single web
page

Design fixes:

Use high contrast between text and background

Use lots of white space
Use larger fonts
Put key navigation buttons in the upper left
Dont rely on color alone to distinguish between elements on a
web page
Avoid busy graphics
Limit page noise -- ensure page elements dont compete for a
visitors attention
19

Usability -- Users Memory

Dont force visitors to remember how to
navigate/use the site
Provide redundant, easily recognizable
features
Generally, have visited and unvisited links
be different colors to make it easy for
users to remember where theyve been
Limit the number of items in a group of
choices
20

Usability -- Response Times

The amount of time a user will wait is
proportional to the payoff. If they know there is
something they want to see, they will wait for it.
Otherwise
1 second: no major potential for interrupt
10 seconds: users become bored
More than 10 seconds: user may leave
Without a progress bar or other browser feedback, users
generally will go about other business -- look at sites in other
windows, talk on the phone, etc. Designers must provide
some sort of indication as to how much longer the download
will take, if the wait will be more than 10 seconds.

21

Using Cutting-Edge Tools

Poor reasons:
To look cool
To prove you can

Good reasons:
To look cool!
To draw attention
To maintain
attention
To enhance
information
To inform or educate

22

Accessibility Issues
Section 508 of the 1986 Federal
Rehabilitation Act requires that entities
doing business with the federal
government must include solutions for
employees with disabilities when awarding
contract proposals.
The 1992 American with Disabilities Act
states that firms with 15 or more
employees must provide reasonable
accommodation for employees with
disabilities.
(see next slide for accessibility examples and fixes)

23

Accessibility in Web Design

Make the navigation clear and simple
Use a clean visual layout with ample white space
Use descriptive link texts (avoid using click here without more
information)
Provide text equivalents for non-text elements
Dont rely solely on color to indicate links
Dont make the screen flicker
Use plain, understandable English
Dont rely completely on high-tech solutions
Use markup and style sheets -- HTML for structure and CSS for
presentation. Dont use visual markup (for example, to make
text bold, use strong instead of b; to italicize, use em instead of i)
Dont use header tags for visual formatting
Add "skip to" links to main navigation and page content
If PDF files are used, provide alternate formats for the
24
information

Approvals/Proofing (again!)
Get feedback on the entire web design from:
Other web designers (for design)
Subject matter experts (for content)
All represented parties, including department heads,
managers, deans, etc. (for final approval)
Non-affiliated people (for clarity)

Proofread for grammar -- fresh eyes may catch things

you miss!
Validate for accessibility and compliance with W3C
guidelines
http://wave.webaim.org/
http://validator.w3.org/
http://cynthiasays.com/

25

Maintenance/Improvement
Set a maintenance schedule for the site.
Who will do the maintenance?
What to do if emergency problems occur?
Where will backup copies of the site be
located?

Schedule a quarterly review of the site.

Does the content need updating?
Is the design still working?
Are there newer, cutting-edge tools we
should be using?
26

Resources - Web Sites

Web Style Guide

A thorough and accessible guide to Web design

http://www.webstyleguide.com/

Jacob Nielsens Use It

A web site devoted to accessibility issues

http://www.useit.com/

Cool HomePages.com
A listing of the coolest home pages

http://www.coolhomepages.com/

Vincent Flanders Web Pages That Suck

Learn good design by looking at poorly designed web sites

http://www.webpagesthatsuck.com/

Lynx Viewer
Emulations of lynx (text web browser)

http://www.delorie.com/web/lynxview.html
http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php

WebTV Viewer

An emulation of the WebTV browser

http://developer.msntv.com/Tools/WebTVVwr.asp

HTML Validator
Validates HTML code

http://validator.w3.org/

Bobby Accessibility Validator

Validates web sites for accessibility issues

disABILITY Information and Resources

A listing of web sites to help make web pages more accessible

http://www.makoa.org/

Web Site Optimization Analyzer

Analyze time it takes for web site to load

http://www.websiteoptimization.com/services/analyze/

Web Browser Statistics

http://www.w3schools.com/browsers/browserstats.asp

http://bobby.watchfire.com/

August 2005 Connection Speed Statistics:

http://www.websiteoptimization.com/bw/0508/

World Wide Web Consortium

The organization responsible for creating official web standards

http://www.w3c.org/

W3Schools

Online web tutorials (also contains web statistics)

http://www.w3schools.com/

27

Resources - Books
HTML & XHTML: The Complete Reference
Author: Thomas Powell
ISBN: 0-07-222942-X

Web Design: The Complete Reference

Author: Thomas Powell
ISBN: 0-07-222442-8

Designing With Web Standards

Author: Jeffrey Zeldman
ISBN: 0-73-571201-8

HTML for the World Wide Web

Author: Elizabeth Castro
ISBN: 0-32-113007-3

Integrated Web Design

Author: Molly Holzschlag
ISBN: 0-73-571233-6

28