Site Design: Apple.com (apple.com)
over 6 years ago from Sam Mularczyk, Designer at Thick
over 6 years ago from Sam Mularczyk, Designer at Thick
There's also a different version on iPhone with meat-less hamburger icon.
Thought the same thing... maybe its a hot dog
It makes sense IMO. Introduces a second layer to what's already there.
Though I found it weird that there was no indication that the menu scrolls sideways (and I only did so because someone pointed it out).
and it animates into a X, can't do that with meat!
I thought the fact that the word on the far right is partially hidden was a fairly good indication.
I have a Nexus 5 and it there are no partially hidden nav items. I had no idea you could scroll either.
space grey is the new white.
I don't get it. How do you make a site responsive but forget to make a responsive navigation?
The nav changes on an actual mobile browser (using user agent sniffing I guess), just not on desktop if you try and fake a mobile browser.
Not responsive in terms of using media queries, but at least they're addressing mobile a bit better.
Worth noting that Amazon uses a similar approach.
It is responsive but it uses server-side scripts. Meaning, you can't activate by re-sizing the browser: actually try it on an iPhone.
This isn't true, it does use media queries— employing 'device-width' as opposed to (browser) 'width'.
You need to spoof media queries, user agent and other stuffs. On chrome devtools click emulation and select iphone 5 for example.
I wasn't sure about the horizontal scrolling mobile menu at first but I actually got used to it quickly and now I like it.
What do you think the odds are that they diligently tested the horizontal submenu? Probably high, right?
I ask because it's not inherently clear that you can scroll. My instinct was "the menu got cut off."
I initially felt the same way. I was thinking "Whoa, did Apple screw this up..." but after I used it a few times it felt fine. It made me wonder if they just did it differently because they are Apple and they have too... Still the swiping interaction feels good in Safari -- not sticky, slow or anything.
It does feel fine, but it's hard to guess that it does scroll I think.
I don't think Apple conduct any user-testing at all.
I keep accidentally activating the right-swipe-to-go-back gesture.
wow flat :0
Not exactly unexpected. But it's nice...
Why “iPHONE”? Anyone can give me a reason?
Papa's got a brand new nav! Love it. Big improvement.
Any thoughts on it not being fixed on scroll? Not sure if it needs to be, but I for some reason expected it to be.
Thought the same. But having a sticky nav + the already sticky sub-nav on project pages would be way too tall, I think.
No responsive as usual for saving their own phone...
Inching forward towards fully responsive. They flatted out the super gradient nav bar. Now its a flat gray color and I like that.
To me it feels and looks a bit unfinished. Like they were rushing to get it pushed. They haven't propagated the new look properly and there are some obvious UX mistakes. E.g. h scrolling a menu with a scrollable teaser area underneath.
Apple always displayed decent lay-outs, good rhythm, little clutter and a coherent style. The current design doesn't reflect that, it looks messy and cramped. Take the new store page, there is so much going on and with very little contrast: http://share.vigour.io/image/3W1M2y0m2E3q
Needs work.
It looks like they are having problems with their fonts. From the console:
Font from origin 'https://www.apple.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://store.apple.com' is therefore not allowed access.
Loving the new site design. Much better than before imho.
Found this tweet pretty funny: https://twitter.com/samuelfine/status/509416957553037312
Am I missing something special Dribbble did with their nav that Apple duplicated?
It was inspired by using a similar navigation strip? Its a pretty common practice.
Incidentally, RWD is server-side, not client-side / CSS media query. Meaning, re-sizing the browser won't trigger mobile view, you have to use a mobile device.
Looks like all sections updated except Store, Mac, and iPod. Rest are RWD-optimized.
What makes you think it's server-side? I can clearly see media queries by inspecting the CSS.
Finally.
l
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now