This is the Commission's new web presence and it is still evolving. We haven't yet implemented all the functions we plan to, but if you spot anything you feel is incorrect or not working properly, please let us know.
Our choices are based on evidence gathered from user testing and industry best practice. They are meant to make it easy for you to carry out your tasks.
As the site develops, some content will be available in all 24 EU languages and some content in fewer languages, based on user needs and available translation resources.
We're using single-column layouts (content goes beneath content) because they support scan reading patterns on a web page. This type of layout is well-suited to our responsive design approach, which makes the website usable across devices, from PCs to smartphones and tablets.
We are structuring pages so that the most important content goes at the top. Users see it first, and can scroll down for more. The fold concept is less relevant nowadays - on small screens users will never get the full overview, and studies show that users accept scrolling down.
Use of links
Links open in same tab or window
By default we avoid forcing links to open in a different window or tab, because that would:
- not meet our accessibility requirements for people with disabilities
- take control away from users: most browsers support the ‘open in new tab’ functionality, either by right-clicking or ctrl/cmd + click
- assume users are familiar with and can operate windows and tabs
- oblige users to remember that they have opened a new tab and can't just press the back button to return to the previous page
- potentially create problems if a smartphone user has already opened the maximum number of windows on their device
We use links displayed inside a block shape because this extends the clickable area around the link, which helps when selecting content on a touch screen. That means you don't miss the link if you tap just next to it instead of on it.
No top-heavy navigation
One of our design principles is to let users navigate through the actual page content instead of filling the header with a large list of links (known as 'furniture navigation'). This is why you don't see lots of links at the top of the page.
Page location - 'breadcrumbs'
So-called breadcrumbs appear horizontally across the top of the page and allow you to keep track of your location on the site by providing links back to higher-level pages that have been navigated through.
We always try to avoid duplicating content, so we don't include the page title as the last element of the breadcrumb. Instead, we end the breadcrumb trail with the separating symbol '>' to communicate that the current page belongs to the last breadcrumb element.
For example, the breadcrumb trail for a policy area may appear like this:
European Commission > Strategy >
The menu, found at the top right of the screen, is being tested thoroughly. We are looking at reducing the size on both desktop and mobile versions.
White space can serve multiple purposes and is embedded within our design. It is not wasted space – using white space in the proper way has many advantages. It:
- improves legibility
- increases comprehension level
- brings focus to elements on the page
Use of images and videos
Our aim is to use visual assets such as images and videos if and where they add value and relevance for the user.
We are in the process of developing different types of content on the site. Some content types, such as news items or events, will be more image rich than others.
We use images on a case-by-case basis, where there is a clear message that can be better conveyed visually. The design principle is to avoid unnecessary clutter.
The European Commission uses a custom font.
For the moment, we are using the Arial font because it:
- is supported by most operating systems
- can be used in all 24 EU languages
- is a reasonably close match with the Commission's custom font