Archive for March, 2003

Faster Company

At last. Following the lead of sites like Wired
and ESPN, we (fastcompany.com web team) have redesigned
and relaunched the Fast Company web site today using
web standards. This time, the site runs on valid, tableless
XHTML for markup, and
CSS for 100% of its presentation and layout. I was fortunate to be able to co-design much of the interface, with Art Director
Daigo Fujiwara and it was nice to really exploit the features
of CSS throughout.

Some things to note:

  • The page size has been cut in half over the previous, nested table layout.
  • The entire site’s color pallete can be changed instantly each month to coordinate with the current
    issue’s magazine cover (something we were doing subltly before with images)
  • Accessibility for devices such as phones, PDAs, speech browsers, etc. has been greatly
    increased
  • Over 70 issues
    of magazine content were cleaned up and validated. Perhaps 20% of the site still needs
    work, of which we’ll clean up over the coming months.

I’m pointing this stuff out not to toot our own horn, but to back up standards-based markup
with some real facts. I’ll certainly be sharing more findings as they come in (and yes, I’m
expecting many users to be upset — especially those still using version 4.x browsers).

Shout outs are in order for those whose previous efforts and public tutorials have helped the direction of the
new site: Douglas Bowman (Wired),
Jeffrey Zeldman, Eric Meyer
and Mark Pilgrim (accessibility).

My iPod loves to play Fugazi

It’s official. My iPod loves to play Fugazi. When in shuffle mode, Fugazi shows up more frequently than any other artist. I have two albums worth on there — and there are several other artists of which I have 4 or more albums for each, but for some reason the iPod likes Fugazi. I’m wondering what the search criteria for shuffle mode is.

Alternate Box Model Hacks

I was struggling with a peculiar CSS bug in IE 5.0 on Windows when using absolute positioning inside a div with position: relative;. Regardless of what I did, the absolutely positioned div would sit flush to the left, rather than inheriting the border of the enclosing div.

Using Tantek’s Box Model Hack appeared to work by giving the left: 8px; I needed to IE5, and overriding this with left: 0; for everyone else. The problem is that the rule works for all IE5/Win browsers — not just IE5.0 which I was having the problem with exclusively.

Enter this page of Alternate Box Model Hacks — of which methods are described for hiding CSS rules specifically for IE5.0 or IE5.5. I ended up using part of Technique 1 like this:

left: 8px; /* for IE5.0/Win */
left/* */: 0; /* for everything else */

I believe hope the problem is solved.

BrowserCam

BrowserCam:

“Browser Cam creates screen captures of your web pages loaded in any browser, and on any operating system, so you’ll be 100% sure your web pages look good-and work right-on any platform.”

A handy tool — $39.95 / month though. Also they don’t seem to have all browser/operating system combinations available. XP is not there at all. Still worth the trial. I’ve used a few times with some helpful results.

Grapefruit + apple + ginger

I just consumed the most incredible juice I have ever had. It was at a new juice bar here in town. There’s something to be said for cutting up fruit, then immediately sticking it in one of those extractors. It tastes like you’re drinking earth. As in soil. I mean this in a good way. Pure vitamins.

The photo on the right is of the new wing of the Peabody Essex Museum that’ll be opening up this spring. It looks like it’ll be quite a place when finished, and will hopefully continue to inject the city of Salem with some always needed livelyhood.

Clutter: see album covers in iTunes

Clutter:

“Clutter is a small Mac OS X application that lets you put music CDs on your desktop. You can drag them anywhere — they’re really windows. Line them up neatly or put them in piles, it’s your choice. Each one looks like the real CD’s cover, and double-clicking it tells iTunes to play that CD.”

It’s nice to be able to view the album cover while listening. Closer to actually holding the art in your hands, but still not the real thing yet. (link via shacker)

CSS { is-really: cool; }

Eric Meyer has a thoughtful post on the fact that many designers give up on CSS because it is too difficult. Interesting note.

I found it the complete opposite. For years I had been constructing nested-table-and-spacer-gif nightmares (herby called NTSG). Sure NTSG worked, but the nightmare part when it was time to tear the layouts apart and build anew. CSS allows you to create a basic, human-readable HTML structure and apply rules to the elements. Simple. I think it may be easier for those with any programming background to ease into CSS as well. It’s like “object-oriented styling”. Ok, enough preaching — and I’m certainly over simplifying. There have been plenty of times I wished to drive a hammer through the monitor because of a CSS quirk. But there are far more important matters going on in the world right now anyhow.

Built-in Bold

So I’m running into an annoying problem when choosing fonts in CSS for headings (h1, h3, etc.). Let’s say I’d like to use a font, that by default, is bold already — like Impact or Arial Black. Because heading tags will automatically make text bold, I then have to set font-weight: normal; so that it doesn’t look like a big fat over-bolded mess. This works fine unless the user doesn’t have Impact or Arial Black, and unless your backup fonts are all bold by default, they’ll get a heading that is un-bolded and wimpy due to the CSS rule mentioned above.

Is there a workaround for this? I couldn’t think of one, and it’s a bummer especially since Impact and Arial Black are fonts that many users have — and lend themselves nicely to further CSS styling tricks. Also, if anyone has a better way of conveying “un-bolded” or “over-bolded”…