The CERN toolbar is a key branding element that identifies a website as belonging to the CERN web. It must be implemented in a standard way so that users who see it in different contexts get the same experience across multiple sites. See an example of the implementation standard.
- A link to the CERN homepage - http://home.cern
- A link to the directory - http://cern.ch/directory
- A link to sign in via CERN's single sign on service
Guidelines and restrictions
The CERN toolbar:
- May be used by any site hosted at CERN on a cern.ch or cern URL, but its use is not mandatory under the design guidelines
- Must be the first element on the page
- Must not deviate from the standard
- Authentication must only ever use CERN single sign on via https://login.cern.ch
- Typography, colours and icons must not be customized
- Translation sets are available in English and French. The toolbar must not be translated into other languages
- No further elements such as logos, links or contextual elements may be added to the toolbar
- Except in specific circumstances, all elements of the toolbar must be implemented
The CERN toolbar must use the PT Sans typeface. If your web page or application already serves this font you should only serve it once.
CERN toolbar on https
Note that there are external assets referenced via http. If you are serving to an application or site on https you should localise these resources.
Authenticated user types and multifactor authentication
On larger viewports the CERN toolbar shows the username, method of authentication (including the federation authority) and whether multifactor authentication was used. At mobile sizes, a simple sign-out link is provided.
Additional information is available to the user via the title element (generally seen on :hover, depending on the user agent):
<li>Signed in as: <a href="http://cern.ch/account" title="Signed in as Mario Rossi (mrossi)">mrossi (CERN)</a></li>
<li>Signed in as: <a href="http://cern.ch/account" title="Signed in as Mario Rossi (libframe)">libframe (CERN)</a></li>
<li>Signed in as: username (Institute name)</li>
<li>Signed in as: <a href="http://cern.ch/account" title="Signed in with a verified external account">email@example.com</a></li>
<li>Signed in as: firstname.lastname@example.org (Facebook)</li>
1. Desktop - anonymous users
The CERN toolbar as seen on wider viewports by unauthenticated users
2. Desktop - authenticated CERN-registered user
The CERN toolbar as seen on wider viewports by a CERN-registered user. The authentication authority (CERN) is displayed after the username.
3. Desktop - anonymous users (directory)
When the toolbar is seen on the directory page the link becomes a tab, tying the bar to the page itself. This is also true of the CERN sign in page.
4. Desktop - CERN-registered user with multifactor authentication
Users who have used multifactor authentication have a visual clue about the increased strength of their authentication method.
5. Mobile - anonymous users
At mobile sizes the toolbar is pared down to basics.
6. Mobile - authenticated users
At mobile sizes the toolbar looks the same for all types of authenticated user.
See examples of the toolbar code here along with further documentation: http://framework.web.cern.ch/framework/2.0/cern_toolbar/cern_toolbar-ano...
The toolbar requires the PT Sans typeface. See fonts.
git clone https://gitlab.cern.ch/web-team-ux-assets/framework2.git
After cloning the above repository use the path /cern_toolbar under framework2.
Instances of the CERN toolbar should be updated to this specification by 18 March 2013.
Posted by Dan Noyes on 11/05/2012 - 13:46. Last updated 30/08/2016 - 14:13.