Navigation path

The Interinstitutional standard template

Mandatory requirementThe Interinstitutional standard template must be used for all interinstitutional EUROPA websites.

View all IPG Rules

The standard template must be used for all new development and can also be introduced on existing pages to replace a previous template. This should be done on a site basis, not on page by page bases.

The standard presentation of the EUROPA site must be respected:

  • The layout size, the header and the footer are mandatory elements for all interinstitutional EUROPA websites.
  • For the content area, there are not any special graphical or navigational constraints. The format depends on the category of EUROPA site and may be adapted for the "look and feel" of individual sites, but certain general rules must still be followed.
 

Interinstitutional template download

Templates in 24 languages (UTF-8 encoding) in responsive design

  • Online version:българскиčeštinadanskDeutscheesti keelελληνικάEnglishespañolfrançaisGaeilgehrvatskiitalianolatviešu valodalietuvių kalbamagyarMaltiNederlandspolskiportuguêsromânăslovenčinaslovenščinasuomisvenska
  • Download version: file template-iizip contains a help file, 24 templates for Dreamweaver and HTML production, central stylesheets and JavaScript files, central images and the PSD files to create the images of the banner.
  • Documentum version: you will find instructions to use the template on CWCMS portal. This version contains additional CSS and JS files.
  • Font download: the fontzip(1.52 Mb)Restricted area: This link points to internal pages and may not work if you are browsing as an external user. to use on the identification banner.
 

Responsive design

The template is in a responsive design. This layout changes according to the size of the screen and so the same website displays well on a desktop, tablet or smartphone. More details can be found below.

 

Source code

Metadata

The template includes all compulsory metadata to fill in. You will find more information about the compulsory metadata in the relevant metadata section.

 

Style sheets

The following stylesheets are used in the template:

1. europa.css: the central CSS for the interinstitutional template. This CSS contains HTML reset, layout, template 2013 (desktop first), default values for desktop, font-size rules for desktop, <=768 pixel mode, <=600 pixel mode, <=320 pixel mode, printer layout and presentation of multilingual links via a language icon that will trigger a pop-up window displaying the available languages.

2. europa-content.css: This contains styles for the default menu and viewport width thresholds as well as some basic PST presentation elements.

The template provides an additional style sheet that should be used if you implement the optional additional tool "Toggle high contrast".

3. europa-high-contrast.css: this optional CSS is not referenced centrally and you should save it in your local style sheet folder. It proposes a high contrast version for your site, but you must test it for all your custom components.

The Documentum version of the template contains an additional style sheet:

4. europa-components-only.css: This style sheet contains only the CSS rules related to the PST components (such as Media Player, Slideshow, etc.). Those rules are applied only when JavaScript support is enabled in the browser.

These files can be both used in the Dreamweaver and HTML versions of the template to add the extra Documentum functionalities. These files are constantly updated to add new features. Check the CWCMS portal to see whether you are using the latest version.

There is also the possibility to include your own stylesheets in the Head section. These custom CSS should not overwrite the mandatory elements of the template.

 

JavaScript

The JavaScript file 'europa.js' manages:

  • Mobile sniffer: The mobile sniffer allows the detection of the “userAgent” of mobile devices.
  • DOM and Events management tools: Tools like “ready” and “addEvent” for Web masters.
  • Accessibility menu for mobile devices: Menu providing keyboard-based navigation menu.
  • Language Selector: Tools to convert the Language Selector component from noscript mode to dynamic mode.
  • Lazy loader: Mechanism which dynamically downloads the “ec-mobile.js” script when mobile mode is enabled.
  • Additional tools implementation: Functions behind the additional tools like font-increase, font-decrease, ...
  • Coverage: Implementation of the Multiple Language Coverage feature for desktop mode.

An additional file, 'europa-mobile.js', implements the language coverage feature for mobile mode. The script is automatically included when mobile mode is detected.

The Documentum version of the template contains an extra 'europa-components.js' JavaScript file with additional functionalities managing components such as Slideshow, Media Gallery and more. This file calls other JavaScript files on the fly whenever needed.

This file can be used in the Dreamweaver and HTML versions of the template to add the extra Documentum functionalities. This file is constantly updated to add new features. Check the CWCMS portal to see whether you are using the latest version.

There is also the possibility to include custom JavaScript files in the Head section.

 

Translations

The template is translated into 24 languages. Here is the list of all translated labelsxls(204 kB).

 

Visual description

