Decaflon

I'm a geek, so I like checking out the source code to new sites, especially Apple.com. They do so many cool things on their web properties that it's always worth a look to see how they accomplish their web UI wizardry.

The biggest change to the Apple website is the navigation at the top, what they call the "global navigation". Previously it was a tab bar that also included a secondary level of navigation below for quick access to various parts of the site. Over the years they've added tabs and added sub-links, enough that they felt it was overblown and needed a complete refresh. The new look is made to sit on top of the page's existing background color or image (iPhone pages have a gradient for a background) and I took a screenshot of 3 navigation bar states: black, white, grey:

Although the text in the navigation buttons is Myriad Pro, it's not HTML text but rather an image replaced element. I was a little disappointed to see that they didn't use my negative text-indent technique, but you can't win 'em all :)

The web team actually uses the Leahy/Langridge method, where the height of the tab is set to 0, but a padding-top of 38px expands the tab vertically and allows the background to show. An interesting thing that Apple does is use one large background image, and then shift the background-position in order to only show parts of it at one time, effectively masking the other areas. I've been doing this for awhile (and you should too!) because the browser only has to load an image once, and there is no flickering on a hover state while the user waits for the browser to grab a new image for the tab. This technique was pretty hot when it first came out (Pixy's Fast Rollovers published July 2003) but you newer web designers have probably been using it without knowing its history. I think the most exciting time in the web industry was summer four years ago, when all the image replacement, rollover, and tab navigation articles came out within a few months of each other.

Some of the CSS that makes this possible:


/* BUTTONS */
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }


The image that their CSS is moving around is this:

My only problem with the new navigation's design is the Apple logo on the left side. Apple's been switching to a more minimal representation of their logo (just the apple as a solid object, no gradient) but for the navigation they switched back to the glossy version which strikes me as an afterthought. I wouldn't be surprised if they changed out the Apple logo in the navigation in the next few days after one of their marketing executives realizes the miscue.