Web Design and Development
Introduction
Internet and WWW
Defining a Web site
Good and bad Web Design Features
Elements of a Web page
HTML Introduction
Initial tags
Character Formatting Tags
Paragraph Formatting tags
List Tags
Anchor Tag
Images
Frames
Forms
Other elements

Good Web Design Features
Text
o Background does not interrupt the text
o Text is big enough to read, but not too big
o The hierarchy of information is perfectly clear
o Columns of text are narrower than in a book to make reading easier on the screen

Navigation
o Navigation buttons and bars are easy to understand and use
o Navigation is consistent throughout web site
o Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
o Frames, if used, are not obtrusive
o A large site has an index or site map

Links
o Link colors coordinate with page colors
o Links are underlined so they are instantly clear to the visitor
Graphics
o Buttons are not big and dorky
o Every graphic has an alt label
o Every graphic link has a matching text link
o Graphics and backgrounds use browser-safe colors
o Animated graphics turn off by themselves

General Design
o Pages download quickly
o First page and home page fit into 640 x 460 pixel space
o All of the other pages have the immediate visual impact within 640 x 460 pixels
o Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
o Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

Bad Web Design Features

Backgrounds
o Default gray color
o Color combinations of text and background that make the text hard to read
o Busy, distracting backgrounds that make the text hard to read

Text
o Text that is too small to read
o Text crowding against the left edge
o Text that stretches all the way across the page
o Centered type over flush left body copy
o Paragraphs of type in all caps
o Paragraphs of type in bold
o Paragraphs of type in italic
o Paragraphs of type in all caps, bold, and italic all at once
o Underlined text that is not a link

Links
o Default blue links
o Blue link borders around graphics
o Links that are not clear about where they will take you
o Links in body copy that distract readers and lead them off to remote, useless pages
o Text links that are not underlined so you don't know they are links
o Dead links (links that don't work anymore)

Graphics
o Large graphic files that take forever to load
o Meaningless or useless graphics
o Thumbnail images that are nearly as large as the full-sized images they link to
o Graphics with no alt labels
o Missing graphics, especially missing graphics with no alt labels
o Graphics that don't fit on the screen (assuming a screen of 640x460 pixels)

Blinking and animations
o Anything that blinks, especially text
o Multiple things that blink
o Rainbow rules (lines)
o Rainbow rules that blink or animate
o "Under construction" signs, especially of little men working
o Animated "under construction" signs
o Animated pictures for e-mail
o Animations that never stop
o Multiple animations that never stop

Navigation
o Unclear navigation; over complex navigation
o Complicated frames, too many frames, unnecessary scroll bars in frames
o Orphan pages (no links back to where they came from, no identification)
o Useless page titles that don't explain what the page is about

General Design
o Entry page or home page that does not fit within standard browser window (640 x 460 pixels)
o Frames that make you scroll sideways
o No focal point on the page
o Too many focal points on the page
o Navigation buttons as the only visual interest, especially when they're large (and dorky)
o Cluttered, not enough alignment of elements
o Lack of contrast (in color, text, to create hierarchy of information, etc.)
o Pages that look okay in one browser but not in another


Hosted by www.Geocities.ws

1