Skip navigation.
Zeldman.com. Web design news and entertainment since 1995. ISSN #1534-0309.
Default style (low contrast).Switch styles (scalable text, medium contrast).Switch styles (scalable text, highest contrast).[Not yet.]
A List Apart
Happy Cog Studios
Designing With Web Standards

More info


Recent ALA: Night of the Image Map. CSS Design: Creating Custom Corners and Borders. Retooling Slashdot With Web Standards II.

Link summary. Google related. Google links. Google Zeldman. Google Jeffrey. Teoma links. Technorati links. Zeldman vs. Nielsen. Legend of Zeldman.

The Daily Report

23–24 August 2003 :::

weekend edition

PocketPC emulator, not so much

In Thursday’s Report, under “Worth Your Time,” we linked to something that might not be. The PocketPC Emulator we stumbled onto displays different results in different browsers. It also apparently displays different results than at least some PocketPCs: screenshot via Jet Row; writeup at Accessify.

Little Dougie Bowman, the Boy Who Could, also found that the emulator is inconsistent in its handling of imported versus linked style sheets. (Styles imported from the XHTML head do not display; those imported from within a linked style sheet do.) Technologist Thomas Vanderwal uncovered additional problems and inconsistencies. If you use CSS to create your web layouts, the emulator does not yet deliver the accurate results you need. No doubt a future version will. :::

Who sell out

We launched this thing in May, 1995 and, aside from a brief flirtation with early banner ads in ’96, we have neatly avoided every opportunity to make a buck out of it. From time to time, would-be advertisers have solicited our regard, but we cast them into the outer darkness.

Meanwhile, for all these years, we’ve dropped a tidy bundle each month on high-octane commercial hosting and connectivity fees. “Information wants to be free” but all others pay cash.

Anyway, a company has offered to pay us a pouch of rocks in return for running a one-sentence, 9px-tall, nearly invisible text ad in an obscure corner of this page. We are considering it. Thought you’d want to know. :::

21 August 2003 :::

11:45 am edt

Neighbor update

Thanks to all who’ve written in about our neighbor whose accident during the blackout left him on life support after emergency brain surgery. There has been no change in his condition. Life is short and fragile; let us love one another. :::

Worth your time

PocketPC Emulator
Does your site’s content travel beyond the desktop browser? Load its URL into the PocketPC Emulator and find out. Hat tip: Ken Pratt, who warns that the emulator fails in Mozilla 1.4/Windows with default settings. (It works fine in Safari, IE6/Win, etc.)
Zen Gardener at DMXZone
An interview with Dave Shea, creator of the CSS Zen Garden.
Built for the Future
A contest, similar to W3Remix, to redesign Jakob Nielsen’s useit.com site. The site says: “Design a usable, intuitive layout and navigation, organize the content with usability in mind, and create a work of art which still reflects the importance and influence of Nielsen’s work.” Eric Meyer calls it “Design Eye for the Usability Guy.” The contest is open to the public and has been blessed by Nielsen himself (although he is unlikely to use the winning design).
No Tables in Texas
The homepage (and several inner pages) of the University of Texas at San Antonio’s website uses XHTML for structure and CSS for layout. “Our next step is to get more content onto the pages and make them attractive,” says webmaster Joseph McBride about this work in progress. :::

Why no updates yesterday

The murder in Baghdad of non-political humanitarian relief workers left us too sad to even think about discussing web design. :::

Spam Hard II, With a Vengeance

Spammers have been busier than usual this week, spoofing harvested email addresses to send PIF files and worse to every computer on the network. Several of our email addresses are currently being spoofed to send your grandmother content that would make a pimp blush. When the mails can’t be delivered, they bounce back to us, even though we didn’t send them.

The new wave of spam has slowed traffic throughout the Internet all week, and it even temporarily took out the zeldman.com server yesterday.

If not in hell, there is certainly a special place in purgatory for creatures that use your return address to send filth to millions. At the very least, they should spend a few millennia watching a loop of Gigli.

Update: Apparently a Microsoft virus reported last week is responsible for the deluge of PIF attachments with spoofed return addresses, but the separate flood of “adult” materials using spoofed return addresses is the deliberate work of spammers. On a normal business day we receive over 2,000 email messages, of which about half are not spam. :::

Correction

On 3–4 May, in discussing the rebirth of the repeating background pattern, we mentioned the excellent WebIcon mini-fonts available at Joe Gillespie’s Minifonts.com. In so doing, we inadvertently made it appear that Joe created those fonts. The WebIcon and Tiles series were actually designed by digital illustrator Paul Wootton. Sorry, dude! :::

19 August 2003 :::

10:45 am edt

Blogstakes launch

Yesterday Blogstakes launched. It’s a sweepstakes with “two winners for every prize: the person who entered, and the site that referred the winning entry.” Blogstakes leverages the network and in particular the segment that develops weblogs or other forms of independent content.

You link to a Blogstakes contest the same way you’d link to any web page. Annoying “tracking URLs” are not used – they’re not needed unless you’re linking to a contest from an email message.

Blogstakes opened with two contests: Free BrowserCam for a Year (“a good match for people who design sites”) and The Clip-n-Seal Fresh Party Pack (“a good match for people who eat”). Other contests will come soon; there’s an announcements list and an RSS feed in three popular formats.

Blogstakes is the brainchild of working web developer Brian Alvey, host of the Meet the Makers event series and backend wizard of Happy Cog Studios. This is your guarantee that it’s not some crude scam to harvest email addresses or develop a blogger-centric sales channel. It’s just for fun. :::

Biopsy is such a lonely word

My two poor paws. The right hand is bandaged; the left is as purple as undergraduate fiction.

I’ve been doing postmarital medical diagnostics. On the afternoon of the 13th my dentist found that the roots of my teeth are “losing bone” – I’ll need to see a specialist. On the morning of the 16th, during a routine physical, the nurse charged with drawing my blood missed the vein in my arm. She tried again, tapping my left hand. That time she struck red gold, but her aim was still off: My left hand has been swollen and discolored for days.

Yesterday morning I consulted a dermatologist about a small mole-like thing on my right hand. He didn’t seem too worried about it, but he did a biopsy anyway. Now my right hand resembles an outtake from The Mummy, which makes people notice that the left isn’t looking so hot, either.

Although I do everything with my hands but chew my food, I’m not in pain and I’m able to work. And the sudden density of dentist and doctor visits provides perspective. Business and creative problems that should keep me up nights don’t. A three-month wave of heat, humidity, and rain has finally broken. I’m miraculously married and alive and grateful for every moment. :::

17 August 2003 :::

11 am edt

Spare a prayer

Spare a prayer for our neighbor, Sid, who fell down the unlighted stairs on the second day of the blackout. He is on life support. :::

16 August 2003 :::

6 pm edt

29 hours

There are fifty million blackout stories. This is one.

Our part of Manhattan was the last to get power. For 29 hours, we had no water. It takes electrical power to pump water to high-rise apartments. No power, no water. No water, no bathing, and no flushable toilet.

You discover that the tiled bathroom is the linchpin of civilization. You can live without light, without computers, without clocks, without TV, radio, CDs and DVDs. You can live without answering machines, cordless phones, and cell phones. You can, although it is not convenient, live without elevators, refrigeration, and air conditioning, even in summer heat. But toilets are another story.

They say the spike that plunged 50 million people into blackout lasted ten seconds. It felt longer. I was designing a logo when my screen went black, my network hubs and power supplies began flashing like dying fireflies, and the silence of the studio was pierced by an ear-splitting thrub, thrub, thrub. It sounded like nuclear disaster. My first foolish thought was that our network had been attacked; then I thought my Mac’s power supply had shorted out; then I noticed the other computers were frozen and the phones were dead.

The hall was as black as Tut’s tomb. The stairwell, too. There should be service lights. If a fuse has blown, there should be emergency lights. Nothing but darkness and a new empathy for the blind. A disposable Bic lighter guided me down eight long flights of stairs. Outside, the streets were a gaudy carnival. The whole world had left work and was wondering how it would get home and what was happening, anyway. No one said terrorists or 9-11, but this is New York City and you could see how many people were thinking it.

A crowd formed around our building as people found their way downstairs or massed out front, afraid to enter. One guy had a portable radio. Bending our heads toward it, we heard Queens, Long Island, fire, Con Edison, Toronto, Detroit, Cleveland, Niagra Falls.

That night and the long next day the landlord did nothing about the lack of light on the stairs. That night and the next day the doorman worked three shifts in a row. Every time an unprepared tenant needed to go upstairs, the doorman walked that tentant up with his flashlight. Up 21 flights and down. Up eight flights and down. Up 16 flights and down. That man was a hero, although he did not make The Daily News or CNN.

That night my dear friend Paul phoned from England to see if we were okay.

That night my wife and I lay in our own funky sweat. Or at least, I did. She’s a lady; maybe she glowed a little.

That night the Cast of Friends

Here I have to explain about the Cast of Friends. This building and many others in the Murray Hill/Gramercy area are rent-stabilized. When a long-term tenant moves out, the landlord can legally quadruple the rent. But no single person, couple, or family can afford to pay four times the rent. So landlords subdivide the apartments. A good-size one bedroom becomes a tight two bedroom. A two bedroom becomes a four.

Who moves into these chopped-up apartments? Professionals in their early 20s. Four girls move into an apartment originally built for one or two people. Each of them pays a thousand dollars a month for the privilege. They party, they go clubbing, and within a year or two they move out. We call this ever-shifting parade of cell phone gumbys the Cast of Friends.

That night the Cast of Friends partied on the dark streets of old New York. On Third Avenue, women were flashing their chests at guys with flashlights. Other than that, the city felt orderly.

The next morning on the street we heard that Brooklyn and Queens had come back online. Someone said Mayor Mike had announced that New York City was back. It wasn’t.

By four o’clock everything north of 41st Street seemed to be back on the grid, and we expected that soon we too would have power again. It didn’t happen that way, though.

Each time we climbed the still-unlighted stairs, each time we gazed sweating out the window, each time we longed to bathe or engage in other fundamental health amenities, I thought about the sweltering tenements in Gangs of New York, or about people in Iraq who have no water and no power.

I also thought about New York’s cops, who have not caught a break in two years.

On the second night of the blackout, our neighbor, a kind-spoken middle-aged gentleman, fell down the dark staircase. He was bleeding and had no feeling in one of his legs. An ambulance took him away.

Soon afterwards, the landlord hastily installed tiny sticky lights along the stairwell.

A few minutes later, the power came back. :::

14 August 2003 :::

4 pm | 2 pm edt

Nicely, nicely

Accessify Forum
Free to the public: talk about accessibility and design. (“Image replacement – accessible solutions?” and “Accessible sites: follow standards or follow browser bugs?” typify the fare.)
Ben Hammersley’s Dangerous Precedent
Nicely done.
Bionic Ear Blog
Adventures of a woman gaining a new and improved ear.
Clip ’n Seal
Very cool bag closer mfrd by designer and blogger DL Byron.
GoodLogo!com
“World’s finest selection of logos.”
HTML Wish list
Designer Mike Pick dares to dream.
Meccapixel
Michael Cosentino’s photos. Nicely done, sir.
Questia
“The world's largest online library of over 45,000 books and 360,000 journal, magazine, and newspaper articles.”
zlog
Nicely done, old bean!
Many more
...are readily available for your pleasure. :::

Full screen Safari

For some time, the Opera browser has offered a full-screen mode. Presenters love it. Author your slides in XHTML and CSS, plug in your laptop, open the first web page in Opera, switch to full-screen mode, and voila. Now Safari users can do the same thing, thanks to Hao Li’s Saft: Full-Screen for Safari. After installing, you can toggle between normal and full-screen viewing at the press of a hotkey combination. Download Saft from the author’s site or from Version Tracker. Hat tip: Bill Merikallio. :::

11 August 2003 :::

2 pm | 1 pm edt

An unordered list

Accessible image replacement

Recently added to our Externals department, Phark’s “Accessible Image Replacement” works around screen reader glitches that afflict Fahrner Image Replacement. Enjoy.

Tom Gilder proffers a similar approach which uses an empty span element to support users who turn off images but cannot turn off CSS. (The drawback, semantically speaking, is that it uses an empty span element.) :::

PageSpinner 4.5.1 released

Optima System has released PageSpinner 4.5.1 (details, release notes) a $29.95 web authoring package for Mac OS that supports HTML, XHTML, JavaScript, PHP, SSI, and CSS. We use PageSpinner to code all our sites; it has never failed us.

New in this version: the ability to preview sites built with styles and server side includes referenced by absolute (rooted) URIs, without the need for a base href in the head of the page, and even when you’re offline. (Flying to Jakarta? If you’ve got a laptop, you can design and test complex web pages even though you are not connected to a server.)

The ability to preview SSI-driven web pages without a base href solves a usability problem where Skip Navigation links on inner pages redirect visitors to the home page instead of to an anchor link on the page they were reading. Delete the base href, use a relative Skip Nav anchor link reference, and voila.

Version 4.5.1 also solves a long-standing problem for those who use Safari to preview their pages. In the past, Safari would show the initial preview, but if you edited the page and hit Preview again, you would get an error. You can now edit any page a dozen times over and continue to generate Safari previews without a hitch.

Schools and universities can save over 50% when purchasing six or more licenses during PageSpinner’s “Back to School Special.” :::

ISSN for weblogs

Readers often write to ask how our site attained an ISSN number, what it means, and why anyone would bother. Joe Clark provided the definitive answer some years back: his “ISSN for Weblogs” tells all. :::

8 August 2003 :::

12 noon edt

Hotcha!

You don’t have to remind web designer Dirk Hesse that less is more. Although we cannot speak a word of German, we understand his site. That’s because the layout is crisp, clean, and clearly designed to present information. It’s also pretty to look at.

Minimalists have no choice but to be careful with the positioning of their page elements. Hesse has made smart design choices throughout. He also used CSS to lay out the page and XHTML to structure it.

This site would not win design awards: it doesn’t spin, burp, or pee; it is understated and probably cost almost nothing to produce. Such qualities go unrecognized in the world of big design competitions, but the problem is with the competitions. Good design is hard. Good minimalist design is even harder: like three chord rock. :::

FIR flies

The Daily Report’s 2003 redesign uses (and our book explained) an image replacement technique intended to combine the benefits of accessibility with the power of graphic design. We christened this method Fahrner Image Replacement (FIR) in honor of Todd Fahrner, who first suggested it to us. Douglas Bowman’s tutorial popularized the technique, which was first developed by C. Z. Robertson in 1999. (Robertson, Fahrner, and Bowman each developed the idea independently.)

Problems with the method include failure in some screen readers. It also flops if folks turn off images but leave CSS on. (Don’t blame the user! Some browsers don’t allow users to turn off CSS.)

In recent days, two web designers have independently come up with FIR alternatives:

Meanwhile, in the new issue of Digital Web Magazine, Dave Shea defends Fahrner Image Replacement in a well-written and concise tutorial. We commend it to your attention.

Oddly enough, one of our favorite contributing authors had been working on a similar piece for an upcoming issue of A List Apart. Our author did much research; the conclusions he reached differed from those of Mr Shea and were zestily provocative in their way. But we likely will not run his story now, because how much FIR can the world take in the space of a week or two? Not much.

You might ask, if one is using an image to replace text, why bother with any of this? Why not simply use the img tag, include alt text, and be done?

  1. Using FIR or one of its variants preserves document structure. If an image is replacing an h1 headline, it should be marked up as an h1 headline.
  2. Doing so also facilitates navigation by screen reader users, assuming their software doesn’t choke; the JAWS screen reader handles FIR correctly as long as you import your CSS instead of linking to it.
  3. Those who can’t see an image aren’t forced to download it. They get text, which is all they require.
  4. Using CSS background images instead of img elements allows you to swap images to match changing background colors. (You can see this for yourself by switching styles on this site; as you change backgrounds, the h1 header image changes.) :::

The Biz

Forgive the lack of posts Wednesday and Thursday. We’ve been busier than normal on projects large and small for clients new and old. :::

5 August 2003 :::

11 am edt

Lecture notes online

The slides for our Web Design World keynote on designing with web standards and presentation on Section 508 and design are online at Happy Cog. Warning! Epileptics should skip past Slide 13 of the Section 508 talk, which uses an animated GIF by Mike Cina to demonstrate the kind of flashing imagery that can induce seizures.

As Web Design World attendees know, these are PowerPoint-like slides, not articles, and they were designed to be easily read when projected in a large auditorium. The text is huge but can be made smaller in any web browser. It actually looks swell at that large size in Mac OS X Quartz or Windows ClearType – as smooth as text in Flash or PowerPoint – but it might appear unpleasantly bumpy in operating systems lacking subpixel antialiasing. (In which case, shrink it, baby.)

One reason so many designers use small type is that too few users have access to OS X Quartz or Windows ClearType, and non-antialiased text is less ugly below 12px. As more users gain access to improved subpixel rendering, we may see more sites that use large text styled in CSS. (The other main reason many designers use small type is that we frequently must cram ten pounds of information into a five pound bag above the fold, but Quartz and ClearType can’t help us there.)

The standards keynote covers ground that will be familiar to readers of Designing With Web Standards (a Peachpit book of the month!), but it ends with an inspiring gallery of commercial sites designed in CSS, most of which came out after the book was published. Many of them have been mentioned in these pages in recent weeks, but it’s nice to see them all in one place. Where applicable, there are links to the primary designers’ personal sites.

Note: negative captions above the screen captures represent widely-held false beliefs. They are not intended to knock the sites; rather, the sites are intended to debunk the quotations. Most of you will get that without our saying so, but designers for whom English is a second language might misconstrue absent this disclaimer. :::

4 August 2003 :::

8 am edt

A List Apart: standards and search engines

In Issue No. 159 of A List Apart, for people who make websites: Search engine optimization (SEO) can generate more traffic than banner ads or pay-per-click methods. It’s not voodoo or rocket science. The techniques many of us already use to lower bandwidth, comply with standards, and follow accessibility guidelines turn out to be some of the best things we can do to enhance our search engine rankings. New contributing writer Brandon Olejniczak tells how in “Using XHTML/CSS For an Effective SEO Campaign.” :::

1 August 2003 :::

9 am edt

Meyer for hire

CSS expert and web standards evangelist Eric Meyer has left the nest and launched a consulting business. About time, too. Congrats! :::

Kean scene

After years of award-winning work, Gabe Kean has finally launched a personal portfolio site. Gabe has art directed some of Portland agency Second Story’s most compelling sites and is the creative force behind long-running indie omnibus Born Magazine. :::

Ultrashock jock

Craig Grannell of Ultrashock interviews Jeffrey Zeldman about art, inspiration, and designing with web standards. :::

Seattle battle

Gunfire marked our first night in Seattle. Street warfare broke out when rival gangs spotted each other following an annual torchlight parade. Three teenagers were shot and a fourth was stabbed before police could penetrate the thick, panicky crowds to prevent further mayhem.

We were returning from a quiet dinner at Maximillien Bistro in the Market when citizens began running into us. Three shots rang out half a block away.

“Those were gun shots,” said a white man in a black ten gallon hat.

We made it to our hotel and heard the remaining shots and sirens through our window. National news services ignored the short-lived riot. The remainder of our trip was comparatively sedate. :::

26 July 2003 :::

8 am edt

Off we go!

We’re off to Web Design World 2003, Seattle. :::

25 July 2003 :::

6 m | 1 pm | 11 am edt

Modulo 26

Modulo 26 is a work of understated beauty whose virtues include good writing, clean layout, and a subdued but palpable sense of style. Designed with CSS and structured in XHTML, it offers tips and tutorials on aspects of standards-based design. Nicely done. :::

Technorati interview

Streaming MP3: Christopher Lydon interviews David Sifry, creator of Technorati, which continuously monitors 700,000 weblogs. :::

A thousand dotcom deaths

A thousand dotcom deaths. :::

Cartoon tweaks Secret Service

Cartoon in Times Prompts Inquiry by Secret Service. :::

CSS dotted borders in IE

CSS dotted borders in IE . :::

23 July 2003 :::

8 pm | 1 pm | 11 am | 10 am edt

ALA betta

A List Apart is recovering from server problems noted earlier. As DNS updates percloate through the network, you will find that the site has returned to its former splendor. :::

Buymusic.com: out of tune with the times

Readers have asked us to say something about Buymusic.com’s decision to support only one browser and platform – a choice that runs counter to the current wisdom on standards-based development. Chris Kaminski of The Web Standards Project says everything we would have said about this foolishness. :::

Kickin’ it Dash style

A heart made of CSS (no images). Click below the heart to reveal the guts.

At Webmonkey: “Progressive Enhancement and the Future of Web Design,” by Stephen Champeon.

Mister Cederholm reveals code gyrations used to protect Opera from one of its few CSS shortcomings. Being lazy, we would merely have called Opera’s attention to the CSS bug and awaited a fix. :::

ALA oops!

The good news is, A List Apart Magazine has moved to a faster, more powerful, and more secure server courtesy of our good friends at Evolvs Media, Inc, who have long been part of the ALA family.

The bad news is, some articles and some of the site’s functionality are temporarily missing in action. They will be restored soon. We regret the inconvenience and appreciate your patience. :::

508 Blues

This site complies with XHTML 1.0 Transitional, CSS2, and U.S. Section 508, and its RSS feed validates.

We have long acknowledged said compliance by providing text links to the appropriate validation testing services at the bottom of all our pages.

Today we removed the Section 508 link to Watchfire’s Bobby testing service, because the link fails more often than it works.

Before Watchfire acquired Bobby, you could click the link to verify that your site complied with Section 508. Since Watchfire bought Bobby, the service has become less and less reliable.

Clicking the link often produces errors instead of a compliance report. Manually typing the URL into Bobby’s online form also often fails to produce the desired result. (For instance, Bobby might truncate your URL and then spew an error.) If you try a third time, Bobby will tell you that you have exceeded the terms of the free service by using it too much, and will suggest that you buy the paid version instead.

We would like to provide one-click access to a reliable service that can verify each page’s compliance with an accessibility standard (at least, to the extent that software can test these things), but the free version of Bobby is not that service.

We like the “Cynthia Says” accessibility testing tool. Readers including Kevin C Smith and Jake Sutton have informed us that it is possible to roll one’s own unique Cynthia URL. (Thanks, boys.) We’ve added said link to our global footer. The URI is limited to our root directory, but the site is templated, so what’s true for the index page is probably true for most of our content. :::