www.ecdc.europa.eu
Web design guidelines
1
Part of a whole design project which includes: • Web portal
• Extranet • Intranet
• Sub-branded websites
-> Consistency between all ECDC websites
When you have a project, templates and Photoshop files are available upon request to Health Communication Unit.
3
ECDC online tools
4
All ECDC websites, Intranet, Extranet, related websites, are built according to the same structure.
• Network toolbar: This toolbar clearly mentions the ECDC ownership of the website, and is a link to all other ECDC websites.
• Header: The header clearly specifies the name of the website and includes the ECDC logo. Metanavigation, language tools, login tools and the main search en-gine should be placed in this header.
• Horizontal navigation: The first level of navigation is always horizontal. Submenus are possible.
• Content: The construction of the home-page, in four columns and different types of inner pages obey strict rules.
• Footer: It contains the copyright and the legal notice.
Common structure
Network toolbar Header Horizontal navigation Content Footer5
The web portal is the public website. In order to keep a certain continuity with the previous website, the main colour is the green and the secondary colour is the blue. The design is clear and simple, enhanced by the use of gradients and light grey to give a modern touch.
Web portal
6
The ECDC extranet homepage is the entry point to all extranets managed by ECDC. These extranets could be managed on different platforms, by different units. The extranet homepage has the same structure as the web portal, with some specificities:
• Title becomes explicitly “Extranet”.
• Horizontal navigation is replaced by a scrolling menu, as the number of links could be variable and impor-tant, according to the user account.
Extranets have their own specificities:
• The horizontal navigation becomes the one from the extranet.
• The extranet homepage has a regular header, but ex-tranet websites have a smaller header to give maxi-mum room to the application.
7
The ECDC Intranet keeps the same structure as the web portal, and keeps the same basic ECDC green colour. It differs slightly in order to visually differentiate it: • Title of website clearly mentions “Intranet”. • Greyscales are replaced by brown scales.
These slight changes help in giving a specific and re-laxed atmosphere to the website.
The specific intranet which appears in case of crisis, the PHE intranet, giving specific information about the crisis, differs in one point only. Green is replaced by or-ange. The structure and the secondary colours remain the same.
Intranet
8
Internal tools are available from the intranet. Therefore they keep the same color scheme.
Internal tools have their own specificities:
• The horizontal navigation becomes the one from the tool.
• The intranet website has a regular header, but internal tools have a smaller header to give maximum room to the application.
9
Interfaces on CDs or USB keys are built in HTML, so they obey the rules which apply to online elements. They aim to give small contents and mainly to give a clear over-view of all PDF documents included in the support, and to make them easly accessible by clicking on the links. For technical and usability reasons, this tool has some major specificities:
• No network toolbar. • Header with ECDC logo only
• No horizontal navigation. Title of the application in the horizontal bar.
• Navigation on the left.
10
Sub-branded websites can have their own colour scheme. However, for consistency with all other ECDC websites, they must keep the ECDC structure with the network toolbar, the header, the horizontal naviga-tion, the content in four columns on the home page, the footer.
The main logo is placed in the header, on the left, and ECDC logo is always present on the right in a lighter and dissociate background.
11
ECDC newsletter keeps three characteristics from the basic structure:
• The header, in which is the ECDC logo and the title of the newsletter
• The content. • The footer.
The size of the newsletter is always 710 pixels wide in order to fit in most Outlook windows.
13
Web portal
14
• Always right column for related items. Only for re-lated items, never for links to subsections rere-lated to the content. Links to subsections should be placed in the content itself, or in the left navigation if necessary. -> For highlights
-> For search tools -> For external links
15
16
17
18
19
21
Technical specifications
22
Following sizes are based on the web portal. However, they are valid for all ECDC websites.
• Width is fixed (964 px) and height is variable.
• Website is centred in the browser window, white background.
• The footer is locked to the content, and always 30 pixels under the last element. When the page is scrolling, the footer is always 5 pixels from the bottom.
Be aware that some applications have a reduced header. In this particular case, the weight of the header is not 123 pixels but 31 pixels.
24
Fonts and colours
Tahoma is the only font used for text. Line height is always auto.
Not clickable text Clickable text On rollover
Default text 12pt, dark grey #333333 12pt, green #68b022 for standalone links
12pt, dark grey #333333 for links in a list
Green #68b022 underlined
Top network bar 10pt, #cccccc
Top header (Sitemap...) 10pt, light grey #b2b2b2 10pt, grey #666666 Green #68b022 underlined Header boxes 10pt bold, dark grey #333333 10pt bold, dark grey #333333 Green #68b022 underlined Horizontal navigation 12pt bold, white #333333
Horizontal navigation submenus 11pt bold, white #333333
Bredcrumb 10pt, grey #666666 10pt green #68b022 Green #68b022 underlined Bredcrumb: you are here 10pt, light grey#b2b2b2
Footer 11pt light grey #b2b2b2 11pt light grey #b2b2b2 Green #68b022 underlined Title of webpart 12pt bold, white, capitalised 12pt bold, white, capitalised White, capitalised,
underlined Dates and locations 10pt, #999999
Caption 9pt, #666666 Right column
Title 11pt bold, #666666 capitalised
Text on light background 10pt, dark grey #333333 10pt, dark grey #333333 Green #68b022 underlined Text on dark background 10pt bold, white 10pt bold, white White underlined
Specificities on homepage
Title of first news 16pt bold, dark grey #333333 Green #68b022 underlined Title of other news 12pt bold, dark grey #333333 Green #68b022 underlined Titles of health topics 12pt bold, dark grey #333333 White
Text in health topics 17pt bold, #333333 or white, depending on picture in background
Titles in content
Main title of page 18pt bold Level 1 14pt bold Level 1.1 12pt bold Left navigation
Levels 2 11pt bold, dark grey #333333 Green #68b022 Levels 3, 4 11pt, dark grey #333333 Green #68b022 Forms
preloaded text in fields 10pt, #999999
25
Background colours
Blue: #7cbdc1 Light grey: #f2f2f2 Gradient: Top # f2f2f2 Bottom #eaeaea Gradient: Top #8cc052 Bottom #68b022 Gradient: Top #afc6c7 Bottom #93b8ba Gradient: Top #eaf0df Bottom #cddfb2 Gradient: Top #9b9b9b Bottom #7c7c7c Gradient: Top #white Bottom #ecececAll search engines with light green gradient
26
Tables for web
Background of header #E7F0D8 Horizontal lines 1pix #E5E5E5
Alternate row backgrounds White/#F9F9F9 No vertical lines
27
Sharepoint 2010
28
Inclusion of Sharepoint 2010 ribbon
Ribbon covers full width of browser. But functionalities of ribbon only on top of the application itself.
Browse mode:
29
Popup mode:
Tomtebodavägen 11A, Solna, Sweden Phone +46 (0)8 58 60 1000
Fax +46 (0)8 58 60 1001 www.ecdc.europa.eu
An agency of the European Union www.europa.eu
