29 June 2004 11 am est

Architectural Digest vs. This Old House (A List Apart No. 184)

When web designers discuss their craft, they almost always focus on how to do a thing, rather than what things should or should not be done. As an industry, we are more like “This Old House” than Architectural Digest.

Case in point:

In Issue 184 of A List Apart, for people who make websites: Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks. Read all about it in Drop-down Menus, Horizontal Style.

Now, me, I hate drop-down menus. I hate them as a user. Too many choices. It’s like those big laminated menus you get at a New York diner. Spaghetti, diet plate, French Toast, broiled filet of sole, pizza, ice cream sundae, Atkins menu, veggie burger.... The eyes blur. You slam the menu shut and order coffee.

As a designer, wherever possible, I avoid drop-down menus. For they almost always create an inferior user experience versus drilling down through clearly labeled, intelligently organized categories.

When I see a drop-down menu, I know that a committee sat around a table, unwilling to think through the organization of the site’s material into a user-focused structure — or unwilling to accept the recommendation of an information architect who spent days making sense of the site’s offerings.

A drop-down menu tells me there were too many decision makers, none of whom understood that the user’s needs were more important than their ego-driven desire to win front-page placement for their little piece of the content puzzle.

Smart clients know it’s their job (or yours) to understand why people visit their site, and to arrange the material along paths driven by their visitors’ needs. But even very smart clients sometimes lose the battle to a higher-up who knows and cares nothing about user experience.

When that happens, you might have to create a drop-down menu, and the method shown in this ALA issue is a good one because it is semantic, light, elegant, and minimally intrusive — at least from the perspective of underlying code.

ALA offers Drop-down Menus, Horizontal Style, as we earlier offered Patrick Griffiths and Dan Webb’s Suckerfish Dropdowns, not because the magazine advocates drop-down menus, but because we all sometimes need to create one. (The desire to avoid them whenever possible should not be construed as negative criticism of these articles, which are among the best on the subject, and which do tackle some aspects of “why” in that they focus on structure, semantics, and usability.)

I look forward to the day when most people who hire folks like us to design, structure, and program their web presences treat us more like the thinkers we are, and less like hired hands installing birdbaths.


18 June 2004 11 am est

In today’s Report:
Production for Use
Looking for design in all the wrong places.

Production for Use

I recently created three approaches to the redesign of a major sports site. I was happy with all three but was particularly jazzed about one. There’s a certain look to this category of professional sports sites, and my favorite of the three designs smashed the mold in interesting ways. More than that, it was something that almost never comes out of my shop — a genuine jaw dropper.

Another of the proposed designs took a more traditional approach. Seated well within the established sports site groove, it polished the category’s conventions instead of defying them.

My favorite design did a great job of drilling the team’s brand into your brain, and a pretty good job of highlighting the kind of content the site offers in abundance — content that keeps fans coming back.

The more traditional design, although less brand-centric, did an even better job of highlighting the content. On the more traditional design, you just could not miss what was new and exciting. The traditional design made it likelier that you would drill deeper, read more, and come back tomorrow to see what was new.

Which design did the client buy? The design that reinvented the wheel? Or the design that sold the site’s content?

The client made the right decision. They bought the layout that made a hero of their content. They understood that easy access to good content is what their fans want most from their site.

They admired the fancier layout. It tempted them. But they bought the design that did the best job of advancing the site’s business goals while serving its users’ needs. In short, they bought the best design.

It was the one the sales and marketing team would have picked. But so would any creative director who understood how people use the web and who cared about growing the client’s business. Mainly, I believe it was the layout the fans themselves would have selected if given the choice.

If you’re halfway good at visual design, you get off on it. When it’s going well, it feels like you are creating a world. Often, looking back, you’ll realize that what felt like divine revelation was merely ordinary journeyman’s work. But sometimes, you surpass yourself. Sometimes, stumbling blindly with half a plan, you create Beauty. As the parent of that child, you feel love for what you have made. But that rare exceptionally new and unique design isn’t necessarily the best design for the job.

