This is the basic form I use for documentation projects. It's not really built for Fancy-Dan blog layouts, although adpating to a 3-column layout simply requires adding two new DIVs to the templates.
The current page format is a classic two-column nav || content layout favoring large heads and generous leading. Sans-serif fonts predominate, notably Arial, Verdana, and Comic Sans MS. Heads are styled to give the pages textual color and structure, for easy visual scanning. Text rivers are avoided by using full justification. Off-page links are displayed with a dashed underline; on-page links receive a solid underline.
The pages here generally don't validate as compliant html 4.01, but the exceptions are minor. (Aww, who am I kidding? To say the HTML is 'sloppy' is to be kind ;-) I'm slowly getting around to using approved entities for typographic symbols, and an occasional piece of XHTML syntax is used even though I rely on the 4.01 Transitional DTD to magically make the wrinkles go away.
I still prefer physical styles such as
<u> to their logical counterparts (
<text-decoration>), but I'm workin' on learnin' to love the logicals. And I'll start caring about niceties such as curly-quotes and guillemots when the rendering engines start caring about kern-pairs. In the meantime, I stay positive by remembering that the layout isn't table-based, and there's no single-pixel .gifs anywhere... ;-)
Generated pages spring from blosxom and a number of plugins and templates. For those interested, here's a list of the plugins:
- config — on-the-fly configuration changes
- entriescache — read entry file paths from a cached file rather than walking the directory tree each time the script is invoked
- sort_by_date — [not offered] sort by date, file name, or path name; ascending or descending
- cyclz — loop through alternating values in template files; makes the basket-weave pattern on the index page
- crumz — breadcrumbs trail for story templates; head functionality coming soon
- flavourdir — keep template files separate from entries
- emptymessage — handle non-existent entry requests by inserting a "404 story"
- blox — plain-text formatter for entries
- fulldatenames — [not offered] convert Mon to Monday, Jul to July
- exclude — skip specific entries on a per-directory, per-flavour basis
- seemore — break long entries into short samples
Templates are designed to work with a feature of the
sort_by_date plugin to provide links for re-sorting entries. Flavour templates include: .html for general views; .slice for category viewing; .loner for individual entries; and .index for index views. For more on blosxom, plugins, and flavours, see this blog entry.
My background is in editing and laying out dead-tree pages. Whether the page holds poetry, actuarial tables, or newspaper columns, for me it comes down to: a type schema suitable for the aims of the material; positive and negative spacing suitable for the typeface(s); a layout suitable for the spacing. (This means "flow" and "readability," not "new" and "catchy.") For the web, this works out pretty well...it's tough to take advantage of a fine, subtle letterform, but there's enough control to set horizontal and vertical spacing complementary to the gross forms.
I would dearly love to jump on the Lucida bandwagon, except that too many platforms sport only one style (roman) and only two weights (book, bold). Other good print fonts (Helvetica Neue, Optima, Stone, Bodoni, etc.) lack built-in letterspacing suitable for the lo-res world of the web. So, that leaves the "standard" web fonts — times new roman, arial, verdana, georgia, etc. They'll just have to do until multiple masters come with every browser ;-)
Standards compliance for web pages is a big issue these days. Much of the shouting comes from rather puritanical geeks; calmer voices promote standards to achieve increased ease, efficiency, and accessibility across the WWW. The dream inspiring this pro-standards chatter is the "semantic web" — described simply, a way of contextualizing everything on the Web.
The first step towards compliance is the separation of structure and presentation. Or, more empirically, separating presentation from structure. The idea (and the standard) is that markup should be used solely to provide structure for documents: headings, content, data formats, logical styles, links. Presentation engines then provide layout, emphasis, and media context. The markup part is easy: write as few tags as possible. The presentation part is largely provided by CSS, the Cascading Style Sheet protocols, which are a bit trickier to implement give the state of today's (and yesterday's) browsers. The visual media css should always validate as CSS2.
This site is driven by two style sheets:
- main.css (for display)
- The "main" sheet does things that older browser – such as Navigator 4 – will simply mangle, and so the main.css file is loaded via
@import, which older browsers won't recognize. All of the content will be visible to older browsers, but the layout will vanish. Click here to see the About Enilnomi page without styles in a new window (note the friendly message about updating browsers at the top of the page ;-).
- print CSS (for printing)
- The printing sheet is qualified by
media="print". This sheet removes all the color and non-essential stuff (navigation links, for instance) from the page, leaving a clean efficient document to send to your printer. You get "printer-friendly" output without having to click a "printer-friendly" button — and I don't have to create a "printer-friendly" button and whip up two versions of each page ;-)
For the curious, a guide to the current style sheet and markup appears in this blog entry.
- BBEdit Lite v6.1.2, a discontinued freeware version of the excellent BBEdit Text Editor [info], is used to generate and edit all text and scripts
- HyperCard v2.41 [info], a discontinued OS9 scripting application from Apple, is used to perform batch processing and emulation
- Within HyperCard, the Color Tools [info] externals are used to generate all graphic primitives; Color Tools are extremely simple to use, and are capable of generating 8-bit color for the widest possible compatability with older browsers and computers
- Clip2Gif v0.72 [download], an old freeware Mac OS9 utility, to convert images to
- When graphics need fancying up, Strider Software's TypeStyler [info] and Adobe's Photoshop [info] are used.
- The blog pages are generated by blosxom [info], an excellent open-source perl-based CGI program
- Development occurs on Windows and Macintosh systems, running a mix of browsers: Netscape4, IE5.x/Win, IE5/Mac, IE6/Win, Mozilla, Firefox, and Safari.