ECDC CORPORATE Web design guidelines Draft v0.3 www.ecdc.europa.eu
CORPORATE REPORT Web design guidelines Introduction 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. 1
CORPORATE REPORT Web design guidelines ECDC online tools 3
Web design guidelines CORPORATE REPORT Common structure 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 engine 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. Network toolbar Header Horizontal navigation Content Footer 4
CORPORATE REPORT Web design guidelines Web portal 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. New design to come 5
Web design guidelines CORPORATE REPORT Extranet 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 important, 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 extranet websites have a smaller header to give maximum room to the application. 6
CORPORATE REPORT Web design guidelines Intranet 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 relaxed 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 orange. The structure and the secondary colours remain the same. New design to come 7
Web design guidelines CORPORATE REPORT Internal tool 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. 8
CORPORATE REPORT Web design guidelines Content on CD and USB key 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 overview 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. 9
Web design guidelines CORPORATE REPORT Sub-branded websites 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 navigation, 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. 10
CORPORATE REPORT Web design guidelines Newsletter 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. 11
Web design guidelines CORPORATE REPORT 12
CORPORATE REPORT Web design guidelines Web portal 13
Web design guidelines CORPORATE REPORT Right column Always right column for related items. Only for related items, never for links to subsections related 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 14
CORPORATE REPORT Web design guidelines Content on one column 15
Web design guidelines CORPORATE REPORT Content with left navigation 16
CORPORATE REPORT Web design guidelines Content on two columns 17
Web design guidelines CORPORATE REPORT Content with full page items 18
CORPORATE REPORT Web design guidelines New design to come 19
CORPORATE REPORT Web design guidelines Technical specifications 21
Web design guidelines CORPORATE REPORT Size of elements 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. 22
CORPORATE REPORT Web design guidelines 23
Web design guidelines CORPORATE REPORT 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 Green #68b022 underlined standalone links 12pt, dark grey #333333 for links in a list 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 text in scrolling menus 10pt, dark grey #333333 24
CORPORATE REPORT Web design guidelines 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 All search engines with light green gradient Gradient: Top #9b9b9b Bottom #7c7c7c Gradient: Top #white Bottom #ececec 25
Web design guidelines CORPORATE REPORT Tables for web Background of header #E7F0D8 Horizontal lines 1pix #E5E5E5 Alternate row backgrounds White/#F9F9F9 No vertical lines Rollover and selected row background #C3DFA7 26
CORPORATE REPORT Web design guidelines Sharepoint 2010 27
Web design guidelines CORPORATE REPORT Inclusion of Sharepoint 2010 ribbon Ribbon covers full width of browser. But functionalities of ribbon only on top of the application itself. Browse mode: Tools mode: 28
CORPORATE REPORT Web design guidelines Popup mode: Sizes and colours: 29
European Centre for Disease Prevention and Control (ECDC) Postal address: ECDC, 171 83 Stockholm, Sweden Visiting address: 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