Current ALA: Build A PHP Switcher | Business Entity Options
Current Glamour: Worked For Me
Design: CA Interactive Winners (Communication Arts)
Essentials: The Real Challenge (More Essentials)

Clickable “Essentials” feature requires DOM–compliant browser.

17 October 2002
[? | 3 pm]
Pixelism
In yesterday’s Report we alluded to Mozilla’s inability to display all frames of GIF animations in Rollovers. Visit K10k with Mozilla and another browser. Mouse over the navigation buttons at the top left. Compare. (Some readers report that the bug does not occur in their version of Mozilla.) K10k has been reformulated in XHTML. Border attributes for which no compliant workaround has yet been found prevent it from achieving 100% validation. Our concern here is not Mozilla or K10k. Our theme will become clear as you read.

K10k is a layout-intensive site. It achieves its look via presentational XHTML (tables, frames) combined with style sheets, scripting, and images. Such sites would not ordinarily bother converting to XHTML let alone striving to validate. Yet it is precisely sites like K10k that may inspire a second wave of designers to incorporate web standards into their production workflow. When K10k validates, designers will see that it is possible to achieve pixel-precise control using standard markup and code.

Many would argue that pixel-precise control is antithetical to the web’s nature. Certainly, such control means nothing in the context of Lynx, screen readers, Palm Pilots, web phones, etc. But in desktop browsers, it sometimes means everything. To many designers, a few pixels make the difference between a professional effort and a sloppy failure. Many clients agree. Ours, for instance.

These clients want compliance and accessibility. They don’t expect their sites to look the same in 4.0 browsers and new ones. But they’ll fret over subtle rendering differences between IE 6 and Netscape 7. Are their concerns foolish? We think not.

We believe if the top of an image is supposed to align with the top of a block of text, it should do so. Likewise, if 50px of white space helps a visitor distinguish between a content area and a functional, task-oriented area, that 50px means something. Is 43px close enough? Sometimes yes, sometimes no.

In many cases it’s enough that there’s an appreciable block of white space. The amount may be based on ems or percentages. For many designs these loose, flexible values may be perfectly appropriate. But not for other designs. On some sites, precise visual alignments across a page convey an immediate sense of quality assurance. That notion of quality and precision may be a paramount brand value. Flexible, liquid design won’t communicate that brand value as effectively as a perfectly rendered grid.

Old-school pixelism wastes bandwidth on proprietary markup and excessive images and yields bloated, often inaccessible sites.

New-school pixelism provides precision when the design requires it. It does so without sacrificing accessibility or standards compliance and while conserving bandwidth. It is a reasonable alternative to Flash. To hope all designers and clients will one day stop striving for tightly controlled layouts is to miss the chance to persuade those who live and die by the pixel that standards are good for them, too. :::

16 October 2002
[noon]
Where have we been? We’ve been digging. Brand development tasks. Final fixes on a site that’s about to launch. Design and production on a new site. Proposals. Book chapters. Client meetings. Preparation for upcoming appearances. Last-minute debugging. We owe phone calls. We owe email replies. We owe our barber a visit.

Now @ Webmonkey: The Secret Life of Markup.

Dori Smith and Tom Negrino’s JavaScript for the World Wide Web Visual Quickstart Guide, 4th Edition, is a handy book to have around, particularly for non-JavaScript experts who want to add interactivity to their work. And the book’s companion site includes plenty of well-targeted JavaScript examples you can grab and use.

CSS layout—and hybrid design that combines CSS with tables—both require trickery to avoid potholes in browser compliance. Eric Meyer has compiled several strategies in one convenient location.

Not content with masterminding the CSS/XHTML Wired Redesign, Douglas Bowman took a deep breath and reformulated his personal site in those technologies. Looks pretty, works great.

GIF animation on Rollovers remains troublesome in Mozilla 1.1. The technique works as expected in Netscape 6.2, IE5, and other common household browsers old and new. But in Mozilla 1.1, when you mouse over an image whose “on” state consists of a multi-frame animation, you see only the last frame. Mozilla supports ECMAScript, CSS, XML, and the DOM. So why the difficulty with GIF animations? Dunno. :::

13 October 2002
[2 pm]
In this week’s double issue of A List Apart, for people who make websites:
        Build A PHP Switcher, by Chris Clark. ALA’s open source style sheet switchers are swell so long as your visitors use DOM-compliant browsers and have JavaScript turned on. But what if they don’t? New ALA author Clark tells how to build a cross-browser, backward-compatible, forward-compatible, standards-compliant style sheet switcher in just five lines of code. Plus:
        This Web Business Part 4: Business Entity Options, by Scott Kramer. You’ve mastered Photoshop, Flash, PHP, CSS, XHTML and JavaScript; studied usability, accessibility, and information architecture; and can fake your way through XML. But there’s more to running a web business than that. Part 4 of a continuing series. :::