Presseurop.eu is under continuous development since March 2010. This article outlines some of the more notable features of the site, in particular its flagship multilingual discussion platform. As the main developer, I will describe some of the choices we made and the reasons for them.

Background: Presseurop.eu is developed on the Pressflow open-source CMS, a fork of Drupal. Its multilingual back-end interface is heavily customized, and editors write content exclusively in Markdown. The site makes use of two frontal servers cached by Varnish. This article concentrates on the front-end as experienced by users.

A unique multilingual discussion platform

Presseurop.eu's most talked-about feature is its commenting system, which is designed to foster transnational debate. Its three main components, launched in 2010-12, are:

  • A single comment thread across different versions of a translated document – users see articles in their own language but the same reader discussion

  • Optional machine translation of all foreign-language comments via a button (translations currently provided by Google)

  • Inline translation of the best comments by editors

Presseurop.eu is the only European news site to offer such a multilingual commenting platform

Presseurop.eu is the only European news site to offer such a multilingual commenting platform. It has generated much positive feedback and helped encourage rapid growth of reader participation on the site.

However, our commenting engine has a number of other unusual features too.

Citation instead of nesting. So as to make the discussion as useful as possible to non-participants, we decided to avoid nested threading (indented comments replying to others) and instead to encourage users to cite particular phrases. In theory this has two advantages:

  • every comment is understandable without any context

  • comments can be displayed in any order without affecting meaning

Users are nonetheless notified by email when someone cites part of their comment – a key feature of nested-thread systems.

No hidden comments. Non-participating readers see comments ordered by importance – (1) editor-selected comments, then (2) reader-recommended ones, then (3) the rest. But logged-in users see comments in chronological order by default, so as to give them a clearer overview of the discussion. No comments are buried under tabs, and longer comments are partially collapsed so as to avoid the need for pagination.

Secret-ballot recommendation. Users who have written several quality comments become "members", with the right to publish without a-priori moderation and to recommend other users' comments. However, only comments which have been recommended by several members gain a star of recommendation – and the exact "score" of a given comment is never shown. The idea is to discourage "beauty-contest" voting between opposing opinions, while still allowing forum members to give credit to others.

The presence of machine translation also makes it important that reader-generated content is clear and understandable

Aggressive sanitation. Comments on Presseurop.eu are subject to stricter-than-average rules on presentation, aimed at maintaining the image of the site and a high tone of debate. The presence of machine translation also makes it important that reader-generated content is clear and understandable. Comments are therefore limited to a relatively short 1500 characters, to encourage concision, and submissions containing excessive paragraph breaks or capital letters are rejected. Before being displayed, all comments pass through several filters designed to further improve their presentation, ensuring in particular that:

  • punctuation is followed by spaces

  • exaggerated punctuation is removed – "!!!!! ??? ......." becomes "! ? ..."

  • paragraphs are separated properly – ambiguous line breaks are banished

No-strings signup. Presseurop.eu allows new users to submit comments without requiring confirmation of their email address. The threat of spam is eliminated by a custom captcha which asks an easy question about European politics or history, and by the rule that all comments by new users are moderated before publication. Subsequently, users are encouraged to build their reputation in the forum by linking their profile page to other online identities and by attracting recommendations from other users.

User experience

On screens narrower than 800 pixels, the third column is not displayed

Presseurop.eu uses a single-breakpoint responsive page layout, meaning that the content is displayed in two ways depending on the width of the user's screen. On screens narrower than 800 pixels, the third column is not displayed and comments are loaded only optionally. On two-column pages, the second column passes underneath the first.

General UX principles include:

  • browser-standard buttons initiate all actions ("doing"), meaning links are reserved for URLs ("getting")

  • a spinner and completion feedback is provided on every AJAX button (for example, when posting a comment)

  • smooth scrolling of all internal links, which are marked with up and down arrows

  • all external links open in a new window, and are marked as such when in body text

Detail: The main stylesheet uses the pragmatic principles of object-oriented CSS to make it more maintainable in the absence of a CSS preprocessor. Comments and social buttons are loaded asymmetrically to avoid blocking the page. The comments container and other client-side on-the-fly markup is written directly to the DOM without templating, usually in JQuery, and always in aggregated chunks to avoid speed problems. The two web fonts used, Enriqueta and PT Sans, are free and were chosen from FontSquirrel.

Accessibility

As a public-interest website, Presseurop takes accessibility seriously

As a public-interest website, Presseurop takes accessibility seriously. Our site respects the main WCAG 2.0 guidelines for content sites, in addition to key WAI-ARIA recommendations.

Body text font size was increased to the default browser setting of 16px before most other news sites, and text blocks follow the recommended standards in terms of width, justification and line spacing.

Use of Markdown by editors means that we have no problem of junk markup inside documents. A filter ensures clause-separating hyphens (-) are converted to dashes (–), eliminating this confusion commonly seen on the web.

Full use is made of:

  • semantic HTML5 markup, including article, section, aside, header, hgroup, figure and figcaption tags

  • role attributes on page elements, including banner, search, navigation, main, complementary and contentinfo

  • rel attributes on links, including alternate (for translations), author, bookmark, next and prev (for pagination), search, and tag

Non-decorative images have descriptive text. All page functionality, notably the commenting system, is available using the keyboard.

Social-ism and syndication

To push users towards popular content, the "Most popular" block uses an algorithm to devine the current most consulted items on the site while giving equal weight to all languages. More simply, share counters on all articles aggregate the number of shares (Twitter and Facebook only) across the ten language versions.

We have fully implemented Twitter Cards and Facebook Open Graph, making our articles understandable to the two main social networks. Newly published items are posted to Facebook by a standard RSS feed and to Twitter by the Twitter API. Additionally, full articles are reposted automatically to Twitter up to 4 times – after 3 hours, 18 hours, 3 days and 7 days – depending on a pre-defined threshold for the number of shares. This gives Twitter users in all ten languages several chances to catch our most popular articles.

Presseurop.eu makes all its own content (in particular, briefs and press reviews) available in full by RSS

Finally, unlike most news sites Presseurop.eu makes all its own content (in particular, briefs and press reviews) available in full by RSS under a Creative Commons BY-NC-ND licence. This means any non-commercial website may use our texts unmodified, on condition of citation, without needing to ask permission beforehand.

Detail: Specifically the "Most popular" block takes the 5 most popular items for each language, by page views, for the last 7 days, and displays the top 4 of these in order of the number of languages in which they figure. The 5th item is the one which is present in the fewest languages (usually one only), and is intended to highlight articles which have been particularly popular in certain languages only.