Displaying publications

Overview

In order for individuals, businesses, non-profits or governments to properly display European Union institution publications on any website, it is important to know what information users need and at what moment during their visit.

For example, visitors on a search results page must have enough information to find out if a publication is of interest to them prior to proceeding to the publication details. However, too much information at this stage may only make it harder for visitors to find the information they are looking for.

Common user moments

Below are general recommendations for common user moments. These are not technical specifications.

Passive moment: browsing – a publication may catch the visitor’s attention

Option 1: vertical

Make the publication thumbnail and the title clickable.
Place the international standard book number (ISBN) / international standard serial number (ISSN) or publication date below the title, depending on what your users may find more useful.

Option 2: vertical

Make the publication thumbnail and the title clickable.
Place the ISBN/ISSN or publication date below the title, depending on what your users may find more useful.

Active moment: user is looking for something specific

Users are normally looking through a list of publications in a search results page.

Option 1: for non-subject-matter experts

Make the publication thumbnail and the title clickable.
Place the ISBN/ISSN or publication date below the description, depending on what your users may find more useful.

Option 2: for users who require more information

Make the publication thumbnail, the title and the subject metadata clickable. Display both the publication date and the ISBN/ISSN.

Option 3: for advanced users and subject-matter experts

Make the publication thumbnail, the title and the subject metadata clickable. Display both the publication date and the ISBN/ISSN, as well as additional metadata.

Clicking on ‘View more metadata’ (use the text label that is appropriate for you) reveals more information below, such as corporate authors, individual authors or themes.

Publication thumbnails

Correct sizing and handling of different aspect ratios for publication thumbnails is important.

Follow these guidelines for optimal results

• Cover images should be downsized proportionally to fit a canvas with a width of 340 pixels and a height of 480 pixels (the aspect ratio of an A4 page). This is approximately 2.5 times larger than the desired rendering on a web page to ensure sharp-looking images on high-definition screens.
• Standard and horizontal formats tend to fill the entire width.
• Standard and narrow vertical formats tend to occupy the entire height.
• Do not add any effects on image files (shadows, borders, etc.); do this with Cascading Style Sheets (CSS) if you desire this type of effect.
• Crop excess canvas area not occupied by the image and export.
• Image format. Use JPEG, but adapt as necessary as there is growing support for new formats such as WEBP and HEIC.
• Compression. Keep the image as sharp as possible, but under 50 KB to optimise page load time.
• Rendering on HTML pages should be approximately half (width: 136 px, height: 192 px) so the image is sharp and not pixelated.

Examples

Widgets

To save time, you may also use Publications Office widgets to display publications. A widget is a free and easy way to embed content from https://op.europa.eu (EU Law, EU publications and Summaries of Legislation) into your website or blog.