Audubon Logo

Audubon Coder's Guide

Also check out the Chapter Webmaster FAQ.

General Rules

Filenames 
All filenames should consist of lowercase letters and/or numbers, and possibly hyphens ('-') or underscores ('_'), with a maximum length of 27 characters, and end with an extension such as .html .gif .jpeg , etc. Use single words or acronyms where feasible; otherwise use the format word_word_word.html . If you can't use 4-character extensions, use .htm and .jpg . The 'home' page for a directory should be called index.html -- index.htm and index.html-ssi are also valid. 
Links 
Links going out of chapter sites should use full paths, as chapter pages may have multiple valid URLs. 
HTML tags 
Please stick to tags supported by Navigator 3 and Explorer 3, with some consideration given to lynx users; tables are fine. To see a lynx-friendly client-side imagemap, check out our main index.html . <blink> is specifically prohibited. 
Structure vs. apperance 
Please avoid <b> and <i> in favor of <strong> and <em> or <cite>. 
Images 
Images go in an images/ subdirectory adjacent to the html file; this isn't required for chapters. Use alt tags! They allow people to browse with images off (much faster) and make most pages work with lynx and web-mail services. 
GIF 
Please try to stay under <=15k ; animation is okay, but be sparing; try to stay within the Netscape 216 cube for consistent appearance in browsers. For inset images (align=left or align=right) don't go beyond 288 pixels (4") in the larger dimension. 
JPEG 
Fine; inline images should generally be <=15k . 
Templates 
See the documentation. 
Font 
Please do not over-use these tags. 
Imagemaps 
Always use both client-side & NCSA formats; be aware that the WebSite Pro built-in imagemapper doesn't provide the real URL of linked pages to the client, so destination pages not in the same directory as the .map file require BASE HREF tags (which are generally to be avoided, as they scramble off-line demos). Please use ALT tags on individual client-side regions so Lynx can parse the imagemaps. 
Chapters 
Chapters go in the /chapter/ directory, with one directory per state and one directory per chapter within state, e.g. /chapter/ny/nycas/index.html 
Syntax 
Please check pages with an HTML syntax checker, such as BBEdit's HTML Tools:Check Markup, WebTechs' HTML Validation service (or a derivative), Doctor HTML, etc. 
External links 
For pages of links (or whenever you want to retain a user while linking to an external site), use target="external" or similar in the <a> tag, to create a new window for the external page. 
Design Resources 
Web Pages That Suck: what not to do, with examples.

HTML Source formatting recommendations

  • Put a blank line between major entities (<h#>, <p>, <ul>, etc.) 
  • Tags are lower-case. 
  • Indent tags embedded within other tags by one tab (ignore <html>, <head>, & <body> and standard header/footer for this rule). This means that if <ul> starts at the extreme left edge, component <li> tags should be indented one tab. Continue for multiple embeds where feasible 
  • As above, indent <tr> one tab within <table>, and <td>/<th> two tabs. If there are multiple lines (<p> or <br>) within a cell, start the text on the line below the <td>/<th> and put the closing <td>/<th> on a line below the last of the text. 
  • For the webmaster's convenience, most files are saved with Macintosh-style line breaks. Browsers don't care about line-ending formats, but Notepad isn't very graceful about them.

Writer's Guide: text standards on Audubon websites

  • Never double-space (except in <pre>); this is ignored by browsers, and just makes files marginally bigger. 
  • Use comma before and in lists. 
  • Avoid ALL CAPS in favor of Title Caps (capitalize first letter of each word, except articles, conjunctions, and prepositions of 4 or fewer letters). 
  • Dashed breaks consist of " -- "; avoid high-ASCII em dashes (not valid in HTML) or single dashes, which look like minus signs.

Layout Tips:

  • Consider repeating the <title> in the body -- it may not always be obvious in the browser's title area, and this will ensure that printed copies of your page include the title. The (yellow) NAS template includes a title in the body and another in the <title> tag, for just this reason. 
  • Whenever possible, make sure your page fits nicely into a 468-pixel-wide window; this is the default size of Navigator's (and Explorer's) window on a 640x480 (basic) display. Having a bigger monitor is nice, but having one too small for the page can be painful. The NAS template uses a fixed width of 468 pixels through the <table> tag, to ensure consistency; on the other hand, the AUDUBON magazine pages are larger if space is available. 
  • If you're linking to a page or image over 100k, put the approximate size next to the link as a warning that it will not come up instantly.

contact:
webmaster@audubon.org		 Back to Audubon Coding Resources home