Apple.com gets a redesign | Hacker News Reader

Apple.com gets a redesign

apple.com

145 pointsssclafani87 comments

I had to buy a mac OS/X DVD a week ago and I was actually surprised by how clean the (old) site feels compared to almost every other e-commerce site that I use.

The only thing that was slightly cumbersome was the checkout process but otherwise it was pretty smooth.

What bugged me is that I had to take 'snail mail' delivery instead of being offered the option to download an ISO image. There absolutely is no added value in having to wait for a week for delivery of something that could have been done instantly, no fun when you're computer is broken and sitting there doing nothing for longer than necessary.

> There absolutely is no added value in having to wait for a week for delivery of something that could have been done instantly …

Agreed. I wonder how long it will be before they release Mac OS X upgrades through the App Store.

The added value is that my mom and grandma don't have to worry about what that option is and if they should have picked it. I think the Mac App store is a much more likely place and method of getting instant updates.

Here's a small tip if you really want a download instead. If you sign up as a mac developer you can download it from developer.apple.com , though I'm not sure what the license on that is.

That's the 100/yr agreement, right? I'm sure it's coming fairly soon, they're shipping install-on-chip now, and it would be fairly pointless to sell an OS upgrade on a medium they're phasing out.

I'd bet that Lion's shipped on a DVD with a chip option. Whatever's after Lion will most likely have digital distribution as an option, though.

... and it doesn't work quite right on the iPad. There is a hovering menu bar which is fully blank. I'm surprised they didn't test the site on the iPad before pushing it live.

[Edit] Screenshot: http://i.imgur.com/DxTKY.png

Same here - that is quite a fail.

it's just a caching issue - just reload the page, and it works.

That's what asset versioning is for. I can't believe they don't concatenate their assets. Even their versioned PNG files use Etags... With proper caching and other optimizations they could probably get their site load times down to maybe 300ms (almost instantly) instead of 1.8s and at the same time fix such caching problems.

How elegant.

Apple's website has a long history of being superficially pretty, but seriously lacking when it comes to any form of professional usability.

To wit, it is typical of over-designed sites in that it is fragile when people use it at different resolutions, on different browsers or in different countries (e.g. when the iPhone came out, or rather didn't come out different international versions of the page had rendering issues because the big chunk of space for the iPhone wasn't there, and all of a sudden all the pretty little lines didn't line up.

Then there's the way they were so fond of grey-on-grey text - who's idea of usability is that? Put your hands up so you can be slapped. Repeat after me: "contrast is good, m'kay?".

Strangely enough, Apple's site is not particularly well suited for either iPhones or iPads.

The new iPad's coming out any day now to address this pressing concern.

Probably because they have the Apple Store app for the iPad.

However, the Apple Store app does not have all the configuration options for hardware that you get on the real site, as one example.

Technically the Apple Store app is only for the iPhone. There's a lot more on the Apple site than the store.

And that's mainly because the Apple Store is terrible on the iPhone version of Safari.

I don't like it. The light grey worked and seemed very Apple. This dark black seems a little too serious and the menubar seems somehow incomplete.

I'm sure they'll still sell millions of whatever they're selling though. and I'll still buy their stuff.

Could be a sign of a shift to a darker tone in OSX Lion as as been rumoured in the past.

Darker tone? OSX is going to go all futuristic-holocaust on us? "I've seen things you people wouldn't believe...."

Well, they are back from the dead and much more powerful this time, so it must be a sequel.

Or a more dark plastic look based on the top menubar. Out with the metal, in with the plastic?

I'm not seeing any dark black -- am I not getting the same thing everyone else is getting?

Honestly if there's a difference from the old version I don't see it myself.

See the Macbook Air page for instance: http://www.apple.com/macbookair/

Though that's the only page so far I've found with a dark black background. I'm not sure why it's black, all the other Macbook Air pages have a light background.

This is the old and unchanged MacBook Air page. Apple heavily customizes product pages – no two look alike. That has always been the case and is definitely nothing new. I think that the Final Cut Studio page was entirely black in the past, maybe even the Mac Pro page.

Here is a screenshot from 2007: http://www.flickr.com/photos/pxlronin/542462785/

Also from 2007: http://www.flickr.com/photos/jaymeydad/541257980/

It's mostly the same, but the current Macbook Air page does have the new menu.

Obviously. Site wide elements obviously changed (I think the site map at the bottom also slightly changed), but that’s not really relevant to the comment. The page content itself – everything minus the site wide elements – is completely unchanged. It being black is not new and also not surprising.

Ok, right. I wasn't contradicting that the Air page is customized, just was saying that the menu is change. I see what you were meaning now. Sorry!

Erm. Dark Grey. Sorry. aixelsyd again.

Agreed, the translucent dark black looks somewhat Windows Vista/7-ish. The metallic theme was more distinctive, more Apple. Wonder what their reasoning behind the redesign is...

Steve Jobs is gone for a week and this happens...

At least they didn't feel the urge to put laminate flooring as their site background.

And a big 72-point

"Hi! We're Apple. We make technology enjoyable and magical."

set in Museo Slab with a one-pixel chisel-effect.

Well to be fair I don't see much of a difference.

Apple often updates their site to reflect treatments in their desktop OS. A lot of the elements here, I expect in Lion.

For fun, here's a Flickr set since before time, including now.

http://www.flickr.com/photos/kernelpanic/sets/283374/

It's amazing how fast they converged; the first two (from 1997) look nostalgically mid-90s Web 1.0, but the 1998 homepage is recognisably a forerunner of the current one.

That change is pretty clearly pre- and post-Jobs' return/launch of the iMac. It's kind of crazy that they've maintained such a singular focus and style for so long, especially after the painful decade of constant reinvention and flux that preceded it.

In general I do like it. The search bar (top right) with the gradient background isn't good usability though. It looks as if it is deactivated. It turns white when one clicks it, but how many people don't click it because they think it is disabled?

And the store is down. New products coming out? Cook making his mark already?

Someone have a before and after? Maybe I just don't spend enough time on apple.com, but this looks the same to me, except maybe a different color on the menu bar.

I agree with that. I have seen apple.com a few times when I want to drool and this seems strikingly similar. But one thing is, when you have such a minimalistic design, the change in menu bar is a major change.

There are some page transition effects that are new as well. Not sure what browser you need to be using to see them, but I'm using Safari.

When I load the "Mac" section, the icons for the various models of Mac sort of spring outwards to fill the scroll area.

Clicking on any of the other categories on that page (like Applications, Accessories, etc. result in a offloading of old icons + reloading of the new category icons that includes the same spring/jiggle.

Also, when I go back to a previous page, like the main page, the navigation bar animatedly drops down from nowhere on page load.

Product pages (MacBook Pro, iPod touch, iPhone, …) look unchanged, category pages (Mac, iPod) are seriously de-cluttered.

There's also a nice transition when using the search

http://littlebigdetails.com/post/2939190835

The page background color is different as well. It was white before, now its #F2F2F2.

The new top-level menu looks nice, too, but somehow it just doesn't look "Apple" to me. Maybe I'm just too used to the old site...

I think it was lightly grey before. I definitely remember there being a lightly grey and noisy background at the top like there is now, don’t know about the bottom of the page.

Different color menu bar, far more animations (which have a tightly sprung attitude instead of the previous more smooth transitions), the background color went more neutral grey, the background was augmented by a gradiential noise pattern, there's more of an emphasis on rounded corners...

It's a lot of minor details leading to a pretty tangible cosmetic effect. Also the scripts seem a lot more responsive on my iPad.

(edit: s/w/a/ ugh)

http://web.archive.org/web/20091027023413/www.apple.com/

My ten minute attempt at recreating the animation found on the product page

http://jsfiddle.net/5rmLv/

What page is this for? I couldn't find it in the store or individual products. Perhaps its my laggy internet connectioPr

Check http://www.apple.com/mac/ in a webkit-based browser (safari, chrome, etc) and click applications or server

I like the product bar redesign, I don't like the color scheme of the top bar although. It seems mismatched with the rest of the website.

I'm seeing a weird bug with the search feature. Typing a search request and then quickly hitting enter gets you taken to a results page that is missing most of or all of your query (depending on how fast you type). It must be something with the search as you type JS, but is very annoying. I tested in both Chrome and Safari.

They're certainly getting full use out of the CSS animation support in Safari. Check out the Mac and iPod sections, and the animations when you move between the different groups of products. They've replaced the old horizontal scrolling display with some bouncy back and forth.

I noticed the same. The animation is so smooth that it must be done in CSS. Nice to see Apple eating its own dog food. (And delicious food it is.)

Looks like they simply stripped all the navigation off the existing design. (at least that's what I see in the latest Chrome).

As such, unless I want to read about whatever that big picture is talking about, or one of those 4 irrelevant things on the bottom (such as learning about iPhone4 on Verizon), there's nothing I can do there. They've essentially removed the rest of their site from the internet.

If, for instance, I wanted to buy a new Macbook Pro, I currently have no way to do so.

I'm going to call this a step back:

http://i.imgur.com/mujh6.jpg

Must be a caching problem. This is what I see:

http://cl.ly/0W2X1v0L1Y020F1A3U21

Must be. After enough SHIFT+F5'ing, I can see the nav on the homepage. And if I do a hard refresh on every page I go to, I eventually get the nav there too.

Apple really should know how to version their .js and .css to avoid this. It's Website 101 to increment the version number on your style sheet when you launch a new version of your site.

We all do it for our sites. Why do you suppose Apple don't do it for their own?

My opinion on the redesign: The difference in design between the old and new site is very analogous to the design changes between the 3gs and 4. The boxes are much squarer.

Anyone else seeing the graphical glitch with the search field upper left ?

I'm running Chrome on Ubuntu. But still - they could at least have tested it a little before launch.

Looks like a known bug in Chromium at least: http://code.google.com/p/chromium/issues/detail?id=29427

I can confirm this same bug on Fedora. I'm not sure how this wasn't caught in testing. In my opinion the previous site design was better.

Love the way the content seems to 'bounce' onto the page like it just got there in the nick of time all at once.

Does anyone know about the gallery/slideshow widget they use on the Mac pages (and elsewhere probably). the div id = 'herogallery'

Wondering if this is a proprietary Apple thing or can other people use it

I like it. Menu bar is thinner and fonts are smaller. Also auto suggest on search is really cool.

I seem to remember a previous iteration having the auto suggest as well, then it went away. I think it was when they first put the search field at the top of the page.

This article might be flag-worthy otherwise, but it's important to note that it appears they're transitioning to HTML5 with this latest redesign.

In this case, the changes under the hood are probably more important than what's going on visually.

Perhaps it's what you're going for, but accenting the "t" in the wordmark the way you do, is little too "jesus-y" for my tastes. This is especially true of the favicon.

Then again, I know for a lot of folks this isn't necessarily a turn-off.

Wrong article.. You meant to comment here: http://news.ycombinator.com/item?id=2143977

D'oh! Thanks :)

I really don't like the app store design. Light gray text on a white background is nearly impossible to read. And why oh why do they have horizontal scrolling for the app screenshots?

OK, I clicked on Site Map. I get this zero-pixel border/gutter on the left side (on Safari), which I find incredibly annoying. Does anyone else see this ?

The gradient over the search field is kind of weird, more button-y than field-y.

Something I like : no more horizontal scrolling on the Mac page. It also loads faster.

Well, it... is kind of button-y in that something happens when you click on it. (Or tab into it - glad to see that at least keyboard usability did not suffer.)

Somehow the menu style reminds me of Widgets/UI-component from the Windows ecosystem.

I don't like the look of the menu, but I do like its css animated entry to the page.

Fly-out fly-in animation under Mac and iPod has gotten totally out-of-hand.

Somewhat Pixar-ish, like a crowd of cartoon characters dashing off stage to be replaced by a new bunch. Will get irritating very quickly.

I wouldn't mind it, but - for me at least - on a just-before-unibody-gen MBP w Chrome, it is really choppy. I basically see the first 2 and last 2 frames of the animation.

It's better on Safari, but still, it would be better the disable the animation on browsers where it performs poorly.

The dark glossy nav-bar gives me a Flash site template vibe.

on the latest chrome I see all possible ui states for a split second, then the regular interface appears normally. this happens every page i visit

The search field looks ugly (Chrome+Ubuntu)

Designers, turn your copy machines on :-)

I'm not sure I'm a fan of this new layout. The old one tended to have plenty of whitespace to give it a clean, open feel. This more boxy one looks pretty cramped in my browser (Firefox).

I think they have a few issues with content/navigation as well. Certainly they could do with someone more internationally aware checking the wording, because to those of us who don't use the bizarre US date order, "Coming Februrary 10" sounds like your web site is nearly a year out of date...

As far as I can see the general layout is unchanged.

What has changed is the navigation bar and the product selection boxes on the Mac and iPod pages. (You previously had to scroll horizontally, now there are tabs.) It could be that they also de-cluttered those two Mac and iPod pages and removed a few elements. I’m not sure about that. What I am sure about is that all the product pages are unchanged. (Apple’s product pages tend to be heavily customized. They don’t follow one layout, they can be very different.)

So, no less whitespace than before.

(Apple.com is the US website, not Apple’s international website.)

The parent is right: the boxes are more prominent, the old design looked much "cleaner" and lighter.

Compare the US page

http://www.apple.com/ipod/

with the AT page

http://www.apple.com/at/ipod/

This picture shows the US page details (above) vs the AT page details (under):

http://i55.tinypic.com/2wpnv61.png

(Please refer to the picture if the AT site changes to the new design before you read this.)

I don’t think that’s really the old design you are looking at. Maybe a caching issue on your side.

Archive.org has sporadic and broken coverage of apple.com but here is how the iPod page looked in September 2010: http://web.archive.org/web/20080613084354/www.apple.com/itun...

It has a different general layout and is much more cluttered. Product pages are, as I said, unchanged: http://web.archive.org/web/20080503193605/www.apple.com/ipod... I don’t know about shadows since images on archive.org are broken.

Edit: Those boxes already had shadows in 2008: http://www.flickr.com/photos/zurb/3045535592/ Must be a caching issue on your side that you are not seeing them. Here is also an old screenshot showing nicely how they de-cluttered the category (Mac, iPod) pages: http://www.mac4ever.com/images/images_full/new_imac_design.p...

There are actually localized versions of the entire site based on country:

http://www.apple.com/choose-your-country/

Apple chose to make http://www.apple.com/ the U.S. site (and why wouldn't they?) so it makes perfect sense to write February 10.

"February 10" isn't that U.S.-specific. When writing out dates numerically, the mm/dd/yy is very American, but when writing out the month in words, there's not a lot of international consistency between whether people from various countries write "February 10" versus "10th February" or "10 February" or even "10. February" when writing in English. Here in Denmark it seems to be pretty evenly split (when writing English). This University of Copenhagen page uses both on the same page!: http://www.math.ku.dk/english/

"February 10" to mean February 2010 is pretty uncommon in most countries though, isn't it? Maybe February '10, but not February 10.

Reply on news.ycombinator.com