Over the past couple of weeks, Mac fans have been so tied up in the announcements from D5 and WWDC that it seems like a key component of the Apple buzz-factory is being completely ignored… the Apple website.
After a few days of getting used to it, I can really start to see how much thought, time, and effort went into the latest site overhaul.
Let’s take a closer look at what makes this such an important focal point in the big Apple picture.
I’ll start from the top and work my way down.
First up is the site width. Huh? Why does this matter? Well, the new Apple site is designed at 980 pixels wide. Much wider than it’s predecessor which weighed in at around 750 pixels wide. This gives much more room for content. This in turn (however unconsciously) gives the user a less claustrophobic experience. It also allows for less scrolling since line breaks in text are not as frequent as with a narrower page.
Another feature running throughout the site is the use of javascript or AJAX/Web 2.0. Apple has added functionality on the site that looks and feels like Flash but is much less taxing on your system resources. I’ll highlight those features as I come across them.
Next is the navigation system. Wow! The world’s most mimicked tabs in web history are gone! It’s about time. They were getting long in the tooth and were very Jaguar-looking. Get it? Tooth… Jaguar? The new nav is a neutral gray and it floats on top of the pages almost as another layer instead of chopping the top 50 pixels off of every page; this allows page colors and backgrounds to fill the entire browser window. This also frees up the page designs to be whatever they want to be and not worry about clashing with those shiny aqua tabs and pure white nav background. The different button states such as mouse-over, mouse-down, and so on feel really nice and natural… even if you can’t physically “feel” them.
The categories in the nav are also a bit more intuitive, sectioning off the site into the most basic of categories.
Capping off the right side of the nav is the shinning star of the entire site. Once deemed pretty much useless to me and the rest of my Mac friends, the Apple.com search tool is now a force to be reckoned with. Not only does it search apple.com, it also searches the entire iTunes catalog. What’s more, it incorporates suggestive search in much the same way as Spotlight does on the Mac. Only the web search seems faster than Spotlight (go figure). Start typing “iPhone” for instance and it quickly narrows down and displays the most popular search terms along with a thumbnail and description. But wait! Instead of clicking the result you want with the mouse, use the keyboard’s up and down arrows to navigate to the result you want and hit the “return” key to go to that page. If you hit return without navigating to a suggestion first, you will end up with all of the search results on a well laid out results page with categories that you can collapse and expand depending on what you’re looking for. If your search returns items from the iTunes database, you’ll be able to horizontally scroll through those result’s album art just like on the iTunes Store home page. Very sexy.
So, if you’re complaining that the new Apple site makes it harder to find stuff, use the search. After all, it’s there for finding stuff.
Moving on…
Going through the different sections, I noticed that the Store seems to be the section that has changed the least (apart from the iPhone section). Digging down even further into the store, I noticed things like “Your Account”, “View Cart”, “Order Status”, etc. haven’t even been updated to the 960 pixel width. I’m sure they’ll be updating that part soon and it still works as it always has.
Next is the Mac section which is a new section that incorporates everything related to the Mac including hardware, software, and accessories. You navigate through this section using a beautiful scrolling thumbnail navigation area. I call it an “area” rather than a “bar” because it’s too dang tall to be a bar. Plus, “area” sounds more important. The scroll bar in the Mac nav area can be clicked on, to quickly jump from category to category or, you can grab the slider and move it left and right. A very nice implementation of advanced javascript. The rest of the Mac page is chock-full of content related to the Mac. The “Latest in Mac” and “Mac@work” side bars also incorporate beautiful sliding javascript mouse-over behaviors.
In the footer of this page and most of the pages on the new site is a path or “bread crumb trail” which allows users to backtrack all the way to the Apple home page. The footer is also filled with a bunch of links to different sections and pages as they relate to the page you are currently on.
With the exception of the iPhone page (which hasn’t changed much at all except for the page width), the remainder of the sections incorporate a similar layout to the Mac section although the iPod + iTunes section is the only other section that sports the nice thumbnail navigation area. In addition, the Mac, iPod + iTunes, and Support sections all have featured videos that are relevant to the section you are in. So the Mac section has video features on cool stuff in Leopard, the iPod + iTunes section has movie trailers and iPod ads, and the Support section has video tutorials. All of these videos are in QuickTime of course but instead of the default QuickTime controls, they use a a simple CSS controller, which compliments the new site design nicely.
Both the Downloads and Support sections have made it much easier to find the most popular content in those areas. The Support section has it’s own search bar but it doesn’t incorporate the suggestive search and the search results have not been updated to the new page width and design.
OK, now on with the negatives… I mean negative. Yes, so far I have only been able to find one negative. Where the heck is the Trailers page? Wasn’t it easier before when you could click on the QuickTime tab and go to the trailers from there? No. No it wasn’t. Just enter in the word “trailers” into the new search in the nav and it pops right up. No need to go through another page to get there. If you really want, you can go to the Mac section,
slide on over to Applications, click on the QuickTime icon and the go to the trailers page from there but then you would miss out on the cute little trailer icon in the search results! Apple.com/trailers still works too and, if you’re like me, it’s probably already cached in your browser. The trailers section by the way has been beautifully redesigned as well which makes sense being one of the more popular areas of the site.
Overall, the new site was a very ambitious project which doesn’t seem to be getting the praise it deserves. I mean, not even a press release or mention on the site itself about all the great new features! Pretty unfulfilling to the web team at Apple, I’m sure. Being a web designer myself, I can only imagine how long the planing and production of a site like this would have taken.
In conclusion, I can see a familiar strategy coming from apple which originated from the first iPod. With every product Apple releases, they apply their design concepts and conventions so that individuals can become familiar with how “iStuff” works. The new site is no exception. For many potential customers, the web is the first place people will come in contact with Apple design. The more it mimics the Operating System or the Apple way of making things work, the easier it is for consumers to take the plunge and spend money on an actual product.
Once again Apple has used the latest technology to marry both form and function without being overly flashy just because they can be. Great work Apple.com!
Visit the new Apple.com
[UPDATE] Apple has since completely updated the iPhone section of the website with much sleeker demos and photos in addition to its overall layout and design.
[UPDATE 2] Once again, Apple has updated the iPhone section of the website and is now more inline with the Mac and iPod +iTunes sections with regards to its design and layout. It also features and amazing guided tour of the phone. Man, that thing is so well designed, it’s nuts.