Navigation path

Design

Table of content


1. Interface and technical design

The purpose of the interface and technical design phase is to translate the site’s objectives into a visual solution and to define the site’s “look and feel”.

Description

This section describes in detail the different activities to be carried out in order to implement a site’s objectives and requirements, and to make sure that a created site “fits” into the EUROPA family. Many of the activities are classical design activities that concern the creation of discrete elements that express the objectives and vision of the site in concrete terms and elements. Here can also be found the various guidelines and rules in force with regard to the visual design, including a walkthrough of the standard templates and their various key constituent components.

Activities

  • Establishing precise page layout, page design and user interface design standards
  • Creation of illustrations, photography, logos, flash animations, and any other audiovisual content (collect the captions)
  • Rich Media Packages (RMP) and any other audiovisual content (collect the captions)
  • Acquisition of copyrights if necessary for third parties elements
  • Programming and scripting with CGI, ColdFusion, Java, XSLT
  • Customization of search functionality (Verity, thesaurus, indexing, search multilingual, collections, topics, HotPages, etc.)
  • Design and validation of accessibility features (WAI, etc.)
  • Design database, application including back-office system
  • Perform any additional necessary translations

Quality Assurance/ Evaluation criteria

  • Content proofreading
  • Pre-translation linguistic advice/editing by DGT.D.2
  • Translations proofreading

Inputs

  • Presentation Style Guide
  • Relevant standards (IPG, technical standards)
  • Relevant constraints (Data Centre, DIGIT, etc.)
  • Site specification
  • Detailed site design specifications
  • Specifications of user platform (browser environment. connection speed required, etc.)
  • Specifications of Web server resources needed
  • Programming proposals based on functional needs of the future site
  • Site “storyboard” , diagrams (site maps, thumbnails, outlines, tables of contents)
  • Content plan/schedule: detailed description of site contents
    (hierarchical list of all content (texts, picture material) by page; for each element identify who is responsible for supplying the content; deadlines)
  • Prototype(s)
  • Schedule for site design and construction

Outputs

  • Graphic design specifications for all page types
  • Site thumbnails, and roughs (Graphics/Interface deign Models, graphic design and interface design sketches)
  • Non-text content (Illustrations, Photography, other A/V, etc.)
  • Text, edited and proofread
  • Finished HTML template(s)
  • Finished examples of key pages
  • Interface design and master page precise layout
  • JavaScript scripts, Java applets, etc. 
Top

1.1. General presentation rules

Improve citizen interactions through a consistent user experience and improved visual presentation. The principle of consistent user experience is becoming common practice and is very important.

Read general presentation rules:

 

Top

1.1.1. Screen layout

The look of a Web page depends on several elements:

  • resolution
  • display size
  • colour settings
  • browser window
  • user’s preferences

Indeed, it is not possible to have complete control over the look of a Web page and it must be taken into account when the page layout is done. Whatever the screen size is, try to maximise the information place in the space visible on the screen before vertical scrolling.

Horizontal scrolling

The standard target screen size is 1024x768 pixels. Layout should be always checked for correct display on 800x600 screens. Horizontal scrolling is not allowed under any circumstances.

Vertical scrolling

The length of a page should not be longer than four times the height of the screen of reference (768 pixels). When pages are longer than two vertical screens a top link should be introduced between paragraphs. 

The header

The top area of a web page is the most visible area of a website. This is the place to identify the institution, the purpose of the site and to offer coherent and consistent navigation aids that are constantly applied across every page in the site.

The content area

The format could be flexible and may be adapted for the "look and feel" of each site. The best approach is to create a page template that specifies the column layout, the position of major navigation links and any other page elements. It should then be applied on every page within a site. The goal is to establish a logical screen layout that allows easily introducing text and graphics without rethinking at any time the basic design approach.

Constructing page(s) layout: fixed layout VS flexible layout

The width of pages can be fixed in size with pixels or can use percentages in order to adapt the layout to the various screen sizes. Both layouts have advantages and disadvantages. However, in the last years, more than 55% of screen resolutions are bigger than 1024x768 and therefore the EUROPA Templates have implemented an approach semi-fixed instead of flexible to avoid having long lines of text. The maximum width has been set up to 984px and the minimum to 770px. The minimum width can be customised depending on each site layout.

Fixed layout

Long lines of text can slow reading. Ideally a line length should be limited to no more than 75-80 characters. If there is only one column of text you could apply a centered fixed layout, where the text block, not the text itself, is centered in the page. However, a sheet of A4 paper is not as wide as a 1024x768 screen, so screen presentation is reformatted for printing. This automatic reformatting can be inhibited by specifying fixed width tables or images that exceed the paper width, resulting in the loss of text. You should not give to any element of the page a width of more than 650 pixels if you want to be sure that the page prints safely. CSS can also be used for a safe printing.

Flexible layout

The use of a multicolumn layout can increase legibility and functionality. The page can be divided into columns containing the site navigation, the main text and maybe a third column with relevant links related content. Several columns allow applying a flexible page layout as they might narrow the main text column to a comfortable line length. Use percentages to define the width of a table (max. 95%) or the cell containing the main text. Images longer than 650px can prevent text on Web pages of being printed correctly.

safe printscreen

Top

1.1.2. General rules

The described rules bellow are commons for all templates.

Cascading Style Sheet/Formatting

Cascading Style Sheet (CSS) helps to simplify the task of maintaining websites by separating formatting information from the structure and content of a document and by providing more sophisticated layout and design features for web pages. All graphical formatting should be done through CSS.

CSS has put an end to the (mis)use of tables as design structure. However, even with current browsers, some CSS-formatting and positioning could be displayed differently in different browsers.

Pages must always be legible when CSS is disabled.

The templates use a standard style sheet, containing a set of classes that determine the presentation of the standard elements and a definition by default for all HTML elements. A local.css should also be used to customise the layout of the content area.

Text/fonts

Reading on screen is harder on the eyes than reading on paper. Texts written specially for websites should be short and concise. Read more about writing for the Web.

A rule of thumb is that a line shouldn’t hold more than 75-80 characters. The optimal readability is achieved around 65 characters per line.

The font Verdana is mandatory for all typographical elements within the page. A general reference "Sans-Serif" must always be included in the specification, to help users who don’t have the specified font.

Underlined text is reserved for hyperlinks. It should not be used for other purposes.

Text must be displayed in a contrasting colour to the background colour used.

Scrolling and moving text should be avoided.

Colours

To maintain the image of the Commission and to assure the readers that they are in EUROPA, it is important that the mandatory colours are respected.

The colours of the European Commission logo in the banner must be dark blue #004494 and yellow #f9e904, dark grey #5c6a6d and grey #c5c7c8.

The site name in the identification banner should be blue, #0065a2.

The subtitle in the identification banner should be white, #ffffff. 

Text colour should be #000000 or in a contrasting colour to the background colour used.

Link colour should be #347C98.

Visited link colour should be #551A8B.

It is recommended to use white (#ffffff) as the background colour of all pages.

Use the hexadecimal format "#nnnnnn" instead of names, which are not all recognised by all browsers.

Top

1.1.3. Images

After text, images are the most basic and common web content. Images are important building blocks in web design. A well-chosen illustration can explain a context or give more depth to a text. Another important aspect is that colour and illustrations catch the readers’ attention and make the web page more attractive.  

Images can for instance be photos, drawings, maps and diagrams, but also text.

The described rules below are common for all templates. Particular elements for each template are presented in specific pages.

Image content

Use images that add value and underline the message of your page. You want to draw the readers’ attention to your page, but not to draw the attention from the message.

Size

It is often better to focus on a detail than to reduce an entire photo to a fraction of its original size.

It is good practice to decide on a few “standard” image sizes when you develop the template for your pages. This makes it easier to update the pages and the result will be more coherent, design-wise.

The images' physical size should be 100% of their displayed size on the page, not resized by the browser. If you upload a big picture to the server and display it at a smaller size, the users need to download an unnecessarily big image. If you upload a small image and resize it to be larger, the users will see a pixelated and/or fuzzy image.

Provide always the exact pixel dimensions when you specify the image using the width and height attributes of the img element.

Text in images

Avoid using images of text (headings, titles, etc.)  It is not always possible to enlarge the text and never possible to change the contrast between text and background, which is difficult for users with visual impairments. Even with browser zoom or screen magnification images of text can appear blurred or pixelated. Prefer real text and if necessary use CSS for font effects and background images.

Be careful when including text in maps and diagrams, you may need to create one image per language. In some cases, a legend can include the explanations to a diagram.

Text in banners, buttons, etc. should be anti-aliased unless it is set in a typeface designed for the Web. Anti-aliasing removes jagged edges by blending the edges of a font with the surrounding pixels. The resulting object is thus better integrated in the image. For small text sizes, you need to experiment to see what works best for the size and the typeface.

Images as background

Avoid using large background images unless they are light. A patterned and contrasted background makes it more difficult to read text in a page.

ALTernative text - ALT tag

Images must have an ALTernative text describing the image content. ALT is an HTML attribute that is displayed if the browser can’t show the image. It is also essential for vocal browsers. It should be no more than 70 characters.

For example:

<img src="button_presidency_en.gif" alt="Presidency of the EU" />

Decorative images are those that convey no information. For these, provide a text alternative but leave it empty (alt=""). This informs the user (or assistive technology) that the image is not relevant to the meaning of the content. Purely decorative images can be better inserted using CSS rather than in mark-up, improving maintainability.

Often images have functionality, beyond their information content. Always remember that you need to describe the functionality rather than the image itself. For example, buttons and links indicate actions. The text alternative should describe the action, not the image. For example, for a “print this page” button with a printer icon, a proper alternative text is "Print this page" and not "printer icon".

Charts, graphs and infographics are complex images to be described in a few words. You should provide a brief ALT text description of the image and then provide a longer description elsewhere. There are several ways of providing a long description for images: within the same page, adding a page describing the image and linking to it via a normal text link or via the “longdesc” attribute added to the <img> tag that provides a link to the long description page.

Example of longdesc attribute:

<img src="chart_unemployment_en.gif" alt="Chart showing EU unemployment by countries in 2010" longdesc="chart_description_en.html" />

Inline vs background images

Images can be inserted in a page using the HTML tag <img> or as background within a CSS. Use CSS background images for repeating decorative images and inline images for functional or images that convey information.

One of the problems with background images is accessibility. When you turn off CSS, background images do not have ALT text and some operating systems such as Windows High Contrast mode have the effect of hiding CSS background images. Therefore, the user will not be able to fully use your website. 

Functional images (e.g. a print icon opening the print function, a play button, etc.) or images providing information (e.g. PDF icons within a link with alt text PDF to convey information about the file format to screen readers) should be inline images inserted with the tag <img>.

CSS sprites

CSS sprites is a technique that allows by using CSS positioning to selectively display composite background images. They are a useful method to display graphics while preserving bandwidth (save HTTP requests) and improving page rendering times (the combined image is often smaller in size than the individual images).  

While it is certain the advantages of the sprite technique, it may incorrectly be assumed that all sliced images should be placed as backgrounds — even images that convey important information. The results would be a less accessible site, and would limit the potential benefits of the title and ALT attributes in the HTML. To maximize accessibility and usability, use CSS sprites only for repeating decorative effects.

Animations

Animated GIFs can be used for simple animations, but be aware that some users find this very annoying.

Flash is the best format for vector animations, and the plug-in is very common. You should still make sure the information is available in another format for those who don’t want to – or can’t – see Flash files.

File formats

Images on EUROPA must be in either JPG, or GIF format. PNG format is also allowed. As a rule of thumb, JPG is best for photos and illustrations with many colors. GIF is better for text and illustrations with areas of solid color (such as maps and diagrams). PNG is best for transparency effects but many older browsers do not support this format.

You can read more about image formats in the standard chapter.

Compression

Most graphic software lets you view the effect of different compression levels; try to keep the images small without obvious quality loss.

Beware of quality loss through repeated compression. Changes should be carried out on the original file formats (e.g. PSD for Photoshop) not on the final files (GIF, JPG).

JP(E)G compression removes information from the digital image, thus reducing the file size. This means visual information is lost permanently. If you need to change a JPG, go back to the original image file. Compression of already compressed files can give unexpected results.

GIF compression is most suitable for flat areas of colour. A dithered GIF has softer transitions between different colours, as colours between system colours are approximated. An interlaced GIF image gives a nice effect for users on slow Internet connections. The image is displayed one horizontal row at a time, but not from top to bottom, allowing the graphic information to be stored in a multi-pass format.

Standard images and icons

Always use the standard icons of EUROPA (language codes, PDF, ZIP, arrows, flags, etc.) when available:

Copyrights for third party material

All third-party material published on EUROPA must be checked for the necessary copyrights. If the material is not the property of the Commission, it should not be published or removed immediately. The images in our Audiovisual portal are free to download and use.

If contractors prepare material for the Commission that includes third-party material for which rights need to be obtained, these contractors must provide the necessary proof of their acquisition. Pay special attention to photos of buildings, the rights to reproduce them is under discussion in several European countries.

If the Commission prepares material itself that includes third-party material for which rights need to be obtained, all the necessary proof of their acquisition must be kept on file.

Read more about legal notice and copyright.

Top

1.1.4. Links

HTML hypertext links have four main properties:

  • Label:
    The label of a link is the visual part of a link: it can be text, image or image map. This is also the active area that reacts to user action.
  • Target :
    The target URL designates the destination of the link.
  • Target page:
    The window in which the target URL should be open.
  • State:
    Links have four states depending on previous user actions: visited, hover, active and focus.

A hypertext link is created with this kind of HTML tag:

<a href="http://europa.eu/” target=”_blank”>Document</a>

The target is 'http://europa.eu'.
The window is '_blank'.
The label is 'Document'.

General rules

The label of a link is the visual part of a link: it can be text, image or image map. This is also the active area that reacts to user action.

Recommendations for this part of the link: Clearly identify the target of each link.

In addition to clear link text, content developers may further clarify the target of a link with an informative link title (e.g. the "title" attribute in HTML).

Read more to write good link labels on Menus and links - Helping users navigate page.

The URL of the link can be specified in several ways:

Absolute URLs

These URLs are complete and include the protocol, for example "http://domain.eu/site/index.htm".

This is the format to use to create a link to a document that is on another domain (external link). This also includes links from europa.eu to ec.europa.eu or any other subdomain and vice-versa.

For internal links, this format must not be used as it destroys the independence of the test and production environments by crossing over between them.

Relative URLs

These URLs define the path to follow from the calling document to the destination document. For example: "../../index.html". This is the preferred method within a EUROPA site.

Semi-absolute URLs

These URLs start with the root folder of the web server, for example "/site/index.html".
This is particularly useful to return to higher levels of EUROPA or other sites and also to reference standard elements, because the HREF value remains the same at whichever level it is used.

All links should open in the current window.

The appearance of a link can be defined for each of its state, thanks to CSS.

The only restrictions are the following:

  • Non-visited text link should always be underlined.
  • Links in other states (visited, active, hover, focus) should be readable, especially regarding contrast between text colour and background colour.

It is also recommended to keep the same font size for each state.

  • Link colour should be #027AC6.
  • Visited link should be #551A8B.
  • A special colour for "hover", "active" and "focus" status is optional.

Specific rules

The basic rule is that links must always point to a page in the same language as the source page.

However, the destination document does not always exist in the appropriate language. In addition, depending on the context, the target document type and language availability, a significant number of situations could occur and for each case a rule should be defined for your website.

Here are the most common situations and some advices:

Navigation links

The situation must be evaluated and defined on a site-by-site basis.

  • The website owner is free to decide about the link policy he wants to apply for its website.
  • Using language and file type icons with file size may alter the design of web page.

Navigation path and service tools must not contain file type and language icons in order to preserve design.

Text links

The target link does not exist in the same language as the calling page.

Create a link to the document in the same language as the source page. By clicking on the link, a linguistic redirection page will appear offering the user with the list of available languages.

Example: The EU in Spain

The target link exists or does not exist in the same language as the calling page but you want to show the languages available for this document.

  • Create a link to the document regardless of the fact whether the document in the language of the page exists. In case it does not exist, a linguistic redirection page will appear offering the user with the list of available languages.
  • Following the linked text, insert the single language-choice icon that will trigger a pop-up showing the linguistic coverage of the document. This icon will call a web service that will detect automatically all languages available for static pages on the EUROPA file system and RAPID.

Example: European Commission template  Choose translations of the previous link  

Please note that the automatic redirection and the web service described above are only available for static pages (managed manually or by means of the CWCMS). Dynamic applications should create their own web service and linguistic redirection page. This way other websites could link to dynamic pages using the web service and detect automatically the available languages. You can look into the instructions on how to set up a web servicepdf(57 kB) Choose translations of the previous link  for dynamic applications.

Read more about Multilingualism.

  • Create a link to the document regardless of the fact whether the document in the language of the page exist. In case it does not exist, a linguistic redirection page will appear offering the user with the list of available languages.
  • Following the linked text, insert the file type icon indicating the type of file.
  • Following the file type icon, indicate the size of the file in brackets in Kb, Mb or b.
  • The document icons and size should be included within the <a> tag.
  • If you want to show for PDFs or other documents the whole linguistic coverage, add the clickable single language-choice icon that will trigger a pop-up displaying all the available languages.

More information on links to binary documents on the Document icons page.

Examples: Templatezip(499 kB) (displaying single language) - Test filecrtext(1 kB) Choose translations of the previous link   Choose translations of the previous link   (displaying multiple languages).

See also the remark on how to set up a Web service for dynamic applications mentioned in the sub-title above.

  • The target link is always on the image.
  • The image must have an alternative text, describing the target page. If the language of the alternative text is in a different language than the rest of the page, the lang attribute must be specified in the <img> tag.
  • If the language of the target page is different, it must be specified with the href lang attribute in the <a> tag.
  • Language and file type change will be indicated in alternative text and language attribute. No additional icons should be used.

Several different links may be attached to different areas of an image (common examples are links to different countries from a map or to different persons from a photo).

Image maps must be client-side, meaning that they must be inserted in the HTML code of the page. This is normally done by all web editing software.

The image must have an alternative text for each link of each area in the language of the page, describing the target page of the link, and also indicating the language of the target page if it’s different (same rule as above for Image links).

Top

1.1.5. Print

Computer screens are very different from the printed page. Screen presentation is reformatted for printing. This automatic reformatting can be inhibited by specifying fixed width that exceeds the paper width, resulting in the loss of text. For a safe printing, do not go longer that a fix width of 650 pixels.

In general, browsers do not print background images. If visual effects are produced by a combination of background and foreground images, the print and screen versions may differ considerably.

For a safe printing you can use CSS.

CSS2 introduced a mechanism for closer control over printing web pages that are styled using style sheets. The latest versions of Web browsers support CSS2 print media stylesheets, which can be used to print documents in a style better suited to the medium.

The code line <link rel="stylesheet" type="text/css" href="filename.css" media="print"> on the header of HTML documents allows to refer a CSS that will be activated only when the print function is called. In this special printing CSS, you can redefine the properties of the classes applied in the HTML pages.

An additional way to  create a "print-friendly version" of an HTML page with CSS (apart from the specific declaration with the attribute media=”print”) is to put specific instructions inside the (main) CSS itself, such as for instance:

@media print {
body { color:#000; }
.layoutRight{ display: none; }
.layoutContent { background-color: #fff; }
}

This approach has been implemented in the standard templates. So they offer a print-friendly version by default. 

Top

1.2. Standard templates

The standard presentation provides the following advantages to both users and information providers:

  • A "corporate image" for the Commission which confirms the coherent look of the service;
  • Ease of use through:
    • standard facilities recognised by consistent appearance and position on every page providing the same functions throughout the site at all levels
    • navigational aids both "vertically" and "horizontally" (for example, between languages)

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

The pages using this template must contain at least all the elements shown in the mandatory version. Possible additional standard elements are shown in the complete version.

There are two templates:

The "europa.eu" address space is interinstitutional and brings together information from all the European institutions. Even though each institution manages its own site, EUROPA is designed as the starting point for all information concerning the European Union. The interinstitutional pages are administered by the Commission (DG COMM) on behalf of and in close collaboration with the other institutions.

Sites that have an interinstitutional mission and content or which are not linked to a particular institution or DG can be hosted at EU level and must use the Interinstituional template.

For the Commission's Directorates-General, the default address space is "ec.europa.eu".

Sites with which the Commission's departments would be associated without having adequate control of the information disseminated must use addresses outside the "ec.europa.eu" domain.

You can download templates in 24 languages on their respective pages.

The templates are now available in a responsive design.

Top

1.2.1. 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ština dansk Deutsch eesti keel ελληνικά English español français Gaeilge hrvatski italiano latviešu valoda lietuvių kalba magyar Malti Nederlands polski português română slovenčina slovenščina suomi svenska
  • 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(2 MB) to use on the identification banner.

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

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

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.

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.

The template is translated into 24 languages. Here is the list of all translated labelsexcel8book(205 kB) Choose translations of the previous link .

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.

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.

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

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

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

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.

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.

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

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

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.

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 decrease Resizing 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.

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.

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 Choose translations of the previous link  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.
Top

1.2.2. 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ština dansk Deutsch eesti keel ελληνικά English español français Gaeilge hrvatski italiano latviešu valoda lietuvių kalba magyar Malti Nederlands polski português română slovenčina slovenščina suomi svenska
  • 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 fontzip to use on the identification banner.

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

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

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.

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.

The template is translated into 24 languages. This is the list of all translated labelsexcel8book(205 kB) Choose translations of the previous link .

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.

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.

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.

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

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

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

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

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

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

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

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

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 Choose translations of the previous link  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.
Top

1.3. Web usability

Web usability is an approach to make websites easy to use for an end-user, without requiring her (or him) to undergo any specialized training. The user should be able to intuitively relate the actions he needs to perform on the web page with other interactions he sees in the general domain of life, e.g. press of a button leads to some action. The broad goal of usability can be:

  • Present the information to the user in a clear and concise way.
  • Give the correct choices to the users in a very obvious way.
  • Remove any ambiguity regarding the consequences of an action, e.g. clicking on delete/remove/purchase.
  • Put the most important thing in the right place on a web page or a web application.

What to do

It is important to understand:

  • Why you are developing a site.
  • Who should come to your site.
  • When and why those people might come.

Usability aspects, therefore, should be in mind during the whole process of creating and producing a site:

At the definition phase:

  • during the concept definition and planning of a new site
  • during the content definition and structural organisation of a new site

At the development/production of a prototype phase:

  • during the final decision of the final look and the “feel” of the new site
  • during the production of content and the technical elements involved
  • during the (internal/external) testing of the new site

At the quality control phase:

  • during the site quality control/quality assurance (internal or external) testing phase

At the publishing/distribution phase:

  • during the official launch of the new site
  • during the publicising of the new site

At the maintenance/evaluation phase

  • during the editorial maintenance and updates of a site
  • during the technical maintenance and updates of a site

Checklist

When evaluating the usability of a site, ask these questions:

  • Can the user easily find the information he is looking for?
  • Are the services offered easy to access and are the features offered easy to understand?
  • Is the content of the site presented in a consistent manner?
  • Has the site a logical and comprehensive structure and efficient navigation?
  • Are explanations provided on how the site has been organised or how navigation works?
  • Is it possible for the user to interact with the site and provide feedback? Does he get a quick and satisfactory reply?
  • Are search features offered?
  • etc.

As for the methods of evaluating those criterias, the famous online survey which gathers the general user satisfaction rate about a website is not sufficient. There are a variety of approaches to usability evaluation that you may choose to take.

Inputs

 

Outputs

  • Project report
  • Project quality plan report
  • Project testing report
  • Project quality control report
  • Site evaluation report

Guidelines and references

  •  On 20 April 2004, the European Commission has published its Communication from the Commission to the Council, the European Parliament, the Economic and Social Committee and the Committee of the Regions on implementing the information and communication strategy for the European Unionpdf [298 KB] where one of the main objectives is “to use the Internet  to associate the public in European decision making and to listen to the public and their concerns in order to improve the perception of the EU and its institutions and their legitimacy”.
  • On 2 October 2002, the European Commission has published its Communication from the Commission to the Council, the European Parliament, the Economic and Social Committee and the Committee of the Regions on an information and communication Strategy for the European Unionpdf [149 KB] where it is stressed that “the EUROPA site remains an essential instrument  for bringing the institutions closer to ordinary people and facilitating  contact between Europeans and should be geared more to meeting information requirements of the general public, facilitating access to information sources directly linked to selected priority issues”.
  • On 25 July 2001, in its White Paper on European Governancepdf [179 KB], the European Commission acknowledged that genuine and coherent information and communications policy with the appropriate instruments to carry such policy were the main prerequisites for the development of better European governance.
  • On 6 July 2001, the European Commission has published its Communication by the President to the Commission in Agreement with Vice-President Neil Kinnock and Mr. Erkki Liikanen "Towards the e-Commission - EUROPA 2nd Generationpdf Choose translations of the previous link " [95 KB] where the roadmap is set for the implementation of 2nd generation  websites, reaffirming that EUROPA should offer “information services providing easy access for all to updated, user-friendly and multilingual information tailored to users’ needs”.
  • On 27 June 2001, the European Commission has published its Communication from the Commission to the Council, European Parliament  Economic and Social Committee, the Committee of the Regions on a new framework for cooperation  on an information and Communication strategy of the European Unionpdf [194 KB] where it is reaffirmed that “the main features of the new EUROPA sites should be interactivity, rapid and authentic consultations, research into support by public opinion and a simplified administrative practice for everyone”.
  • On December 1999, the eEurope - an Information Society for All initiative was launched by the European Commission to bring the benefits of the Information Society to all Europeans and to improve productivity and their quality of life by stimulating, among others, interactive public services, accessible to all and offered on multiple platforms.

External sources

Tools

The task of evaluating and improving the usability of websites can be daunting given the quantity of sites being produced, the frequency of updates, and the sheer size of many sites. As a result, some automated support for web designers and usability specialists will become an increasing necessity within the overall usability process. Automated usability tools can help save time and money in design and user testing improve consistency and quality of site design, and improve the systematic application of usability standards. Here are some examples of usability tools available in the market:

  • Web Link Validator , or W3C Link Checker , is a site management and link checker tools that help webmasters automate the process of web site testing: finds broken links (including those using JavaScript and Flash), orphaned files, slow-loading, deep, outdated and small-sized pages.
  • Web Static Analyzer Tool (WebSAT) - checks web pages HTML against typical usability guidelines.
  • Web Category Analysis Tool (WebCAT) - lets the usability engineer construct and conduct a web category analysis.
  • Web Variable Instrumenter Program (WebVIP) - instruments a website to capture a log of user interaction.
  • Framework for Logging Usability Data (FLUD) - a file format and parser for representation of user interaction logs.
  • FLUDViz Tool - produces a 2D visualization of a single user session.
  • VisVIP Tool - produces a 3D visualization of user navigation paths through a website.
  • TreeDec - adds navigation aids to the pages of a website.

Contact

For further information on usability issues, please contact the EUROPA team.

Workflow Details

  • Defining and planning a new site (i.e. type of site, possible definition and structure).
  • Content analysis, identification and organisation of information to be published (i.e. site content and functionality, content plan, tools and services for the site, WAI elements, metadata, etc.)
  • Defining the prototype.
  • Internal testing of the new site prior to the official launch.
  • External testing of the site prior to the official launch.
  • Regular and constant maintenance and evaluation in order to achieve optimal performance of the site.
Top

1.3.1. Usability testing

Usability testing is a method by which users are asked to perform certain tasks in an effort to measure the website's ease-of-use, task time, and the user's perception of the experience.

Usability testing can be done formally, in a usability lab with video cameras, or informally, with paper mock-ups of website. Changes are made to the website based on the findings of the usability tests. Whether the test is formal or informal, usability test participants are encouraged to think aloud and voice their every opinion. Usability testing is best used in conjunction with user-centered design, a method by which a product is designed according to the needs and specifications of users.

Usability testing allows you to measure the quality of a user's experience when they interact with your website. It’s one of the best ways to find out what is or isn't working on your site.

What to do

Plan scope, issues, participants, location, budget

  • What are you going to test?
  • What concerns do you have about the site that you want to test?
  • Which users should participate in the test?
  • Where will you conduct the test? What is your budget for testing?

Develop scenarios

  • Select relevant tasks for users to try.
  • Prepare, try out, and refine scenarios for those tasks.

Make sure the scenarios are clearly written and not too much of a challenge for the allotted test time.

Recruit test participants

  • Recruit users who accurately represent your current or potential users.
  • Consider using a firm that specializes in recruiting for usability tests.
  • If you do it yourself, build a database of users for future tests.

Conduct usability testing

  • Make sure participants know that they are helping by trying out the website; the site is being tested, not them.
  • Get participants to think aloud as they work.
  • Let participants express their reactions.
  • Listen! Do not lead. Be sure to stay neutral in your words and body language. Be careful not to ask leading questions that may skew the participants' responses.
  • Take detailed, useful notes concentrating on observations of behaviour rather than inferences.

Make good use of the test results

  • Compile the data from all participants.
  • List the problems that participants had.
  • Sort the problems by priority and frequency of the problem.
  • Develop solutions. Fix the problems.
  • Test the revised version to ensure you made the right design decisions.

 

More info on this subject

Who can help

EUROPA team
European Commission
DG Communication
Unit A.5 - EUROPA site 

Top

1.4. Related Guidelines

Photo - Audiovisual Libraries of other institutions

Colours

Typefaces

Dummy text generator for webdesigners is a tool for comparing the visual impression of different typefaces.

Top