Website for Opera The Cunning Little Vixen

Conception, design and production of the editorial site for an opera, “The Cunning Little Vixen” by Leos Janacek.

www.renarde.arcal-lyrique.fr

Starting point of the project

The Arcal, national lyrical theater company (head Catherine Kollen) needed to accompany the tour of an opera (“The Cunning Little Vixen” by Leos Janacek, staged by Louise Moaty, conducting by Laurent Cuniot) with a dedicated website that is both the official place of reference, a resource space for the public about the work and its staging and musical implementations, and a distribution platform of workshops work done around the opera.

Specifications

Work to build this website included several aspects:

• Support in web strategy.
• Support for the construction of the tree and the nature of the content.
• Training in the use of the back-office (including management of text, images and videos).
• Webdesign.
• Development and web integration.

Time and contents

To create this site and that tight deadlines are kept, the contents began to be designed and put online by the editors in parallel with the web development work. Through this time for construction, when the site opened, the contents were immediately rich and interesting, filling the objectives of the site.

Launch

So I started by installing a CMS (Content Management System, a kind of ’engine’ website), SPIP (which I strongly recommend), and trained editors, collectively, to build momentum for the construction of content.

Webdesign

Webdesign work came only at a later stage, when most of the contents were content, the structure of questions and tree were settled and the work on the opera rehearsals progressed. So I abandoned all my first design ideas to get webdesign, bearing on the reality of the contents on two key ideas:

1. Use background of a painting of Egon Schiele, which gives the identity of the site (the opera sets are made of paintings by Egon Schiele).
2. Display at the top of each page (topics and articles) one large image Cinemascope size (it’s a video opera, with a large screen Cinemascope on stage - I actually also participated in the video design of the opera), which is the image of the staging of the play, and visually dives into the world of each section of the site.

Cross navigation and keyword

To generate a relevant cross navigation through links in every page to articles on the same site that share the same themes as current, each published article must be “tagged” with keywords, which does not appear to the user, but which allow an automatic editorialisation, and scalable links between articles.

Sustainable content

The SPIP CMS makes it easy to fully separate form and content and structure text, images and media in a very clear way. So, which governs the construction of site content is not the “layout” of the site, it is the quality of its structure. The “layout” is a layer added on top of structured content. Thus the content is independent from any layout, it is not “blocked”, it will always be able, even in the distant future, ton receive any type of layout, and can be broken down for other uses than a website.

Pictures

In that sense, the images that accompany articles and sections are large images that are resized and cropped automatically by the website itself. Thus, whatever the future layout, the source images are present in the site, and will always be resized to meet changing needs.

Videos

Regarding the videos, they are not hosted on community video websites, they are hosted in the website itself, and streaming smoothly playable on all browsers with HTML5 technology. Thus, rights are preserved, and the videos are not subject to the prerogatives of another platform. So I also trained editors to encoding video for the web and posted on its own platform.