IEEE Main Site Style Guide

Click the topic of interest below to review related styles and standards.

Usability is the ease with which people can employ a specific tool or object in order to achieve a particular goal. Sites designed with human psychology and physiology in mind are deemed highly usable. Creating a highly usable site is a primary objective for the IEEE for the following reasons:

• less time for users to accomplish a particular task;
• easier for users to learn;
• more satisfying to use.

Before you begin to write any content, consider the following.

• Who is your audience?
• What content are they looking for?
• What do they know about the topic/issue?
• What are their reasons for reading this text/page?

table of contents

As of 1998, under Section 508 (29 U.S.C. ‘794d), Federal agencies must give disabled employees and members of the public access to information that is comparable to the access available to others. IEEE strives to maintain a Web presence in accordance with Section 508, so as not to further an individual's ability to obtain and use IEEE information quickly and easily. You can assist with this process by adhering to the following:

W3C outlines the major components of accessibility on the Web:

• Use the alt attribute with images and animations to describe the function of each visual.
• Provide captioning and transcripts of audio, and descriptions of video for multimedia files.
• Write hyperlink text links that make sense when read out of context. For example, avoid "click here."
• Organize your pages by using headings, lists, and consistent structure. Always use the default styles in the templates.
• Summarize graphs or charts or use the longdesc attribute.
• Provide alternative content for scripts, applets, and plug-ins in case active features are inaccessible or unsupported.
• Create tables that make sense line by line, and summarize the content.
• Avoid flashing or flickering elements as this may trigger a seizure for some individuals.

508-compliant sites offer significant advantages that go beyond accessibility. For example, those with "text-only" options provide a faster downloading alternative and can facilitate transmission of web-based data to cell phones and personal digital assistants.

More information about creating accessible Web content can be found at the Section 508 Web site.

For additional resources, visit:
Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
Web Accessibility Initiative (WAI) Quick Tips

table of contents

Importance of consistency

Consistency is the cornerstone of usability. As the user moves through a site, the visual treatment provides instant reassurance that they are still in the same place, and gives an overall impression of professionalism and reliability. Visual treatment applies not only to obvious elements like logos and navigation, but also to content elements, fonts, and backgrounds. Both internal and external consistency should be considered.

• Internally, consistency occurs when content providers apply standards and conventions throughout all site content (i.e., the search tool is found in the same place on every page).   
• External consistency refers to consistency with general practice. Users bring their own experience and expectations to any site they visit. If you ignore that, you risk causing confusion and alienation.

Although IEEE Web publishers often think of their web pages as an individual site, they are actually just a section of the overall IEEE Web site. As visitors move from page to page on the site, they should not be aware that different areas of content have been developed by different individuals.  Here are some guidelines and best practices all IEEE publishers should follow to provide a seamless experience and a consistent voice for site visitors.

• Use the organization name, not “we” or “our”, i.e., "IEEE conducts meetings.." or "The Regional Activities Board will meet...".Write in the third person.
• Use the second person for instructional material. For public content where information is directed at the user, refer to the user as “you.”
• Use common language. Compared to print, the Web is a more informal and immediate medium. Be sure that all potential audiences understand the content.
• Focus on the user’s needs rather than presenting the organizational view of IEEE. Only describe individual organizational units (OUs) or Boards when doing so is integral to the user's understanding of the surrounding content or when soliciting user involvement in the organization.
• Avoid making exaggerated claims or using promotional language to describe products and services. Use factual, objective information in place of “marketese” to present information more objectively.
• Avoid IEEE jargon and terms or explanations that may not be understood by non-members or a more general audience. Spell out acronyms on first usage or avoid entirely if not essential.
• Write in the active voice, which emphasizes the “doer” of the action, not the “receiver.”
  Yes - “IEEE members hold more patents than any other professional society members.”
  No - “More patents have been awarded to IEEE members than to members of any other professional society.”
  (The first sentence is shorter, yet it conveys the same message as the other; it also more accurately describes what IEEE does.)
• Use conventional terminology when providing directions or instructions. There is a varied understanding among users as to what many Web site features are called. If using acronyms or terminology specific to IEEE, make sure to explain or define it as needed.
• Avoid using self-referential terms, such as “click here,” “follow this link,” and “this Web site.” Writing well for the Web means taking advantage of the options the Web offers but, at the same time, not calling attention to the Web medium.

table of contents


References to IEEE

Avoid adding an apostrophe to the name IEEE, such as "IEEE's publication…" Instead use “... publication of IEEE.”

Use “IEEE,” not the “Institute of Electrical and Electronics Engineers” or “the Institute.”

Use “IEEE” not “we” or "our,” but only use IEEE when referring to an activity or policy of the overall organization.

When “IEEE” is part of the name of a product, publication, service, society or other title, it should never be dropped. This applies to first and subsequent references. (Examples: IEEE Xplore®, IEEE Spectrum, IEEE Computer Society)

table of contents


Color palette

Usage of the following browser-safe color palette—which will automatically be applied to unformatted text in the content management system through cascading style sheets—ensures that pages remain consistent, user friendly, and visually appealing. Use of these colors for purposes other than those specified, or use of colors not included on the palette, should be approved by the Web team.

table of contents

Typography

Cascading style sheets (CSS) globally control text formatting for the site to allow site-wide changes to font style, color, and size via one edit to the style sheet. When creating content in CMS, accept all default fonts rather than changing fonts within the applet which will override the style sheets.

Often when you migrate text from another environment into CMS, the system retains the original formatting. This results in display inconsistencies and disables the text resizing tool. Open a Help Desk ticket if you need help returning fonts to the default settings. To avoid this problem, first "Paste" content into a program such as Notepad which will clear all formatting. Then you can "Copy" the content out of Notepad to "Paste" into CMS.

table of contents

Templates and layout

Page templates are used to allow IEEE Web publishers to display elements consistently throughout the site. They unify the look and feel of non-editable page elements, such as:

• header with IEEE Master Brand and utility links (i.e., search, sitemap);
• footer;
• primary navigation (tabs);

as well as editable page elements such as:

• left-hand navigation;
• modules (content);
• breadcrumbs.

table of contents

Templates and layout

Depending on the type of content, there are different layout options with varying levels of navigation including:

1. Three Column Layout: provides both left (contextual) navigation and right (what do you want to do) navigation;
2. Two Column (Left) Layout: provides contextual navigation to key areas within that section of the site.

table of contents

Naming files and folders

Unlike the names of files on your personal computer, the names of your files and folders in the content management system are not purely for your own reference. The names help users understand where they are within the Web site, and to navigate back to particular content. The names also appear within the URL address. The following guidelines should be used:

• When creating a collection of pages (a section), place all pages in a single directory.
• It is not necessary to repeat words that appear within the directory name in the file name.
• Directory and file names should be made as short as possible, while still having meaning to the user, to avoid excessively long URLs.
• The landing page of a section should be named "index," while all other files (pages) within the folder should have names that refer to the page title.
• Each file name within a folder should be unique.
• Use all lowercase and avoid special characters when creating file and folder names. Subscripts (_) are the preferred standard (if necessary) when naming files and folders.

table of contents

Page length

Short pages, those containing one or two screens of text at most, work best for the first few levels of a Web site where users are scanning for link choices. Longer pages (those that require more scrolling) may be more acceptable deeper within the site where related content can be printed and read later.

The primary measure of page length should be content. Think through your material; create logical divisions and subdivisions based on the structure of your information. You should not arbitrarily divide your information simply to conform to acceptable page length.

When creating deeper pages within the site, where scrolling may not be avoidable, the following devices should be considered to make the content more easily readable and navigable:

• anchor links to bookmarks throughout the page with "back" links to return the user to "top of page";
• subheadings and relevant links (where appropriate) to serve as signposts for the user;
• bulleted copy and meaningful graphics;
• pull quotes to break up larger blocks of text;
• end links allowing the user to access other relevant pages without having to scroll back to the top of the page.

table of contents

Landing pages

Landing pages are the "home" or "index" pages within a Web site section. There is only one landing page for each section. Generally speaking, short pages containing one or two screens of text at most, work best for the first few levels of a Web site where users are scanning for link choices. Landing pages should serve as an overview for the section and may also introduce the newest information added or changes to the site section.

table of contents

Placement of page elements

Place images and text on pages in a way that creates a clear visual hierarchy in order to :

• show importance or priority of elements on the page;
• show relationships between elements;
• aid scanning and comprehension.

The IEEE Web site uses left alignment for headings, sub-headings and text. Centered text prevents the user from quickly scanning down a single column on a page.

To follow are some ways to show importance or priority.

• place important elements nearer the top of the page;
• highlight key topics as section headers;
• use white space around important elements to make them stand out.

To follow are some ways to show relationships between content.

• grouping items together or placing them in proximity to each other shows similarity;
• nesting items under another item shows a child/parent relationship;
• items presented with the same color, size, orientation or font style may indicate their similarity.

Other tips for creating a more readable, interesting page layout include:

• using headings and sub-headings;
• breaking text into short paragraphs;
• using bulleted lists;
• incorporating links to other relevant content within your text;
• using left and right columns for appropriate content;
• using images, charts, graphs and/or tables to present or support complex information.

table of contents

Copy width

Lines of text should be no longer than half the width of the screen.  Using the three-column template in the content management system of the IEEE Web site will ensure that your copy is not too wide.  This option can be used regardless of whether you are planning to have right column content.

table of contents

Interactivity Guidelines

Follow these guidelines when designing an interactive user experience:

• When asking a user to begin an interactive process, clearly identify the number of steps at the beginning of multi-page sequences. i.e.: Page 1 of 8.
• Place controls (such as buttons) consistently on the right side, to indicate action.
• When asking a user to complete a form, clearly mark all required fields. Provide an offline option (such as a telephone number) just in case.
• Provide an e-mail address or telephone help number for the user.
• Avoid pop-ups. If unavoidable, never use them until after the user has traveled two or three clicks into the site. User-activated pop-ups (such as a glossary or a tutorial) may be used to assist the user in order to avoid leaving the original page.
• Clearly indicate free versus subscription-based content before users venture the link to access the content. If login is required, make username and password fields available on the page or clearly indicate that the content "requires login" to avoid an unexpected a browser prompt.
• Always declare non-HTML files in advance, and provide an HTML version of the content as the primary presentation, when possible. Indicate file type and size.
• Word documents should only be used in rare circumstances. PDF files should only be used when document formatting must be retained. Neither format should be used simply to avoid the extra effort of creating an HTML version. Convenience to the user should be primary.

table of contents

Definition and types of content

Content is defined as any piece of information. Here are some examples of page elements that may individually or collectively be considered content:

• contact information (name, phone number, e-mail address, etc.);
• meaningful images or illustrations;
• a paragraph, set of bullets, or other copy (words) with or without contextual links.

Page elements have content implications, but will be addressed separately from content in this guide. Page elements, which help organize and synthesize content, include:

• navigation;
• page headers and footers;
• interactive devices;
• stand-alone links.

table of contents


Amount of content

Short pages, those containing one or two screens of text at most, work best for the first few levels of a Web site where users are scanning for link choices. Longer pages (those that require more scrolling) may be more acceptable deeper within the site where related content can be printed and read later.

The primary measure of page length should be content. Think through your material; create logical divisions and subdivisions based on the structure of your information. You should not arbitrarily divide your information simply to conform to acceptable page length.

When creating deeper pages within the site, where scrolling may not be avoidable, the following devices should be considered to make the content more easily readable and navigable:

• anchor links to bookmarks throughout the page with "top of page" links;
• subheadings and relevant links (where appropriate) to serve as signposts for the user;
• bulleted copy and meaningful graphics or pull quotes to break up larger blocks of text;
• end links allowing the user to access other relevant pages without having to scroll back to the top of the page.

table of contents


Legal considerations

Using content from someone else’s Web site without asking permission is considered copyright infringement even if the copied content does not display a copyright notice. In the US, practically everything considered a private work and created after 1 April 1989 is copyrighted and protected, whether or not it has a notice. This also applies to pictures and graphics, as well as scanned pictures from magazines.

table of contents

Timeliness of content

Update pages regularly in order to keep information timely and accurate. Data such as statistics, numbers, and examples all need to be recent and up-to-date. If such information is outdated, your credibility and the credibility of your pages suffers. Users will be less apt to trust any information they come across on a site if some of the information is found to be outdated.

For content housed within the IEEE Content Management System, a mechanism is provided to associate expiration dates with objects. This will assist you in keeping content current.

table of contents

Writing for the Web verses writing for print

Writing for the Web is very different than writing for print. You cannot simply move your print documents onto Web pages. This would not be using the medium to its best advantage. Developing content for a Web site very often means writing new material.

Web readers typically do not read a page from start to finish on the computer screen. Instead, they scan a site for relevant items and then print the information for later use. Generally speaking, word count of a written piece for the Web should be about half the word count used when writing for print.

table of contents


Printing verses reading online

If your topic includes extensive information, dividing it into multiple pages may make it easier to read online. However, many people prefer to read lengthy or complicated texts offline. Multiple pages will make it harder for users to print your information. Therefore, if your content is likely to be printed, either present it as a single Web page or divide it into subdivisions. The user will be able to print the content using the "printer friendly" icon. 

table of contents


Considering user goals and language

When describing something a user can do on the Web site, describe it in terms the user would use or easily understand. The imperative voice (commanding) is attention-grabbing and helpful, so it should go at the front of a phrase, i.e., "Find XYZ here," "Subscribe to XYZ," "Place order." The user likes to feel like he or she is in control.

English is the default language for IEEE Web pages, and all content should reflect this. If you would like more information on Web page translation or would like to see a list of IEEE sites in other languages, please visit the IEEE Transnational Resources page.

table of contents


Establishing context

Since users can enter a Web site at any page and move between pages as they chose, every page should be independent. Explain the topic of each page without making assumptions about the previous page seen by the user. Links to background or explanatory information help users who do not have the necessary knowledge to understand the page itself.

table of contents


Scannability

The following tactics will help ensure that Web readers will maximize the information you are presenting to them.

• Use shorter (50-80 characters per line) rather than longer line lengths (100 characters per line).
• Links can perform double duty as highlighted keywords since hyperlinks already stand out by virtue of being colored.
• Use lists rather than paragraphs wherever possible.
• Include only one main idea in each paragraph.
• Put the most important information at the top so users don’t have to scroll. Start the page with the conclusion as well as a short summary of the remaining content.
• Use headings to guide the reader through the relevant points in the document.
• Never use capitalization for emphasis.
• Keep it simple. Complicated writing and complex words are even harder to understand online. Write to the point, avoiding flowery language.
• Be concise and focused. Provide useful and usable content that supports the goals of the Web site.

table of contents


Making effective use of lists

Follow these guidelines when presenting your content in a list format.

• Use numbered lists when the order of entries is important.
• Use bulleted lists whenever the order of the entries is not important.
• Generally, limit the number of items in a single list to no more than nine.
• Generally, limit lists to no more than two levels: primary and secondary.

table of contents


Data and statistics

When using statistical data on your page, make sure the information is current and up-to-date.

All statistical data should be accompanied by the source from which it was derived along with the date the data was compiled.

table of contents


International writing conventions

• Dates: According to Section 9 of the IEEE Bylaws, the following standard date formats should be used:
  Formal correspondence: DD Month YYYY (example: 17 September 1999)
  Computer applications including the Web: YYYY-MM-DD (example: 1999-09-17)Another choice is the "short form," which appears as: YY-MM-DD (example: 99-09-17). However, use the long form whenever possible.
• Phone numbers: The IEEE style for listing US phone numbers is: plus sign/one/area code/number (Example: +1 732 555 1212). When providing non-US phone numbers, always use the correct country code. When creating Web forms for broader audiences, make sure that the confirmation does not automatically attach the US code to all telephone numbers.
• Seasons: When it’s winter or fall in the US, it’s spring or summer in other parts of the world. Instead of referring to a time period by season, use the month or quarter of the year.
• Time Zone: Although the IEEE Bylaws do not specify time format, we recommend using local, military, and UTC (example: 2:00 p.m. EST / 14:00 / 1800 UTC-05). Please refer to Time and Date and always specify the time zone you are referencing.
• Currency: When referencing to US currency, include a “US” in front of the dollar sign (Example: US$25).
• Humor and Colloquialism: Avoid using puns, clichés, popular expressions, and jargon in your writing; most won’t translate across cultures.

table of contents


Numbering conventions

When using a number between zero and ten, spell out the number (i.e., “3” or "10").

When using any number higher than ten, use the numeric version (i.e., "12" or “300”).

table of contents


British spellings and terminology

Change all British spellings to American spellings.

In particular, watch for “our” endings in words like:

• “behaviour” (change to “behavior”);
• “colour” (change to “color”);
• “favourite” (change to “favorite”)

“re” endings in words like:

• “centre” (change to “center”);
• “metre” (change to “meter”);
• “theatre” (change to “theater”);

 “s” rather than “z” in words like:

• “polarisation” (change to “polarization”);
• “analyse” (change to “analyze”);
• “criticise” (change to “criticize”);

“gue” rather than “og” in words like:

• “catalogue” (change to “catalog”);
• “dialogue” (change to “dialog”);
• “analogue” (change to “analog”).

table of contents


Plurals

Adhere to standard grammar and punctuation rules when it comes to pluralization of typical words. The plural of calendar years do not take the apostrophe before the “s.” For example, the plural form of 1990 is 1990s.

table of contents


Hyphens, en dashes, and em dashes

The hyphen is the shortest of the three and is used most commonly to combine words (compounds such as "well-being" and "advanced-level," for example) and to separate numbers that are not inclusive (phone numbers and Social Security numbers, for example).

