IEEE digital 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.
The meta-navigation is a menu to appear on all IEEE websites (enterprise-wide) allowing visitors to quickly access IEEE flagship websites 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 digital browsers' address bars, tabs, and bookmarks. The 57x57 pixel square icon, Apple Touch Icon, is used for iOS devices where the user adds the icon to his or her home screen.
Sample favicon usage within a browser:
IEEE digital site header requirements are as follows and should be displayed in accordance with the IEEE Visual Identity Guidelines (PDF 5 MB).
All sites within the IEEE Digital Presence must utilize the guidelines below for site footers:
* Denotes required administrative links/language in the digital 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, email@example.com.
Search tools help users find content on a site through the use of a search engine that indexes the content on the site. This tool is most useful when users do not want to browse for content or are unable to find content via browsing.
Sample search area using conventional placement in header area of the site:
Sample search area with dropdown treatment using conventional placement in header area of the site:
1. Hidden <label>
Hide the <label> element off-screen using CSS. The label will not appear visually, but will still be read by a screen reader. Create a CSS style called “hidden” and apply it to the label of the form label.HTML
<label class="hidden" for="s">Search Terms</label>
<input type="text" id="s" name="s">
2. Title Attribute
If a form field has a title attribute, but no <label>, the screen reader will read the title as if it were a label.
<input id="s" type="text" name="s" title="Search Terms">
The aria-label attribute can also be used when there is no text label on the page. Add the aria-label to the input element.
<input id="s" type="text" name="s" aria-label="Search Terms">
Important to note:
All IEEE digital sites should adhere to the following best practices and principles for page layout.
Establish hierarchy to aid readers' understanding and focus
Show relationships between content
Other tips for creating a more readable, interesting page layout
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.
Sample alert message:
Image carousels: Billboard-like promotional areas may be used on home pages and/or sub pages; however, the following conditions should be met:
Sample image carousel:
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.
When planning to create a website, the site's information/design structure is very important. Some tools that could be used in this planning phase are wireframes, visual comps, storyboards, and interactive prototypes.
A wireframe is a very basic visual guide used in digital design to lay out a structure. The sample wireframes below illustrate a home page and a subpage that contain the basic design elements that would improve the user experience.
|Home page wireframe||Lower-level page wireframe|
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: