w3v8 design tutorial

What’s new and improved

Welcome
Welcome to the w3v8 design standards. The new w3v8 design
reflects the vision of one user experience across the domain. The
goal is to assist the user in completing tasks quickly through an
easy-to-use, intuitive design.
The purpose of this tutorial is two-fold:
• Introduce the major changes and improvements made in
the w3v8 design
• Introduce the organization of the updated w3v8 design
standards

The topics in this tutorial are presented in the same order as the
w3 design standards on the IBM Intranet Standards site.
After completing the tutorial, explore the standards site to learn
the details of implementing the w3v8 design.
Using the standards
When designing your site or page, start with the Requirements
checklist. The standards listed in the checklist cover the w3v8
requirements for all w3 sites. The requirements checklist
provides descriptions of each standard and links to more detailed
information to help guide site developers in the creation of
standards-compliant sites.

The requirements are categorized into the following tables:

Required elements: A list of w3 standards that must be met for

all w3v8 sites.

Other elements: A list of w3 standards for optional site

elements (such as tables, forms …).

Code and HTML: A list of w3 standards for code and html.

Accessibility: A list of IBM Web Accessibility standards that

must be met for all w3 sites.

Although an element might be considered “optional,” you must

follow the standards for that element if you choose to use it on
your w3v8 site or page.
Standards topics
Each design requirement in the w3v8 Requirements checklist points to a topic in the
w3v8 design standards that provides detailed information on that requirement.
Also each requirement has a unique codification number. The codification provides a
systematic approach for identifying and resolving compliance issues, so developers
can create compliant sites more easily.
Standards topics
Each standards topic includes a requirements checklist specific to that topic. The
topic-level requirements checklist briefly describes the requirements for that particular
page element.

The detailed requirements, accessible from the topic-specific requirements checklist,

provides specific details of how to meet that requirement.
Topics pages
Each topic in the w3v8 design standards includes a base set of sections:
• Introduction
• Requirements checklist
• Usage
• Detailed requirements
• Dates for compliance
Other sections are
included when additional
information is needed,
such as descriptions of
specific types of an
element, additional
recommendations for
ease of use, and special
accessibility requirements.
Anchor links at the top of
the topic page make the
sections easily
accessible.
Dates for compliance
All IBM intranet sites must adhere to a set of design standards.

The w3v8 standards become effective in 2004 according to the following

schedule:
• If you exit Plan after 15 Feb 2004, compliance is required at deployment.
• If you exit Plan before 15 Feb 2004, compliance is required before 31 Dec
2004.

Dates for compliance

If your development project did not exit Plan Phase by 15 February 2004, then
you must comply with the “Browser support” requirements for v8 prior to
deploying your Web site. All other intranet Web sites and Web applications
must comply with the “Browser support” topic by 31 December 2004.
Progress check
Now, let’s look at the new design and the standards. We will start with the page
styles and templates available for w3v8 pages.

► Page styles and templates

► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Page styles and templates
All w3 pages share common page elements that promote
ease of use and a corporate look and feel. Consistency
among pages provides a common user experience for IBM
employees no matter where they travel on the intranet.

The new w3v8 site has been designed to make it very easy to
implement. It is flexible and can adapt to your specific
content.

The page templates provide the common elements that will

aid in providing a consistent look to each w3v8 page. This
section describes the common elements across all pages and
provides sample pages so you can choose the template that
will best suit your development needs.
 Single portal page
Page styles
To support the many uses of the w3
intranet, the new w3v8 design allows for
a variety of page styles. You can choose
the one that best fits your site’s needs.

Two-column page with left navigation menu

Masthead
The masthead is a required element that appears at the top of every w3 page.

The masthead will vary slightly depending on the type of page and the personalization
functions available for the site.

Site title Personalization Persistent links

w3 site mark w3 search IBM logo
Terms of use
New to w3v8 is the mandatory Terms of use link at the bottom of every page. This
link is a legal requirement and displays standard legal text disclosing the use of the
content of w3 intranet pages and applications.

There are two Terms of use pages. The one you link depends on the content of your
page. Information based pages link to a simplified version of the legal statement.
Application pages require additional text on the Terms of use page.
Cascading style sheets (CSS)
The w3v8 templates link to a collection of cascading style sheets that define the
presentation characteristics of many page elements. By defining the presentation of
content elements, using cascading style sheets allows developers to focus on the
content itself.

The w3v8 template includes the following CSS files:

• screen.css
• interior.css
• interior-1-col.css
• interior-no-nav.css
• portal.css
• icons.css
• tables.css
• popup-window.css
• popup-help.css
• print.css
• v4-screen.css

For more information on using the w3v8 templates and cascading style sheets, refer
to the Technical standards section of the IBM Intranet Standards site.
What else does the template do?
In addition to providing the required elements on a page (masthead, Terms of use,
and the look and feel), the w3v8 templates provides this functionality:

Accessibility prolog
The accessibility prolog provides quick navigation for the page. It details the access
keys that have been implemented to allow the user to skip navigation elements
quickly.

Browser notification
The browser notification includes detection code to determine the browser level being
used. If an unsupported browser is detected, only a simplified masthead and a
notification appear. The notification explains that the page is best viewed in a modern
browser and provides a link to ISSI so the user can download a newer version of the
browser.
Template generator
Use of the w3v8 templates is now required. The w3v8 templates make extended use
of cascading style sheets to ensure a consistent user experience across the w3
domain.

To get started with interior pages, visit the Template generator within the w3 design
standards. The generator offers templates for the following page styles:

Two-column with left navigation menu

Single-column with left navigation menu
Single-column page with no left navigation menu
Pop-up window and custom dialog box

For portal pages, see the “Portal themes” topic in the design standards to download
the w3v8 themes and skins the template.

For a Notes template, visit the developer’s depot.

Progress check
The next section describes the navigation schemes available for w3v8 sites.
Standards have been defined for the left navigation menu, a tabbed interface, lower-
level navigation, page-level navigation and supplemental navigation pages.

► Page styles and templates

► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Navigation
w3v8 provides more flexible navigation options to meet the needs of
the most demanding information architecture.

The w3 design allows for a variety of navigational systems to support

different information architectures for sites.

Some important notes about your site’s information architecture:

• Create a robust information architecture.

• Reflect the information architecture in the site’s navigation scheme.

The w3 design standards include a topic on information architecture to

aide you in designing the navigation and structure of your site.
Left navigation menu
The left navigation menu is the primary
navigation device on w3 Web sites. With
some exceptions, all pages that occur in
the first, second, and third levels of a
site's information hierarchy are
represented within the left navigation
menu.

Also, the left navigation menu is no longer

a required element on the page. There are
certain instances where a page without
left navigation is most appropriate.

What’s most important when designing a

site’s navigation is that the user can easily
navigate between the site’s pages and
quickly find the information they need.
Lower-level navigation options
New lower-level navigation devices may be used in conjunction with the left
navigation menu to expose 4th and lower-level pages within a site. You now have the
following options for lower-level navigation:
Tabs
Graphic tabs are another new navigation device available for w3v8
design. Tabs can be used at three different levels of the information
architecture:

• Site-level tabs
• Page-level tabs
• Section tabs
Page-level navigation
Providing a consistent and
predictable set of navigation links on
a page gives the user a sense of the
page and its place within the site's
organization. Page-level links also
make the logic and order of the page
visually explicit.

Page-level navigation options

include:

• Anchor links
• Embedded links
• Link lists
• Paging links
• Icon links
Supplemental navigation
New standards have also been defined for supplemental navigation elements,
including directory lists, site maps, and site indexes.
Progress check
The next section describes the content area elements that typically appear
within a w3v8 page. Content area elements include page titles, headings,
body text, tables and discussion areas.

► Page styles and templates

► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Content area elements
The content area is flexible to accommodate a variety of presentation needs. The
w3v8 templates define the proper placement and visual treatment of most elements
on a page to ensure a consistent user experience across the intranet.

The design of the content area elements is based on user-centered design principles
and studies on how people most efficiently use Web pages.
Content area layout
The content area is the space not required for the masthead or left navigation. The
size of the content area will vary depending on the overall style of your page.

The areas outlined in

red indicate the
primary content area
available on the page
designs. The layout
within the content
area is flexible to
accommodate many
page types. Sample
layouts are shown
below.
Content header
The area at the top of an interior page, directly below the masthead, is reserved for
several content header elements, including a page date and breadcrumbs. Content
within these elements is optional; however, they must follow the standards when used
on a page.
Page elements
Design standards have been defined for most common
elements on a Web page, including the following:
• Page title
• Headings
• Text treatments
• Primary content
• Sidebar content
• Tables
 Table design
There is now a common style sheet for tables used on w3. The tables.css provides
many of the basic elements of a table to make coding easier. For example, the
common style sheet sets attributes, including font and font size, table borders,
alignment of table headers and alternating row colors.

The tables.css includes classes

for the different colors
available for table headers.
These colors comply with the
w3v8 color palette.

For more information on the

tables.css and how to
implement it, refer to the
Technical standards section of
the IBM Intranet Standards
site.
Progress check
The next section describes the use of graphics and images on w3v8 pages. The
Graphics and images section of the standards cover requirements for color palette, icons
and buttons, charts and graphs, and placement of images on a page.

►Page styles and templates

► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Graphics and images
Using graphics and images on your Web pages can enhance the user experience and
the information provided by the page. Graphics include original illustrations,
photographs, and charts.
 Color palette
The w3v8 style provides four distinct color palettes. The cascading style sheets define
class names for each color to make them easier to incorporate on your pages.
Primary color palette Supporting color palette

Secondary color palette

Alert color palette
Icons and buttons
The w3v8 template includes a new set of stylized icons that complement the color
palette. W3 intranet sites should use only the approved icons. Here is a sampling of
the common icons available.
Buttons Status icons

Security icons Sort icons

Document icons

Link icons
Charts and graphs
In addition to the new icons and color palettes, new templates are available for
creating charts in Adobe PhotoShop, Lotus Freelance Graphics, and Microsoft Excel.
The basic design of charts has remained the same. The templates have been updated
to use the colors from the secondary and supporting color palettes to coordinate with
the primary colors in the design.
Progress check
The next section describes the use of interactive content on a w3v8 site.
Interactive content elements include forms, messages, page tools and
multimedia presentations.
► Page styles and templates
► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Interactive content
Interactive content engages the user and can be an effective means of sharing
information. Interactive content means that the user interacts with the site.
Interactive content gives the user something more to do than read.

The interactive content supported on w3v8 sites include:

• Multimedia
• Forms
• Message design
• Page tools
• Country and language selection

Many of these elements are new to w3 and have new requirements for including on
w3 pages.
Multimedia
Multimedia elements incorporated in w3 pages can give your users an interactive
and engaging experience. Multimedia elements can enhance the delivery of
information and training and draw the user's attention to important points on a
page.

Macromedia® Flash can provide a rich, interactive, engaging experience to site

visitors and can enhance the delivery of information.

Use animated GIFs if they accomplish specific communication goals more

effectively than a static image.

Video is also an appropriate method for sharing information. For example, video is a
great way to show how to repair a system.

Audio provides another way of delivering information to IBM employees. Although

you could just provide a script, hearing the inflections in someone's voice can add
meaning to the message.

Each type of multimedia element has certain requirements and considerations when
used on a w3 page.
Form design
Forms provide a way for users to
enter information to complete specific
tasks, such as indicating medical and
dental plan choices, providing
feedback, or filling out an order to
purchase products. Electronic forms
may have paper equivalents in the
real world.

The form design standards have not

changed much since the previous
version of w3. The main
enhancement is the new stylized
action buttons that complete the
other page design elements.
Message design
Message design is a new topic within
the design standards. With consistent
messages across applications on the
w3 domain, the users will quickly learn
to recognize and correct errors when
they occur.

The w3v8 design allows both message

dialogs and in-context messages. How
you display your messages should
depend on the application and how the
messages would best serve the user.
Page tools
New option for extending the user
experience include these page
tools:

•
•
•

These page tools are typically

grouped together on the page. If
used, they must be placed at the
bottom of the main content area.
They can also be placed in a section
within the sidebar.
Country and language selection
IBM web sites should function as a global resource, with links, where
appropriate, to country-specific information and news presented in the
appropriate national language. A given web site is usable only if all individuals
that access it can effectively understand the content and navigate the site's
pages. The standards provide information on means of providing users access
to content in multiple languages.
Progress check
The next section describes the use of secondary pop-up windows and
custom dialog boxes.

► Page styles and templates

► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Secondary windows
A pop-up window is a smaller, secondary browser window that appears on top of the
primary browser window. Pop-up windows have unique design elements to distinguish
them from primary browser windows. Pop-up windows are best used to display supplemental
information pertinent to the task at hand, such as online help.
A pop-up window displays a simplified masthead to maintain the connection with w3.
Custom dialog boxes
Custom dialog boxes are used to collect input from users. They can contain a variety
of interface objects, such as text fields, radio buttons, check boxes, list boxes, and so
on. These interface objects should be well grouped and sized to fit within the dialog
boundaries.
In the w3v8 design, custom dialog boxes can be expanded to show additional
information. For example, if a custom dialog box is used to collect data, the expanded
section of the dialog box could display online help for completing the fields in the
dialog.
Progress check
The local search section describes the implementation of a site-level search
function for a w3v8 site. There are three options for providing a search dialog.
There are also requirements for displaying the search results.
► Page styles and templates
► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Local search
The w3 search dialog appears in the masthead throughout the intranet. Local
search can also be included in the masthead, using the local search option.

Providing a local search function allows users to search part, or all, of your Web
site for content matching a specific search string. The results are restricted to
your particular site or a subsection of it, as opposed to searches across the w3
intranet. Through a local search users can find information relevant to their
particular interest.

The Local search standards provides extensive coverage of custom simple

search and custom complex search dialogs.
Search dialogs
There are three types of search dialogs. The requirements differ for each type.

• Basic local search

• Custom simple search
• Custom complex search
Search results
Search results pages summarize the content that has been retrieved. The
information displayed on the search results pages of your site should depend on
the content that is being searched and the information needs of the site's users.

Site owners must provide a search results page if the site provides a local
search facility. Also provide a Empty results page for cases when no matches
are found for the search criteria.

A w3v8 template of a well-designed search results page is available from the

design standards.
Table of contents
The next section describes the requirements for deploying portal pages on the
w3 domain. These requirements are grounded in research performed by a
Portal Workgroup across many organizations within IBM.

► Page styles and templates

► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Portal design
A portal provides a single point of access to multiple information sources, tools,
and applications. Each information source can be accessed through a "portlet."
Portlets provide access to applications, web-based content, and other
resources (for example, Web pages, Web services, applications, and content
feeds from information sources, like a news feed).

w3v8 provides new standards on portal design, defining portal functionality

and look and feel, as well as tools and methods for ensuring consistent design
across w3.

The portal and portlet standards are grounded in research performed by the
Portal Workgroup and special interest groups. The workgroup was a
collaborative effort involving designers, human factors professionals,
information designers and others from organizations across IBM. The special
interest groups investigated various design elements of portals and portlets
that make them easier to use.

The standards provide a roadmap to follow in designing and deploying portals

on w3.

• All portals designed for the w3 intranet must use the WebSphere Portal
Server (WPS) technology.
• Portals must follow the defined portal deployment process.
w3v8 portal theme
There are two main user interface enablers on WPS, the theme and the skin. The theme
establishes the design framework, the "look and feel" for the masthead, the portal page
navigation device, if applicable, and columns within the content space.

• w3v8 has implemented a new w3v8 theme that must be used by all portals to
control the look and feel of the portal. The theme is available for download.

• w3v8 provides a portal page template to be used for all portal pages.

• Portal pages may contain only

portlets and not HTML content.

• Through the portal templates,

w3v8 provides both portal tabs
and left navigation menu to
navigate between portal pages.
Portal personalization
Common profile data is available
through several sources within
IBM, including w3 profile cookie,
w3 profile API and BluePages.

You must use the data from these

sources if it contains the data
values you need. First check the
data values in the w3 profile
cookie, then the w3 profile API,
and, finally, the BluePages record.
Portal customization
WebSphere Portal Server (WPS) supports user-driven customized portals. w3v8
provides a “Page layout” application to be used by portals to provide the functions of
customizing portal pages.
Progress check
The next section describes the requirements for designing and
implementing portlets on portal pages.
► Page styles and templates
► Navigation
► Content area elements
► Graphics and images
► Interactive content
► Secondary windows
► Local search
► Portal design
► Portlet design
Portlet design

w3v8 provides thoroughly revised

standards on portlet design, defining portlet
functionality and look and feel, as well as
tools and methods for ensuring consistent
design across w3. The standards provide a
roadmap to follow in designing and deploying
portlets on w3 and for the On Demand
Workplace.

All portlets designed for the w3 intranet must

use the WebSphere Portal Server technology.

Portlets must follow the applicable portal

deployment process
Portlet skins

Portlets deployed on the IBM intranet must

use the w3v8 skins to conform to the w3
common look and feel. The skins are
comprised of the following elements:

• Title bar
• Portlet title
• Color
• Borders
• Icons

The skins are available for download within

the ‘Portlet skins” topic in the w3 design
standards.
Portlet icons

Portlet icons help users navigate through the portlet. They provide different views of
the portlet's content. These icons are a part of the portlet skin.

Portlet icons are placed on the right side of the portlet title bar. Although there are a
fixed set of portlet icons, the ones displayed in a portlet will vary according to the
functions associated with that portlet.
Portlet views
The standards define the portlet views,
when to use those views, how to
design navigation to and from those
views, and how to design content for
those views. This includes the
following views:

• Default
• Minimize
• Maximize
• Edit portlet settings
• Help
• Configure
Dependent portlets
Portlets, which provide access to various
sources of information, can be independent
of all other portlets or they can depend on
content or functionality from other portlets.

Portlets are able to drive content in other

portlets in peer-to-peer or parent-to-child
relationships. With some restrictions, w3v8
allows interdependent portlets to be
deployed on portals other than the On
Demand Workplace.
Designing portlets for the
On Demand Workplace
On Demand Workplace (ODW)
portlets must meet specific design
and deployment criteria, in
addition to the standards for
portlet design.
Keeping up with changes
As the standards are revised, the What’s new page will list changes and their
effective dates. Visit this page often to ensure you are familiar with the latest set
of standards.
Thank you
We hope you have found this tutorial helpful and informative. Please see the w3
design standards for complete details on the requirements for designing and
developing Web sites, pages and applications for the w3 intranet.

To exit the tutorial, simply close the window.