AWC - CPD: Making Web Pages, Publishing Online, Tutorials, Guidance

Ira C. Eaker College
for Professional
Development (CPD)

Air War College
(AWC) Gateway to
Internet Resources

Learning, Teaching,
& Technology Central Making Web Pages

Gateway home \| AU Library \| search \| military index to internet \| ed reference \| military portal
CPD Home \| AF Institute for Advanced Distributed Learning (AFIADL)

General
Publishing Off and Online
Web Guidance
Step One, from EUCOM
Do's and Don'ts
Tutorials and Courses
Hints and Tips about Web Page Colors
Sixteen Pre-Defined Web Page Colors
Browser-safe colors
Tools for Development & Maintenance
Links

See also:

Using the Internet
Accessibility & Usability

Back to Learning, Teaching
& Technology Central
Some documents have local copies for quick loading at AU schools.

General

What ticks you off? Slow pages? Lots of scrolling? Navigation imbedded inside slow-loading graphics? Hard-to-see links? Ambiguous labels of links/buttons? Weird color combinations, that hurt your eyes? Tiny text? Text in some wild font that is REALLY hard to read? Dead links? No way to back up? No idea of where you are or what the page you're looking at is meant to do?
Chances are, the same things would tick off most of your users. So don't do them.
Think of orienting your web page(s) based on tasks the user wants to accomplish. For example, would it be more helpful for a visitor to the Alabama web page to see a list of offices, or be able to pick a topic such as "I want to start a business here" and see a list of all the folks he needs to contact to start a business, determine tax liability, and connect to local links for items such as building permits, occupancy laws, etc.? One state which has redone their site like this claims as much as a 40% reduction in hours needed to answer questions and help visitors.
webmonkey - the web developer's resource

Publishing Off and Online

Be USER centered, not editor or designer centered. Nonres students especially want fast, easy access, often over slow 28.8 or 56K modems.
Don't EVER change the URL of books/files/etc. This means you have to think out a naming convention and folder organization and index/contents issues up front, so you don't have to go back later and shuffle files -- and thus mess up all the links people have established to your material.
Don't assume folks only have links to your top page (such as contents). When people find a book/chapter they really need, they make a link to that book/chapter. Why would they want to work down through your menus every time they wanted to use the material?
Keep files as small as practical. If you have the choice between a single multi-megabyte file of the whole book ... OR ... separate files for cover and contents, and direct links from the contents to each chapter as a separate file --- GO WITH THE MULTIPLE FILES, which are small enough to download in a reasonable time, even for nonres students accessing from home.
When scanning pictures and charts and tables, MAKE SURE THE INFO IS READABLE. It is a real bummer when you can't tell what the pie slices represent or tell what the trend is.
Recognize the limits of Acrobat (.pdf) files. Yes, they often are the easiest to convert to, BUT they are also often bulky, hard to read onscreen (lots of top/bottom and side/side awkward scrolling), and have problems running on older machines. HTML however is usually easier to scroll through, faster to load, easier to search (ctrl-F) -- and lots of people don't really care if the really spiffy fonts are preserved -- they are after the info.
Air and Space Power Journal has a great policy of presenting articles in more than one format, letting the user have a choice.
When designing books, design with the assumption they are going to go online as well as hard-copy. Make it easy on yourself for converting.
If a publication is likely to be used as a reference tool, may want to consider having a comprehensive index. Might have an Acrobat index (can be done across documents) for the .pdf files -- but still have the HTML version of the basic files for the benefits mentioned above.
Stay away from "frames" unless you have a REALLY good reason to use them. Especially for users using 640 and 800 pixel screen widths, frames can annoyingly narrow down the area actually available for content. Also, if you are referred to by another site which itself uses frames, you get frames inside of frames. In one case I encountered a triple nesting which left only one and a half inch of screen to read an article in.
KISS. Don't let folks get carried away with using every neat trick they can -- usually just to show off, certainly not user-centered. One site had 27 animations and scripts on a single page. It took FOREVER to load and all those waving flags, flying planes, explosions, animated mail boxes, etc. were distracting and made it really S-L-O-W to scroll, on all but the fastest machines. Complaints were sufficient to induce the webmaster to change to a kinder, simpler format.
Stay away from scripts and Active X and similar enhancements. Many folks have had problems with these items -- due to virus threats, security issues, limitations of machines, etc. Users don't need rollover buttons and fancy stuff. They want the info, and possibly some neat pictures (if they can be downloaded in a reasonable amount of time, and if it is up to the user to choose to download -- i.e., use links or thumnails to hold the place of the pictures, so that those who don't need/want them, don't have to sit through their download)

Web Guidance

Step One, from EUCOM

The Internet has made it possible for almost anyone, to publish anything - for free! The result? Millions and millions of pages of nothing worthwhile to read. Even worse, lack of content is often disguised by fancy text, moving images, etc. Before you go any further, you need to ask yourself two very important questions:
- What exactly do I want to communicate to my target audience(s)?
Please note that at this point, the last thing you should be worried about is what graphics, background color, wallpaper, or fancy HTML editor you're going to use. If you can't define your audience and/or you can't write out two or three paragraphs of something valuable to say, STOP and do that now! Remember, publishing a web page is like publishing a newspaper, a book, or issuing a press release. Just because it's easier shouldn't mean your standards should be lower.

Do's and Don'ts

Stanford Guidelines for Web Credibility
Cool URIs [aka URLs] don't change, from W3C.org, including how to plan your URLs so they won't need to change

Top Ten Mistakes in Web Design

