Notes from 47th International STC Conference
Orlando, Florida, May 21-24, 2000

Web Development 101:
A Technical Writer's Guide to Web Development Processes and Materials

Jessica E. Larcom, Sara Carver, and Michael E. Starr
Compuware Corporation

Session Description: This panel presentation provided an overview of Web project scope using the Web development process, HTML, Web graphics, and HTML editors.

Presenters can be reached at web101@techwriter.net.

Web Design - Jessica Larcom

• Begin with audience analysis
   
• What are their needs?
• What are their platform capabilities? Screen size? Internet download speed?
• What are their preferences?
• Based on audience analysis, you develop design specs for the page.
• Categorize your information -- a Web site is organized hierarchically, not linearly.
• "Chunk" your information to avoid long, scrolling pages. Few readers will tolerate those. Write for scannability. Link related pages together.

HTML Code - Michael Starr

• HTML = Hypertext Markup Language, a subset of SGML = Standardized General Markup Language.
• HTML code defines how the page will look, allows you to link pages together, and allows you to include graphics.ics.
• Memorization of code is not necessary. There are many good resources as well as user-friendly Web design applications.
• Check source code of other pages to see how other Web designers achieved the effects on their pages. You can copy and paste the code.
• Start with an organized structure.
• Do not use spaces in file names; Web browsers do not read them.
• Web browsers also do not read hard returns and multiple spaces that you type into your text editor.
• Tags. They go inside carats <>
• Essential tags
   
• HTML at beginning and end
• HEAD tags
• TITLE tags
• BODY tags
• Formatting tags
   
• BR = line break
• P = paragraph tag
• OL = ordered list
• UL = unordered list
• LI = each list item
• B = bold
• I = italics
• FONT size = "Number"
.
• Font face = "Font Name"
• Font color = "Name of Color." Important note on fonts and color: It's best to use universally available fonts, colors that are on both PC and MAC palettes, and a reasonable range of type sizes.
• Link tag: Format is as follows, in <>: a href = "URL for destination". Following the closing > are the words you want to be highlighted as a link. At the end of those words, where you want the hot link to stop, put this: /a in <>.
• Graphics tag: IMG SRC = Trail to the graphic file, folder by folder, in " ". Example: "fc/imagery/image.gif"
• Alternate tag: ALT = "image label". Alternate tags are good because they (1) display a text alternative if the image won't load, (2) they trigger search engine "spiders," and (3) they cue handicapped Web accessibility software.
• Width and Height Tags: Width = "100" Height = "80". It's good to use the H and W specs, because that allows the browser to load all the text immediately, leaving space for the graphic to load. This is an important feature because it allows the reader to proceed with the text while waiting for a complex graphic to download (as opposed to giving up and leaving your site!).
• HTML editors are not foolproof. It pays to know HTML.

Graphics - Sara Carver

• File format (compression)
   
• GIF = Graphics interchange format: line art. Can be transparent or animated.
• JPEG = Joint photographic experts group
• PNG = Portable network graphics (8-bit format)...can be transparent but not animated
• Lossy = JPEG. Removes image details.
• Lossless = GIF and PNG. Mathematical representation of information.
• Thumbnail = small file that leads to a larger photo (as an option).
• Color
   


• Symbolism
• Color blindness
• Cultural associations (especially in international marketing)
• Color-safe palette: 256 colors that can be read universally, by all browsers. This is important, to avoid cross-platform color variation problems.
• Sources
   
• Create
• Download
• Purchase
• Tips
   
• Keep simple
• Don't overdo the special FX
• Group in 5 or less. Eye can't handle much more than that.
• Less than 30 seconds to load a page.
• Limit 3 clicks per page.
• Keep learning. Stay with the state of the art. READ SOURCE CODE!
• Graphics vs print: The site should be suitable for printing as well as online viewing...or offer a downloadable version for printing.
• Tricks
   
• Interlacing during download
• Transparent effect
• Cropping
• Image size
• Anti-alias
• Screen resolution: 72 dpi is sufficient for online; need 150+ for printing.

HTML Editors - Jessica Larcom

• Two basic types are WYSIWYG and text-based.
• WYSIWYG editors totally conceal the markup language. They're easy to use, but they're also frustrating if you want to fine-tune the page.
• Text-based HTML editors are based on code, but they have buttons and wizards to accelerate the coding process.
• WYSIWYG editors:
   
• Microsoft FrontPage 2000 has a Word-like "face" and has resolved many of the bugs reviewers found in FrontPage98.
• Macromedia Dreamweaver 3.0 has advanced features such as seamless incorporation of cascading style sheets and XML. It can also globally populate changes throughout the database, which is a real time-saver.
• Claris Home Page 3.0. Simpler toolbars...less high-powered. More for beginners.
• Editors add speed to Web design, help novice users.
• Biggest disadvantage is cost and dependency (lack of familiarity with source code limits growth).
• Text-based HTML editors:
   
• Sausage HotDog Pro 6.0. You see code, not WYSIWYG, as you develop the page. Has a button that finds all code that requires special handling for accessibility-based software.
• Global Planet Under Consruction 98. Provides teaching as you go. Includes stock Java scripts, CGI scripts, and applets in package.
• Paul Lutus Arachnophilia 4.0. "Careware" -- FREE!
• Text-based codes give you direct control of code; good tool for learning.
• They are slower than WYSIWYG, however, and it can be difficult to visualize the end product from a design perspective.
• Before selecting an editor, get some trial versions and test the functions you are most likely to be using.
• Common mistakes
   
• Failure to conduct usability testing. This is a critical part in planning the site, producing the site, and maintaining/updating the site.
• Treating a Web page like a paper document.
• Structuring a Web site like a company's departments.
• Overly elaborate page designs.
• Writing linearly
• Poor navigation. If viewers get lost, they're gone.
• Rule No. 1 for Special FX: "Just because you can doesn't mean you should."