Account services

The layout of a page

EEA is a government-like organisation, and we can have no barriers between the citizen and the institution. Accessibility for the disabled must be thought in from the start.

Site titles and subsites

In the period from 1999 to 2006 the subsites had their own individual colour schemes. This made it easy to distinguish between subsites. But the decision on what is a subsite, and what is a section on the Eionet portal is sometimes arbitrary and driven by the technological choices. For GEMET, it could just as easily have been http://gemet.eionet.europa.eu as it could have been http://eionet.europa.eu/gemet (The latter is the current solution). In the previous design the first case would have had a different colour scheme and a different site title. But since it is a folder of the portal, it has none of these things. Does it matter to the user? No. The user doesn't care if he is on a subsite or a section of the portal. Therefore we make a new rule for the site title.

How to have 1,2 or 3 columns

The default style is two columns. One narrow column to the left and a major work area to the right. The left column is coded as <div id="leftcolumn"> after the breadcrumbs. If you want three columns, then you set the class="threecolumns" on the <body> element. The stylesheet has rules that set a different margin on the workarea and makes the <div id="rightcolumn"> visible if the threecolumns class is set. The <div id="rightcolumn"> is placed right after the <div id="leftcolumn">.

If you want only one column, you set the class="fullscreen" on the <body> element. In fact this is what the toggle-fullscreen button does. It uses javascript to add/remove the fullscreen class to the body element and uses a cookie to remember the user's choice.

Search

About half of all users will always use search immediately. 20% will always navigate through links and the rest will try to find the object they are looking for by clicking. If the item is not found within a few clicks, they will use the search. Since nobody knows when the user goes for the search box, it makes best sense to provide the search on every page. In the Eionet design that means "put it in the navigation panel". You can do that either as an input box or as a link to a special search page.

Individual elements

Container

Everything except the footer is encapsulated in a <div id="container">. This has the purpose of ensuring that all columns have ended before the footer is rendered.

Tool ribbon

The <div id="toolribbon"> contains generic tools for the page. The links to the left go to other of EEA's networks. The links to the right are diverse operations, such as login, search, print, toggle fullscreen. The developer of the website has some freedom to choose the operations that are meaningful for that site. There are no <img> tags here. All the icons you see are CSS backgrounds. If you want to provide your own the dimensions must be 16x16 pixel. A tool is an <a> with <span> around the text. If you want to show an icon with the text, you just set left padding to 18px, and a non-repeating background image. If you want to show only an icon, then it is a little trickier. We use the Fahrner Image Replacement (FIR), and the <span> is used to remove the display of the text. The <a> must have a title attribute. It will be shown as a tooltip if the user hovers over the link, and when FIR is used, this is what a blind user will hear.

Originally we didn't know if the <div id="menuribbon"> would contain more than the dropdown menus. We expect the dropdown menus to be replaced from time to time, so it it best if it is implemented as a file called dropdown.xml and included with server-side scripting.

The dropdown menus are to be used for global navigation. This navigation will not change from Eionet site to Eionet site. It does not indicate where the user is at the moment.

The breadcrumb trail shows your location and how deep into the site you have gone. It's purpose is not only to allow the user to bail out of a page, it also gives them a sense of context so they don't get lost. You can read more in Jakob Nielsen's alertbox.

The breadcrumb trail is hierarchially structured like a filename with the Eionet site as the first object, then a short word describing this site as the second with a link to the toplevel and then a list of sublevels all the way down to the page you are looking at. The last part of the trail must not be clickable as it is very confusing for the user to click on a link that goes to the same document. The user will experience this as "it does not work".

Left column

The left column is for local navigation and can change for the section. Normally a section is a website, but it can also be a major part of another website, such as /directory, and /testfolder/design2007/gemet. The main purpose is to provide quick links to the main areas of the same website. Don't use it to link to something that has different site title or layout then the current page. That will confuse the user. If you want to provide links to someplace else create a links page and describe what the user will encounter if he decides to go there.

The left column is implemented as a <div id="leftcolumn"> It has no styling of the content inside it, but there is a selectable style that makes a list look like a menu. To use it you write <div id="leftcolumn" class="localnav">.

Right column

There is an optional column on the right side of the main area. You can use it to do several things: You can describe what the user is looking at in the main area, you can set up buttons that modify the main content or you can have links to alternative/in-depth information.

If there is little content in the main area or it doesn't fill the whole available width then you definitely must have something in the right panel to provide a visual balance on the page.

A trick we often use is to repeat the links that are important but not visible in the main text unless the user scrolls. This way we increase visibility.

The right column is implemented as a <div id="rightcolumn"> It has no styling of the content inside it, but there are selectable styles. The first one is called operations, it makes a list of links look like buttons. The second one is called quickjumps for historical reasons. It makes a list of links into a simple menu, <h2>s are styled as a small headline, and <p> has a dotted top border.

Work area

The <div id="workarea"> contains the main content.

Tabs

Tabs are used to partition one long page into shorter pages. Seeing what is on another tab has no effect on the breadcrumbs, as you are conceptually looking at the same page. Printing does not combine the tabs into one long page. It only prints the tab you're looking at. Tabs are located inside the <div id="workarea"> above the headline.

Special IE issues

<!-- IE6 can't select text without this (Only in Zope)-->
<!--[if lt IE 7]>
</base>
<![endif]-->

Popups

Generally, popups are a bad idea. They are necessary some times, but try to design your application to not use them. Don't confuse popups with new windows, which are always a bad idea.

There are two types of popups. Small ones that typically ask a single queston, such as "Are you sure?". These we call popup dialogue boxes. The time needed to interact with a dialogue can be counted in seconds, and the user is not expected to turn his attention to other matters while a dialogue is shown. JavaScript has three simple dialogues built in: The alert(), prompt() and confirm(). If you need something more fancy, you have to write it using window.open()

The other type is larger and more complex. It is typically used for complex helptexts or questionnaires. The user is expected to keep the popup on screen while working with the application in the main browser window.

Layout rules for popups:

  1. No breadcrumbs in popups. You will never land in a popup from Google, so you will not need to know where you are relative to the rest of the site.
  2. No site tagline. You can not land here as the first page, so there is no need to tell what the website is about.
  3. Yes, there is a site title (in the large popups). This is considered the branding. There are no logos or background images. (Takes up too much space)
  4. There is no way out from a popup except the close button. This means, you should not be able to continue browsing inside a popup. You can fill in a form, and the result from the form can be show in the popup, but that is about it. If continued browsing is wanted, then it is a new window - not a popup.
An example of HTML for a popup. For dialogs replace popup with dialog and don't include the popuphead part.
<body class="popup">
    <div id="popuphead">
	<div id="sitetitle">Data Dictionary</div>
	<hr/>
    </div>
    <div id="popupbody">
    </div>
...