Skip navigation.
Zeldman.com HomeThe Daily ReportMy Glamorous LifeZeldman.com Classics, 1995-2002

The Daily Report

13–15 December 2002

[various updates]

Each of us today must make one vital decision: should Barbie be a librarian, an architect, or a policewoman? The correct answer, of course, is “librarian.” Vote early and often. (Be sure to vote in the Parents Poll as well, where “architect” is now winning by a large margin. Parents Poll hat tip: Dave Rutledge.)

Blowup

Ever download the low-res “comp” version of a stock photo, get the client to approve the design, and then purchase a high-res version of the photo only to discover that it isn’t quite right after all? Smart royalty-free photo/illustration house Veer may have the solution. Veer’s new Zoom feature lets you see grain, f0cal points, and “blemishes on models” in high-res detail before you buy. Even if you’re not an art director and you never buy stock photos, you’ll want to check out Veer’s new Zoom feature simply to see the way it’s been implemented—an intuitive and reliable Flash MX interface communicating with a database. There are other ways of doing this (some Java-based, some proprietary), but Veer’s method is clean and works well. You may need to sign in to see the feature in action, and you’ll need Flash Player 6.

Exploring Apple’s exciting new OS 9

You’re designing a site, and you need to insert an image, but you can’t remember its dimensions and you don’t want to go to the trouble of opening Photoshop. The OS 9 QuickViewer contextual menu item (part of Riccisoft’s ImageUtilities) saves the day. In the OS 9 Finder, select the file, click and hold. From the handy contextual menu, choose “View Picture.” Voila! The image floats above your desktop, along with its dimensions (screenshot). We use this technique a dozen times a day.

Some will point out that XHTML editors like PageSpinner and WYSIWYG tools like Dreamweaver will automatically fill in the file name and dimensions of an image, and ask why anyone would need to manually check image sizes in the Finder. We do it when spinning out variations on a template—for instance, when creating a quick, mini-site containing multiple logos for client review, each of which has slightly different dimensions. Copy the original XHTML file as many times as needed, change the image reference (1.gif, 2.gif), and use the contextual menu to quickly determine the appropriate height and width values. There are of course ways to automate this process, but they are overkill for many projects that can be completed in a few minutes using the power of OS 9’s contextual menus.

(According to Dominey, there is now a free contextual menu plug-in for OS X that does the same thing or close to it. Also, in OS X 10.2, you can turn on an option in the Finder that shows image size dimensions without the need for any contextual menu or other tool.)

Standards, id, and ColdFusion

Signals vs. Noise has remodeled in XHTML and CSS. It’s clean, good-looking, and usable, like all 37signals’s work, but currently suffers from a few errors that are easy to fix. We mention them here not to embarrass our pals at 37signals, for whom we have great respect, but because they are common problems that affect many sites—maybe even yours.

The site’s CMS seems to generate numerically named ids, which are illegal in XHTML, and those invalid ids are throwing off the W3C’s markup and CSS validation services when they attempt to parse the site. The quick ’n easy fix: insert one or more letters at the beginning of each id attribute. id="000010" is not kosher, but id="s000010" or id="svn000010" are valid and would fix most of the site’s woes.

The other validation error is caused by unescaped ampersands (&), which are another (X)HTML no-no. In HTML and XHTML, ampersands are reserved for escaping high ASCII characters. For instance, “ is the Unicode entity for an opening quotation mark. When raw ampersands are included in strings, a markup validator assumes they’re being used correctly as part of an escaped character sequence. If no such sequence exists, the validator rightly states that the page contains an error.

Macromedia ColdFusion generates URLs that contain unescaped ampersands. This can be fixed by using a ColdFusion function called URLEncodedFormat(). ASP has a similar function called HTMLEncode. In both cases, developers can avoid the problem by passing their URLs through the function before outputting them. (Hat tips: Kym Kovan, Mark Stanton, and Marcus Tucker.)

We’ve worked with several ColdFusion developers in the private and public sectors, not one of whom knew how to escape the illegal characters ColdFusion generated. Possibly some did know but didn’t want to deal with what they considered an annoying request by a front-end guy.

Update: Signals vs. Noise now validates. 37signals was able to fix the errors mentioned above in less time than it took to describe them. Beauty.

Bugs in the belfry

It seems the new Relevant Externals feature in our right-hand column displays incorrectly in one or more recent versions of Navigator in OS X. We don’t know which version or why, and we also don’t know if it’s a genuine browser bug or a fluke on one reader’s machine. In our tests, the list displayed correctly in all the usual suspects in OS 9, OS X, and Windows XP. We receive over 2,000 email messages a day and have configured Eudora to place attachments in a separate folder. Email messages retain links to their attachments, but sometimes messages disappear because their subject lines, return addresses, or other headers trigger the spam filters we’ve created over the years. For that matter, in cleaning up viral attachments (harmless to our Mac) we sometimes accidentally delete harmless attachments. C’est la vie. Somewhere out there, at least one reader is seeing a retarded version of a basic definition list to which primitive CSS1 rules have been applied. The more CSS rules you write, the more interdependencies you generate, and the greater the chance that some browser or other may drop the ball. We tested in Mozilla 1.1, Netscape 6.2, Opera 7 beta, IE6/Win, and IE5/Mac (OS 9 and OS X), and in every one of them, the list behaved itself.

Update: The browser in question was apparently a nightly build of Chimera, a Gecko-based beta browser for Mac OS X. According to Hivelogic’s Dan Benjamin, today’s build of the Chimera beta browser displays the page correctly. (Dan did not submit the initial bug report. He simply knew which browser was experiencing the problem, having seen it himself in last night’s Chimera build.)

If you send us bug reports with screenshots, please state which browser and OS you’re using (including version numbers). And if our site looks odd in a nightly build of an unfinished browser, please don’t tell us. Tell the engineers whose product you’re beta testing. Thanks. :::

12 December 2002

[5 pm]

We’ve added Relevant Externals to the right-hand column. (A “Hide Relevant Externals” link lets you turn off the feature.) All entries are independent web productions—i.e., not Salon or The New York Times on the Web. We’ve listed a few sites, articles, and development tools we find useful, interesting, or amusing, and we’ll vary the listing as time goes by. Swell sites currently not listed in Relevant Externals include: Destroy Rock City, Metafilter, Futurefarmers, Brainstorms and Raves, Two Piece, Davezilla, Design Flea, and countless others. The links in Relevant Externals enjoy no special stature over other links with which the web is filled. Sites listed in Relevant Externals are not members of a secret club. Sites presently listed in Relevant Externals may stop being listed at any time, for no reason at all except change. Those disclaimers aside, we find the sites, tools, and articles listed in Relevant Externals useful or interesting at this time, and we hope you do, too. Whew. All right, then. :::

11 December 2002

[4 pm | 2 pm]

Welcome to zeldman.com, now with 60% content. The U.S. is threatening to unzip its nuclear arsenal, our cold wet city faces a crippling transit strike, and we’ve taken a break from writing a book about web design to post a few notes on that very subject.

Needful things

Craig Saila publishes excellent web building tips, sturdy CSS layout templates, and yet more Lorem Ipsum for your comping pleasure. Hello, Saila! ::: Ian Lloyd’s accessibility-checking favelets have moved to his new site, along with other useful tools and a heaping teaspoon of daily accessibility news. The XHTML/CSS site is simple and nice, though the left-hand sidebar doesn’t work in IE5/Mac yet. Got a tip that might help Ian solve his CSS problem? Let him know. (Update: He seems to have solved it himself by creating an alternate style sheet for IE5/Mac only. It’s different from the look and feel in other browsers, but it works.) ::: Tim Murtaugh has posted seven techniques to help prevent image theft. As he says himself, none are infallible. We avoid such schemes ourselves, but Tim’s article may help those who wish to dissuade the less clueful copyright infringers in their audience. Tim’s “Website, Web site or web site?” is also interesting.

Limits of user style sheets

Hixie’s Natural Log is yet another of those oddly christened personal periodicals that may summon unsavory imagery—but that’s not why we mention it today. Hixie, who was a standards geek before you were a standards geek, has written a user style sheet that changes the look of sites he visits. One of the goals of CSS is to balance the needs of the user with the desires of the designer. User style sheets can provide that balance.

Say you want every site you visit to offer large black text on a white background. If you’re a big old geek (and if your browser supports it) you can write a user style sheet that creates the desired effect while leaving other design elements unchanged. User style sheets can overcome accessibility problems and help designers perform tasks.

As you might expect, user style sheets can sometimes conflict with the styles created by a site’s designers, resulting in a less than delectable experience. Hixie, in his Natural Log, complains of a website he visited:

I had my default background colour set to a dark red (#BB0000, it makes a nice background) so I didn’t realise that there was a header on the pages—they are coloured #b00, the same colour! My user stylesheet looked like this:

root { 
	background: #BB0000; 
	color: white; 
	}
link { 
	color: yellow; 
	background: transparent; 
	}
visited { 
	color: orange; 
	background: transparent; 
	}

This stylesheet also made it very hard read to read the lines giving the dates of when the articles were posted.

We can’t guess why Hixie would choose to impose a dark red background on every site he sees, but that’s not the point. Had the site’s designers avoided applying a change of color to a particular class of text, Hixie would have been able to read all the site’s content.

User style sheets that override a site’s color scheme will most likely deliver ugly results, especially on transparent GIF images. Some geeks won’t care. Some geeks are actually hostile to the very notion of letting anyone but themselves affect the way web content is formatted.

User styles can bust brands, explode grids, and in many other ways wreak visual havoc. Dangerous they may be, but they are also necessary. Designers can take comfort in the fact that most consumers have never heard of user style sheets. Most user style sheet users realize that changes imposed on an existing design may have unexpected consequences.

Format wars

If you missed it before, Anil Dash fired the shot that sparked the XHTML-as-syndication format controversy that’s been caroming from blog to blog like a like a rolling snowball. (Not that snowballs actually carom. Billiard balls carom.) The notion is that our standard markup language can do more than structurally format static pages—that it might usefully replace more complex and less semantically rich syndication specs. :::

9 December 2002

[4 pm | 2 pm]

After a writing marathon, Chapter 5 of Forward Compatibility is speeding its way to our editors at New Riders. On to Chapter 6.

This just in

Essential reading: the Joe Clark interview at Slashdot. Smart answers to tough questions about web accessibility. News you need: CSS-Discuss, the essential mailing list for web designers, has moved to more stable (and permanent) digs, courtesy of the nice people at evolt.org. Cooler than breath mints: Election in Denmark is one of many QTVR panoramas at panoramas.dk.

Hand held

Filmmaker Jim Jarmusch once said that in exploring movie locations, he and cameraman Robby Müller seek out familiar landmarks and turn their backs on them. A Jarmusch film set in New Orleans does not dolly along the French Quarter; one set in New York won’t pan up Rockefeller Center. Likewise, Jarmusch’s stories focus on moments that others would edit out. (Listening to the radio while driving. Falling asleep in a slow-moving train.) Jamusch’s films pivot on small moments that reveal character without explaining too much. Jarmusch is an artist. He would never cut it as a web designer. Most web design today is about guiding users through experiences that fulfill their expectations. Challenge and uncertainty—virtues in art—are vices in our sad and beautiful world of clearly labeled menus and trouble-free shopping carts.

Cheapshot.net is available

Tantek’s log is getting a facelift. More accurately, it’s getting a face after launching without one. Perhaps next it will get a name other than Tantek’s log—which, though accurate, conjures shall we say certain visuals. Not long ago, we said the same of Dive Into Mark. Who names these sites, anyway, Ron Jeremy? (All kidding aside, Tantek’s log is a perfectly good name for Tantek’s log. Its lack of pretense mirrors the man who makes it.)

Post-euphoric acceptance

Payrolls are not the only things being downsized in our sad and beautiful world. Ambitious personal sites whose writing, design, or programming once wowed us are repositioning themselves as unassuming periodicals—logs instead of edifices. Thus Vitaflo, once the design showcase of Brent Gustafson, who also formerly made art with machine code, has turned into a nice little log. Not that there’s anything wrong with it. (It’s a nice little log.) We just wonder if the periodicalization of personal web space is a symptom of diminished expectations. Or the logical product of an era that leaves little time for creative play and less room for the delusion that the web or any site on it can change the world.

Cheapshot.org is available

For all your comping needs: Lorem Ipsum claims to be “the first true Lipsum generator on the Internet.” On some corporate sites, Lorem ipsum dolor sit amet, consectetuer adipiscing elit would be an improvement over the actual copy. Thanks, we’ll be here all week.

Columns with character

Specifying Character Sets” is the first installment of “WaSP Asks the W3C,” a Q&A featurette column created by The Web Standards Project and the W3C Quality Assurance Group to help developers get a handle on subtle issues of web design and production.

And many more

Eastgate Systems, creator of Storyspace and Tinderbox, turns 20 this week. That’s 140 in digital years. Congratulations! :::

6 December 2002

[11 am]

The W3C has redesigned in some fancy-pants “presentational language” they call “CSS.” A tutorial explains how to achieve a three column web layout without using tables.

Growing up in public

We’ve tweaked our menu images again, deleting one frame from the top left animation and modifying another to accentuate its diagonal thrust into the page. (When in doubt, reload.) You may wonder why we’re slowly redesigning this site in public instead of getting it right offline. We thought it might be interesting to create a record of our process, leaving a trail of unfocused ideas and experimental implementations that eventually cohere into a “design” that works. We’ve made no effort to define a brand character, create a logo, or write a themeline. Such items may emerge or not. Our professional practice leaves few traces of the fumbling guesswork that constitutes “the design process.” By contrast, what we’re doing here—this slow accumulation and replacement of elements—exposes the process, zits and all.

Only unclench

The Rogue Librarian is back after a Slashdot interview of accessibility curmudgeon Joe Clark fried her site and others. Among the temporary casualties was a curious new site that seems to have potential, if its author would only find a subject and stop using words like “unclench.”

All apologies

A reader took umbrage with the part of “When Bad Ideas Go Wrong” where we suggested that the Aventis website’s lack of navigational clarity might be due to “back-end guys who know lots about code but little about user experience,” while the site’s visual designers were restricted to low-end, image management chores. This reader pointed out that many developers are better informed about user experience architecture than some front-end designers. True enough, and we apologize. Lack of concern with user experience is not restricted to any discipline. Perhaps we were smarting from recent experiences with back-end folks whose usability insights could be summed up in the phrase, “Anyone who can’t figure this out is a dumbass.” We’ve certainly known visual designers who thought the same way, and we’ve heard a few famous ones say such things onstage, to an audience of ardent young designers who mistook that poison for candy. :::

5 December 2002

[noon]

MacEdition has prepared a guide to CSS2 support in PDAs and handheld browsers. Or lack thereof. In principle, web designers use XHTML to structure their content and CSS to present it. By authoring a separate handheld style sheet, designers can create a look and feel that’s optimized for the world of small, mobile screens. In any reasonable universe, browsers and devices that support CSS will display layout, text, and links, while those that don’t support CSS will show text and links only. That’s the way things should work, but a glance at the MacEdition guide proves otherwise. Partial CSS support is the worst of both worlds, in some cases obliterating content while helplessly attempting to format it. In the world of PDAs, it’s 1997 all over again. :::

4 December 2002

[8 pm | 11 am]

Long-suffering reader, refresh this page once more. Thanks to Porter Glendinning and Todd Fahrner, our woebegone CSS banners finally work across a broad spectrum of compliant and semi-compliant browsers, including the aging IE5.x/Win. Gone is the one pixel wiggle that plagued Netscape 6. Gone too, the single pixel offset that marred display (and revealed a bug) in IE5.1/Mac. And remember how IE5/Win choked on the CSS banners this morning? Sweet reader, it chokes no more. We’ve archived the previous version and its associated style sheets for comparison’s sake. Glendinning (with kibitzing by Fahrner) took it upon himself to paint our fence while we sat in Dr Mars’s tastefully appointed Manhattan office, spitting chunks of dental cement. Between them, the two geeks overcame bugs in Opera, Netscape, and both flavors of Explorer. If you encounter either of these men, nod respectfully.

Last word on this

Ben Henick informs us that the Aventis site’s dropdown menus contain 349 links. Ordinarily, we’d follow an observation like that with a clever punchline, but in this case, none is needed. (Except, maybe, what the heck is Ben doing counting links?)

Earlier in The Daily Report ...

When in doubt, refresh this page. At the gentle prompting of messieurs Glendinning and Fahrner, we took another stab at coding the ALA and Happy Cog banners (above, right) as CSS backgrounds with Rollovers. This time it’s personal. In a quick test, the display seems perfect in Mozilla 1.1 (Mac), IE6 (Win XP), and Opera 7 beta (Win XP). Display is off by one pixel in IE5.1/Mac (OS 9 and OS X 10.1.5), which positions background and border at the same starting point. Netscape 6.2 (Mac OS 9) handles the initial state correctly but there is still a one pixel wiggle on hover. Additional CSS rules might fix these glitches, though the nature of said rules currently eludes us. We haven’t tested in IE5/Win. An alternate approach: remove the border effects from the two banners, and shave the width of the CSS subnav menu by 2px to match. We may end up doing just that. Why bother with any of this, when the task could be handled by two IMG tags and a few lines of JavaScript? Fahrner answers: “Today’s cool and onerous is sometimes tomorrow’s standard operating procedure, and that’s why we do it: to get to the future first.” More major dental work is scheduled for this afternoon. Blood, pain, and quiet weeping. But enough about CSS.

Ray McKenzie discovered a good use for the Aventis website whose virtues we extolled in yesterday’s Report: “Try and find out which of the primary links has the most subnavs. We tried this at our home with the kids and little Susie found that not including the primary link (‘About Aventis’) there were six dropdown subnavs within. Way to go Susie! The best time in our home was two minutes, 41 seconds. You know what game we’ll be playing Christmas Eve when company arrives. That’s right, Aventis Drop! Find out which link has the most subnavs in the shortest time. Winner receives an extra cup of eggnog and a big kiss from Aunt Myrtle (with the moustache), provided she can still stand up at that point in the evening.” :::

3 December 2002

[? | 7 pm | 5 pm | 4 pm]

When bad ideas go wrong

The Aventis website doesn’t work in Mozilla, which is a lucky break for Mozilla users, who’ll be spared Aventis’s nightmarish thicket of DHTML dropdown menus. The site doesn’t require an information designer so much as it needs a good exorcist. Fire up IE6 or Opera 7 and check it out. There are two ways a site’s navigation can go so spectacularly wrong:

  1. It’s designed by back-end guys who know lots about code but little about user experience, which is outside their bailiwick. Any actual designer involved in the site was restricted to doing some Photoshop work. Or ...
  2. The boss wants every link available from the front page, because he once read a book that said users hope to find what they seek with just one click. And he failed to read the next sentence, which said, “Of course, when there is too much material, and it is badly organized (if at all), any attempt to provide one-click access will merely drown the user in steaming jets of informational diarrhea.”

Aventis says “Our Challenge is Life.” We can think of a challenge they might try first. As near as we can tell, the site is supposed to help cancer patients—if it doesn’t kill them first. We call this the “alphabet soup” school of design. Gaze into a bowl of alphabet soup long enough and you may find a word in it. In fairness, we should point out what’s good about the Aventis site. Nothing.

Thinner than ham

We’re spread thinner than ham at a Hanukah party these days. Three projects here, two proposals there, and a book due to our publisher by New Year’s. We know there are still some display problems with the ALA and Happy Cog banners, particularly in older Windows browsers. We’ll fix them as soon as we can. We blame Todd Fahrner for suggesting the idea of using the CSS background property (instead of IMG tags and JavaScript) to place images and their associated Rollover states on web pages. Mostly we blame him for removing our training wheels. There is no IMG tag in the working draft of XHTML 2. Kind of makes you wonder.

Submit, submit, submit

The deadline for the ninth annual Communication Arts Interactive Design Competition (arguably the most prestigious competition of its kind) is 15 January 2003. Check out last year’s winners.

6 December is the deadline for submitting to the sixth annual SXSW Competition. Categories include best personal site, best weblog, and 20 others, and submission lets you attend the SXSW Interactive Festival cheap.

Frankenhand is someone else’s story that we submitted to Other People’s Stories. Why not submit yours?.

Last writes

If you buy this month’s PDN-Pix Magazine and turn to the back, you’ll find a Last Writes column we wrote. It’s not on the mag’s website yet, we didn’t get to look at the edit, and we haven’t seen a copy ourselves. There’s a magazine store next door to our studio, but we’re stretched real thin these days.

You’re likely to encounter serious technical problems on the PDN-Pix website. Don’t whine to us. We can’t do anything about them, and apparently neither can PDN-Pix. Most magazine and book sites suck, though not as badly as the Aventis site. Most publishers have almost no money to spend on web development (or anything else). They’ll task an overworked print art director with “putting our stuff on the web.” Armed with Dreamweaver, GoLive, or God forbid, FrontPage, said print art director does his or her best, which is never good enough, because web design requires familiarity with the medium and time to do the job right. The other thing some publishers do is turn the project over to their overworked IT department, which typically results in non-user-friendly, overly complex archipelagos of bulbous code punctuated by ugly GIFs. The would-be book buyer gives up with a sigh, or turns to Amazon. Publishers lacked money when everybody else was flush. Now that nobody has money, don’t expect magazine and book sites to be marvels of beauty or even usable. This is just our way of saying don’t be too hard on the PDN-Pix site. While there, have a look at Hillman Curtis’s Last Writes column from last month. :::


Default text style.Alternate text style.Georgia on our minds.Watch this space.
A List Apart
Happy Cog Studios
WThRemix

This week in A List Apart Mag: Flexible Layouts with CSS – fluid grids that work. Held over from last week: Flash Satay. Have your Flash and web standards, too.

Current Glamor: Away

Latest Essential: When Bad Ideas Go Wrong

Recent launch: Fox Searchlight Pictures (with Hillman Curtis)

Recent interview: SXSW Tech Report

The independent content producer refuses to die.

Hide/Show Relevant Externals.

Relevant Externals:
20 things
Access @ ALA
Available Domain Name of the Week
Box Model Hack
Boxes and Arrows
Brainstorms and Raves
Browser Specs
Browsers @ ALA
Building Accessible Websites (serialization)
ButtonMonkey
Coudal
Caterina.net
CSS @ ALA
CSS Panic Guide
CSS-Discuss
Creative Commons
Daring Fireball
Design is Kinky
Design Not Found
Designers Network
DevEdge
Digital Web
Dive Into Mark
Dodge Magazine
Evolt
Favelets
Flash @ ALA
Fontmonster
Gawker
Government Requirements re: Web Access
Harrumph!
Historical Present
Hivelogic Narrative
I Me Michael
iBlog
Icon Factory
iStockPhoto
iStockPro
JimFormation
Joe Clark Slashdot interview
K10k
Kottke
Layout Reservoir
Little Boxes
Lost America Night Photography
Meyer Web
Morning News, The
Net Diver
New Riders
NYPL Style Guide
One Point Zero
OS X Refugee Utilities
Pirated Sites
PixelSurgeon
Reading Ed
Real World Style
reservocation
Rogue Librarian
Scripting News
Splorp!
stevenf
Stop Design
Taken on the Road: American Mile Markers
Tantek’s log
Textism
Typographica
undesign
Using Lists for DHTML Menus
Veer
v-2.org
waferbaby
Web Building Tips
Web Graphics
Web Standards Project, The
Web Writing Apple Scripts
What Do I Know?
Where There’s Smoke
xBlog
(X)HTML @ ALA
XML @ ALA
Young Pup
More »