Web

Computing & Information Services seminar

May 21, 1997, 2-4 p.m., Hewitt classroom

instructor: Jim Cerny

1. Overview:

Description:

"This lecture/demonstration looks at design of both an overall Web presentation and

individual pages, with emphasis on the UNH context. Considers purpose, audience,

navigation, speed, and development of a coherent look and feel.

Support statement:

Computing & Information Services offers consulting support on HTML technical usage, but not on Web design. For Web design consulting contact the Publications Office or a commercial service.

Goals:

To distill advice from many sources, that is applicable to the individual tasked with developing a typical UNH departmental or organizational Web page

To do an online evaluation of a range of sites already in use at UNH.

To point toward major online and print resources for more information.

2. Understanding what is possible and practical.

Experienced teams are ideal, but seldom found:

technical expert for the underlying system and network.

technical expert with HTML and related technologies.

experienced writer/editor of text and publications.

experienced graphics designer.

Everyone is working with time constraints.

Time to develop is different from time to maintain!

Think about satisficing rather than optimizing.

Or, "I ain't fishin' half as good as I know how."

Understand one's audience when developing content.

Understand your access assumptions:

link speed

browser used

desktop system, esp. CPU speed and monitor (72 dpi x 256 colors minimum?)

Contrast first-generation and third-generation Web design.

Graphics development is completely open-ended in time and effort.

Levels of design talent:

none, clueless.

a good editing eye, but not an original designer.

a good creative designer.

Try to keep aware of development tools:

general text editors such as Pico, Word, Notepad, Simpletext

filters, e.g., Microsoft Word wizards

special page editors such as HotDog, HoTMetaL, PageMill

advanced site development systems such as Microsoft FrontPage97

Plan for maintenance:

who will do it?

allow 2X or 3X as much time as you think it should take.

Linkbot results at http://www.webcheck.unh.edu/

3. Jim's distilled design guidelines.

Disclaimer: I don't always practice what I preach!

Overall:

Is your purpose to entertain, convey information, or something else?

Test, test, test - on different browsers and different hardware.

Aim for consistency in your pages. Especially in use of color.

Make sure there is an e-mail address for questions and feedback.

Identify your organization, since strangers may jump in from anywhere.

Allow for navigation back to higher levels, within reason, not obsessively.

Avoid the little-kid-with-the-hammer syndrome in using new techniques.

The kid soon decides that everything needs pounding!

Content:

Spell everything korrectly!

Provide a bulk download alternative for large manuals and docs.

Keep docs manageable, not too small and not too large.

There is such a thing as too many hyperlinks.

Graphics:

Less is more. Small graphics (<25K bytes) and not too many.

Only use good graphics - relevant to the page; good resolution.

Use animated GIFs with caution, esp. those that loop endlessly.

Allow for non-graphical browsers (lynx and with graphics turned off).

Pay attention to typography - the mix of fonts; anti-alias when in graphics

Think three times before using a black background!

be wary of non-standard backgrounds and colors.

Specific techniques:

Frames:

try an index frame and display frame with white background, no borders.

Tables:

use these to control positioning of graphics and text.

use these to make shorter line lengths.

Graphics:

use Siegel's single-pixel GIF trick.

use the ALT attribute on the IMG tag.

use client-side image maps for button bars.

know the 216-color palette and dithering effects whenever using colors (fonts, graphics)

use animated GIFS, Java, and JavaScript with restraint, if at all. never use BLINK.

Miscellaneous:

use HTML templates if hand-tagging.

Adobe Acrobat is very useful when appropriately used.

4. A tour of some sites.

On-campus.

NHPTV | Alumni | TNH | Psychology | Music | IOL | WSBE | Physics

http://unhinfo.unh.edu/Campus/others/index.html

http://pubpages.unh.edu/~cs403e/final-pgs-97.html

http://www.cs.unh.edu/~greenlaw/teaching/CS403/stu97s.html

Off-campus.

http://www.amazon.com/

http://www.barnesandnobe.com/

http://www.borders.com/

http://www.microsoft.com/

http://www.kzoo.edu/~pfolio/

http://www.yourdon.com/index.htm

http://gabby.com/index2.htm

http://www.paulallen.com/

http://www.cs.washington.edu/

5. Printed references.

Roger Black, [1997], Web Sites that Work,

Adobe Press, paper, $45.00, ISBN:1-56830-346-7

David Siegel, [1996], Creating Killer Web Sites,

Hayden Books, paper, $45.00, ISBN:1-56830-289-4.

Lynda Weinman, [1996], Deconstructing Web Graphics,

New Riders Publishing, paper, $44.99, ISBN:1-56205-641-7.

Lynda Weinman, [1997], Designing Web Graphics 2, 2nd ed.,

New Riders Publishing, paper, $55.00, ISBN:1562057154.

(note: these books are typically discounted 30-40% online at "www.amazon.com" or "www.barnesandnoble.com")

6. Online references.

Web authoring resources:

(Local starting points.)

http://www.unhinfo.unh/NIS/Docs/Web/AuthorAuthor.html/

Web authoring helps and hints.

http://www.unhinfo.unh/NIS/Docs/Web/PubPages.html/

Using Pubpages.

Web authoring advice:

(Look for ideas not necessarily to agree.)

http://www.killersites.com/

Creating Killer Web Sites.

http://www.sun.com/styleguide/

Guide to Web Style at Sun.

http://www.webweek.com/96Mar/undercon/minimal.html

Minimalist Approach to Site-Building at Yahoo.

http://www.sun.com/columns/alertbox/9605.html

Top Ten Mistakes in Web Design by Jakob Nielsen.

http://websitesthatwork.iab.com/

Web Sites that Work by Roger Black.

http://info.med.yale.edu/caim/manual/contents.html

Yale C/AIM Web Style Guide by Patrick J. Lynch and Sarah Horton.

Award-winning sites for Web design:

(Consider the criteria and who is judging.)

http://www.botw.org/

The Best of the Web

http://www.leic.com/cyber/

The CyberNaut Web Design Awards.

http://www.highfive.com/

High Five Core Page.

http://www.ippa.org/

Internet Professional Publishers Association - Design Excellence.

http://point.lycos.com/categories/

Lycos's Top 5% Web Sites.

http://www.catalog.com/krs/plat7_96.html

Platinum 100 - - The Top 100 Sites of 1997.

http://www.htmlhelp.com/award/

Web Design Group's WDG Awards.

http://www.zdimag.com/makeover/

ZD Internet MegaSite - Website Makeovers.

jim .cerny@unh.edu stop me before i click again!

rev. 19-MAY-1997