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).
Comments OffMar 31, 2003•uncategorized
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.
Comments OffMar 28, 2003•uncategorized
Why XML Doesn’t Suck
“This note will argue that XML doesn’t suck, and discuss some of the issues around the difficulties encountered by programmers.”
Certainly a good read with some really valid points.
Comments OffMar 28, 2003•uncategorized
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.
Comments OffMar 27, 2003•uncategorized
Old School Browsing
Check out your site in an emulator of the browsers of yesteryear. Mosaic, Netscape 1.0, Internet Explorer 2.0 and more. Wondering how it all works. (via nothing is true)
Comments OffMar 25, 2003•uncategorized
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.
Comments OffMar 23, 2003•uncategorized
Clutter: see album covers in iTunes
“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)
Comments OffMar 21, 2003•uncategorized
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.
Comments OffMar 20, 2003•uncategorized
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”…
Comments OffMar 18, 2003•uncategorized
Clean Dishes
I spent the majority of this past weekend attempting to install a new dishwasher. It was like wrestling a manatee in olive oil. Four trips to Home Depot later, much talk of telflon tape, ferrule rings, wire caps, pipe cutters and several curse words later, I believe it is in and working. We’ll see if a gush of water bursts through the wall this evening. It was an experience, but not a way I’d like to spend another weekend. Especially when spring is in the air around here.
Special note: The next time a salesman who is about to sell you something says “oh yeah, it’s so easy. Just three wires and this kit and in 20 minutes you’ll be up and running” — just laugh and very carefully register that as remember to call someone to install this.
Comments OffMar 17, 2003•uncategorized
Semantic markup on a PDA
“We have long been told that using structured semantic markup would somehow future-proof our content for the day when it would be read on all sorts of non-desktop devices. Well, the future is here (it
Comments OffMar 15, 2003•uncategorized
CSS background-image fun
Lots of talk today in regards to using CSS background-image to show an image for CSS-enabled browsers, and text for non-styled viewers. Zeldman posts about his own ideas for using background-image and its drawbacks, while Doug Bowman pulls together some great info on the subject.
One method that I think works well is using a background image while hiding an alternate, lo-fi version of that image as I do here on this site (ie, one that has no transparency so that it won’t look like trash in a non-styled view). If sufficient alt text is provided, then non-styled viewers would get one graphic with descriptive text that should satisfy browsers and devices that do not show images.
Hiding the image with display: none; may run into the same issues with screen readers skipping the image, but one might even overlap a lo-fi image without even having to hide it, provided the two images were equal size and non-transparent — similar to the pixy.cz method that Doug touched on earlier today.
Comments OffMar 14, 2003•uncategorized
Big Mac address
So, McDonald’s has gotten desparate and has begun offering free Wi-Fi access in some of their “restaurants”. Here’s a screenshot of the login screen. I haven’t eaten at a McDonald’s in years, but beside that I have two questions: Who would want to get french freedom fry grease all over their laptop? And who would want to hang out in a McDonald’s for longer than it takes to consume its disgusting food?
Freedom fries. A whole different ridiculous topic that I won’t bother commenting on.
Beastie Boys anti-war song
The Beastie Boys have posted “In a World Gone Mad…” — a free anti-war mp3 on their web site. A taste of their new album to come and a damn fine message as well.
Comments OffMar 12, 2003•uncategorized
