Navigation path

The Commission standard template

Mandatory requirementThe standard presentation of the Commission's site must be respected:

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

View all IPG Rules

Please use the standard template for all new developments of the current web presence. You can also apply it to existing pages to replace a previous template. If you do change the template on one page, you should change it for all the other pages on the same site.

The Digital Transformation team is currently working with the DGs on the Commission's new web presence, which uses a different design. The first pages were published on 1 November 2014 (e.g.  Commissioners' pages). A beta version of the new presence is planned for June 2015.

The new web presence will be a single platform designed to allow the Commission's many audiences to interact with it. Both the structure and the content will be co-created by the DGs with the guidance, support and coordination of the digital transformation team, inspired by design principles centered around user needs and institutional goals.

For all new developments of the current web presence, therefore, please continue to use the current IPG templates.

 

Commission template download in responsive design

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: the file template-eczip contains: a help file, 24 templates for Dreamweaver and HTML production, central style sheets and JavaScript files, central images and the PSD files to create the images of the banner.
  • Documentum version: you will find the instructions to use the template on CWCMS portal. This version contains additional CSS and JS files.
  • Font download: the fontzipRestricted 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. ec.css: the central CSS for the Commission 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 andpresentation of multilingual links via a language icon that will trigger a popup window displaying the available languages.

2. ec-content.css: This contains styles for the default menu and viewport width thresholds as well as some basic PST presentation elements.The Documentum version of the template contains an additional style sheet:

3. ec-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 style sheets in the head section. These custom CSS should not overwrite the mandatory elements of the template.

 

JavaScript

The JavaScript file 'ec.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, 'ec-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 'ec-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.

The 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 JS files in the head section.

 

Translations

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

top 

 

Visual description

Visual description 1. Title tag 4. Service tools 5. Language selection tool 6. Identification banner 7. Navigation path 8. Additional tools 9. Footer Visual description
  1. Title tag of the page is mandatory.
  2. The layout has a mandatory maximum width of 984 px. The font Verdana is mandatory for all typographical elements within the page.
  3. The header is mandatory.
  4. Service tools - There are four mandatory services: 'Legal notice', 'Cookies', 'Contact' and 'Search' 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. Navigation path is mandatory.
  8. Additional tools are optional (Font resizing buttons, 'Print the page').
  9. Footer's elements are mandatory: the 'Last update', 'Top link' and the service tools.
 

1. Title tag

Title tag image

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 "Title of the page - European Commission" 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

The font Verdana must be used for all typographical elements within the page.

 

3. Header

Header description

  • Colour background:
    • Banner: white and blue #0065a2
    • Service tools: white
    • Path: blue line
  • Size:
    • Height: 145 px
    • Width: maximum size of 984 px is mandatory
    • Services height: 20 px
    • European Commission logo: 172 px x 119 px
    • Banner title: 984 px × 145 px
    • Path height: 20 px
    • Non JavaScript linguistic navigation: 17 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.
  • Image formats
    • European Commission logo: transparent GIF
    • Site name image: GIF
  • There is a Photoshop file for the site name image in the downloadable template:
    • title-banner-xx.psd:
      The site name including the background colour on 1 line for Commission top level pages. A layer for an optional sub title in a second line is also included.

top

 

4. Service tools

Service tools description

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, etc.

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 Commission 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.

Four services are mandatory: 'Legal notice', 'Cookies', 'Contact', 'Search'. They must be aligned in that order to the right and they must be present on all pages:

  • 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 Commission's 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.
  • 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 "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 "Search" service tool pointing to the central search page can be replaced either by a "Search" box or by a link to a local search page. This local search page must offer a link to the Commission main "Search" page.

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 as implemented on the template. It explains the aim of each service and the possible associated links.

Service tool

Description

Use

Link

Search

Search facility limited to the specific website or the general Commission search page

Mandatory

Link to a local search where available, otherwise you must link to http://ec.europa.eu/geninfo/query/search_en.html

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 page, if not, link to http://ec.europa.eu/cookies/index_en.htm

Legal notice

The legal notice defines the Commission's 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://ec.europa.eu/geninfo/legal_notices_en.htm or to a specific legal notice if needed.

What's new

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 link to a local page.

FAQ

“Frequently asked questions”: list of typical questions and their answers relative to the subject of the site

Optional

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

About this site

General presentation of the site with possible mention of its author (DG, service), its aim, its target audience, its language policy, the statistics on consultation, etc.

Optional

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

Sitemap

Indicates the structure of a website

Optional

Link to a local page where available, if not, link to http://ec.europa.eu/sitemap/index_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://ec.europa.eu/atoz_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

top

 

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.

top

 

6. Identification banner

Identification banner description

  • On the left hand side the banner should contain the logo of the European Commission; immediately on its right, the banner should contain the site name. The banner is not clickable.
  • The background colours white and blue should be the same as in the template.
  • The logo of the European Commission must have the same size, colour and it must be at the same position as it is on the templates.
  • 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, etc. of the site. Examples of site names are:
  • In general: use common sense and make sure the result is well clear for the majority of readers (experts and non-experts).
  • The identification banner can include an optional subtitle. For important sub sites within a policy site, this subtitle can be used in addition to the site name as the name of the important sub site (see for example http://ec.europa.eu/ipg/index_en.htm, where "Information Providers Guide" is the site name and "The EU internet Handbook" is the subtitle or could have been the sub site name on the banner).

Identification banner description

  • The site name is an image in GIF format. A text alternative is provided in the code HTML for the print, not images, not CSS and high contrast versions. Do not forget to include the site name in its text version. In case you have included also the optional subtitle, you should read the help file included in the 'template-ec.zip' file that indicates the HTML code that should be added to the template.
  • The text of the site name is blue and the text of the optional subtitle is white with the following font (included in the font download ZIP file):
    • Site name font: ECSquareSansPro-Regular, font size: 28 px, colour #0065a2, uppercase
    • Subtitle font: ECSquareSansPro-Regular, font size: 21 px, colour #ffffff, sentence case
  • The text of the site name must be written in uppercase and the text of the optional subtitle must be in sentence case.

top

 

7. Navigation path

Navigation path description

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.

Navigation path indicates the last relevant upper level of the current site within a DG or thematic site. It should start with "European Commission" followed by the name of the DG/Service or of the theme.

If the path is too long, part of it can be replaced with the character string "...", e.g: European Commission > Research > ... > Programs > Seminars. However, the entry 'European Commission' 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.

top

 

8. Additional tools

Font resizing buttons

The template integrates a font resizing feature. The controlling buttons are Decrease font (decrease text) and Increase font (increase text). They are placed under the banner on the right hand side in the template. 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.

Print icon

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

Additional tools are optional.

top

 

9. Footer

Footer description

The footer must be positioned in the centre below the page body. Three elements are the 'Date of last update',  '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.

Date of update

The date of the latest update provides regular readers of the site with a useful piece of information. It is also used by the EUROPA search service to determine the freshness of the page. If necessary, the layout and location of the 'last update' information can be adapted to the specific needs of the page (i.e. news pages).

'Top' link

The ‘top’ link feature is compulsory and must be present in all pages.

Service tools

The service tools (see section 4) are also located in the footer. They should be identical to the items in the services tool of the header. On smaller screens, only the services tools in the footer will be visible.

All footer elements are mandatory.

top

 

10. Commissioners' right image

Right image description

Commissioners' websites may use at the right of the identification banner a portrait of the Commissioner.

This image should be a transparent 24 bit PNG, size 210 x 107 px, positioned as the image above. The help file included in the 'template-ec.zip' will guide you on what has to be done to include this right image.

top

 

11. 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.

top

 

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'.
  • 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'.
  • 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.