Skip Navigation
 
Follow:
Facebook Twitter LinkedIn YouTube
Share:

Home  >  About IEEE  >  Digital Publishers Toolkit  >  Style Guide

Navigation elements are critical for the purposes of providing orientation cues and helping users move easily between different areas of a site.

This page contains the style guide for navigation and linking within the IEEE digital presence.

 

Left navigation

Guidelines for left navigation menus are as follows:

  • Consistency: Left navigation should be applied consistently throughout the site to avoid user confusion. Pages of the same type should have similar left navigation treatment.
  • Menu headers: Each navigation menu should contain a header that identifies that this is the section's navigation menu, i.e., "Membership Menu".
  • Primary links: Menus should be composed of between two and fifteen primary links (with five to ten being most optimal).
  • Link destinations: All links must have a valid destination that corresponds with the link label.  Avoid "mail to" links in navigation menus by creating a contact page where such links can be found. Similarly, supporting files should be linked from page content rather than included as links in navigation menus. Links to other areas of the site should not be included in left navigation unless clearly labeled, (i.e., "Related links").
  • Link naming: Link text should match the page title of the page it links to. Global terms such as "Home," "Sitemap," and "Contact" should never be used as standalone terms within a navigation menu, unless they will link to the home, sitemap, or contact pages for the overall site.  References to these types of pages within a particular section should include the name of the specific section (i.e., "Conferences Home," "Contact IEEE Education Staff").
  • Link target: All links in the left-hand navigation should open within the same browser window.

  • Expanded navigation/Secondary links: If allowed within the particular site templates being used, left navigation menus may also include between two and ten secondary links within each primary link. A minimum of two primary links should expand. When expanded navigation is used, the primary link should be linked to a page orienting the user to all of the content within the secondary section.
  • Link naming:

- Global terms such as "Home," "Sitemap," and "Contact" should never be used as standalone terms within a navigation menu, unless they will link to the home, sitemap, or contact pages for the overall site.  References to these types of pages within a particular section should include the name of the specific section (i.e., "Conferences Home," "Contact IEEE Education Staff").

- Link text should match the page title of the page it links to.

- Do not use acronyms.

  • Supporting files: should not be linked from the left navigation
 
 

top of page

 

Right column content

Guidelines for right column content and navigation menus are as follows:

  • Right column content should be removable without any impact to page navigation or availability of content.
  • Right column content and navigation is optional for IEEE digital sites and pages.
  • Do not put critical information or links that are central to the purpose of the page in the right column.
  • Do not overuse the right column. Keep the numbers of elements/modules to a minimum so they do not compete with the main page content.
  • Elements should be ordered according to relevance to the page content and purpose.
 
 

top of page

 

Main navigation

Guidelines for main navigation menus are as follows:

  • Tab name should be concise and relevant to the content within the section.
  • Avoid using acronyms in menu labels unless  widely understood/defined within the site.
  • Create active/non active tab interaction states with defined colors for each.
  • Use high color contrast between type and tab color.
  • Do not place supporting files in main navigation menus.
 
 

top of page

 

Breadcrumb navigation

Breadcrumb links aid users in knowing where they are in the site.

All IEEE sites that are more than two levels deep must have breadcrumbs on lower level pages of the site.

The links should represent the hierarchical order of each section, and always take the user through the shortest path to the home page.

 
 

top of page

 

Link styling and placement