Design, whether it’s automotive design or web design, is about use. The car that handles the turns and gets the best mileage may be better designed than the chartreuse job with the big fins, even if they are the finest fins ever shaped out of metal.

Lately some of my favorite newish blogs have been discussing techniques for achieving certain stylistic effects, while other equally-loved blogs have begun timidly critiquing third-party site designs. This stuff is great and we could use more of it (with less timidity — anyone who desires has the right to discuss anything that’s out there). But, good as it is, it doesn’t go far enough. There is a next step to analyzing and criticizing other people’s work: namely, analyzing and criticizing it in the use context for which it was created.

Toward the end of the dotcom boom, a certain expensively-produced shopping site, buzzing with bells and whistles, went down in flames, burning the investors’ cash as it plummeted to the hard, cold earth. The anti-design crowd took pleasure in the site’s failure and tried to squeeze moral lessons from it. Specifically, some of them claimed that the site’s failure was proof that design on the web was useless, or at best beside the point. Wrong.

The lesson they should have drawn from the site’s failure was slightly more complex (which is why they didn’t bother to draw it). Namely, design fails when abstracted from use. Shoppers didn’t need talking avatars and whizzing space ships. They needed a clean, intuitive layout that made it easy to learn about and buy products. The failed site was like a glass crib: lovely and delicate, but made of the wrong stuff.

Design and usability are not enemies. They are really two parts of the same art and science. We separate them because we are a specialist culture, and in so doing, we promote limited thinking, deep misunderstandings, and pointless antagonism between people who should be allies. On the web, graphic design, site architecture, and usability should be understood as component parts of a single thing — I call it web design, you may call it user experience or who knows what.

Okay, and to finish, the same thing applies to web standards. I am coming to believe that talking about web standards without considering design, architecture, and usability does little good. Understood properly, I believe that web standards are simply a component of good usability and good architecture. I’ve always thought this; I said it over and over in my book; some people get it (and they didn’t need me to tell them).

Head-of-a-pin arguments about varying semantic approaches to creating a menu or replacing an image are not useless. (Sometimes they are even mildly interesting.) From these dust-ups, common-sense best practices often emerge. These best practices may help a common site element work better for more kinds of users under varying circumstances, and that is a common good. But it is only a start. It is only a fraction of our job. To care about details is important. To care only about details — especially minor details of underlying code structure — derails the larger, more important discussions we owe ourselves, our clients, and the people who spend time on the sites we create.


16 June 2004 3 pm est

In today’s Report:
Clarendon is the new Helvetica
An observation.

Clarendon is the new Helvetica

Like love, Clarendon is all around us. (Good cuttings are available from Adobe and Bitstream.) Designed in 1953 by Hermann Eidenbenz, the quirky slab serif has been quietly undergoing a renaissance similar to that which befell Helvetica in the 1990s.

Suddenly, everything’s coming up Clarendon. It’s on book covers. On Starbucks packaging and in-store signage. In print ads touting the pleasures of Canada. On every tenth apartment building in Manhattan. On every sign in the hospital where our baby will be born.

The perky typeface is so omnipresent, you don’t see it until you see it — and then you see it everywhere. Try it yourself! Play Spot the Clarendon™ as you leaf through magazines or trudge the streets of any large American city.

When I chose Clarendon as the new face of Happy Cog, I thought I was doing something original. So does the salmon swim upstream to mate, convinced that he thought of the idea himself.

Clarendon is not campy or Retro, yet it embodies the mid-20th-Century. And maybe that is the secret of its resurgence. Maybe, like the nostalgic bending of reality that attended the Reagan internment, the sudden reflowering of Clarendon reflects a longing for a simpler time — or at least, for a time we can nostalgically pretend was simpler and less dangerous than these days.

Or maybe it’s just that it looks sweet.


15 June 2004 10 am | 7 pm est

In a triple issue of A List Apart, For People Who Make Websites:

Dynamic Text Replacement

by Stewart Rosenberger

Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.

Dynamically Conjuring Drop-Down Navigation

by Christian Heilmann

Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.

Creating Liquid Layouts with Negative Margins

by Ryan Brill

