Among the pleasures of running an independent personal site is the accidental discovery of an ancient page, such as the version of this site’s contact page from the 1990s that I stumbled onto this morning.

“We’ve got mail!” the old site cheerfully announces, complete with a meaningless header image. The image, like the header and navigation typography, is pixellated to convey “webbiness”—in case you forgot that you were looking at a website in a browser, I guess. “Got mail” is a play on America On-line (kids, ask your parents). “We” is the royal first person plural with which I used to write this site, despite being its sole author. I’d gotten into the habit of “we” from writing copy on entertainment sites for clients like Warner Bros. It made their sites, and mine, seem bigger. It was also an ongoing, self-deprecating joke, although not everyone got it.

As I look at this old page, the copy still feels like me, and it also, if I may say so, anticipates the playful directional body copy of Web 2.0 sites like Flickr by about a decade. (Could be coincidence. Derek Powazek and Heather Champ also wrote jovial instructional copy at the time. Others may have done so as well.)

I’m a lot more ashamed of the design. I’m particularly abashed at:

• My abysmally stupid effort to straddle the “liquid layout” and “fixed width layout” genres by designing a page that doesn’t work as liquid or fixed. Possibly the only web design ever to put peanut butter and bicycle chains together and call it a sandwich. It should have stayed fixed, and the text and input fields should have matched the width of the illustration and header.
• Alignment, alignment, alignment.
• Tiny type with seemingly random hierarchy. In my defense, remember that in those days all type was pixellated. I picked 11px Georgia and 9px Verdana because those sizes looked great in that pixellated world. Still. Feh.

If your old work doesn’t shame you, you’re not growing.

It’s nice to look back and feel that you’ve made progress. When you look at old work, it should suck glaringly and you should cringe painfully. But there should also be some germ within it that you’re not ashamed of—some spark of talent or inspiration that connects to what you do now.

Filed under: Design, Web Design, Websites, Zeldman, work, zeldman.com

Firefox gurus, a page demonstrating the Firefox long content bug has been created for your browser fixing pleasure. Kindly visit the test page using Firefox 3.0 and Firefox 3.5 for Windows (and possibly also for Linux). The following defects should be evident:

• At least half the comments should be cut off by the browser.
• The footer should be cut off by the browser.
• The form enabling you to add comments may also be cut off by the browser (or it may be incomplete, or the labels for such things as your name and email address may appear in the wrong location).

View the same page in Safari 3+, Opera 9+, or IE7/8, and compare. In the other browsers, all comments are displayed, the footer is displayed, and the content form is viewable and displays correctly. How often does Firefox compare unfavorably with some of these browsers? Hardly ever. Which is precisely why you want to fix it. (That, and you’d like your users to be able to view all the content on a page, not just some of the content.)

The test page is identical to this 2 July post, with comments frozen as of 9 July 2009, and with the site’s original CSS, which revealed the long content bug in Firefox.

A subsequent 8 July post documents the steps I and two other developers took in order to isolate this bug in Firefox, and the CSS workarounds (suggested by two of the site’s readers) which have since been put in place to cover up for this defect in Firefox. The thread also explains what we changed in the CSS to enable Firefox users to read long content on the site.

The CSS cover-up enables Firefox users to read all the content on long pages, but at a cost: there is a flash of red background during slow load times. And, obviously, it’s better to fix Firefox than to create somewhat flawed CSS workarounds that slightly diminish the experience for all users of the site.

Thanks for your help! Let me and this site’s readers know how we can assist you. And remember, please use the test page (not this page or any other page of the site) to isolate the bug in Firefox.

Read more

• HTML 5: Nav Ambiguity Resolved. An e-mail from Chairman Hickson resolves an ambiguity in the nav element of HTML 5. What does that mean in English? Glad you asked! — 13 July 2009
• Web Standards Secret Sauce: Even though Firefox and Opera offered powerfully compelling visions of what could be accomplished with web standards back when IE6 offered a poor experience, Firefox and Opera, not unlike Linux and Mac OS, were platforms for the converted. Thanks largely to the success of the iPhone, Webkit, in the form of Safari, has been a surprising force for good on the web, raising people’s expectations about what a web browser can and should do, and what a web page should look like. — 12 July 2009
• In Defense of Web Developers: Pushing back against the “XHTML is bullshit, man!” crowd’s using the cessation of XHTML 2.0 activity to condescend to—or even childishly glory in the “folly” of—web developers who build with XHTML 1.0, a stable W3C recommendation for nearly ten years, and one that will continue to work indefinitely. — 7 July 2009
• XHTML DOA WTF: The web’s future isn’t what the web’s past cracked it up to be. — 2 July 2009

