Page structure

• Optimized for a screen resolution of 800 x 600 pixels. See screenshot
• Total page width: 778 pixels.
• Background color White, all pages should be at least 60 % White.

The page structure includes seven main areas as shown in the illustration;

• Margin
• Banner area
• Top menu
• Left menu
• Masthead
• Content area
• Resource area
• Toolbox

You should not alter their placement in relation to each other, and the exact measurements should be kept. Some applications/tools may require a different page structure. Please contact Global Web Management for approval.

In addition these standard elements apply to all pages:

• Dotted line
• Copyright link

A requirement is that the ABB Web pages shall fit into a 800 pixels wide monitor, with no horizontal scrolling. The browser itself normally uses a couple of pixels on each side to display a kind of margin. The remaining 796 pixels are used as follows:

• Left margin: 4 pixels of whitespace (a guideline requirement)
• Page content: 774 pixels (a guideline requirement)
• Whitespace between page content and right-aligned scrollbar (if visible): 3 pixels or more
• Scrollbar: Typcially 15 pixels (depends on the browser type)

A screenshot of a page with this horizontal distribution of pixels is presented here.

SPECIFICATIONS:

Width:	774 pixels
Height:	2 x height of logo (59 pixels for ABB Internet, 34 pixels for ABB intranet)
Placement:	At top of page

Elements included:

• Logo
• Top icons
  

Optional elements:

• Site identifier
  

• See details about navigation

• See details about navigation
  

• A Masthead is a graphical element that is applied to help the users to identify different sections and content, brand ABB and provide a consistent look.
• Optional appearances

SPECIFICATIONS:

Width:	614 pixels
Height	100 pixels
Placement:	6 pixels below Top menu, 5 pixels from left Dotted line

See further Masthead specification

• Used to display the primary content of the page; Headline, Lead text, Body text (i.e. an article), applications, etc.
• A selection of templates is provided for optimal presentation of different content
  

SPECIFICATIONS:

Width:	408 pixels (when template with Resource area is used) 614 pixels (when template without Resource area is used)
Height:	Will expand to fit various amounts of text
Placement:	6 pixels below the Top menu, 5 pixels from left and right Dotted line

Optional elements:

• Text
• Links
• Content images
• Interaction elements
• Applications & tools

NB. For ABB intranet only:

• Name and date of Created by/Updated by is an optional element, which is active by default.

SPECIFICATIONS:

Placement:	On the bottom of ABB intranet content pages
Font:	Arial Regular 10 px
Text color:	Link color (Use the "Not visited" color)
Structure:	See picture below

• Used to display resources (links, attachments) related to the content. In addition the resource area contains the optional resources; Search and Contact us which are activated by default.
  

SPECIFICATIONS:

Width:	195 pixels
Height:	Will expand to fit various amounts of elements
Placement:	11 pixels below Top menu, 5 pixels from left Dotted line

Optional elements:

• Margin image
• Search: The search input field should be available on all pages. It posts a query to the Verity search engine and displays the result in a pop-up window.
• Contact us: Contact us should be available on all pages, allowing the users easily to contact the correct person at ABB.
• Drop-down boxes
• Links
• Attachments
• Intro sections (only on intro page)
• Indexed links to headlines in the Content area (only in c-4 Indexed content template)
  

The Resource area should appear on all pages, unless the content needs to be displayed in a particularly wide area. If the Resource area is not displayed, the Content area will occupy the full width.

• Used for page specific tools (see the bottom of this page)
  

SPECIFICATIONS:

Width:	408 pixels (when template with resource area is used) 614 pixels (when template without resource area is used)
Height:	26 pixels; 10 pixels below Dotted lines, and 9 pixels above Dotted lines
Placement:	5 pixels from left and right Dotted line
Font:	Arial Regular 10 px
Text color:	Link color

Optional elements:

• Printer version of this page
• E-mail this page
• Bookmark this page
• Back to top
• Search (when template without resource area is used)
• Contact us (when template without resource area is used)
  

The text for the Toolbox elements should always be in the same language as the rest of the site. You can also hide the toolbox (make it inactive).

• Used vertically to separate different elements from each other.
• Used horizontally primarily to frame the toolbox, may also be used to frame messages within an application.

SPECIFICATIONS:

Width:	10 pixels (4 pixels White, 1 pixel Black, 5 pixels White)
Placement:	Vertically: Between the Left menu, Content area and the Resource area. Horizontally: As frame for Toolbox or, for instance, messages in an application.

• To be placed at the bottom of all pages
• See the bottom of this page for the text of the Copyright link as well as the link target

SPECIFICATIONS:

Height:	10 pixels below Dotted line
Placement:	5 pixels from left and right Dotted line
Font:	Arial Regular 10 px
Text color:	Link color