Tuesday, June 12th, 2007
Apple Revamps its website
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.
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…
Cheers
-Florian
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.
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.
@Unplugged: There are many good reasons to use HTML 4.01 over XHTML. Newer != better.
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.
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
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.
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 ;)
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.
Why did they bury the movie trailer link?? =(
The new Search feature is pretty cool!
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.
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.
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? ;)
(Excuse the bad grammar in the post above – its late!)
I know that’s no excuse. :(
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?
Does anyone have a js script or can tell me how Apple did that product browser?
@Tony: Yea go to http://script.aculo.us/. It’s just a simple Overflowed DIV box with a “script.aculo.us” JS slider.
Anybody aware of how apple did their menu, seems its done with a single PNG.
http://images.apple.com/global/nav/images/globalnavbg.png
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?
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.
Very clever, i might have to do some more digging and recycle this for myself :)
Hi,
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.
I love the new search feature!