Tags: firefox, browser, bug, firefox3, firefox3.5, windows, linux, bugs, buggery, debugging, demo, testpage, mozilla

Filed under: Browsers, CSS, Design, Mozilla, Web Design, Web Standards, bugs, firefox, work, zeldman.com

There’s good news and bad news. The good news is that Firefox 3.0 and 3.5 for Windows no longer cut long pages of this site in half, hiding 50% or more of the pages’ content, including the footer, because of a newly discovered bug in Firefox (discovered by this site’s layout).

The bad news is that the price of the “fix” is an annoying flash of reddish-orange background. When you first load a page in any browser, rather than the main content’s off-white background area, you instead see the text against a reddish-orange background, obscuring words (including the drop cap), disrupting user experience, and raising doubts about the professionalism of the site and thus of the opinions it expresses.

With the annoying flash of colored background, everyone who reads this site suffers. But without it, Firefox 3/3.5 cuts long pages in half. Until Firefox fixes the bug, all readers of this site will experience what I’ll label “the Flash of wrongly styled background color.” (Note: although the browser is still broken, the color flash has since been “fixed.” Impatient ones, skip ahead to the 9 July update. Narrative fans, keep reading.)

Here’s the story.

Validators were no help

My 2 July post, XHTML DOA WTF, has thus far received 194 comments. Firefox users told me the thread “died” after comment #44049 in Firefox 3 and 3.5 for Windows. The problem also later surfaced on In Defense of Web Developers, written yesterday morning just prior to my surgery. Let’s stick with the 2 July post, though, which is where we did our Q&A.

W3C and WDG validation services both indicated that there was an error on the page, but neither validator could explain it.

• The W3C showed a long list of unclosed elements (which in fact were closed), a typical W3C validation error when that validator misidentifies the actual problem. The W3C validator has made this mistake since at least 2001. Whenever I complain to the W3C, I’m told they need volunteers to help them fix the validator. So I more often rely on the WDG validation service.
• The WDG validator (usefully and apparently correctly) indicated that a single illegal UTF character in a comment it could not show me was causing the dilemma. This validator gave me a line number, but no code output—making the line number useless, and forcing me to go into my database and examine each of 194 comments visually for unsupported character problems.

In search of a single UTF-16 character

I next spent two hours of an insanely busy pre-surgery day unsuccessfully attempting to manually track down UTF errors in comments that no validation service was able to pointpoint. I had to apologize to colleagues and clients to whom I owed work, since the quest to make my personal site legible and usable to Firefox users took precedence over paying work in my sad little mind. (Call it a mark of the high esteem in which I hold Firefox; also call it a concern for readers.)

Automattic’s designer/developer (and my friend) Noel Jackson then took over for me and was eventually able to locate a single UTF error in a Japanese pingback. Or so it seemed.

WordPress, the power behind this site, is supposed to convert illegal UTF-16 to legal UTF-8, and we thought it had done so. Nevertheless, the only validation service to have claimed anything semi-coherent said otherwise. To solve the problem required brute force: we deleted the entire Japanese comment. To the clients and colleagues to whom I owed work I was unable to finish while tracking down a Firefox bug, I now also owed an apology to a Japanese blogger. Personally, I blamed Firefox for ludicrously Draconian error handling, but at least I thought we had “solved” the needless problem raised by such behavior.

Drudge work for nothing

I owe Firefox an apology. Draconian error handling of impossible-to-trace possible UTF errors was not the cause of its failure to display pages correctly. Inability to parse valid CSS on long pages was the actual cause.

Although my page now validated, Firefox still cut it off at the waist. Thanks to this bug, users of Firefox—many of whom care greatly about web standards (it’s one reason so many developers choose Firefox)—were unable to read more than half the comments about XHTML 2 and HTML 5 from their fellow standardistas. They were also unable to post comments or view the footer (thus making them unable to view other content on this site, as well as third-party site highlighted in the footer). This was a win for nobody, except maybe Microsoft, Opera, and Safari. And, like I said, we like Firefox and people who use it. Back to the drawing board.

Seek and ye shall not find

Nikolay Bachiyski, a lead developer at Automattic, then conducted a series of tests:

1. He established that only Firefox 3.0/3.5 (and only in Windows) cut the valid web page’s content in half.
2. He verified that the page’s content was valid (UTF-8) as was its markup.
3. The DOM loaded properly.
4. There wasn’t an (X)HTML parsing problem.
5. Disabling JavaScript made no difference.
6. Disabling CSS enabled all the page’s content to display in Firefox; turning CSS back on cut the page in half again. Clearly, the issue was with CSS.
7. Nikolay then disabled the lines of Mozilla- and Webkit- oriented CSS3 that generate “warnings” or “errors” in the W3C validation service. But even with those lines disabled and the CSS completely valid, the page’s content failed to display completely in Firefox. The bottom of the page was still cut off.

A CSS “fix” with a drawback

Valid CSS was somehow to “blame” for Firefox’s inability to show a long page without hiding half the content.

You may ask why I didn’t discover this problem during the building and testing of my site’s redesign. You might even ask why my readers didn’t discover it (since I beta tested the redesign at several stages). The answer is simple. I never tested a dummy blog post with nearly 200 comments. It didn’t occur to me that more than 40 comments would be necessary to test whether valid CSS and XHTML would work in good modern browsers, let alone in one as excellent as Firefox.

Michel Bozgounov and Kyle Weems then proposed a simple CSS fix:

div#wrapper {overflow: visible;}

My friend Noel implemented the CSS fix while I was unconscious and having stuff cut out of me.

It works, and I thank all these gentlemen. But it has the unfortunately side-effect of inflicting a flash of reddish-orange background on the page until most or all content has loaded. (I had previously spent over two weeks eliminating that flash of background.) And it does this in all browsers (or nearly all), not just Firefox. To force Firefox to display all content on a page, I have to force every other browser to flash red before it shows content.

Obviously, it’s vital that Firefox users be enabled to read and comment on long or popular posts. But there must be a better way than deforming the CSS. And there is a better way: namely, a Firefox bug fix.

Our friends at WordPress have contacted our friends at Mozilla, so we are hopeful that this will be fast-tracked. Mozilla friends, call on me to help at any time.

9 July Update: 99% solution

With the addition of 1000px of min-height to #wrapper, the reddish-orange flash has been eliminated, at least in pages that load quickly. (On long pages, or with slow connections, the reddish-orange background remains painfully visible until the page finishes loading.) Read more about this CSS adjustment. Note that adding CSS workarounds is not the same thing as fixing browser bugs. (Indeed, CSS workarounds may retard browser development by removing the problem so it never gets fixed.)

A Firefox Test Page

As I am not entirely satisfied with this CSS workaround (despite my gratitude to its authors) and as I do not want Mozilla’s engineering wizards to be unable to fix Firefox because of changes to my CSS, I have posted a Firefox test page using the site’s original (perfectly fine, background-flash-less) CSS, and a page explaining the Firefox test page.—JZ

Read more

• HTML 5: Nav Ambiguity Resolved. An e-mail from Chairman Hickson resolves an ambiguity in the nav element of HTML 5. What does that mean in English? Glad you asked! — 13 July 2009
• Web Standards Secret Sauce: Even though Firefox and Opera offered powerfully compelling visions of what could be accomplished with web standards back when IE6 offered a poor experience, Firefox and Opera, not unlike Linux and Mac OS, were platforms for the converted. Thanks largely to the success of the iPhone, Webkit, in the form of Safari, has been a surprising force for good on the web, raising people’s expectations about what a web browser can and should do, and what a web page should look like. — 12 July 2009
• In Defense of Web Developers: Pushing back against the “XHTML is bullshit, man!” crowd’s using the cessation of XHTML 2.0 activity to condescend to—or even childishly glory in the “folly” of—web developers who build with XHTML 1.0, a stable W3C recommendation for nearly ten years, and one that will continue to work indefinitely. — 7 July 2009
• XHTML DOA WTF: The web’s future isn’t what the web’s past cracked it up to be. — 2 July 2009

Tags: browser, bugs, Firefox3, Firefox3.5, Firefox/Windows, browsers, firefoxbugs

Filed under: Browsers, Design, Mozilla, Web Design, Web Standards, bugs, firefox, work, zeldman.com

The zeldman.com redesign is up. You’re soaking in it. It’s old school. It’s brand heritage, baby. It’s retro 90s web. It’s so retro it’s nowtro. Because old is the new new.

Mainly, the redesign is content focused. After so many years as a web designer, and after creative directing so many influential projects, I naturally considered doing a wide, three-column, ultra-modern design—something cool, detached, polished, and glowing with rich media and fancy-pants sliding-drawer JavaScript effects. Not that there’s anything wrong with those things. In the right circumstances, those things can rock hard. But this site is mainly about my writing. So I crafted a simple look that encourages reading and hearkens back to this site’s early years.

