IEEE Web publishers are asked to include IEEE-wide styles when structuring site templates in order to create alignment, provide orientation, leverage the IEEE brand, and prevent users from having to learn each site. IEEE styles are detailed here for the enterprise-wide navigation, favicon, and site footers and headers.
Requirements for template sizing, laying out the body of pages, URL and file naming, and site evaluation are also below.
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
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.
IEEE Web site header requirements are as follows and should be displayed in accordance with the IEEE Visual Identity Guidelines (PDF 4.8 MB).
All IEEE Web sites should adhere to the following best practices and principles for page layout.
All sites within the IEEE Web Presence must utilize the guidelines below for site footers:
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:
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.
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:
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: