Your site must be:

• Informative, useful or entertaining (content)
• Timely and Up-to-date (maintainence)
• Easy to use (navigation)

Stages in Web Development	Elements Involved
Initial Planning - 1	A Purpose Statement
Analysis - 2-6	Specific Objectives, Budget, Audience Information
SiteDesign 6,7, layout	Document Content, Schematic layout, Images
Implementation - 8	Domain Information, Web host
Promotion - 8	Search Engine Information Related Web Sites
Enhancements, Maintenance - 9	New Web tools

The design process, then, boils down to this:

Given the overall purpose and specific objectives of your proposed website, you must determine the nature of your audience and the tools they will use. Then you can determine appropriate content, presentation, images, site navigation and overall site organization.

We suggest guidelines only; after all, rules are made to be broken on the web.

Your Audience (chapt.1)
Who is your audience?(pg.2) Yahoo for statistical/demographic resources. SURL on accessibility for older users.	What is their background? Are they computer savvy? what browser is used? What is their native language? culture? What are their ages? Are they kids? disabilities? Do they pay for their ISP? Phone Service?
What technology do they use? (pg. 7) see WebSnapShot, the Counter, for tech. data;	What is the Platform? Computer? OS? What is the speed of connection? What browser do they use? What size window? What monitor size (and resolution)? Do they have plug-ins?
Note: Everyone sees your website differently!

Interface Design & Navigation Issues (chapt.2)
see Hypertextica on Navigation issues (HO pg.13)
Planning	Storyboarding, flowcharts or the like
Icons	Can aid and reinforce comprehension if understood ie mailbox for email vs. filefolder to download Can label icons with words (Traveldocs)
Navigation Bars	Vertical Column - January Magazine Horizontal; above and/or below - Adobe, Liszt, Cnet 'The Inverted L' - NAIHC,
Imagemap	Need text alternative - IOP site, Cornell Corporate site, Tdocs use the alt attribute for all sections of an image map
Within the Content	Not for central navigation
Sitemap (see pg.47)	NY Life, WGBH see other nice examples in class example page
Table of Contents	InsuranceTax
Accessibility Issues	see DOJ, their accessibility questionaire, this nice Accessible Site Guide
Navigate your own site w/o graphics and find a novice to test it too!

Graphics, Backgrounds and Related Issues
Format (115-22)	gif (87a - 89a) (fewer colors) vs. jpg (photographs) - png maybe coming
gif options	interlacing, transparent background (transparent gif trick)
accessibility	use the alt attribute.
color issues	PC's show darker then MACs Browser safe color pallettes (use combos w/00,33,66,99,cc,ff in hex), pg.109 how hex works, use this hex-dec conversion chart see my colorname chart use light colors for backgrounds - ccffcc, ffffcc, fffafa, fff6cc, 00ffff work
appearance	must consider different platforms (pcs vs macs), monitors, cards
positioning	the transparent gif trick
editing (for speed)	useful resolution will be 72-96 dpi -- but work with higher resolution use graphics optimization w/gif/jpg cruncher, other tools w/gifoptimizer crop out unnecessary background resize image where appropriate --use thumbnails for many images - IOP, gallery --thumbnail can be resized or a portion of original
html options (for speed)	Always specify height, width of images for loading Use alt tag Use lowres attribute to provide preview - see IOP
testing	test with your image loading and other features off test for a text browser (lynx - can simulate lynx)

Page Layout Issues (chapters 3,4)
see Hypertextica on Speed issues (HO-pg.7)
Organizational Issues		Site Maps - pg.47 and my examples Site Structure - pg.37     Design Themes - pg.31 Site Elements - pg.36-50     Visual Hierarchy - pg.54
Window Size	Pixels Available (pg.57)	Consider default windows Consider different window sizes used --can use cool ruler freeware to measure pixels
	Setting your page width	Use table to set width --Width in pixels (traveldocs) --Width in percentage (free computer pubs) consider use of design grids (pg.62)
Borders	Options Available	Blockquote (always?) Use Tables to set margins (pgs.65)       -see Science Magazine Use Frames to set margins Use transparent gifs for margins
Font Size	Your Alterations	Can use <hx> or <font size> tags    -use tags for their purpose; <hx> tags are structural    -but now CSS is prefered
	User alterations	You cannot control (w/o CSS) user font settings: -test with different font size defaults -think carefully about artificial <br>s
Page Size, Headings and Using Space	Vertical Size	Long pages of text are difficult to navigate so after 3 screenfuls consider breaking page into separate linked pages.
	Using Vertical Space	See D Siegel on Vertical Space. use of the <hr> vs line images See W3 style guide on use of <hx> tags
	Horizontal Size	Long lines are harder to read -say > 6 inches or 90 characters -a reason to avoid tables w/width=x% Multiple columns might work -need vertical space between them -need to be sure of reasonable size/column -keep in mind different default font sizes -need to avoid scrolling up/down/up/down
	Using Horizontal Space	See D Siegel on Horizontal Space use of transparent gif to indent paragraphs appropriate justifications making margins (w/tables, frames) we cannot set line length and right margin together

Tables, Frames and Forms
Tables (68-73)	should you plan for non-table browsers? -very few left so ... (provide <br> to end cells) to set margins, as mentioned (see layouts pg.68-70) tables can be aligned (left,right) like images accessibility provide caption, summary tags; use title attribute; abbr attribute for th's, scope for all cells associate data cells with their headers - use id attribute of th, headers attribute of td see what the W3C says and what about section 508 can put navigation icons in margins (see Traveldocs) can use for captions under/above images -caption option of table -or use 2 table cells -can enhance images with nice borders break tables into manageable parts -the whole table must be loaded before it appears -makes it easier to create optimum rows/columns advanced use of tables - pg.71-73 -to split images for layout purposes (73) - see NAIHC -different text alignment options (71)
Frames (74-76)	Great Reference: How to Program HTML Frames;     Interface Design and Javascript by Teague (ZD Press) accessibility provide noframes tag; title attribute for each frame see what the W3C says and what about section 508 Only use frames if one or more factors apply (attached) display info asynchronously, from more than one source, some page elements must be fixed, continually updating parts of page, audience receptive, cool design concept Always have a specific use for each frame Keep the use of each frame consistent Use frames carefully due to below problems: Navigation; use of back and forward can be confusing Bookmarks are impossible (w/NN - fixed in IE)to set Printing of a full frameset is impossible w/NN Saving and/or mailing framed content is confusing search engines don't spider - need <noframes> But where: -navigation is straightforward -internal content not commonly bookmarked -you want to 'keep' the user on site frames can save time and work well -see jerhong, traveldocs (select bottom icon), Executive Women in Gov can use frames to set margins -usually margins or navigation page should be in pixels (not %) should use noframes tag even though 99% can read.
Forms	seek alternatives first (ie. email) accessibility see what the W3C says and what about section 508 create a tab order thru fields, keyboard shortcut access can have a plain text version but most browsers accept forms. can also use forms that are just printed, not submitted

Some Structural Issues
pdf vs html	if document already exists - easier to convert to pdf if document doesn't exist - look more to its purpose and use in any case - will it be modified constantly?
conversion issues	word is a pain; excel and powerpoint convert well     - see Bonobo presentation (maybe not Netscape).

Common Dos and Don'ts
Some Dos	Be CONSISTENT See W3's Style Recommendations Check things; links, contact information, spelling, grammar, html      - Netmechanic, Dr.HTML, others Have clear contact/status information on every page Provide alternatives when appropriate -for tables, frames, forms have a unique, pertinent title on every page know your audience keep each page easily accessible (minimize scrolling) have link text language fit the context of narration easy navigation as discussed above (table of contents?) keep images quick loading (size, cropping, etc) use browser safe colors and light backgrounds Strive to keep your pages accessible to all See Hypertextica on Accessibility issues (HO pg.9)
can use Sun Guide Quick Reference as an overall checklist for sitewide properties
Some Don'ts	** Almost Anything in excess is bad ** too much upper case, italics, centered reading text too much unbroken text is hard to read --also people skim on web rather than read errors are very bad - see above for things to check distracting things; blinking, non-stop animation, marquees. outdated information use of misleading, trite or overused language -see Sun Guide Quick Reference on language section (HO pg.1-3) confusing link cues (and the 'click here' syndrome) gratuitous use of features, technology orphan pages - all pages should have a link back at least excluding users with still common software use of <h> tags for font control use of standard html within the <a> tags (go outside) use of under construction language or logos

---

for Version 6.14.01
Copyright © 2001 Goldray Consulting Group
http://goldray.com/webdesign/course-content.htm