IEEE Web Presence Style Guide: Template & Page Structure

IEEE meta-navigation

The meta-navigation is a menu to appear on all IEEE sites allowing visitors to quickly access IEEE flagship properties and options. Requirements for the IEEE meta-navigation are as follows.

• Placement: outside of the main page above the site header. Within the meta-navigation:
  - Site links should appear at the upper-left and flushed left to the edge.
  - The upper-right side is reserved for single-sign-on. To request single-sign-on, please work with your IEEE employee representative to initiate a project with IEEE Information Technology.
• Links: Align site links to the left side of the page in the following order with the noted destinations:

- IEEE.org: www.ieee.org
- IEEE Xplore Digital Library: ieeexplore.ieee.org (The word "Xplore" should be italicized)
- IEEE Standards: standards.ieee.org
- IEEE Spectrum: spectrum.ieee.org
- More sites: www.ieee.org/sitemap

• Size: minimum height of 30–40 pixels
• Link interaction: should only underline upon hover and have no "visited" link color change
• Link separation symbol: should be a vertical bar (l)
• Typography: Verdana, no smaller than .07em
• Color: light or dark text can be used depending upon the background color/contrast 

Sample meta-navigation:

Favicon

The IEEE Favicon (short for "favorites icon") is a 16x16 pixel square icon that appears in the latest versions of Web browsers' address bars, tabs, and bookmarks. The 57x57 pixel square icon can be used for the Apple iPhone, iPod Touch and/or iPad.

All official IEEE sites are encouraged to use the IEEE Favicon as a way to improve user experience and leverage the IEEE brand. Color can be customized to align with the color themes of the site. Download the IEEE Favicon

IEEE Web site header requirements are as follows and should be displayed in accordance with the IEEE Visual Identity Guidelines (PDF 4.8 MB).

1. IEEE Master Brand:
   • Placement: upper-right corner of the header and within the top one-third of the screen view;
   • Size: a minimum of 100 pixels wide by 33 pixels high and smaller than the site identifier;
   • Clear space: space around the IEEE Master Brand should be 1/2x where x=the height of the letters I-E-E-E;
   • Color: either black or white (the blue IEEE Master Brand is reserved for IEEE.org);
   • Hyperlinking: should link back to http://www.ieee.org and should open in the same window;
   • Ensure there is no white background behind the diamond symbol and to never use the IEEE Master Brand as a background, watermark, or wallpaper;
   • Should not have any modifications or distortions applied (e.g., drop shadow);
   • Should be displayed in accordance with the IEEE Visual Identity Guidelines (PDF, 4.8 MB).
    
2. Site Identifier: The logo or name of the site should appear in the upper-left corner of the site header and link to the home page of the site. This logo or name must contain the letters I-E-E-E and appear larger in size than the IEEE Master Brand to avoid confusion as to which site the visitor is on.
   

   Learn more about how to use the letters I-E-E-E

3. Site Purpose: The purpose of the site should be obvious either through the site identifier or through positioning copy placed prominently within the site header. However, if for some reason the site header cannot adequately convey this information, it should be placed in another prominent position within the home page. 

All IEEE Web sites should adhere to the following best practices and principles for page layout.
 

• Present an appropriate amount of content
  • Pages of one or two screens are best for the first few levels of a site where users are scanning options.
  • Longer pages may be appropriate deeper in the site where detailed topical information is expected.
  • Do not arbitrarily divide information simply to conform to acceptable page length; create logical divisions and subdivisions based on the structure of your information.
  • When creating longer pages, review the Writing section of this page to ensure that content is scan-able.
• Establish hierarchy to aid reader understanding and focus
  • Place important elements near the top of the page.
  • Use headings, subheadings, or bolding for key words, phrases, or topic divisions (but use bold sparingly).
  • Use white space to separate topics or to make important elements stand out.
• Show relationships between content
  
  • Group similar items together and place them in proximity to each other to show similarity.
  • Nest an item under another item to show a child/parent relationship.