Visual description 1. Title tag 2. Layout 3. Header 4. Service tools 5. Language selection tool 6. Identification banner 7. Right image 8. Search field 9. Navigation path 10. Additional tools 11. Footer Visual description
  1. Title tag of the page is mandatory.
  2. The layout has a mandatory maximum width of 984 px.
  3. The header is mandatory.
  4. Service tools - There are two mandatory services: 'Legal notice' and 'Contact' and they must be aligned in that order to the right. The other services are optional. The service tools are repeated in the footer (see below).
  5. Language selection tool is mandatory.
  6. Identification banner is mandatory.
  7. The right image colour gradient can be customised.
  8. Search field is mandatory.
  9. Navigation path is mandatory.
  10. Additional tools are optional.
  11. Footer's elements are mandatory: the 'Last update', 'Top link' and the service tools.
 

1. Title tag

Title tag

The "Title" tag is critical and must be present on all pages. It is mandatory to include a descriptive title because:

  • It clearly identifies a page.
  • It is used by search engines for indexing, searching and presenting lists of results.
  • It is used for the bookmarks/favourites.

It is therefore the "label" used to identify and recognise a page.

It must always take form "EUROPA – Page title" in the language of the page.

Detailed information on how to write title tags.

 

2. Layout

The template has a fixed maximum width of 984 px.

The template proposes 4 different layouts for the content area that are managed via the div "layout":

  1. in 3 columns by default
  2. left navigation and content displayed
  3. content and right navigation displayed
  4. only one column
 

3. Header

Header dimensions

  • Colour background:
    • Banner: white
    • Service tools: grade color from #dbe4e7 to #e2eaed, to transparent
    • Bottom banner (path border): thin blue line #83b5c1
    • Navigation path: pale background #e9eff3
  • Size:
    • Height: 105 px
    • Width: maximum size of 984 px is mandatory.
    • Services height: 20 px
    • Banner title: 450 x 46 px
    • Right image: 400 x 68 px
    • Path height: 17 px
    • Non-JavaScript linguistic navigation: 15 px
    • Search field: 190 x 26 px
  • The identification banner is mandatory and must be present on all pages. Together with the navigation path, it indicates the logical position of the page in EUROPA architecture.
  • Right image is a colour gradient that can be customised according to the site.
  • Image formats:
    • Banner title image: GIF with white background
    • Right image: 24-bit PNG to preserve the transparency (a transparent GIF in case of Internet Explorer 6)
  • There is a Photoshop file for each image in the downloadable template:
    • title_1line.psd: site title in one line
    • title_2line.psd: site title in two lines to include a subtitle
    • header-background.psd: customizable right image
 

4. Service tools

Service tools

A "service tool" helps the user to find the information he/she is looking for by a variety of means: contacting the webmaster, consulting the alphabetical index, using the search engine, checking a list of useful links ...

It is important to include links to service tools in a consistent way because:

  • Users must be able to find the same service tools available on all pages.
  • Consistent use of the same presentation of the tools simplifies navigation.

The services offered on a site should be as specific as possible to the subject of the site. If a local index is available, it will be more useful than the general EUROPA index, for instance.

A set of standard links to general or specific services must be present on all pages both in the header and in the footer.

Three services are mandatory: "Contact", "Cookies" and "Legal notice". They must be present on all pages:

  • The "Contact" service should, as a minimum, provide a link to a functioning email address, but it may also point to a page setting out further information on the various possible contacts. This service tool may not point to a central page on EUROPA.
  • The "Cookies" service should link to a local cookie notice page where in plain jargon-free language the user is informed on how and for which purpose the website uses each cookie, how consent can be withdrawn, etc. If the site uses the same cookies as the central cookie notice page, a link can be done to it. In case the site does not use any cookie, this local cookie notice page should just mention this. A template is available to create this site-specific cookie notice pagezip(241 kB).
  • The "Legal notice" service should point to the Legal notice page which contains information about Disclaimer, Copyright notice and Personal Data Protection. It must be present in all pages. The legal notice defines the limits of responsibility, and draws attention to the copyright restrictions of EUROPA. It is a legal requirement to display it at the top of every page.
    If the page or any part of the page requires a specific legal notice not available in the templates or in the list of legal notices, then a new one may be created. New legal notices must be approved by the Legal Service and be formatted in the same way as existing one.

Several optional services or elements may be included. A set of additional standard services is proposed in the complete template. The language versions appropriate to the page must be used and the links must point to service tools in the same language as the page itself.

The following table indicates the list of available standard services in order from right to left as implemented on the template. It explains the aim of each service and the possible associated links.

Service tool

Description

Use

Link

Contact

Contact details: at least e-mail of the webmaster but any other relevant contact point may be added (always use functional e-mail addresses!).

Mandatory

Link to a functional (and not personal) e-mail address or to the site's Contact page.