The en dash is slightly longer than the hyphen but not as long as the em dash. (It is, in fact, the width of a typesetter's letter "N," whereas the em dash is the width of the letter "M"—thus their names.)

The en dash represents the words “to,” “through,” or “and.” Use it between page numbers, years, names, a range of values, or for opposites. For example:

• pp. 10–15
• 1984–1990
• Jones–Smith theorem
• 10–20 cm.

When using the en dash to represent a range, if the word “from” occurs, the word “to” must be used rather than the en dash (i.e., “ranges from 5 to 50 times”).

The em dash, is used in ordinary writing to mark a suspension of the sentence. It is also used like parentheses, to mark a subordinate thought within a sentence. For example:

• The meeting was long—one volunteer fell asleep—but productive.

table of contents

Words that are often confused

affect: to change or modify (verb)
effect: result (noun); cause (verb)

alternate: a substitute
alternative: a matter of choice

among: relationship involving more than two things

between: relationship involving two things

compare to: point out resemblance between different objects
compare with: point out differences between same objects

compose: to create or put together
comprise: to contain or embrace

farther: distance
further: quantity

fewer: modifies plural nouns specifying countable units, e.g., fewer tubes
less: modifies singular mass nouns and singular abstract nouns, e.g., less air

imply: something suggested though not expressed
infer: something deduced from evidence

number: a large number of people
amount: a large amount of water

principal: chief, main, most important (adjective)
principle: a rule (noun)

precede: come before
proceed: continue, advance

that: (defining, restrictive)
which: (nondefining, nonrestrictive)

table of contents

Graphics as content

Graphic elements on a page are an important part of a visitor's impression of the IEEE Web site and, consequently, of the IEEE brand.  Graphics should only be added after careful consideration has determined that they align with the overall look of the Web site and add value to the user experience.

Usability testing shows that clip-art and stock photography is not valued by many of our users, and should therefore be avoided in favor of "real" images that help to illustrate a point, or in favor of no imagery. When images are used, captions should be included to clearly and specifically explain what is being shown.

When to use graphics and images

Images should be used sparingly to enhance the written content and add to the visual interest of the page. IEEE.org users like images that have an obvious purpose.

Be tasteful and don't let images overwhelm the user.

table of contents

Formats and types

• The most widely used and supported graphics format on the Web is GIF. Most of the major Web browsers now also support JPEG.
• For photographs, a JPEG generally provides excellent quality with much smaller file sizes than GIF, but it does not work as well as GIF for line art and art with large blocks of color.
• It is recommended that representative samples of graphics be converted to both GIF and JPEG, then compare file sizes, image quality, and downloading speeds before making a final decision.
• GIF: solid colored images, line art, clip art, 256 colors maximum, transparent images.
• JPEG: photographs, continuous tone images, gradients
• Graphics created on Macs which have higher quality video may not look as good on a PC. Graphics should be checked on an older Windows machine with a low-end video card. Also, Mac monitors tend to be brighter than PCs.

table of contents

Size and quality optimization

• • To assure reasonable performance for most users, Web pages should not exceed the maximum of 30-45K, including graphics. Therefore, it is important to optimize images before inserting them into your Web page. Scaling the image in a content management system will not reduce the size of the file.
  • Avoid large mapped graphic menus. They may be very slow to load, and take longer to comprehend than simple menu lists.
  • Reduce resolution to 72 dpi. Some computer monitors cannot display higher resolutions and file size increases with resolution.
  • Choose your colors wisely (fewer colors = lower file size). Reduce color depth of GIF graphics to less than 8 bits (256 colors). Depending on the nature of a graphic, 7-bit or 6-bit color (or even lower) may be acceptable, particularly if the graphic has limited colors. Use browser safe colors.
  • Keep graphics small (i.e., 10K or less for thumbnails and 40K or less for full size graphics), or it will make the downloading of your pages unacceptably slow.
  • Test your graphics on multiple Web browsers.
  • When you create a hyperlink from a graphic image, a border will be placed around the graphic. To remove the border, set "border" to "zero" in the image properties.

table of contents

Graphics compression

There are a variety of software packages available to assist you in compressing your graphics for use on the Web, including NetMechanic Acceleration GIFBot and Macromedia Fireworks. Visit NetMechanic and download GIFBot software for free. It will compress both JPEGs and GIFs by up to 90%.

The following online tutorials offer information on optimizing your graphics for the Web.

Web Reference's Graphics Optimization
Web Reference's Graphics Compression

Naming graphics files

Just as your folder names created in the content management system will become part of the content URL, graphic file names will as well. For this reason, many of the same naming guidelines apply.

• It is not necessary to repeat words that appear within the directory name in the file name.
• File names should be made as short as possible, while still having meaning to the user, to avoid excessively long URLs.
• Each file name within a folder should be unique.
• Use all lowercase and avoid special characters when creating file and folder names. Underscores (_) or hyphens (-) are acceptable.

table of contents

Captioning

Captions should be used to help the user understand the context, content, and source of the image.

Currently there is no special entry field in the content management system for captioning images. The best method for captioning graphics that appear within a column of text is to place the graphic and the text into a table. This will allow you to place the caption directly below the image, without impacting the body copy.

table of contents

Accessibility considerations

It is important to provide meaningful text substitutes for users who don't display images. For example, when picturing the medal of honor recipient, use "IEEE Medal of Honor recipient" instead of simply "man."

Alt tags can be used to give both disabled and non-disabled users a higher confidence that what they are clicking on will bring them to their desired destination.

table of contents

Animations and backgrounds

IEEE Corporate Web Team pages should have a white background. Background graphics should be avoided.

Do not use GIF animation except in very special circumstances (i.e., instructional purposes) with Web team permission, due to its distracting nature and effect on file size.

table of contents

IEEE Master Brand

Information regarding use of the IEEE Master Brand (logo) is available in the Brand Identity Toolkit section of the Web site. If you have questions, please contact the IEEE Corporate Strategy and Communications team.

It is not appropriate to incorporate the IEEE Master Brand into background or wallpaper treatments.

table of contents

Legal considerations

Using content from someone else’s Web site without asking permission is considered copyright infringement even if the copied content does not display a copyright notice. In the U.S., practically everything considered a private work and created after 1 April 1989 is copyrighted and protected whether it has a notice or not. This also applies to pictures and graphics, as well as scanned pictures from magazines.

table of contents

Multimedia

Types of navigation

Navigation elements are meant to help users transition between different areas of the site with relative ease.

Left navigation: These modules can be created either globally or applied to an individual file. Up to four left navigation modules can be created. The top module should have a header indicating what section the navigation menu represents (i.e. Conferences Menu, History Center Menu).  Every page of the site should have left navigation.

Left column content

Global left navigation is created through a central file in the content management system. All content within a directory inherits common left navigation. The left column can include an expandable navigation menu and/or a flexible layout module.

• This module is composed of up to 15 primary links.
• Each primary link can include up to ten secondary links through expanded navigation.
• If expanded navigation is used, a minimum of two secondary links should be included with each primary link, and a minimum of two primary links should expand. A single expanded navigation may be overlooked by the user - as evidenced by IEEE usability studies. Header text within each expanded navigation module should be linked to a landing page orienting the user to all of the content within the section.
• Text can also be treated as a header (not linked) within this module.

Additional navigation section module

Use this template to create and format global content in the left column of your Web page that you would like to appear on all of your Web pages within a given folder.

• This module is composed of up to ten primary links (text entered in the primary link text field can be treated as a header; headers are not linked).
• Each primary link can include up to ten secondary links (sub links).

Local left navigation

In addition to global left navigation, content-specific navigation can exist in the left column. This module lets you create layouts with:

• text only;
• list of links;
• header and list of up to five links.

Right Navigation Module: This element is optional and can be created either globally (and applied dynamically to all content within a particular directory) or applied to an individual file. Multiple right navigation modules can be created.

Right column content

There are two types of global module used in the right side column: the Global What Module and the Global Right Module. You can also add local right column content to this column.

Global “What”

Use this template to create and format content within the right column of your Web page (right sidebar navigation and formatted content). By default, this module is located in the upper right hand side of your Web page; also by default the header of this module is named “What do you want to do?” This module can consist of any combination of the following:

• header;
• introduction;
• up to ten links - links can be in an ordered list (numbered or bulleted);
• text only.

Use the "What Do You Want To Do" menu to provide the user with links to related content that is either:

• deep or difficult to find within the Web section;
• located in another section of the Web site and clearly labeled as such.

This menu should not be used to duplicate links in the Global Navigation Menu. Usability studies show that this redundancy is confusing to the user.

What do you want to do? Navigation: This module is generally inserted at the top right of the page layout and is designed to provide visitors with an easy way to find content. Links may be based on usage statistics and could include difficult to find content within the section, or related content in another section of the Web site.

Global right

This “global” module will display on all Web pages within a given folder. Each folder can have a unique Global Right Module if necessary. Up to five global right modules can be included on your Web page. This module allows you to provide links to commonly accessed areas of your page or portal based on web analytics. Each may consist of any combination of the following:

• header;
• header with text “blurb”;
• up to ten links (numbered or bulleted);
• text only.

*Related links are displayed in the right side column but are created using the generic content template which controls the content for the “main area” content.

Right Navigation: In addition to global right navigation, content-specific navigation can be created in the right column with the following layout formats:

• text only;
• list of links;
• header and list of up to five links.

Breadcrumb navigation: These elements are based on which of the Informational Portals the content resides within. The breadcrumb navigation provides visitors both a method of determining where they are on the site and a means to link back to the Section Home Page or IEEE Home Page.

 table of contents

Navigation presentation and naming conventions

Consistency makes sites easier to use, because visitors don't have to learn new tricks as they move around. This is particularly important when planning navigation, as it is one of the first and most commonly used tools on any page of a Web site. Please follow these guidelines.

• Left-hand navigation should serve as a pure menu for the section it resides within. Therefore, links to other areas of the site should be included elsewhere. Repeating them in multiple Navigations confuses the user.
• All links in the left-hand navigation should open an HTML page within the same browser window. This is the expected experience and enables the visitor to go "back" without having to close a window.
• Avoid "mail to" links in navigation menus by creating a contact page where such links can be found. If it is unclear by the link name that a mail window will launch, use an alt-tag or screen-tip indicating "mail window will open" or "mail to:".
• Group similar items into discrete sections using either expanded navigation or navigation headers. This will allow the user to more quickly do a mental sort of the options.
• Navigation should not contain anchor links within the same page unless it is made clear within the heading.
• The optimum number of links within left-side navigation is 5-10, and should not exceed 15.
• "Home" should always link to www.ieee.org. References to the index page of a particular section should not use "Home" as a standalone term. These links should include the name of the specific section (i.e., "Conferences Home," "History Center Home"). Other global terms like "Sitemap" and "Contact" should also be modified within the section to indicate the specific information to which they refer.
• Readers prefer navigation at the bottom of each page (so they don't have to scroll up after they've finished reading). Browsers want the navigation at the top (so they won't have to scroll past content that doesn't interest them). Provide both options by adding "back to top" or other useful links at the bottom of each page.

table of contents

Anchor links

When the user must scroll in order to view all page content and/or content "below the fold" is not obvious from the page title, anchor links should be used to inform the user of all content topics included within the page. The table of contents at the top of this Style Guide is an example of how anchor links can be used to improve usability. Basic navigation and link naming conventions apply to anchor links. When anchor links are used, "top of page" options should also be provided at the bottom of each topic.

Note: Formerly, "back" was accepted use for top of page links, however this has been shown to cause confusion with the browser "back" button. The preferred language is now "top of page."

table of contents

Breadcrumb navigation

Breadcrumb navigation on internal site pages provides additional orientation to users. A breadcrumb trail is a special kind of navigation bar, featuring a hierarchical row of links. As the user moves deeper into the site, the breadcrumb trail should show the closest direct path back to the home page. These elements are based on which of the Informational Portals the content resides within. The breadcrumb navigation provides visitors both a method of determining where they are on the site and a means to link back to the Section Home Page or IEEE Home Page.

table of contents

Text links

• Avoid one-word hyperlinks. Seven words is the ideal link length to provide context to the user. When linking to a file to download, list the file type in parenthesis.
• If it is unclear by the link name that a mail window will launch, use an alt-tag or screen-tip indicating "mail window will open" or "mail to: ."
• “New windows” should only be used for non-HTML pages such as PDF’s or PowerPoint files. This is because the user may inadvertently close the window after viewing such documents. All HTML pages (either on IEEE site or on another site) should open in the same window. Read "Open New Windows for PDF and other Non-Web Documents" from Jakob Nielsen's Alertbox, August 29, 2005 for more information.
• When linking to a site that is not on the IEEE domain (ieee.org), use a "screen tip" (mouseover text) to let the user know they will "launch xyz.com," although this should also be obvious from the link name.
• Write links that accurately describe the information at the destination page. Links within paragraphs should not interfere with the reading of information either on the computer screen or when printed. Avoid the click here syndrome.
  For example:
  Use: "IEEE Web publishers can find graphics approved for Web use in the IEEE Graphics Library."
  Not: "Here is a link to IEEE graphics" or "For IEEE graphics, click here."

table of contents

Redirects

The IEEE offers two types of redirects. Guidelines for redirect use are currently under development. To learn more about redirects, visit the IEEE URL Redirect Registration page of the site.

Supporting files

Supporting files include PDFs, Word, Excel, PowerPoint, and Windows Media Video files.

When possible, HTML Web pages should be used instead of supporting files. Supporting files should not be used as a way to quickly get content on the Web, but rather when appropriate and beneficial to the user’s experience.

Keeping usability in mind, follow these rules for supporting files:   

• Whenever possible, a PDF version of the supporting file should be use to  maintain the document’s integrity and prevents unwanted edits on the document.
  
• When linking to a supporting file, include the file size and type in parentheses. Format should be (TYPE, size). Include the time of Windows Media Video file in parentheses as well. Note: The size of the document can be found under “Properties”.
• All supporting files should open in a new browser window, not the same browser window to prevent the user from losing the HTML page he or she was one when closing the supporting file. Note: When inserting a hyperlink, set “Target frame” to “New Window” for PDF files.
• Do not place supporting files in left navigation areas. Left navigation areas should be reserved for transitioning within a section of the site.
• Contact IT regarding any supporting files that are 10MB or larger.

table of contents

Advertising

Advertising on IEEE Web pages is restricted for the following reasons:

• it diminishes the simplicity of the site if too flashy or distracting;
• it can take away from the integrity of the IEEE brand;
• it can undermine purpose of the IEEE Mission;
• it can undermine the not-for-profit position of IEEE.

Contact the Web Team (ieee-web-team@ieee.org) with any questions regarding specific advertising issues.

table of contents