Web Design Issues

Stanford University Continuing Studies CS 22

Enhanced Web Site Design
Contents
Contents...................................................................... 2 

Fundamentals of Web Design.......................................... 3 

What Makes For A Good Design? ..................................... 4 

Typical Web Site Evolution ............................................. 5 

General Methods for Design ........................................... 6 

Pre-design Work ........................................................... 8 

Influences on Design ................................................... 10 

Influences of Technology .............................................................................10 

Influences of Content ..................................................................................10 

Economic Influences on Design ..................................... 11 

Usability Issues .......................................................... 13 

Using Cutting-Edge Technology ..................................... 15 

Approvals/Proofing (again!) .......................................... 16 

Maintenance/Improvement .......................................... 17 

Resources .................................................................. 18 

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 2 OF 18
Fundamentals of Web Design
Before you begin to write a single line of code for your web site, you need to identify
the purpose your web site will fulfill. Are you trying to inform people about your
group or department? Are you trying to convince potential students to enroll in your
classes? Are you trying to get alumni to donate money? Regardless of the ultimate
reason your site exists (whether it be to inform or to persuade), you need to present
the content in an easy-to-use manner to meet the goals you are trying to attain.
Once you have a clear idea of the ultimate goal for your site, you can make decisions
that will help guide you towards realizing it.

There are a number of things that influence web design:

• The technology used by both target audience and designer.

Remember, not everyone has the same computer system and tools that you
have. Think of the typical people who will come to your site. How old will the
computers be that they use? What type of system will they have? Which
web browser will be the most likely one they will use? Answers to these
questions will drive your design.

• The nature of the content. A web site designed for students should look
drastically different than one designed for retirees. A site designed to
convince alumni to donate should look different than one that is to be used as
reference material for graduate students. The content drives the design for a
site.

• The economy (budget, time, and scale of the project). Keep in mind
that there are always limiting factors on what you can accomplish. You may
not have the funding or the time to put together a “perfect” site. Also,
remember that the scale of the project should play a factor in allocating
resources – for example, a site devoted to a graduation party should not be
given as much time and effort as the complete redesign of the department’s
main web site.

• The amount and type of visuals included. Don’t forget to factor in the
costs and time needed to obtain the photographs and other visual elements
(buttons, line art, etc.) that you may want to employ on your site.

• Usability and accessibility objectives. Be sure to add in time for testing

of your web site. Ensure your site is as user-friendly as you think it is by
having people “test-drive” the site before you launch it to the public. Don’t
rely on fellow designers to do this usability testing – try to get people similar
to your target audience.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 3 OF 18
What Makes For A Good Design?
Content is important, but content alone will not make your site work.

Good design involves:

• Using understandable language on the web pages. Remember, not

everyone who comes to your site will be speaking English as a primary
language. Always use simple, straightforward prose, not jargon, on your site.

• Making the site interesting. Nobody wants to be bored – engage your

visitors by using the active voice in your writing. Add photos and other
images to enhance the experience.

• Making the site easy to use. If you need to take a class in order to
understand how to use the site, you probably should re-think the way the site
has been put together. Items should be located where visitors expect them
to be. Visitors expect web sites to be flawless and to do what they want. Be
sure to test the site out with people similar to your target audience and
implement their suggestions for improvement (even if it means adding days
or weeks to the project). The biggest mistake in web design is building a site
for the designer, not the target audience.

• Using a uniform look and feel. Most people come to a web site via a
search engine such as Google. More often than not, the search engine dumps
a visitor onto a secondary or tertiary page, not the main page for the site. If
the subsequent pages do not contain the look and feel of the main pages,
visitors may become confused and think they’ve gone to the wrong site (and
may leave).

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 4 OF 18
Typical Web Site Evolution
Most web sites go through the same set of stages:

Generation 1: The web site replaces paper equivalents.

Generation 2: The web designer begins to use flashy elements.

Generation 3: The web designer uses bleeding-edge technology. Content

begins to suffer.

Generation 4: Content and technology are integrated.

Ideally, try to skip the problems of Generations 1-3 by planning your site carefully.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 5 OF 18
General Methods for Design
There are 2 basic methods designers use to create web sites – the “ad-hoc” process
and a more methodical, well-thought-out process:

1. The “Ad-hoc” Process. The ad-hoc process occurs when a designer hastily
puts a site together, often creating it on-the-fly, without much forethought or
planning. It generally occurs when a designer is told that the site needs to be
put together immediately, and there isn’t enough time to do any planning.

Sometimes designing using the ad-hoc, “quick-and-dirty” method is not only

good enough, it’s the best way to design certain types of web sites. For
example:

• Sites that will have a short lifespan. If you are designing a

web site that will only be around for a few days or weeks, there
isn’t a whole lot of point to investing lots of time and effort into
perfectly designing that site.

• Very small web sites. If your site will only have 3 or 4 web
pages, there isn’t a big need to do a lot of user testing or other
planning. There just isn’t enough content to justify weeks of
preparation.

• Sites designed for a very specific purpose (a single survey, a

single class, a specific event, etc.).

That said, generally there are many problems and pitfalls of using the ad-hoc
process:

• Too many “Under Construction” banners. Since they are

hastily put together, sites designed in this manner often contain
these notifications for areas that may never get created, despite all
good intentions.

• Since they are hastily put together, designers often forget that
the site even exists after awhile. For this reason, sites designed
in this way often contain old content that doesn’t get updated,
contains errors, and uses dated design and techniques.

• Sites that are hastily put together have no well-thought-out plan

for displaying the information they are presenting. This
convoluted logic often results in a confusing site.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 6 OF 18
 • Sites hastily put together are often difficult to maintain. They
may have no logical order, putting all files into one directory
instead of grouping like elements into folders. They often use
“Spaghetti code” that only the original designer understands.
Hastily designed sites usually do not contain comments that the
designer can put into the HTML and CSS code to explain why a
certain piece of code was placed in the document. Without these
comments, the code may be difficult to update or maintain.

2. The Methodical, Well-Thought-Out Process. This involves planning,

quality-assurance testing, and setting goals. Although planning takes a lot
more time up-front, sites designed in this manner:

• Have fewer problems than hastily put together sites.

• Are more effective than hastily put together sites.

• Are more understandable than hastily put together sites.

• Are easier to navigate than hastily put together sites.

They also usually end up taking less time overall to create and maintain.

The pages that follow will describe the steps you need to take in order to
design using this methodical, well-thought-out process.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 7 OF 18
Pre-design Work
To create a web site using the methodical, well-thought-out process:

1. Consider your organization’s mission. Why are you designing this site?
How will the site enhance the mission?

2. Define the target audience. Who are the types of people that will be
coming to your site? How old are they? What type of educational, socio-
economic, ethnic, gender-based backgrounds do they have?

3. Set goals for the web site.

• Immediate goals include:

o Defining when the site needs to go live.

o Defining when testing needs to be completed.

o Defining when the subject matter experts need to have

completed the content for the site.

o Defining when the mockup design needs to be completed.

• Long-term goals include:

o Deciding who will maintain the site once it’s gone live. Do you
need to hire a full-time designer? Will you outsource the
upkeep?

o Deciding how often the design needs to be updated or revisited.

4. Gather the content from subject matter experts (SMEs). The person
designing the web site likely isn’t the same person who is writing the policies,
history, or other informational pieces that will go on the site. The designer
will need to contact these subject matter experts and gather the content from
them.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 8 OF 18
 5. Create an outline or plan for content. Once you have gathered the
information units from the SMEs, you can then organize them into a hierarchy
of content which can then be “chunked” into logical information units.

6. Sketch your web site on paper first. Don’t try to code your site until you
know how you want it to look. Use a flowchart to help you decide how
visitors will go from one page to another.

7. 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? Will visitors need special tools to use them (e.g., Flash)? Is there a
way to provide similar information that doesn’t require special tools?

8. Organize the files logically, so that the development team can understand
the hierarchy of the web pages.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 9 OF 18
Influences on Design
Influences of Technology
• Browsers. Although Internet Explorer is still the dominant browser,
Firefox and Safari are gaining in popularity. Make sure your site works
in at least the 4 browsers most people use (Internet Explorer, Safari,
Firefox for Windows and Firefox for the Mac).
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. Make sure your site works well for Windows users.

• Connection speeds. Over 90% of home users in the US are now

accessing the Internet using broadband methods (DSL/Cable modem).
Although only 9.5% of active Internet users are using a narrowband
method (modems), many people use handheld devices such as the
iPhone (which uses the Edge network – a narrowband connection).
http://www.websiteoptimization.com/bw/0807/

• User screen sizes. 88% of users are using a display with 1024x768
pixels. Sites using a fixed-pixel length content box of 800 pixels or
less risk alienating users who have larger monitors.
http://www.w3schools.com/browsers/browsers_display.asp

Influences of Content
• 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

• Always use quality content from subject matter experts.

• Have the site reviewed PERIODICALLY by key members (CEOs,

Department Heads, Supervisors, etc.) of the group the site supports.
Make sure the people in charge verify and authorize the information you put
on the site.

• Have non-affiliated people review content for clarity. Did what you put
on the site make sense? Are all instructions listed on the site clear? Make
sure someone checks your site for spelling, grammar, and factual errors.
Fresh eyes often see things you miss!

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 10 OF 18
Economic Influences on Design
When designing a web site, budgetary concerns often crop up:

• Staff time for creation.

• Staff time for maintenance.

Deciding whether to do the work in-house or outsource is perhaps the most

