HTML interfaces

Web interface for the documents of the book Paroles mélodisées. Récits épiques et lamentations chez les Yézidis d'Arménie (Paris: Classiques Garnier, 2013) by Estelle Amy de la Bretèque. Online at  More info on the book here.

Estelle’s book is based on extensive fieldwork amongst the Kurdish speaking Yezidis in Armenia. She analyses more their sound practices, and focuses of a vocal repertoire used to express feelings of sorrow. Along with the written argument of her book, she wished to publish some 60 audio and video documents. These were discussed in the book, but her goal was also to provide a small commented collected of these relatively unknown practices, for other researchers to study.

So the interface is freely accessible to anyone (no login required). All documents are subtitled, and introduced by a commentary which describes their context for those who don’t have the book at hand (or don’t have it at all).

The content is obviously Estelle’s work. My job was to create the interface. Technical highlights:

  • I used only HTML5, CSS3 and a bit of javascript. Therefore the interface can run from a portable media as well (no php required).
  • All media files are served directly as HTML5 <video> and <audio> elements (no Flash involved).
  • The interface is entirely W3C valid.
  • Each document’s description and player is stored as a separate file on disk. Documents are loaded and unloaded on demand using javascript. This circumvents any memory outage problems which would have resulted from a simple "hidden" approach (like in creating 62 players and having 61 of them hidden at all times).
  • The slideshow in the background displays landscape pictures took by Estelle during her fieldwork. Their order is random, providing for a unique experience at each visit. It also rescales to always fit the entire screen.
  • CSS media queries ensure that the interface looks good at various screen sizes.

Documents of my book Fabricants d’émotion.

Not technically a website since the interface was meant to run from a DVD. Still, it is done in HTML and CSS, and in now available online too.

My aim was to enable the reader of the book to access in a convenient way the documents analysed in the text. These documents are of three kinds: audio, video, and interactive animations using Flash. Each document has a number as its primary reference. When hovering over that number, additional info is given: title of the doc, chapter in the book, a short description. Clicking on the number opens a page with the doc itself.

The interface is deliberately minimalistic. Perhaps too much so by today’s standards. There are no fancy graphics, no images, no special fonts…

On the other hand I took great care to use only the most "orthodox" coding techniques. This seemed the best way to secure some durability and cross-browser stability. So the interface is W3C valid and entirely accessible even to text browsers. For me, the most interesting challenge resulting from this choice was to make "on hover" popups in plain CSS (rather than javascript).

Additionally, I wanted the interface to be just what its name implies: something that mediates between the user and the documents, but does not impede the former to access them directly. So the document files are well at hand on the DVD, in clearly indicated folders. They can be opened with external software, copied individually, etc.