- Introduction
- Home Page
- General Layout
- Title Bar
- Size & Margins
- Purpose & Functions
- Search
- Top Navigation
- Left Navigation
- Right Navigation
- Footer Navigation
- Item Detail Page
- Shopping Cart
- Checkout Process
- Virtual Catalog
Title Bar
Title bar is typically placed at the page top and above top navigation. It comes with a logo and some quick links (e.g. shopping cart). As it turned out, a few websites do not have clear separation between title bar and top navigation (e.g. Godiva, Spiegel). Nevertheless, it is a very common practice to separate title bar from top navigation.
Size & Margins
Let's start with title bar size and margins. Since some websites are center-aligned, left margin is not appricable to them.
| Website | Dimension | Top Margin | Left Margin |
|---|---|---|---|
| Amazon.com | 599 x 33 px | 4 px | Centered |
| Chadwicks | 750 x 50 px | 48 px | 10 px |
| eBay | 762 x 109 px | 15 px | 9 px |
| Figi's | 780 x 53 px | 0 px | 0 px |
| Godiva * | 740 x 77 px | 30 px | 25 px |
| Harry & David | 750 x 51 px | 17 px | Centered |
| Hickory Farms | 750 x 94 px | 0 px | 0 px |
| JC Penny | 765 x 72 px | 7 px | Centered |
| Kohls | 750 x 57 px | 0 px | 0 px |
| Pottery Barn | 770 x 40 px | 4 px | 0 px |
| Red Envelope | 750 x 62 px | 10 px | Centered |
| Smith & Hawken | 746 x 54 px | 9 px | Centered |
| Spiegel * | 771 x 70 px | 0 px | 0 px |
| Swiss Colony | 768 x 56 px | 17 px | 0 px |
| Target | 727 x 86 px | 0 px | Centered |
| TJMaxx | 733 x 85 px | 23 px | 19 px |
| Walmart | 713 x 70 px | 13 px | 8 px |
| Williams Sonoma | 764 x 27 px | 30 px | 6 px |
* Include top navigation.