Tuesday, June 12th, 2007

Apple Revamps its website

Category: Prototype, Scriptaculous, Showcase

To go with the keynote, Apple pushed live a new revamped website that looks even more like it is running in iTunes.

There are lots of effects, courtesy of Prototype and Script.aculo.us, such as mouseover accordians, and horizontal scroll areas.

Fred Oliveira wasn’t all impressed:

Apple launched a new website. “Great!”, I hear you say correctly. The new website is beautiful. Except for where it isn’t – content organization.

I have to wonder what crossed their minds that made them mix products (like the iPod models) with accessories and user actions (”Download iTunes”) in the same navigation bar. I mean, that’s mixing apples (pun intended) and oranges.

I know once you do something cool – like that awesome new navigation – you want to use it everywhere, but this is Apple – come on guys, you sure as hell can do better than that in terms of information architecture.

Apple Revamp

Posted by Dion Almaer at 7:00 am

3.9 rating from 46 votes


Comments feed TrackBack URI

Fred, thanks that you said it! I’m really an Apple fan, but he new site is so totally overloaded! You just don’t know where to look and click, everything flubbers around with mouse-over effects – just way to much.

It reminds me to the good old times with the blink tags and the we-can-do-moving-headline-applets… well…


Comment by Florian — June 12, 2007

I love the new website in term of design, for the code: jeez, html 4.01. I feel so bad for the web developer who works on it.

Comment by Unplugged — June 12, 2007

IMO the previous one was also an example of rather bad webdesign. It looked more like a design for print if you ask me. To many large pictures and not enough or hard to find content.

Comment by yves peeters — June 12, 2007

I don’t know – it kind of makes sense to me that a giant “Download iTunes 7” appears with the iPods. If you’ve just purchased an iPod, it goes with them nicely after all.

Ultimately everything there is a product, although different kinds as indicated by the labels in the scroller.

@yves: Then you must hate this version – it has even bigger pictures. For me the pictures worked very well: when they wanted you to see something it was very hard to miss it.

Comment by PatrickQG — June 12, 2007

Ah! So it was just updated! I looked at it early today and wondered when it was updated..

Been searching the net for a post regarding the redesign.. :D

Comment by Markee — June 12, 2007

I love the symmetry, the grouping. It’s very dashboard portal like with all the important things right in front of you.

“the content organization” didn’t bother me at all.

Comment by Oliver Tse — June 12, 2007

It’s rather limiting to think that you can’t mix different kinds of things in the same UI.

The bar up top there isn’t certain types of products, it’s the most common things you want when you go to that section.

I think the massive team of developers and designers and usability experts they have over there might know a little bit more about their own website and how people want to use it. No offense ;)

Comment by Thomas Aylott — June 12, 2007

I found the sliding navigation didn’t work as expected. When I clicked the left/right buttons (on apple.com/mac/), I expected the slider to lock in on one of the headings (accessories, macs, applications, servers) with a single click but it would end up half-way into the word most times.

Otherwise I find it such a sexy design. I’m very happy that they changed their top navigation menu. I’ve never particularly liked the way the main buttons/tabs, when active, encroached slightly on the sub navigation.

Comment by Peter Goodman — June 12, 2007

Why did they bury the movie trailer link?? =(

Comment by brian kenny — June 12, 2007

The new Search feature is pretty cool!

Comment by btn — June 12, 2007

There’s no question that it’s a beautiful site, also it follows suit with what Apple seems to be about… But I agree with Florian, it is pretty overloaded. But then again, they’ve a lot to offer and that considered, it is put together fairly well.

Comment by Freelance Website Design — June 12, 2007

It feels like Effects for Effects sake. There are some neat things but it just feels like it needs about 2 or 3 more rounds of revision to make it right. For a normal website it’s good. For an Apple product it a piece of crap. The search is the only thing that is impressive. Everything else is either half-ass or a canned effect.

Comment by Vance Dubberly — June 12, 2007

The search is the fastest way to navigate around the site now, for me at least. Where I intuitively knew how to get to Movie Trailers or Mac OS X downloads, it is now completely oblivious to me. However I am never one to knock change so I guess I will get used to it. It seems Apple are re-aligning their web presence to mimic their current product lineup.

As many have mentioned in the past, Ajax and Ajax like effects should be used only in relevant situations, if too much of the page is being updated then maybe a full page refresh will be more appropriate. As all of the Ajax like effects only effect a small section of the page, I think Apple have cunningly added a lot of interactivity without compromising the standard document model a user is expecting – either if seasoned Apple web site visitors are a bit lost at the moment.

Did I mention the new Ajax search feature is nice? ;)

Comment by Sam Clark — June 12, 2007

(Excuse the bad grammar in the post above – its late!)
I know that’s no excuse. :(

Comment by Sam Clark — June 12, 2007

I was wondering if anyone here might know how Apple managed to produce those popup windows in the Leopard section of the site? You click a button, say Finder: Watch the Demo, and a nice “lightbox” kind of thing happens and then the movie plays. I’ve examined the page source and just can’t figure it out. I think the gallery.js handles it but after setting up a test site I can’t get the windows to pop, they simply open a new browser window. I’d like to use something like it to serve up tutorials on my site. Any chance someone out there knows what this is?

Comment by John Manzione — June 16, 2007

Does anyone have a js script or can tell me how Apple did that product browser?

Comment by Tony — June 29, 2007

@Tony: Yea go to http://script.aculo.us/. It’s just a simple Overflowed DIV box with a “script.aculo.us” JS slider.

Comment by Joe — July 7, 2007

Anybody aware of how apple did their menu, seems its done with a single PNG.

Comment by RP — July 17, 2007

I was wondering how they did their menu also. I’ve seen this done before is it just a shift in a css element or something that lets you move to a different portion of the image?

Comment by addiktion — July 23, 2007

I should of looked at the source code first before I posted that. Hey RP it looks like they are using a fixed size on the div with the overflow data hidden. And they simply just shift the background position based on hover etc.

Comment by addiktion — July 23, 2007

Very clever, i might have to do some more digging and recycle this for myself :)

Comment by RP — July 23, 2007


The menu is rather very easy. Simply the background is positioned to the specified location of the button on a roll over. Very simple to do, if you have ever done background positioning.


Thank you.

Comment by AJ — September 11, 2007

I love the new search feature!

Comment by trademark registration — November 8, 2007

Leave a comment

You must be logged in to post a comment.