Lux is one of the biggest Art houses in the Netherlands. It’s a home for international cinema, theater, music, debate, multimedia and visual culture. Their old website was based on ancient code (frames!) and design and was manageable by just one person. For their new website, Lux decided to go with Drupal instead and brought in the help of Webschuur, Guruburu and myself. Under visual direction of design and communication agency Wunderbar, I translated their Photoshop mockups to the Drupal theme you currently see.
There were several challenges with this theme. I tried to set up all styles as generic as possible, selectively overriding Drupal’s core stylesheets. This is always a challenge, since there is just too much CSS delivered out of the box with Drupal. My first instinct is to turn this all off to have a minimal, stable base to work on. Along the way, I enabled them so the admin pages would still be accessible and manageable under the new theme.
Lux has 4 main sections that each have a distinct visual theme. This was accomplished by configuring each section with its own body class, and using this class in the stylesheet to override colors and backgrounds. I used as much CSS sprites as possible to keep HTTP downloads to a minimum, which allows for a speedy website, especially with Drupal’s caching.
A lot of effort went into making sure the website was coded with semantics and accessibility in mind. We had the explicit task to make the Lux website as searchengine-friendly as possible and to adhere to the Dutch Web Richtlijnen, which are set of guidelines based on the W3C standards and international best practices. So the HTML structure and the ordering of information is intended to be as useful as possible; with the main content at the top (just below the branding), and navigation all at the bottom. All content chuncks were semantically marked up according to Andy Clarke’s proposed identifiers which he presented in transcending CSS, and using the names of new elements that are proposed in HTML5 as identifiers.
The final challenge was to come up with a decent system for managing a right sidebar which could be populated with either node-related content (such as on the film pages) or generic content. In Drupal, these two pieces of information are controlled in wildly different parts of the theme, and I had to resort to using variables in order to exclude them from conflicting with each other. Still, this allowed a lot of flexibility in the design of the pages and the views, making variations possible such as two colums, three columns with content-releated sidebar, and three columns with generic content.
Some additional background information from Jaap Stronks, one of the programme developers, on his blog (in Dutch).
Comments closed | Permalink