Cookies

Cookie notice page explaining the use of cookies of the specific website.

Mandatory

Link to a local cookies policy page where available, if not, a link to http://europa.eu/cookies/index_en.htm must be used.

Legal notice

The legal notice defines the limits of responsibility and draws attention to the copyright restrictions of EUROPA. It is a legal requirement to display it at the top of every page.

Mandatory

Link to http://europa.eu/geninfo/legal_notices_en.htm or to a specific legal notice if needed.

What's new or New on EUROPA

Announcement of new pages, sections, services, etc. of the site (not the same as a "news" section where press releases, etc. are uploaded.)

Optional

"What's new" should be linked to a local page. If the local page is not available, it should be renamed to "New on EUROPA" and be linked to http://europa.eu/geninfo/whatsnew_en.htm

About this site

General presentation of the site with possible mention of its author, its aim, its target audience, the statistics on consultation, etc.

Optional

Link to a local page where available, if not, link to http://europa.eu/abouteuropa/index_en.htm

Site map

Indicates the structure of a website.

Optional

Link to a local page where available, if not, link to http://europa.eu/geninfo/sitemap_en.htm

A-Z Index

A "table of contents" in alphabetical order

Optional

Link to a local page where available, if not, link to http://europa.eu/geninfo/atoz/en/index_1_en.htm

Accessibility

Accessibility policy and help features of the site

Optional

Link to a local page where available, if not, link to http://europa.eu/geninfo/accessibility_policy_en.htm

 

5. Language selection tool

Language selection tool is mandatory and must be present on all pages (even if the page exists in only one language). The language selection tool provides the only means of horizontal navigation between languages. It also provides an indication of which language versions of the page exist.

The tool is available in 2 formats:

JavaScript

Language selector with JavaScript

In this case, a drop-down window is presented containing all the available languages (and only those) and showing the language of the document presented. The templates contain the code for presenting 24 languages and must be adapted according to the existing language availability for the actual page.

Non JavaScript

Language selector without JavaScript

In this case, the available languages are presented in text form using the ISO codes for languages. The position of the codes should be as indicated in the templates under the service tool. The JavaScript version includes the non-JavaScript version, which will be applied automatically if the browser is not JavaScript enabled. It is not compulsory to use the JavaScript version.

 

6. Identification banner

Identification banner

  • On the left hand side, the banner should contain the European flag with words europa.eu under it. The flag and words are clickable and lead to europa.eu homepage. To the right of the flag the banner should contain the site name.
  • The site name should be in the same language as the content of the page.
  • The site name is closely linked to its URL allocation. Following the site typology, the name is determined by the name of the policy, priority, service ... of the site.
  • A subtitle can be added to the main title of the site.
  • In general, use common sense and make sure the title is clear for the majority of readers (experts and non-experts).
  • The text uses the following font:
    • Principal font title: Daxline Pro Bold 35 px (allows approximately 34 characters), black.
    • Optional subtitle: Daxline Pro Bold 24 px (allows approximately 60 characters), grey.
  • The text should always be vertically centred in relation to the flag.
  • Format: GIF with white background.
 

7. Right image

Right image

The right image is a colour gradient that can be customised to reflect the mood of the site according to the colour palette provided in the PSD file 'header-background.psd'. These background images are already available on the ZIP file in PNG and GIF formats.

You may choose from these colours:

Palette

Only in case of campaign sites may the right image be modified to include motives or pictures.

Format: 24-bit PNG to preserve the transparency (plus a transparent GIF in case of Internet Explorer 6).

 

8. Search field

Search field

The header contains on its right hand side a mandatory search field. The search box uses the EUROPA search engine to perform queries on the EUROPA domain.

You should customize this interface to perform local search on your website:
How to create a customised interface to the EUROPA Search engine.

In case you use your own search engine, this local search page must offer a link to the EUROPA main "Search" page.

The search field may be used with an optional link to "Advanced search" only in cases of sites that function as search databases, such as Rapid. The text "Advanced search" must use text colour with accessible contrast ratio compared to the background colour provided by the right image.

Advanced search

 

9. Navigation path

Navigation path

A set of links to higher-level pages is mandatory and must be present on all pages.

It is important to include navigation path links because:

  • They locate a user's position in the structure of EUROPA. This is particularly useful for a user who has arrived at a page directly from an external link, bookmark/favourite, or a search engine, and has not navigated there through other EUROPA pages.
  • They provide an easy and clear way to return to the upper levels.

Page path indicates the last relevant upper level of the current site. It should start with EUROPA following the name of the site.

