Global Page Elements and Branding Requirements
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.
IEEE Master Brand
The IEEE Master Brand must appear on all IEEE websites, so users are aware the website is included in the IEEE web presence, per the below guidelines.
- 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 enterprise-level websites and IEEE.org)
- Alternative text: should appear as "IEEE" (without the quotes)
- Hyperlinking: should link back to www.ieee.org and should open in the same window
- Other considerations:
- Ensure there is no white background behind the diamond symbol and 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 Brand Identity Guidelines (PDF, 5 MB)
Sample IEEE Master Brand:
The site identifier must appear on all IEEE websites, so users can easily identify which IEEE website they are on, per the below guidelines.
- The logo or name of the site must 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.
Sample of site identifier:
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.
- All official IEEE sites are required to use the IEEE favicon, or an approved IEEE sub-brand 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. Contact the Digital & Creative Innovations team, if approval is needed.
Sample favicon usage within a browser:
GDPR Policy Adherence
IEEE cookie banner
In order to comply with the European Union (EU) regulation called the General Data Protection Regulation (GDPR), site managers must implement a banner to their websites that outlines our policy on cookie collection.
The site purpose 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's header cannot adequately convey this information, it should be placed in another prominent position within the home page. Sample site purpose:
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:
- If used, search tools (field, label, and button) must be placed in a consistent and global area within the digital site’s design.
- Search tools are traditionally placed in the header area of a site or in proximity to the global navigation for quick access.
- Global search tools must appear on all pages of the site for quick access and aid findability of content.
- Other search tools, if warranted, should appear contextually with content on the relevant page(s).
- Global search tools can be presented using either:
- A search field/box (conventional usage), or
- A search field/box designed as/alongside a dropdown if providing faceted search options.
- Search tools must be clearly visible and recognizable through the use of good recognition aids such as:
- Field labels placed to the left of the search field or inside (note accessibility requirements for placing the label inside) Example: Search IEEE Xplore
- Search button
- Must be placed in close proximity to the right of the search field
- Button label text must say “Search” instead of “Go” or other text labels
- A magnifying glass inside the search field [optional]
- Hint text inside the search field [optional]
- Search tips and advanced search can be included if available.
- When using a magnifying glass ensure that the code label says “search” and not “magnifying glass”
- Hint text if placed inside the search field must meet the following code requirements to support screen reading software via invisible form labels. Use one of the following three suggested techniques to apply invisible form labels.
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:
- Only one of these recommendations should be implemented. Using two or more together (e.g., a hidden <label> and a duplicate title attribute) can cause information to be repeated by a screen reader.
- Placeholder text (e.g., <input type=”text” placeholder=”Search WebAIM”>) is not a suitable label and should never be used in place of the above techniques.
Home Page Content Layout Best Practices
All IEEE digital sites should adhere to the following best practices and principles for page layout. Establish hierarchy to aid readers' 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, videos and/or tables where appropriate to present or support complex information.
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:
- All content should align with the purpose and tone of the site.
- Animation should be user-controlled (advance, pause, stop, play, mute, etc.) and optimized for accessibility and usability. Ensure there is enough color contrast between the controls and the background images.
- Animated frame advancement should allow all content to be read (typically eight–ten seconds).
- Flash files (if used) should be animated at 18 frames per second (fps).
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 (left) Lower-level page wireframe (right)
Reviews And Website Evaluations
All new/redesigned IEEE websites should be reviewed by the Digital & Creative Innovations (DCI) team during the following stages: wireframes, visual designs, and prior to launch at the beta URL stage. The DCI review will include prioritized comments on IEEE branding and accessibility requirements, ways to increase the website's usability, and enhancements to the SEO/meta data. These reviews are meant to identify potential opportunities for optimization and to ensure all of the requirements are met prior to launch.
To learn more, review the following: