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:
- 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 ...
- 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. :::
2 December 2002
[6 pm]
New Nav
We’ve replaced the images in this site’s primary navigation zone. The frugging beach bunnies can still be viewed by rolling over or visiting Classics. Everything else has changed. (When in doubt, reload.) We like the new images—they’re Wintry Fresh!™—and hope you do, too.
Tweaked Tool
IE5.x/Win gently bungled the tool bar we introduced yesterday. It should be working now. In coding the tool bar the first time, we neglected to account for IE5.x/Win’s famous mishandling of the standard CSS box model. Tantek’s Box Model Hack to the rescue! Or so we hope. (See below for tests.)
Test Fest
After making the changes described above, we viewed this site in IE5.1/Mac (OS 9), IE5.1.4 (OS X 10.1.5), Opera 7 beta (Win/XP), IE6 (Win/XP), Opera 5 (Mac OS 9), Mozilla 1.1 (Mac OS 9), and Netscape 6.2 (Mac OS 9). The results:
- As expected, the new toolbar works in all but Opera 5.
- The CSS banner rollovers work perfectly in all the above browsers, except for a 1px shift effect in Opera 5/Mac and Netscape 6.2. The bug is negligible and some readers may even perceive it as a special effect. (Probably not, but indulge us. Earlier, in an attempt to stifle the one-pixel wiggle in those two browsers, we tweaked our CSS—and promptly untweaked it, after the change wrought havoc with our old friend IE5.5/Win.)
- Traditional JavaScript multi-stage Rollovers work perfectly in all the above browsers, except that Netscape 6.2 displays alt text and image outlines before changing image states. This is a known bug in early Gecko browsers. Later versions of Netscape and Mozilla are free of the glitch.
- Opera 7 beta (Win XP) displays almost identically to IE6/Win XP and Mozilla and “gets” all the CSS and JavaScript trickery—except on the page you’re now reading. On this page only, links in the primary content area of this page do not hover and are not clickable, nor do Rollovers work. Links and Rollovers work normally on all other site pages tested, and Opera 7 smoothly handles far more advanced scripting on some of our other sites. Hey, it’s a beta. Disclaimer: This page may work perfectly in your copy of Opera 7 beta and we hope it does. Any result listed here is simply what happened on our systems.
- Gecko-based browsers (Mozilla, Netscape) position the subnav (About, Contact, etc.) a few pixels closer to the Search box than we’d like. Maybe Gecko is right and IE and Opera are wrong; maybe IE and Opera are right and Gecko is wrong. Maybe 5K of tortuous CSS hacks would result in pixel-perfect consistency across all browsers, but we’re not going to bother trying to find out.
- Text justification works as expected except in IE5.1.4 OS X 10.1.5, where curious bursts of meaningless horizontal white space sully the intended elegance, like a soup stain on an evening gown.
We continue to redesign this site slowly, squeezing it in between commercial jobs. Slow bakin’ makes good eatin’. :::
1 December 2002
[2 pm]
You may notice that a tiny new tool bar has made its way into the right-hand subnav. Longtime readers will scarcely require an explanation. Our old friend Mister Style Switch is back. So far, all the tool bar lets you do is change the text color from off-white to black. Most of you will never want to do that. But some Mac users may. This site is optimized for W3C standard sRGB gamma. Macs and PCs can easily switch to sRGB, but Mac owners who specialize in print design may prefer to stick with factory gamma. The tool bar’s black text setting will make this site easier to read for those users. Most of us will stick with the off-white default. You may notice two blank spaces in the tool bar. They’re reserved for more interesting experiments to come. The tool bar makes use of the familiar ALA style switching technology created by Paul Sowden and available as open source. Designers, note that browsers seem happier when the linked styles precede the linked JavaScripts in the <head> of the page. Readers, note that JavaScript is required to enable the switch, and cookies are required to make the change in style persist as you page through the site or return to it. :::
30 November 2002
[6 pm | 11 am]
The holiday family visit continues, punctuated by little breaks like this one.
In yesterday’s Report, we mentioned a Web Design World panel that examined sites created by conference attendees. Sallie Mae is another of these that caught our fancy. Sallie Mae is in the complex business of lending money to students. The site must facilitate every aspect of that relationship, from planning through online account management. It must speak to several distinct audiences, and work as both an information center and an application. The site’s information designers thus faced the common (and nearly impossible) challenge of providing one-click access to pretty much all the site’s content. Many designers stuck with such a task build a DHTML menu that, when it works, offers one-click access without considering likely visitor goals and mental models. Such menus often seem designed to please the site owner at the user’s expense. By contrast, the creators of Sallie Mae seem to have clearly assessed the kinds of users their site will attract, and the tasks such users will wish to achieve. Their multi-layered menus are based on visitor needs and goals. Sidebars target parents and existing clients requiring customer service. The central tabbed menu is task-driven and intuitive despite its complexity. The tabbed menu is built with Flash, but if the visitor lacks the Flash player, a DHTML menu is called into action. We weren’t about to apply for a student loan so we can’t say how well the account management aspect works. The choice and treatment of stock photos is not entirely inspired, but said photos work as quick guides to specific kinds of content. Sallie Mae’s designers faced an overwhelming challenge and rose to it. Well done.
Abetted by Panic’s Steven Frank, John Gruber continues to explain what’s wrong with the OS X Finder. Both men are Mac experts (Frank’s company produces some of the best software available for Mac OS) and both are fans of OS X. Their arguments are not mindless gripes but insights into key user experience problems Apple has yet to address.
Mozilla 1.2 has been withdrawn from circulation because of a major bug. A fix is in the works.
Got Quicktime and a high-speed connection? The merry crew at coudal.com presents Western State No. 2, an interview with filmmaker/artist/musician Cory McAbee.
Fontmonster offers free fonts for Mac or PC. Several are real beauties.
Now might be a good time to start reading Tantek’s log. Tantek is a driving force behind standards support in IE, a member of the W3C CSS and XHTML working groups, and the creator of Favelets. Recent Tantekisms include Anorexic Anchors and XHTML vs. the World.
Radioframe Networks has launched. Built with CSS/XHTML templates crafted by Textura Design, the new site looks fine, loads fast, and is accessible per U.S. Section 508 guidelines.
After touting the joys of CSS text justification in yesterday’s Report, we’ve decided to turn off justification in this site’s right-hand blurbomatic sidebar. (When in doubt, reload. In IE5/Mac, reload the basic style sheet, then refresh this page.) We liked the way the justified sidebar filled its alloted space, but the effect impaired readability and was unsustainable across browsers and platforms. The blurbomatic sidebar is now aligned left and is indented two pixels to line up with the left edges of the ALA and Happy Cog banners. Even without justification, the strong left edge unifies the right-hand area as an entity that’s distinct from the primary content. Text-align: left has been the default for all visual web browsers dating back to the Mesozoic era, but you must specify it in your style sheet to avoid a bug in IE6/Win that may otherwise randomly center your text. :::
29 November 2002
[11 am]
Text-align: justify. Three little words that shore up grids and can make reading a web page more like, well, reading. Invented way back in 1996 as part of CSS1, and supported in just about any desktop browser you can name, text-align: justify is as addictive as Marlboros. You may find yourself editing text to avoid widows and gaps and improve packing. Keep in mind that copyfitting is an imperfect science on the platform- and browser-neutral web. What looks tight and crisp in Windows 98 or Mac OS may be riddled with unwanted white space in Linux. Then too, not every project offers permission to alter text for the sake of layout. And on a dynamic site, where text is pulled from a database, justification could result in ugliness. But on sites over which you have creative control, and which you’ve laid out with crisp grids, it’s a nice way to apply a hand-tooled finish and to help the eye distinguish between various page sections and different kinds of content.
At Web Design World Boston, we participated in a panel that examined sites designed by conference attendees. BMedia was one of our favorites. Check the Folio section and click on Locus Systems. Notice the way preliminary content loads in the page you’re already viewing, a user-friendly technique long deployed at K10k. (Give the reader a taste before asking him or her to click through.) Note as well how the site’s neutral color scheme makes content pop. We were quite taken with BMedia’s subtle design intelligence. So nice we blogged it twice.
Like many Americans, we’re in the midst of a holiday family visit. (We sneaked away this morning while the ladies shopped.) Be well and be loving. More later. :::
27 November 2002
[4 pm]
Years ago we attended a focus group. Participants were divided into two categories we’ll call Quitters and Crackheads. Quitters had switched to a competitor’s service after the client failed to address their problems. Crackheads loved the client’s service more than they loved their own children. Client personnel took no notes as Quitters explained why they’d stopped using the service. Client personnel high-fived each other as Crackheads avowed willingness to continue using the service even if the price were to double or the quality to decline. In short, client personnel were unwilling to learn from dissatisfied customers. To no one’s surprise but their own, their arrogance returned to them in the form of lost market share.
We were reminded of this experience while reading Daring Fireball’s critique of the Mac OS X Finder. The OS X Finder looks like a glitzier version of the traditional Mac desktop but behaves like NEXTSTEP, a Unix-based GUI of the late 1980s. Despite Steve Jobs’s leadership, a fine logo by Paul Rand, and colossal investments by Ross Perot and Canon, NeXT and its operating system died on the vine. OS X is its resurrection.
To increase market share, Apple hopes to entice Windows users to switch, and a number have happily done so. But it also needs longtime Mac users to switch—from OS 9. The last statistic we saw claimed one out of five Mac users has switched to OS X. By our arithmetic, that means four out of five have not. If Apple wants to be sure they will, it must listen not only to the praise of satisfied customers but also to the gripes of those who find OS X slower, less consistent, and less intuitive than the classic Mac OS.
Steve Jobs founded NeXT after Apple fired him or he resigned, depending on whose press release you believe. NeXT was Jobs’s only failure, and he seems determined to prove it was actually a success in disguise. Jobs’s gamble may succeed—he’s been right more often than not. But Jobs could vastly increase the odds in Apple’s favor by listening to Mac loyalists who are ambivalent about OS X, including those who use and appreciate it but would like to see some changes. Alas, Jobs is not known for considering anyone’s opinion but his own.
Based on consistent guidelines and refined over two decades, OS 9 delivered predictable user experiences. By comparison, OS X is still somewhat raw. Incorporating the strengths of OS 9 would improve OS X and make it more palatable to longtime Mac users who haven’t yet switched. Apple has the talent to do just that—if they also have the willingness to listen. :::
26 November 2002
[6 pm | noon]
In the first James Bond/007 novel, Casino Royale, the hero undergoes torture of a particularly perverse nature: his jimmy gets whacked bloody with a cane rug beater for over an hour. We were reminded of this yesterday while enduring four hours in a dentist’s chair. After the first 14,399 seconds, the taste of blood and old fillings loses its charm. One’s teeth have a peculiar scent when ground to powder by a high-powered drill whose whirrings are not quite loud enough to drown out the Kenny G CDs piped into the dental chamber for your aural pleasure. 14,400 seconds of drills, needles, and Kenny G versus 3600+ seconds of jimmy-whacking. Tough call. Royale is part of a series of James Bond trade paperbacks produced by Penguin and beautifully designed by Richie Fahey and Roseanne Serra. (The Amazon JPEGs do not do it justice. Fahey’s site comes close.) Fleming’s Bond is a descendant of Hammett’s Continental Op and Sam Spade and Chandler’s Marlowe: spartans who live by a code that insulates them from a corrupt and violent world but also prevents them from experiencing love or even simple happiness. It’s as far from Roger Moore’s smirk as you can get, though Connery, in the early Bond films of which Goldfinger is the best, captured some essence of it and spun it with charm. Then again, Connery’s James’s jimmy merely had to contend with laser beams.
Whatever its failings, Netscape 4 made it easy to install digital certificates essential for encrypting sensitive data—which is one reason web pros in the cash-strapped public sector have been stuck with that browser since man first walked upright. Hark! Hope: CREN has partnered with Opera. Hence Opera 7 will include a group certificate signed by CREN, enabling libraries and universities to migrate from a 1997 browser to a modern one that supports standards. (Hat tip: Tanya.)
On the web, self-motivated writer/artists become independent content providers. On the web, information wants to be free but many self-proclaimed content providers eventually seek a form of reimbursement more tangible than reader emails. Can content and cash be reconciled online? Adam Greenfield takes a thoughtful look at this question in “Briefing for a Descent into Heck” in the latest issue of Reservocation Magazine, which also includes an interview with art director/photographer Jordan Crane. It’s embarrassing to keep citing Greenfield’s work, but damned if he doesn’t keep cranking out some of the smartest stuff being written on and about the web.
“At a virtual gathering, you can’t quite smell the pumpkin pie, but you can feel the love.” CitizenX presents its third annual Virtual Grace on Thursday, 28 November at 3:30 PM EST, 12:30 PM Pacific. Turn on, tune in, pass the tofurkey. :::