5 tutorials to web design, the apple.com way

In terms of web design, Apple.com is a very good exemple of clean semantic code and stunning graphics. Here's 5 high quality tutorials to design like apple.com and recreate Apple's menubar, breadcrumbs, stylesheets...


Apple style Accordion Menu

Apple.com accordion
Let’s start with a nice tutorial from DynamicDrive. Remember that post where I shown you 10 javascript sliders? Here’s another great way to display your content: This menu mimics the look of the vertical menu found on certain areas of Apple.com. The headers are toggled via “mouseover” over each one, and the previous expanded header (if any) is closed before expanding the current.
Source

Recreate Apple.com menubar

Apple.com menu bar
Apple.com menubar mixes clean code and very cool design. In this tutorial, I’ll show you how to recreate Apple’s website navigation bar and study the techniques used.

Apple.com CSS image replacement

Apple.com titles
This CSS technique is used on many websites, but as usual, apple.com do it very well. There’s many different way to replace a text by an image using css, but in my opinion, the following code is the best way to do it:

h2 { 
    background: url(itunes_main_title20080609.gif) no-repeat; 
    height: 60px; 
    text-indent: -9999px; 
    overflow: hidden;  
    color: #000; 
    font-size: 22px; 
    margin: 52px 0 10px 0; 
}

Did you noticied the text-indent:-9999px; and the overflow:hidden; ? This is the key. It allows us to visually hide the text without ruining our SEO.

Create apple.com-like breadcrumb using simple CSS

Apple.com breadcrumb
In this great tutorial, Janko Jovanovic will show you how to create a apple-like breadcrumb. If you’re a WordPress user, don’t forget our tutorial for adding breadcrumbs to your WordPress theme.
Source

Apple.com stylesheet anatomy

Apple.com css
You know it: Apple is one of the coolest brand names in technology, so no wonder their site should adhere to modern web design standards. Divs, classes, no tables, media types, ajax libraries, separated stylesheets, extensive code organization, interesting varying layouts, it’s all there for you to learn from.
In this very interesting article, German developper Reinhold Weber analyses apple.com stylesheets anatomy. A must read!
→ Source