Avoiding the Ugly

1
Avoiding the Ugly

• Good Web Design Practices

2
Background

• Choose a background that is a single, solid
  color.
• If possible, avoid loud textures, patterns or
  images.
• Choose background and text colors that contrast.

3
Text

• Avoid using uncommon fonts.
• Avoid mixing too many fonts on one page.
• Avoid large blocks of italic text.
• You don't have to use a large font size on your
  page.
• Standard (medium) size text is fine - visitors to
  your site can adjust the text size to suit their
  needs by altering their browser settings.
• Don't underline large blocks of text.
• Some people find underlined text difficult to
  read.
• Underlining usually indicates hyperlinked text,
  it can be confusing for users if it is used where
  no link exists.

4
Text

• Capitalization of whole sentences should be
  avoided.
• Many people find it difficult to read sentences
  written in capitals.
• CAPITALIZATION CAN COME ACROSS AS SHOUTING!
• Use headings appropriately.
• Don't use headings simply to increase text size,
  and don't simply use bold or a larger font size
  to simulate headings.
• Some browsers can present the user with an
  overview of a web page based on the headings and
  sub-headings.
• Dont make pages too long.
• Use bookmarks if your pages are long.

5
Images and Alternate Text

• Avoid images that flash or that are too animated.
• Dont use too many images.
• All images should have alternate (ALT) text.
• ALT text exists to provide a textual
  representation of the image for people accessing
  the page in a non-graphic way (e.g. text only,
  speech or Braille).
• ALT text should convey what is important or
  relevant about the image.

6
Images and Alternate Text

• If what is important is the actual content of the
  image, the ALT text should consist of a brief
  description of the image.
• "A photo of my house"
• If the image is essentially functional (e.g. a
  "Search Now" button) the ALT text should convey
  the function.
• "Search Now"

7
Images and Alternate Text

• If the image is a bullet or a horizontal section
  divider, the ALT text should be a text
  representation of the same thing.
• " - " or " " for bullets
• " - - - " for a divider
• If the image is essentially "eye candy" or is
  used for the purpose of visual layout (e.g.
  "spacer" images), the ALT text should be set to
  read "".

8
Links and Navigation

• All links should contain enough useful
  information about their destination that they
  make sense on their own, when taken out of
  context.
• Access software that people with visual
  impairments use can list all of the links on a
  page as one way of providing an overview of the
  content. If a link consists only of the phrase
  'click here', its function and destination will
  not be obvious if it is presented out of context.

9
Links and Navigation

• Links should not be presented directly next to
  each other, as some access software will
  interpret a group of links as being one single
  link.
• Separate links with text or a graphic.
• The bar character "
• Navigation such as links should be placed
  consistently on pages.

10
Tables

• Use only when absolutely necessary.
• As simple as possible.
• Should make sense read across rows.
• Identify row column headers.
• Provide Captions for tables.
• Provide Summary Text for tables.
• Especially tables used primarily for controlling
  layout.

11
Other tips

• Keep it Simple!
• Test! Test! Test!
• Netscape
• Internet Explorer
• Ask for Peer and Student Input.
• View using Different Computers
• Operating Systems- Windows 98, Windows 2000,
  Windows XP, Mac, etc.
• Internet Connections- Dial-up, DSL, Cable

12
Getting Help

• Training
• http//www.gpc.edu/training
• training_at_gpc.edu
• Instructional Technologists
• David Robinson- drobinso_at_gpc.edu
• Ken Moss- kmoss_at_gpc.edu

13
Web Resources

• Web Style Guide
• http//www.webstyleguide.com/
• Wed Design Features
• http//www.ratz.com/features.html
• GPC Style Guide
• http//www.gpc.edu/StyleGuide/