Using frames

Gratuitous use of bleeding-edge technology

Scrolling text, marquees, and constantly running animations

Complex URLs

Orphan pages

Long scrolling pages

Lack of navigation support

Non-standard link colors

Outdated information

Overly long download times

"Top Ten Mistakes" Revisited Three Years Later

Ten More Things to Avoid in Authoring a Web Page

Animated .GIFs

Fixed-width tables

Unannounced, univited Client-Pull or Server-Push

Yet another browser logo & download link

"Hit" or download counters

Gratuitous imagemaps

Dead links

Oversized, unoptimized graphics

"Splash" screens

Pages that open new browser windows

100 Do's and Don'ts in Web Design, in following categories

content
navigation
design
presenting text

bandwidth
images and color
compatibility
general subject
- and the last don't -- "Don't take my - or any other persons - word for it. There's no such thing as a consitution of webdesign."

The Rules ("every Web author should know")

The Web is not WYSIWYG.

HTML is a structural markup language.

Web authoring is not word-processing.

Not everyone browses graphically.

Most "cool tricks" -- aren't.

Gear only goes so far.

Original content is key.

It doesn't matter how popular your browser is

Readers love fast-loading pages.

And Hey! Let's be careful out there.

Tutorials and Courses

Web Page Tutorial, from the Navy
- HTML Tags & Definitions, from the Navy tutorial
Tutorials for Web Developers - HTML
Web Teacher, complete tutorial on using the web, as well as a quick primer on same
Writing HTML, a tutorial from the Maricopa Center for Learning & Instruction "to help teachers create learning resources that access information on the Internet." a tutorial for teachers creating web pages to teach with
Introduction to HTML, tutorial from Case Western Reserve Univ.
HTML Goodies, tips, tutorials, etc.
pagetutor.com, tutorials on basic HTML, frames, forms, and tables
Web Tutorials for Beginners, from About.com
HTML Goodies, tips, tutorials, etc.
HTML: HyperText Markup Language, a Library of Congress Internet Resource Page

Hints and Tips about Web Page Colors

Don't use color combinations that cause problems for people with any of the various forms of color blindness.
Colors specified in HTML code may look different with different computers and monitors -- such as Macs, PCs, LCD panels (aka "flat panels"), and CRTs (regular monitors), so you shouldn't rely on subtleties of color.
If you use a background image (especially anything other than light coloring or a faint image) or set the background color, then be sure to set the various text colors as well. Otherwise you risk having text vanish into the background or having bad combinations of colors.
When practical, adopt common conventions to aid user navigation and understanding. For instance, if you have definite sections to the course, you might use a colored bar or icon to group items together. For instance, all the beginner stuff has a green stripe at the top of the page, and all the advanced stuff has a blue stripe at the top of the pages. This can be particularly helpful if you share material between sections, or if links could allow beginners to accidentally get into the advanced stuff.

Sixteen Pre-Defined Web Page Colors, by Name and by Hexadecimal Number

When designating background or other colors in HTML code, you may use the names below or the number.

.	Black = "#000000"	.	Green = "#008000"
.	Silver = "#C0C0C0"	.	Lime = "#00FF00"
.	Gray = "#808080"	.	Olive = "#808000"
.	White = "#FFFFFF"	.	Yellow = "#FFFF00"
.	Maroon = "#800000"	.	Navy = "#000080"
.	Red = "#FF0000"	.	Blue = "#0000FF"
.	Purple = "#800080"	.	Teal = "#008080"
.	Fuchsia = "#FF00FF"	.	Aqua = "#00FFFF"

Thus, the color values "#800080" and "Purple" both refer to the color purple.
Some browsers also recognize the names Magenta (for Fuschia) and Cyan (for Aqua).

Browser-safe colors

From EUCOM -- Web Graphics Guide -- colors that show up the same on all browsers
- 216 browser safe colors, r-g-b values
- 216 browser safe colors, hexadecimal values

Tools for Development & Maintenance

webmonkey - the web developer's resource
Web Site Design and Usabilty Guidelines, including ideas for site organization, from National Cancer Institute
Web Mastery Development Tools, extensive list from Beyond the Blackstump, an Australian source
HTML Goodies, tips, tutorials, etc.
WebMaster Resources
Web Courseware Developers' Listserv, from the University of New Brunswick, "of interest to persons developing courseware that is to be delivered in part or totally over the WWW"
HTML Validation Service, from W3C, for validating HTML code of a web page
Net Mechanic - includes free test of up to 5 of your web pages for HTML errors
Internet Traffic Report

Links

webmonkey - the web developer's resource
Yale Web Style Guide
Web Teaching at Dartmouth College, "for educators and educational technologists who are interested in exploring the many different facets of using the Web in the curriculum" -- includes a case study of moving a masters degree program online
Apple Web Design Guide
Online Netskills Interactive Course, on using the Internet, with topics from basic to advanced
How to Design a Virtual Classroom: 10 Easy Steps to Follow
All Things Web, "a collection of resources for webspinners and authors"
WebMaster Resources
The Cyberlibrarians' Rest Stop, check out the page/link arrangement as an example of setting up a short course -- course is Web Searching, Sleuthing, and Sifting
Designing More Usable Web Sites, from trace.wisc.edu at the University of Wisconsin
useit.com: Jakob Nielsen's Website, usability expert, with online newsletters with topics such as "Are Users Stupid?"
- Issues with Web Usability, and articles addressing same
- Top Ten Mistakes of Web Management
Church of Usability, at CNET, includes short articles from six usability experts