Two- and three-column, liquid page designs with header and footer are easy to dash off using old-school HTML table layout methods. Designing them in CSS is trickier, and can sometimes even require you to structure your page’s content elements in a specific (and undesirable) order. Negative margins to the rescue! Ryan Brill whips up two quick CSS layouts to demonstrate the power of negative thinking.

New publishing schedule

Note for compulsive calendar watchers: A List Apart has always published on Fridays, but we now publish on Tuesdays instead. Discuss amongst yourselves.


7 June 2004 9 am | 12 noon est

In today’s Report:
Best of the Moll
Blogs We Love. Number 423 in a series.
My OB/GYN
Daddy Dada.
A study in contrasts
Do not adjust your television.
The sixteen year gap
Crawling from the wreckage.

Best of the Moll

Of late, for pleasure, I often find myself turning to Cameron Moll’s Authentic Boredom. On the strength of its useful how-to articles alone, Moll’s blog is worth any web or graphic designer’s time. The author knows his subject, approaches it in fresh ways, and writes in an engagingly natural voice. The site would repay your time even if it were lacking in visual distinction.

But I keep returning to it mainly because I just like looking at it.

The layout is simple and uncluttered yet it is also ornate, filled with small touches that create a strong sense of “place” and visual brand identity. Call it Minimal/Gothic.

It looks like other blogs, yet it looks only like itself. It subtly echoes elements of other designers’ work (for instance, its design alludes to Todd Dominey’s What Do I Know and Shaun Inman’s personal site) yet it achieves its own visual “voice.”

Which is no easy thing to do when creating a site whose structure necessarily resembles the structure of thousands of others. All blogs present the latest content and a means of viewing older content; most use two columns because a two-column format just works; most have simple navigational menus at the top or side, again because such formatting simply works. To achieve originality under such circumstances is no mean feat.

The site’s monochromatic color scheme makes article-specific visual elements pop in a way that is cunning, helpful, and pleasurable: cunning because it teases you into reading instead of scanning; helpful because the small visual elements guide you through the reading experience; pleasurable if you have a working pair of eyes.

The little inset demo graphics not only guide you by demonstrating what is being discussed, they also reward you for having read thus far — like little bon bons or puppy treats.

Experiencing good design is a lot more fun than reading about it, so do yourself a favor.

My OB/GYN

My wife is six months pregnant, yet I am the one who seems hormonally strung-out and mentally challenged. I can’t remember names, dates, or what we were just talking about. Small frustrations feel like insurmountable obstacles; the most calculated or hackneyed story lines provoke a deep emotional response. I can sit through Notting Hill and not mind it. In the baby store, a tiny bottle of baby shampoo imprinted with a tiny teddy bear logo makes me burst into happy idiot tears.

Every day some baby-related task presents itself. Many are medical. I’m getting check-ups for things I never checked before. Today The Wife and I went for skin cancer screenings (we’re fine). I’m sitting there in my little paper gown, answering the doctor’s questions about moles and blotches and blackheads, and I quote the opinion of my OB/GYN.

I mean my chiropractor but it comes out “my OB/GYN.”

About sums it up.

A study in contrasts

In response to reader requests, I’ve adjusted this site as follows: the default setting is now higher in contrast; an optional “darker” setting provides even more contrast; and an optional “lighter” setting reproduces the low-contrast former default setting. All three settings are available on the updated contrast-o-meter page. Most browsers will show the changed styles immediately, but a few require you to manually load and refresh the style sheets.

The sixteen year gap

There are 16 years of my life that I can barely remember. On this date eleven years ago, propelled by a power greater than myself, I began crawling up out of the abyss.

Previously in The Daily Report...

Ninth anniversary
This site is nine years old. Soon they’ll let us take off the bib.
The Andy Kaufman Effect
On the web, nobody knows you’re not the dog you pretend to be.
Hot socks from Reboot
Three favorites from the May 1st Reboot. These sites might stimulate your creativity.
Blog This
Now anyone, at virtually any experience level, can own and manage an attractive and standards-compliant personal site. With input from Adaptive Path and Stopdesign, Blogger reinvents itself (and we lend a hand).