A revamp and redesign for Antidote Europe

The site now features nation-based language selection and a campaign-based layout.

French non-profit Antidote Europe works to overcome the inertia of decades of outdated and horrendous vivisection, updating research and testing with more modern techniques such as toxicogenomics. For years their web site antidote-europe.org was faithfully maintained without a content management system; press releases and articles were added regularly but often lost to the visitor due to the site’s lack of information architecture.

Engaging.net was honored to be approached to revamp and redesign Antidote’s web site. [Update 2013 Mar 22: Maintenance of the site has changed hands and it is now run on a WordPress theme].

Brief

Antidote’s CEO, Dr André Ménache, told us that although they were happy with their written content — “it provides cutting-edge information to the consumer public and our members on issues that include animal research, environment and public health” — they were unhappy with the presentation, which they felt was too basic and outdated. They wanted the home page to be more attractive, with images and graphics, and to better convey their involvement in cutting-edge science and consumer protection.

Architecture

To structure the site we shoehorned its content into various channels, then grouped the channels.

The main channel group, the resource channels, is comprised of the articles, interviews, lectures, letters, petitions, posts, press releases and texts channels.

Serving as a library of sorts for these are the multimedia channels: audios, documents, photos and videos.

There are also a handful of supporting channels: signatories (for petitions and letters), persons (for interviews and signatories), organizations (for persons and signatories), and redirects (for URLs from the previous site).

Antidote usually has a public relations campaign running — currently it’s “Danger, Bisphenol!” aimed at banning the widely-used chemical bisphenol A — so that much of the content in the resource channels relates to various campaigns, and campaigns serves as the grouping channel. Campaigns also influenced the design: since the latest campaign is what the organization is currently promoting, it dominates the homepage.

Antidote Europe Channels Schema.png

Design

The homepage is comprised of just two parts: a main display of the latest resource channel entries relating to the current campaign, together with a large image related to the campaign; and a side listing of all the other latest resource channel entries, ie, those unrelated to the current campaign. The main-display-plus-side-listing layout is then used throughout the site.

For the site-wide header, Andre sent us three images to use: the organization’s logo, a background of multi-colored dots representing a DNA chip, and Leonardo da Vinci’s Uomo Vitruviano with the dots in the background. The visual design was built around these, together with a 960-pixel grid and the two-level site menu from Khoi Vinh’s upcoming Basic Maths EE theme.

The extensive site-wide footer provides a site map and a more detailed look at three of the resource channels: articles, interviews and lectures.

Language

Antidote Europe is a French organization but has a growing presence in English, so the site is bilingual. If the user is visiting for the first time, the ExpressionEngine IP to Nation module detects his country. If that country is French-speaking, the site is displayed in French, otherwise in English. The language is saved to a cookie and from then on the cookie sets the language.

The user can change the nation-based cookie setting by clicking on one of the language buttons. (Currently the site has no registration form, but once it does, the member’s localization settings will also override the nation-based cookie setting.)

Made much easier by Tim Kelty’s fabulous Field General extension, every field name in the site has an “_en” or “_fr” suffix, letting it be displayed in either language. As a result, the URL for each resource remains the same regardless of the language.

Press releases

Antidote regularly sends out press releases. The new site makes this very easy, thanks to the Multiple Newsletters extension. With just a few clicks, the site editor can send out the latest entry in the press releases channel to mailing lists in both English and French, each formatted in simple HTML suited for email clients.

Add-ons

The site’s ExpressionEngine installation (v1.x) makes use of the following add-ons:

Plugins

  • Find and Replace (Low)
  • Image Sizer (Lumis)
  • Language Date/Time Convert (EEGuru)
  • Nearby Entries (Engaging.net)
  • Textile (EllisLab)
  • Tied Entries (Engaging.net)

Extensions

  • Clone Entries (EllisLab)
  • Custom System Messages (Brian Litzinger)
  • Edit Alert (EllisLab)
  • Edit Remember (Mark Huot)
  • Edit Tab AJAX (EllisLab)
  • Field General (Tim Kelty)
  • FieldFrame (Brandon Kelly)
  • Filter by Author (EllisLab)
  • LG Add Sitename (Leevi Graham)
  • MD Live Search (Masuga Design)
  • Multiple Newsletters (Cocoaholic)
  • Publish Tweeks (nGen)
  • SL Field Formatting (Stephen Lewis)
  • Textile Editor Helper (Imagehat)

Field Types

  • File Field (nGen)

Please read

Take a look at some of the actual contents, especially the guest interviews with scientists campaigning to reform biological research and testing.