March 2003 Archives
28 entries
Faster Company
Posted at 10:10 AM
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
Posted at 10:10 AM
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.Why XML Doesn't Suck
Posted at 10:10 AM
Tim Bray:“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.
Alternate Box Model Hacks
Posted at 10:10 AM
I was struggling with a peculiar CSS bug in IE 5.0 on Windows when using absolute positioning inside adiv 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
Posted at 10:10 AM
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.
Old School Browsing
Posted at 10:10 AM
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)Grapefruit + apple + ginger
Posted at 10:10 AM
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
Posted at 10:10 AM
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; }
Posted at 10:10 AM
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
Posted at 10:10 AM
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 setfont-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”…
Clean Dishes
Posted at 10:10 AM
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.
Semantic markup on a PDA
Posted at 10:10 AM
Mark Pilgrim:“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Šs just not evenly distributed, natch), and let me be the first to admit that my semantic markup is getting in the way.”
Interesting post on what is and isn’t supported by mobile devices — specifically AvantGo. It’s surprising that basic, old-school HTML tags are not supported there.
CSS background-image fun
Posted at 10:10 AM
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.
Beastie Boys anti-war song
Posted at 10:10 AM
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.Big Mac address
Posted at 10:10 AM
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 getFreedom fries. A whole different ridiculous topic that I won’t bother commenting on.
iPod battery life
Posted at 10:10 AM
OSXFAQ has some tips on getting the most out of your iPod battery. I had been wondering why my battery was always dead. I know now that it froze to death, every morning on the 10+ minute walk to the train. Yet another reason to loath this horribly cold winter we’ve had in the Northeast.Safari v64
Posted at 10:10 AM
MacMerc.com has posted a few screenshots of the upcoming Safari v64 beta. Looks like tabs have been refined a little, and the option of opening a folder of bookmarks as a set of tabs has been added as well.Roogle: RSS search engine
Posted at 10:10 AM
It was only a matter of time. Roogle is a new search engine that uses RSS feeds for indexing. Good idea, and a narrow focus. It’ll be useful to search weblogs exclusively for different things. Roogle needs a new name, but it’s nice to see they already realize that.The elusive triple bounce
Posted at 10:10 AM
Today, while playing Bucket Ball I attempted and made the elusive triple bounce shot in a regulation match to win. Not only was this the first time a triple bounce shot was made ever, but I repeated myself later on in the day with another triple bounce to win the match. What a good day it was.Namespaces make my head hurt
Posted at 10:10 AM
Tantek:“…enabled one working group to take a simple, well understood tag (perhaps the single most important tag on the web, since hyperlinks are the most defining aspect of the web), and make it needlessly different, and more complex…”
He’s got some good thoughts on the XML namespace debate going on at the W3 this week. The quote above refers to XLink and how it is proposed to complicate the simple and most important a tag.
The Camino Project
Posted at 10:10 AM
Wired: Camino. Tired: Chimera. So I guess they had to change the name. “The Camino Project” sounds like either a really bad 80s buddy-cop movie, or my new favorite band name.That aside, I’ve slowly begun to realize that Chimera Camino is my favorite browser, although I still have IE open at all times as well. I want to be a Safari fan, but I think that’s a little ways off yet.
A bearable walk home, phantom cars
Posted at 10:10 AM
Last night was the first pleasant walk home from the train in probably 5 months. It must have been 42 degrees at least. Also, for the second time this week I’ve managed to walk by an empty car precisely at the moment that it starts up on its own — almost as if by magic. I realize that there are fancy, remote starters that can do this, but to just walk by a car and have it start… well, I start to think I have special powers or something.Macromedia redesign
Posted at 10:10 AM
Macromedia has redesigned. I like the earth-tone colors. The Flash performance seems a bit sluggish, but perhaps the site is getting unusally amounts of traffic since they relaunched. Everyone is redesigning these days. All for the better it seems.AlltheWeb redesign
Posted at 10:10 AM
Search engine AlltheWeb has a nice redesign. Looks a lot like Google. Surprise. But it appears to be an XHTML/CSS layout. Looks clean.CSS hacks table
Posted at 10:10 AM
Centricle has a helpful table of CSS hacks, a chart defining various hacks and the browser and version that supports them.Color Harmonizer
Posted at 10:10 AM
EasyRGB’s Color Harmonizer is a handy tool. Enter an RGB value or hex color as a base and it will find “color harmonies” — colors that look nice with the original. Sure they’re picked by EasyRGB, but it could be really useful if you’re stuck coming up with accent colors, and it works surprisingly well. (link via zeldman)Doggiebox drum machine
Posted at 10:10 AM
Doggiebox is exactly what I was looking for. A dead-simple drum machine that has very few bells and whistles and does one thing really well. It’s also a native Mac OS X application. The default drum kit samples are surprisingly useable and realistic and it only took me 5 mintues to create a beat.Microsoft Blogger?
Posted at 10:10 AM
Scripting News:“On Wednesday last week at a meeting unrelated to weblogs, a Microsoft exec let it slip casually (heh) that the next version of FrontPage does blogging.”
Well, it’s inevitable. But it doesn’t really matter what tool you use to write a weblog. Some use Blogger or MoveableType, others like myself write their own system — and still others don’t use a weblog app at all. Many will not touch FrontPage with a ten foot pole, but it could be positive for weblogs. Then again, I can see all sorts of proprietary nonsense added in by Microsoft. We shall see.
Bulletproof Web Design Second Edition New Riders
Web Standards Solutions The Markup and Style Handbook Friends of Ed
A tiny design studio founded by Dan Cederholm. We create simple interfaces balanced with a standards-based methodology, and we’re based in Massachusetts, USA.