7 February 2003 :::

1:30 am EST

Shipped another huge chapter tonight.

It’s snowing in New York City.

On the streets at 1:30 am, sirens. Fire truck. Mask Unit.

Laughing couples, their coats unbuttoned. :::

5 February 2003 :::

noon | 10 am EST

Last night we shipped Chapter 13 of Forward Compatibility: Designing and Building with Web Standards. By tonight we hope to ship Chapter 14. Without our fine tech editors Eric Meyer and David Eisenberg, we could not move so swiftly or so surely.

Redesigning in public, cont’d.

A striped background effect has been added to the far right side of the site. You may need to reload this page to see it. It’s subtle. We kind of like it. We originally installed it using an html>body selector in the style sheet, but it was invisible to IE6/Win until we stuck it back in a plain old body selector. Go figure.

Our redesign here is not finished, but in CSS-capable browsers, there is now a clickable logo/home button at the top of this page, complete with CSS rollover, achieved via the Todd Fahrner “Look, Ma, no IMG tags” method. In non-CSS environments, there is simply linked text. When in doubt, reload.

The CSS “buttons” that make up the left-side nav bar now include a “you are here” indicator. All primary sub-pages except Classics have been sketched in. They will change as time permits (the book takes precedence). Little details still missing from this redesign will also be added when time allows. :::

It is an honor merely to be nominated

This site has been named as a finalist in the Redesign/Relaunch category of the SXSW Website Competition. While this was being announced, we had begun redesigning the site in public all over again. Question: Is that ironic or appropriate? Answer: Probably. Many interesting and beautiful sites may be found among the SXSW Finalists, and there is also a People’s Choice (write-in) award. :::

Outside reading and viewing

In news not about us, Gui Galaxy has redesigned in a lovely fashion, and Boxes and Arrows has published the aggressively titled “HTML’s Time is Over – Let’s Move On.” Sounds controversial, but mainly what author David Heller is saying is that some developers may find it easier to develop rich web applications in Flash or Java than with the hodgepodge of XHTML, CSS, and the DOM. Fair enough. :::

3 February 2003 :::

4 pm | 10 am EST

Redesign continually in progress. Kindly reload.

New site launch: i3Forum

The i3Forum site designed by Happy Cog has launched. The simply constructed site is a textbook case of hybrid forward compatibility, i.e. streamlined XHTML tables plus CSS. In addition to shunning the usual nested tables and spacer gifs, the site saves visitor and server bandwidth by using contextual id selectors to avoid the typical class="foo", class="foo", class="foo" that makes so many CSS/table sites as bloated as the old school junk they’re intended to replace. i3Forum is not only a new site, it is also a new, invitational design conference to be held in Laguna Beach. :::

World tour in gear

The Zeldman World Tour is back in gear. In the coming weeks, your humble host will speak in Los Alamos, Laguna, Albany, and Austin. Details are available. :::

Script moved

The IE/Win float flub workaround script has moved to a new page to avoid breaking this site’s layout in IE/Win. Last Friday, before leaving for a wedding in New York State, we included the preformatted script inline. Gecko browsers, IE5/Mac, and Safari made room for it and we trotted off believing all was well. IE/Win did not make room for the preformatted script, whose width exceeded that of this column. Thus, while we were gone, this layout broke for thousands of IE/Win users.

IE/Win was not wrong to break the layout. You can tell browsers how you’d like them to handle content that is too wide for its container by specifying a CSS overflow value. We hadn’t bothered to do that. And we still haven’t. It’s easier for you and for us if code samples live on their own pages.

By the way, it was a lovely wedding in spite of the tragic events of Saturday morning. The wedding band played “Dancin’ With Myself” (and not too badly, either) and the bride was still hiking up her train and kicking it when we crawled off in the direction of our room. :::

31 January 2003 :::

2 pm | noon | 10 am | 9 am EST

Redesign tweaks: fixing the IE/Win float flub

Fixed a scripting error in IE/Win. Sorry about that. We were trying to compensate for the CSS float flub in IE6/Win, but on our first pass we mishandled it. Now that it’s working properly, we figured we should share it with other designers to protect their CSS layouts from a bug in IE6/Win.

As code sleuth Eddie Traversa discovered last year, IE6/Win has a problem calculating the height of CSS layout elements that float left or right. Once it has calculated a height value for a floated object, IE caches it instead of recalculating as the visitor travels from page to page. Text contained in elements whose height exceeds that initial value will be cut off at the knees. The bug was first spotted on A List Apart while IE6/Win was still in beta but Microsoft’s engineers have been unable to fix it. Happily, Aaron Boodman of Youngpup.net came up with a JavaScript workaround that fixes the display by forcing IE/Win to refresh the page and thus to recalculate cached height values.

View the JavaScript workaround in a new window.

In the script, primarycontent refers to the name of a structural area of this site’s new layout. If you use this script to make sure IE/Win displays your CSS layout properly, replace primarycontent with an id name value from your own site. For instance, if your menus live in a block level element called “nav” (<div id="nav">), use document.all.nav.offsetheight. As far as we know, your script need not reference the floated element per se. It can reference any element on the page, as its purpose is to re-flow the entire page and thus clear IE of cached values.

This workaround is only needed for CSS layouts that use float. Then again, all but the most basic CSS layouts use float (unless they use absolute positioning exclusively). This solution was first implemented at A List Apart Magazine, where it has been working for about a year. CSS fans, feel free to copy and paste. Don’t thank us, thank Aaron and Eddie. :::

Redesign glitches: a white space bug in Safari

This site’s unfinished template looks as expected in all browsers tested but one. In Apple’s Safari beta, there is an unwanted gap between the (currently empty) orange header area and the content below. Safari may be incorrectly applying the padding value of a child div to the parent element that contains it.

One reader suggested that carriage returns in the markup might be causing Safari to cough up unwanted white space. Apparently Safari, like IE/Win, parses white space in (X)HTML. Alas, removing carriage returns did not fix Safari’s display. We think nested elements are confusing Safari’s CSS parser. :::

On our shelf

Andy King of WebReference.com has released a fine new book. Speed Up Your Site: Web Site Optimization (2003, New Riders, Foreword by Jakob Nielsen) is densely packed with tips and techniques for removing needless bandwidth from your HTML, CSS, JavaScript, images, and more. These are not the same old tips. The book has good things to say about the immediate benefits of structured markup and provides a how-to section on converting to XHTML. While you may be aware of some of the techniques discussed in the book, many others were new to us and might be new (and useful) to you as well. Buy from Amazon or visit the book site. :::

Outside reading and viewing

Hivelogic has launched Hiveware, providers of free OS X 10.2 (Jaguar) applications for web designers, including Enkoder 1.0 (protect your email address from spam) and URL Cleaner 1.0 (fix auto-generated, invalid links). The clean, simple site looks great, and the layout is pure CSS.

In the new issue of Digital Web Magazine, Craig Saila interviews Christopher Schmitt on the subject of form following function. “When people bring up ‘form vs. function’ what they usually mean is ‘visual design vs. backend programming.’ And when it’s taken in those terms, the discussion is rather pointless. The meaning behind ‘form follows function’ is that ‘something should look like what it does.’” :::

30 January 2003 :::

6 pm EST

Redesign While-U-Watch™

Once more for your pleasure, we’re redesigning in real time. When in doubt, refresh this page. If your browser fails to notice the changed look and feel, kindly load the new default style sheet, and then refresh this page. Sighted visitors, if this page’s background is white, your browser has noticed the change.

A handful of you may be curious to see how the new design works out on various subpages. We wonder about that ourselves. We won’t begin putting the rest of the site in order ’til we finish massaging this template. Alternate style sheets and other amenities? Soon enough, you betcha. Might be nice to put a masthead together first, though. :::