important decision you will need to make when deciding to design a web site.

Keeping the work in-house

• Key benefits:

o Local creator knows content better than outside parties. The

designer doesn’t need to be taught the local customs, terms, or
concepts. They can start working on the web site right away.

o Easy to contact the designer. If you have a skilled designer in-

house, you can just ask them to fix the site during a coffee break or by
walking down the hall instead of having to contact someone who may
work thousands of miles away.

• Disadvantages:

o Time spent on web site can’t be used for other things. For
example, if an admin is working on the web site, it means he or she
cannot be working on the budget, organizing meetings, filing papers,
filling out forms, or other administrative work.

o Must have staff expertise. You can’t design a web site if you don’t
understand HTML, CSS, or graphic design.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 11 OF 18
Outsourcing the work

• Key benefits:

o You don’t need an in-house expert to create the web site. This
frees up local staff to do other jobs.

o Start-up fees are upfront. Most designers charge a flat rate for
designing the site. They may charge an hourly fee to update or
maintain the site, however.

• Disadvantages:

o Designer needs to be taught local customs/terms/concepts.

Since they are not part of the group, they need to become
indoctrinated before they can proceed.

o Often no maintenance is included. If no maintenance is included in

the start-up fees, the in-house person ends up being responsible for
the up-keep. For this reason, outsourcing often ends up being
more expensive in the long run.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 12 OF 18
Usability Issues
Browsers don’t use web sites – people do. Don’t design a site for a particular
browser (“Designed for Internet Explorer”) – design a site for the user.

Remember, there are no generic people. Try to envision a real person accessing
your site, preferably someone similar to the type of person who would use your site.

Some key things to remember about users:

• Most users absorb data visually. Don’t put too much information on a
page. Limit the number of items in a group of choices. People can absorb
around 5-7 disparate ideas at once; if you have more than 10 topics on a
page, you’re running the risk that people won’t read your site.

• Most users will not expend effort to remember things about how your
site works. Don’t force visitors to remember how to navigate/use the site.
If a user needs to take a class in order to use your site, you probably need to
think about re-designing it to make it simpler to use.

• Many people have poor eyesight. Use lots of white space. Use high
contrast between the text and the background. Use larger fonts.

• Many people use smaller, older computer monitors as displays.

• Many people are color-blind. Don’t rely on color alone to distinguish

between elements on a web page.

• Provide redundant, easily recognizable features. Use standard design

choices (e.g., place the logo in the upper-left of the page, and make it link to
the main home page).

• Generally, have visited and unvisited links be different colors to make

it easy for users to remember where they’ve been.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 13 OF 18
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

• 5 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.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 14 OF 18
Using Cutting-Edge Technology
Although it’s tempting to use the latest and greatest technology in your web site, be
sure that using that technology enhances the site before implementing. Don’t simply
use the technology because it exists, or to prove you can do it. Use it because it
enhances the understanding or the aesthetics of the content.

Poor reasons to use cutting edge technology:

• To look cool.

• To prove you can do it.

Good reasons to use cutting edge technology:

• To look cool!

• To draw attention.

• To maintain attention.

• To enhance information.

• To inform or educate.

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 15 OF 18
Approvals/Proofing (again!)
Before you make the site live, 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)

Be sure to:

• Proofread for grammar -- fresh eyes may catch things you miss!

• Validate for accessibility and compliance with W3C guidelines.

http://validator.w3.org/
http://wave.webaim.org/

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 16 OF 18
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?

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 17 OF 18
Resources
Web Sites

Web Style Guide: A thorough and accessible guide to Web design

http://www.webstyleguide.com/

Jacob Nielsen’s Use It: A web site devoted to accessibility issues

http://www.useit.com/

CoolHomePages.com: A listing of the “coolest” home pages

http://www.coolhomepages.com/

Vincent Flander’s Web Pages That Suck: Learn good design by looking at poorly
designed web sites
http://www.webpagesthatsuck.com/

disABILITY Information and Resources: 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

HTML Validator: Validates HTML code

http://validator.w3.org/

WAVE: A free web accessibility evaluation tool

http://wave.webaim.org/

July 2008 Connection Speed Statistics

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

World Wide Web Consortium: Creates the official web standards

http://www.w3c.org/

W3Schools: Online web tutorials (also contains web statistics)

http://www.w3schools.com/

Books

• Web Design: The Complete Reference by Thomas Powell (ISBN: 0-07-222442-8)

• HTML & XHTML: The Complete Reference by Thomas Powell (ISBN: 0-07-222942-X)

• Designing With Web Standards by Jeffrey Zeldman (ISBN: 0-73-571201-8)

• Integrated Web Design by Molly Holzschlag (ISBN: 0-73-571233-6)

STANFORD UNIVERSITY CONTINUING STUDIES CS 22 WEB DESIGN ISSUES

PAGE 18 OF 18