Archive for ‘uncategorized’ category

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.

Icon Styled Headings

Certainly one of the most powerful features of CSS is
background or background-image. Holding interface images within one file
makes for a very flexible and easily adaptable site.

One of my favorite methods is applying a background to certain heading tags within
a document. Such as a left aligned bullet. Using background instead of hard-coding a
bullet within each tag has obvious benefits. Don’t like the particular image you’ve used? Change one
line in your CSS file and the entire site changes instantly. It also keeps the HTML code lighter by
removing the need to repeat all those img tags for each heading.

As an example, I’ve just recently changed this site’s right column to render all h3s with the box
icon aligned to the left of the text. The CSS goes something like this:

#right h3 {
padding: 0 0 6px 19px;
border-bottom: 1px dashed #ccc;
background: url(../images/box_bullet.gif) no-repeat 0 2px;
}

This will insure any h3 tags within the right column to show the box bullet to the let
of the text. An appropriate amount of padding to the left makes this work. Also, the 0 2px
portion of the background rule tells the browser to place the image 0 pixels from the left
and 2 pixels from the top. This is key for lining up the image with the text just right.

The same idea can be applied to most anything — and especially nice for unordered lists (which was originally pointed out to me by Doug). Instead of using the normal list-style-image rule (which doesn’t always line the bullet image up correctly in every browser), try using background on li elements and lining up with the top/left pixel values.

iSight

Made it out to the Apple Store today and tried out an iSight camera with the new iChat AV. Real time audio/video confererencing. Nothing new there, but the incredible part is the simplicity of adding it to iChat. The quality of the video at full screen mode was also really impressive. The trick is, you have to know someone else who has one, but it could be rather handy for telecommuting. Also, it’s free to talk to someone anywhere in the world. Long distance companies are going to love this if the technology finally catches on.

The actual iSight camera itself was a bit larger than I imagined. I suppose that’s the tradeoff for the great video quality.

But it’s a dry heat

Right. I don’t ever want to hear this excuse again. 110 degrees is hot no matter how you slice it. I might also point out that an oven also emits a dry heat, thereby cooking your food.

Click for slideshowA great trip to Arizona though. We stayed halfway between Phoenix and Tucson in a rather depressing town just off of Interstate 10. The saving grace was the location though, and the fact that it is equidistant from the two cities.

We took in some of the most breathtakingly beautiful scenery we’ve encountered, and heat aside, Arizona is quite an amazing state. To give you an idea of the severity of the heat, much of the state was literally on fire.

Some highlights included Old Tucson (the site of hundreds of western films), Tuscon Mountain Park, Tempe, Goldfield Ghost Town, Superstition Mountain (where UFOs have apparently landed, and where lizard people have emerged from), Canyon Lake, Tortilla Flat and most importantly the Arizona-Sonora Desert Museum which was certainly the highlight of the whole trip. It’s an outdoor museum/garden/zoo with just about everything you’d ever find in the southwest desert. Highly recommended.

To the desert and… Goodbye, friend

We’re off to the wonderfully hot state of Arizona tomorrow (where it is approximately 563 degrees). Actually it’ll only be 106 tomorrow:

106 degrees

While Kerry is attending a seminar during the day, I’ll be looking for things to do in the desert. Although air conditioning is sure to be required. Hope to take some pictures.

Also.. bear with me as I get personal here (something I don’t normally do), it’s been a sad day, as I’ve had to say goodbye to one of the best friends I had while in high school. What’s most troubling for me is that I had not spoken to him in many years. Life happens, people go off and do things, but a tragedy makes us realize it’s important to keep in touch. So, this one’s for you, Athan.

Site news is boring… but

Writing about changes to a site is about as exciting as talking about vocal chords… but I’ve added a blue theme to the theme switching area in the right column, as well as some updated icons for each of the four themes. Yay. More colors to come… in case you’re tired of the old-school orange.