Read more about it here, here, there, and elsewhere. (Don’t freak out; these old posts are now in the new layout, adding a layer of surrealism to the experience, since you’re looking at a blog post in the finished new look that links to and talks about cruddy early versions of that same look.)

If orange hurts you, there’s a style switcher in the footer that will remember your preference for an off-white background. You’re welcome.

WordPress implementation by Noel Jackson.

Rotation script by Mark Huot.

Thanks, fellas! And thanks to all readers who critiqued the public beta.

Tags: zeldman, zeldman.com, redesign, redesigns, webdesign, design

Filed under: Web Design, Web Standards, Zeldman, wordpress, work, zeldman.com

There was a point in the 90s when I felt like a sucker for doing HTML and CSS.”

The .net Zeldman interview is available for your downloading pleasure (4.2 MB PDF). For more of the best in web design and development, visit netmag.co.uk.

Update, 27 May 2009

An HTML version of the interview has now been posted on .net’s website.

Tags: webdesign, webdevelopment, magazine, interview, .net, netmag, interview, interviews, zeldman, jeffreyzeldman

Filed under: Interviews, Press, Publications, Publishing, Standards, Typography, UX, Usability, User Experience, Web Design, Web Standards, Zeldman, reportage, reprints, wisdom, zeldman.com

After viewing this site’s redesign in progress, Peter Petrus wrote:

[Y]ou’re using footer to clear floats (content + sidebar). This creates a large drawback, because before footer is downloaded and displayed in the browser, parent wrapper lacks any background.

It means that we’re staring on black text / orange background combo for a few moments. Well, few moments now, but should you put any unresponsive widgets in the sidebar, everything can render much slower. Having main content flash like this isn’t very pleasant – especially when you named the redesign “Designing from the content out”.

Solution is very simple – use ‘:after’ clearing for the main wrapper. Sure, it won’t work on IE, but 1) setting width to wrapper sets hasLayout and triggers clearing 2) #footer is still there, in any case.

I’d read about using “:after” clearing but hadn’t implemented it and thought I could solve the problem an easier way. This afternoon, with about five minutes’ work, I did so.

I solved the orange background flash by moving the faux column background image up in the CSS hierarchy.

• In the original CSS, I used the faux column background image on the wrapper element only.
• In the updated CSS, I’ve now added the same background image to the body element as well.

Doing so fixed the orange background flash problem, because the browser no longer has to wait for the footer to clear before showing the background image.

Compare body element on new z.css and previous z-bak.css. (Likewise, compare body on alt.css and alt-bak.css.)

Tags: css, workarounds, clear, float

Filed under: CSS, development, zeldman.com

• Blog post template final (with rotation in footer)
• About page template final (with rotation in footer)
• Contact page template final (with yadda, yadda)
• 404 page – my favorite!
• New! 21 May Subscribe page
• New! 21 May Style switcher in footer
• New! 22 May WordPress tout page
• New! 22 May (mt) Media Temple tout page

Note: Top left and top right footer elements rotate. ALA element (top middle) changes every two weeks, upon publication. Bottom three elements are static, at least for now.

Thanks to Mark Huot for the rotation script (same one we use on Happy Cog) and Noel Jackson, Daniel Mall, and Media Temple for the love and support.

A couple more templates to go, and then we can build this thing. Can’t wait.

Tags: zeldman, zeldman.com, design, redesign, designingfromthecontentout

Filed under: Design, Redesigns, Web Design, Working, Zeldman, development, work, zeldman.com

Working on the footer of zeldman.com redesign. Once footer is done, going to adjust header and Twitter sidebar blip.

Tags: zeldman, zeldman.com, design, redesign, css

Filed under: CSS, Design, HTML, Happy Cog™, Web Design, Web Standards, Working, XHTML, Zeldman, development, wordpress, work, zeldman.com

And the saga continues. I took a few days off from the redesign project while in Seattle. Today I designed and quickly prototyped a simple masthead. Have a look. I’m going to live with it for a while.

Filed under: CSS, Design, Redesigns, zeldman.com

Although the WayBack machine did not preserve any of this website’s first year, it did capture quite a lot of our second year, 1996. Behold the splendor of the early web:

• Zeldman.com Table of Contents page
• Alternate TOC page
• GIFPLEX
• Ask Dr Web
• Steal These Graphics: Disturbing Patterns
• The Ad Graveyard

And much more. Enjoy!

Filed under: Design, DigitalUnderground, Publications, State of the Web, Web Design, Zeldman, development, work, zeldman.com