If the path is too long, part of it can be replaced with the character string "...", e.g. 'EUROPA > Lisbon Treaty > ... > Programs > Seminars'. The entry 'EUROPA' must always be present, as well as the first upper level.

The last entry (the current page) should not be clickable.

One should use a logical, descriptive path name, in the appropriate language, not the physical directory name. The navigation path should always be as exhaustive and as accurate as possible.

The links must point to upper level pages in the same language as the page itself.

 

10. Additional tools

The additional tools allow for adding extra functionalities to the site. They are placed under the header on the right hand side. All Additional tools are optional.

Print icon

The print icon Print icon allows printing the current page. Print style is integral part of the 'europa.css' file.

Font resizing buttons

The template integrates a font resizing feature in buttons: Resizing button decreaseResizing button increase. This element is used to make the web page more accessible for a person who is partially sighted, by allowing the user to increase or decrease font size. A session cookie stores the font size settings during its session.

Toggle high contrast icon

High contract icon High contrast icon allows the user to switch to and from high contrast mode. To implement this tool, your site must include also the optional CSS 'europa-hi-contrast.css' in its local style sheet folder and adapt your custom CSS rules to suit your site. The template allows to add several alternate CSS. A session cookie stores the contrast settings during its session.

RSS icon

RSS icon RSS icon provides the user with the possibility to subscribe to the site's RSS feed.

Share icon

Share button Share button provides means of sharing the page via social media.

 

11. Footer

Footer

The footer is a mandatory element providing space for optional additional horizontal navigation within the same site or for repeating navigation links already present elsewhere (e.g. alternatives for links which use images or buttons or for image maps). It also contains as mandatory elements the 'Last update' date, 'Top', and 'Service tools'. The service tools (see section 4) are also in the footer. They should be identical to the items in the services tool of the header.

The footer must be aligned to the left below the page body as in the template.

 

12. Cookies

In case a site uses cookies that require informed consent, the site should implement the cookie consent kit (display a header banner and prevent prior storage of cookies) and declare all cookies in the cookie notice page.

Cookie consent example

  1. The cookie header banner displayed on all pages of a site using cookies that require informed consent. This layout is mandatory.
  2. Link to the cookie notice page.
  3. This element of the page will only display its content once the user chooses to accept the site's cookies.
 

Responsive design

At three defined widths (called 'breakpoints'), the layout changes and displays the content best suited to the device.

These breakpoints correspond to a large tablet (768 pixels), a medium sized screen (600 pixels) and a smartphone in portrait (320 pixels). Between these breakpoints, the layout continues to change to fit the screen size. This approach ensures that the website looks good on any screen size.

The responsive template adapts the header, menu and footer. In addition, you will have to adapt the style sheets and content of your current site as well. The CWCMS section contains a detailed migration guidepdf and these pages will be developed to provide further help.

Adapting an existing website has to be carefully planned and attention should be paid to the following:

  • Elements (images, tables etc) cannot have fixed widths
  • Navigation is limited to three levels
  • Hover/mouseover actions should not contain critical information

Read more about responsive design and its implications.

Changes at the 768 pixel breakpoint

The template changes in the following way on screens of 768 pixels and less:

The template on screens of 768 pixels and less

  • Service tools in header is hidden
  • Title and subtitle appear in white part of banner. The text displayed uses the HTML code so make sure this information is correct.
  • 'Menu' button appears and left navigation is hidden. Selecting 'Menu' displays the navigation, Second and third levels of navigation do not appear under the 'Menu' button but directly at the top of the page content with the help text 'Browse section'.
  • 'Search' button replaces search field.
  • Font resize and additional tools are hidden (because touchscreen devices provide alterntiave methods to resize font, share information etc.)
  • Service tools in the footer becomes easier to select on a touchscreen device.

Changes at the 600 and 320 pixel breakpoints

The template changes in the following way on screens of 600 pixels and less:

The template on screens of 600 pixels and less

  • Service tools in header is hidden
  • Title and subtitle appear in white part of banner. The text displayed uses the HTML code so make sure this information is correct. For screens of 320 pixels, the text is further reduced in size.
  • Navigation path is hidden,
  • 'Home' button appears. This must link to the home page of the website and the not the main European Commission home page.
  • 'Menu' button appears and left navigation is hidden. Selecting 'Menu' displays the navigation, Second and third levels of navigation do not appear under the 'Menu' button but directly at the top of the page content with the help text 'Browse section'.
  • 'Search' button replaces search field.
  • Font resize and additional tools are hidden (because touchscreen devices provide alternative methods to resize font, share information etc.)
  • Right column (if present) appears after the middle column.
  • Service tools in the footer becomes easier to select on a touchscreen device.