Color: The primary link color on the site should be blue (recommended color is #0063D7) across the site; visited link color should be purple (recommended color is #800080).

Embedded links: Use embedded links (links within paragraphs) only for supplemental information, such as linking to a definition or background on particular group or program.

  • Embedded links should be used sparingly and should not interfere with reading either on the computer screen or when printed.

Interactivity: Links should underline upon hover and open in the same browser window. Exception: Supporting files should open in a new window

Link text: Link text should be concise (approximately 5-7 words).

  • Use plain language; never use “click here, “follow this link,” or URL addresses.
     
  • When appropriate, write action-oriented links that accurately describe the information at the destination page. This includes contact links.
    - Use: "Find graphics approved for digital use in the IEEE Graphics Library."
    - Not: "Here is a link to IEEE graphics" or "For IEEE graphics, click here."

Supporting files: When linking to a supporting file, follow the guidelines for supporting files

Trailing links: Use trailing links, or links set below a block of text, for calls to action related to the primary page activities.

  • Use: "Learn more about IEEE governance"
 
 

top of page

 

Within-page links

Within-page links should be used for longer pages with sections of content that fall below the fold of the page. These links have the following acceptable uses:

  • Top of page: links to the top of the page used below the page "fold" to prevent scrolling
  • Table of contents / “On this page”: link menus outlining and linking to all of the section within a page.
  • Alphabetical, chronological or other category lists: often used across the top of the page to link to the appropriate place in a categorized list.
  • Frequently asked questions (FAQs): list the questions at the top of the page and make each question a link that scrolls the page to the associated answer.

These links should not link to anchors on another page. Within-page links, if used, should follow general link styling guidelines.

 
 

top of page

 

Linking to external content

External links are hyperlinks that point at any domain other than the origin domain (and its sub-domains). Inclusion of a limited number of carefully selected, relevant, external links within an IEEE site is considered a best practice in most situations. Used properly, external links can help establish your expertise in a particular subject matter, create repeat visits, and build relationships with other industry leaders.
 
The following guidelines should always be adhered to for external linking.
 
Do’s

  • Ensure that your site includes the required footer link to the IEEE Terms and Conditions, which will absolve you from legal responsibility for the content of the sites to which you link.
  • Review destination content when the page is published and periodically thereafter to ensure continued quality and relevance; update or remove links as appropriate.
  • Check that the sites you link to have privacy policies that will protect your users’ interests.
  • Obtain permission from the site owner if you have any concern that they may object to the reference.
  • Only link to well-maintained content from trusted sources as the quality, content, and tone can reflect on your site’s credibility with both users and search engines.
  • Select links that add value by offering high-quality content that is different from the information on your page but relevant to it and suitable for your audience.
  • Use descriptive anchor text so that users (and search engines) can easily identify external links.
  • Disclose when you're linking to a site with which you have a financial arrangement. (Google also recommends using the rel="nofollow" attribute on those links so that Google doesn't pass along PageRank and your readers know of any possible conflict of interest.)

Don'ts

  • Avoid any language surrounding the link that suggests an endorsement of the content or organization.
  • Avoid including too many external links on a page, as this can confuse users and call the authority of your site into question (since it may seem you are deferring expertise on the subject matter to others).
  • Avoid links to un-moderated user-generated content.
  • Avoid links to content that is primarily commercial, offensive, or discriminatory, or which contains misleading information or unsubstantiated claims.
  • Generally avoid links to supporting documents (Word, PDF, etc.) on other sites; link to HTML digital pages.
  • Avoid or be cautious about linking to sites that require users to register or subscribe before viewing content.

 
All other IEEE linking guidelines noted within the Link Styles and Placement section of this page also apply to external links.

 
 

top of page

 

Redirects

A redirect is a way to send both users and search engines to a different page/URL than the one originally requested. While redirects should be avoided as much as possible, reference the guidelines here to request/create a redirect.

 

Determining need for redirects:
The following instances may require redirects to be created:

  • Specialized print or e-mail campaigns that cannot use long/full length URLs
  • When a page is deleted or moved to another location within a site
  • Commonly misspelled URLs (such as www.gogole.com instead of www.google.com)
  • When a page shows a 404 (“Page not found”) message when accessed on the digitalplatform


Creating and maintaining effective redirects:

  • Include descriptive and relevant keywords in the redirect URL to ensure better indexing by search engines.
  • Keep redirect URLs as short as possible.
  • Avoid redirecting pages to URLs outside of your site. This will prevent broken redirects if the destination site URLs change.
  • Do not redirect to a moved page. Instead, redirect to the final destination URL.
  • Expired redirects or redirects for non-existent content should be directed to relevant content within a site instead of just to the home page of the site.
  • Redirects should not be expired unless known that users will never access the redirected page.
  • Redirects for expired short term/campaign URLs should be redirected to relevant content within the site.
  • Periodically review redirects to ensure that they do not point to irrelevant, inactive or 404 pages. 
 
 

top of page

 

Supporting files

Supporting files are separate files that supplement the digital page's content. Supporting files include PDFs, Word, Excel, PowerPoint, and multi-media files.

Supporting files should not be used for sharing content that would better suit the user as a digital page (HTML). They should only be used when the format of the original document must be preserved to maintain a document's integrity.

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

  • Format: Whenever possible, use a PDF version of a document to protect the integrity of the document.
  • Notation: When linking to a supporting file, include the file size and type in parentheses. Format should be (TYPE, size). Include the duration of multi-media files in parentheses as well. (Note: The size of the document can be found under “Properties.”) Appropriate abbreviations are: DOC, PDF, XLS, PPT, WMV.
  • Interactivity: All supporting files should open in a new browser window, not the same browser window.
  • Placement: Do not place supporting files in left navigation areas.
 
 

top of page