• Other tips for creating a more readable, interesting page layout
  • Break text into short paragraphs or create bulleted lists.
  • Incorporate links to other relevant content.
  • Use left and right columns for appropriate content.
  • Use images, charts, graphs, and/or tables where appropriate to present or support complex information.  

All sites within the IEEE Web Presence must utilize the guidelines below for site footers:

1. Administrative links: incorporate the links below:
   *- Home: links to the home page of the Web site (should appear as first link)
   *- Privacy & Opting Out of Cookies: link to the IEEE Privacy & Security page (www.ieee.org/privacy)
   *- Terms & Conditions: link to the IEEE Terms & Conditions page (www.ieee.org/site_terms_conditions.html)
   *- Nondiscrimination Policy: link to the IEEE Nondiscrimination Policy page (www.ieee.org/nondiscrimination)
     - Site Map
   *- Contact: contact page or form for the site
     - Help: instructional content for the site (if applicable)
     - Feedback: form for users to give feedback about the site (if applicable)
   
   * Denotes required administrative links in the Web site footer. Do not replicate the policies listed above. Link directly to the IEEE policies. If you believe there's a conflict or that your site has need for a more explicit or restrictive policy, please contact the Digital Innovations Team.
2. Copyright line: include the current year and language explaining "Use of this Web site signifies your agreement to the terms and conditions"
3. Design: Use either a border or a different background color to ensure visual separation between the footer and the page areas above
4. Width: extends the full width of the page
5. Typography: Verdana, no smaller than .07em
    

Alert messages: Home pages should be designed with a prominent area in which user notifications can be posted by the site owner in the event of an emergency. A process should be in place to ensure that such messaging can be posted or removed in a timely manner.

Site purpose: The purpose of the site should be obvious either through the site identifier or through positioning copy placed prominently within the site header. However, if for some reason the site header cannot adequately convey this information, it should be placed in another prominent position within the home page.

Spotlight modules: Billboard-like promotional areas may be used on IEEE home pages; however, the following conditions should be met:

• all content should align with the purpose and tone of the site;
• animation should be user-controlled (pause, stop, play, mute, etc.) and optimized for accessibility and usability;
• animated frame advancement should allow all content to be read (typically 8–10 seconds);
• flash files (if used) should be animated at 18 frames per second (fps).

Please reference the sample home page wireframe in the following section as a guideline for how home page elements might appear on an IEEE site. 

If used, search tools (field, label, and button) should be placed in a consistent area within the Web site’s design.

• Search tools should appear on all pages throughout site.
• The search field should be clearly visible to users.
• Search labels should be placed to the left of the search field rather than inside the field for accessibility purposes.
• Search tips and advanced search can be included if available.

A wireframe is a basic visual guide used in Web design to lay out a structure. The sample wireframe below illustrates many of the IEEE Web presence standards as they might be applied on a home page.

Home page (left) and lower level (right) sample wireframes

Ideally, site designs should be able to scale to the size of the devices that access them and deliver the appropriate output for optimum usability. Development methods such as responsive design should be used to support this goal. If the current design does not meet these requirements, a plan should be in place to create this experience with the soonest possible release date.

Review the responsive Web design guidelines for IEEE sites (sign in using your domain username and password)

The following guidelines should be used:

• 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 section should be unique;
• use all lowercase and avoid special characters (including spaces) when creating file and folder names;

• when creating a new site, Google recommends using dashes instead of underscores as URL word separators in order to optimize your site for search engines. However, if you have an existing site that is using underscores, it is not recommended to go back and change all existing URLs, as the impact on user experience (i.e., inconsistency, broken bookmarks and links, etc.) may outweigh the positives in this case. 

Site templates should be evaluated by the Digital Innovations Team during the wireframe stage of the project as well as at the visual design stage to ensure that requirements are met and to identify potential opportunities for optimization prior to moving into development.

To learn more, review the following:

User Experience, Usability, and Accessibility (Review: "Usability evaluation and testing requirements")

Site Manager Responsibilities/Site Administration (Review: "Communication with the Digital Innovations Team" and "Ongoing Web site monitoring")