Archive for July, 2003

Smart Bookmarks

I’m sure someone has already been thinking about this. I’m too lazy to use an RSS reader on a regular basis. I love the idea of RSS and feeds — but I want it to be easier.

I need the sidebar from NetNewsWire, built-in to Camino or Safari or Mozilla. Having a browser that has support for RSS built right in would be incredibly convienent. I imagine “Smart Bookmarks” for weblogs and news sites that display a number next to the bookmark’s title signifying an unread post or story.

Maybe I’m too lazy, but XML feed aggregator support in the browser would be a feature I would certainly pay money for.

Update: Well it seems I was right — someone (many) have already though of this :). Thanks to all that have sent in pointers to various Mozilla extensions and sidebar apps that already exist. There’s also a few things in the works that sound interesting as well. Here’s a list of what’s been sent in. Many are courtesy of John Beimler:

This is why I love the web.

Hello It’s Todd

I like Todd Rundgren — especially his 70s masterpiece, Something/Anything?. Fantastic pop gems that always seem to get overlooked. What’s interesting is that he is also a diehard techie, as discussed in an article in today’s Boston Globe. He’s right on in saying:

“It’s time for the labels to go, in the sense the way they’ve done business is based on a commodified model, and they’ve no experience in a service model — which is what the Internet is. Only someone like J.Lo needs the labels, because she can’t go out and build an audience from scratch with the quality of her singing. The future for real musicians is, was, and always will be performing.”

He’s right on the money in that only people like J.Lo (will eventually) need record labels. As soon as this whole digital copyright issue is improved, I expect we’ll see a lot more artists — well known artists taking their distribution to the web and saying adios to the labels. Maybe. What do I know…

All Hail Red Stripe

Top six reasons why I like Red Stripe beer:

  • It’s from Jamaica. How exotic!
  • The bottle is short and stout with a tiny mouth.
  • It tastes slightly better than Budweiser.
  • One of the few beers to still screen print its label.
  • It’s summertime.
  • Relatively cheap.

Cheers.

Magic Icons for Lazy People (like me)

A neat little trick for those that want to change a site’s colors — but also create only one set of images that also reflects those changes. It’s been done on numerous sites, and I’ve employed the method on Fast Company with the redesign done back in April.

The idea is pretty darn simple, and works best with two-color images. Create a two-color .gif image and choose one of the colors to be transparent. Next, we’ll “fill in” the missing color with CSS using background. Change the CSS rule and the images will change with it. Very simple — but effective, and a heck of a lot simpler than creating multiple sets of icons.

Here’s an example (using inline styles to demonstrate). Below is a small little icon (13px x 13px) that is white and transparent. I’ll fill in the transparency with a few different colors using the same icon image, repeated:

*
*
*
*

On Fast Company I place icons within h3 headings and style them like this:


h3 img {
background: #369;
vertical-align: middle;
}

It’s important to note that because I’m using white as the visable color, the icons will be invisible on the un-styled version of the page. This could an unintended benefit. Keeping decorative images entirely in the CSS file using background-image is arguably a more ideal solution — but the chameleon effect you can create with one set of transparent images is a nice little trick.

Octodog II: Octopus in Seaweed

In response to my earlier post on the Octodog, reader Ian Roberts wrote in with a killer recipe — one he and his wife call “Octopus in Seaweed”:

“My wife adds a drop of green food coloring to the pot of Ramen noodles, then arranges the octopus hot dog in the middle. The kids love it…”

Now, I’m not a kid, but that sounds brilliant. Yet another reason to buy an Octodog to make this all easier. Ian also added that a simple Google search brings up a score of similar recipes. Bon Appetit.

An Opera Reprise

Update: Thanks to a comment from “Mash” over at Stopdesign (thanks!), I’ve fixed the navigation problem in Opera7. He/She recommended hiding the float: left; left rule that is used on a:link elements in the #nav. This worked like a charm. I used Mark Pilgrim’s *7 hack that hides CSS from Opera7. The downside to this hack is that it also hides from other browsers — most importantly IE5.0/Win. So I then used a combination of the *7 and Box Model Hack to essentially let IE5/Win see float: left;, override with the Box Model Hack to float: none; then as a separate rule that is hidden from Opera7:


html*#nav a:link, html*#nav a:visited { /* hidden from Opera7 */
float: left;
}

Whew. So in the end it shows float: left; for IE5.0/Win, turns it off for everything else (with the BMH) and finally turns it back on for everything but Opera7 and IE5.0. It sounds more complicated that it looks — take a look at /css/inc.css to see it all in action.

I believe this solves the problem the best way, and should properly render the navigation in Opera7 now. It’s sitting about 2 pixels higher than it should, but is fortunately completely usable.

I should also clarify that I do care how a site looks in every browser as we all should. I was merely frustrated with this one small problem that Opera7 was causing. The rest of the site worked perfectly fine. So, thanks again to Mash (whoever you are).

A Night at the Opera

Opera7 has been rubbing me the wrong way. I’m getting lots of positive feedback on the new Inc.com redesign — and also tons of feeback on how the navigation breaks in Opera7/Win. I’m trying to find a solution for the problem.

Doug mentioned that Opera7 has trouble setting a width for an absolutely positioned ul — and he’s right. Since there is no width specified, the list wraps instead of displaying inline like it does on every other standards-compliant browser. Applying a white-space: nowrap; to the #nav is ignored by Opera (a bug?), and while setting a pixel width fixes the problem, it creates additional issues in other browsers. The mini tabs work fine on SimpleBits because I’m not using position: absolute;.

Frustrating. But Inc.com gets approximately 0.00001% of its traffic through Opera. Sure, it sounds like I’m giving up on it — but I’m not interested in finding a hack that is specific to Opera only right now, when it appears to ignore the white-space rule. The rest of the site renders just fine as well.

I’d be interested to hear from others who have run into similar problems with Opera.

Inc.com Redesign

I’m happy to announce another large, commercial site that has been redesigned with table-less, structured, XHTML markup and CSS for layout. Today at work we (the Fast Company/Inc. web team) launched the new Inc.com.

Inc.comI got to fly solo on the design for this version, building on what we had done previously with Fast Company back in March. The XHTML structure is very similar, with good reason. Both sites now run off of the same content management system which was built in-house, and with the same team running both sites — it only makes sense to keep things similar where it doesn’t compromise the brand of each magazine.

A few other noteables:

  • Over 11,000 pages were cleaned up and validated due in large part to the help of a couple of hard-working temps. The magazine archives span over 17 years of content, so you can imagine the wacky HTML we encountered.
  • The home page file size (HTML alone) went from 52K down to just 24K. Removing the 3 or 4 deep nested table stucture was extremely satisfying. It’s darn fast now.
  • There is a healthy use of background to hold many of the interface images (heading icons, list bullets, header backgrounds, etc.) and it was designed to easily change colors completely by updating the CSS whenever we get sick of the current ones.
  • There are dusty corners yet to be cleaned out and little tweaks here and there, however most of the site should validate as XHTML 1.0 Transitional.

Now it’s time to fix bugs and clean up various parts of the site that need updating. Onward.

You may also notice a slight redesign to this very site as well. Just a subtle update to coincide, while “borrowing” a few elements from the Inc. design. If you don’t notice anything different, you may just need to refresh.

Netscape No More

As reported just about everywhere today, AOL has killed Netscape, canning most but shelling out $2 Million for the newly formed Mozilla Foundation that will allow development on Mozilla to continue. Phew. I suppose it’s not surprising, but still feels strange. Netscape leaves such a legacy.

So now what happens? IE/Win and Safari move on of course. Mozilla continues on, which means my favorite browser (Camino) will move on. Opera is still around. All fine and dandy, but it’ll be interesting to see what eventually happens to the browser in general.

An Update (finally)

Lots of work = very few posts. I’ve been working on some cool stuff, some of which will be public sometime next week. Hopefully regular posts will resume soon.

Some random items:

Hats off to Doug Bowman on his redesign of Adaptive Path. Another fantastic example of great design coupled with web standard, structured markup and CSS. Be sure to read Doug’s comments on the new design. Great work — and I especially love the tab-esque navigation, something that Doug came up with privately, months before I posted my CSS Mini Tabs example last month. Great minds think alike? That might be giving me too much credit.

Octodog: The FrankFurter Converter. A device that turns an ordinary hot dog into an octupus. Incredibly genius. I can only hope to invent such a thing someday. Imagine the cocktail party smalltalk response to “What do you do?”:

Well, I sell Octodogs — a device I invented that turns an ordinary hot dog into an octopus. A fun, simple, safer way to eat hot dogs.

Safer? That’s the part that kills me. How is a hot dog safer when it takes on the form of an octopus? (thanks to kevin for the link)

Brandon wrote in and convinced me that there is something to the “dry heat” thing. We just emerged from a sweltering 94+ degrees per day heat wave here in the Northeast US that was certainly more uncomfortable than the 110 degree weather we endured in Arizona. The difference? Well, the humidity. I guess it’s true, as I don’t even remember sweating in AZ, despite the insane temperatures — or at least it evaporated immediately. For great photos of Arizona, check out Brandon’s great collection.

Oh, and there’s now a “green” theme over there in the right column. Yay.