LUX Arthouse

Written at 13:15, on Wednesday 19 September 2007. Tags: drupal portfolio webdesign .

LUX Homepage

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).

Lady Chatterley | LUX Filmpremières | LUX

Add comment. (1 total) |

1 Comment so far

This is a simple little solution to the issue that there isn’t a native control to really do the job. What you ankara nakliyat really probably want here is the ability to drop down and select items,

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You can use Textile markup to format text.
  • SmartyPants will translate ASCII punctuation characters into “smart” typographic punctuation HTML entities.
  • Insert Flickr images: [flickr-photo:id=230452326,size=s] or [flickr-photoset:id=72157594262419167,size=m].
  • Web page addresses and e-mail addresses turn into links automatically.

From the portfolio

  • Nightflight pics & flicks

About this website

My name is Jeroen Coumans, I'm a freelance web designer, front-end developer and Drupal ninja from the Netherlands. I love to create beautiful, usable and accessible websites. On this website, you can find my portfolio as well as my personal weblog. Interested in hiring me? I'd love to hear from you.

After completing my BA in Arts and Culture I'm now doing a MA in Communication and Multimedia Design. More …

Elsewhere

Script to update Drupal teasers | be fused

"One of the annoying things about changing the number of characters for teasers in Drupal is that you have to edit and save every single node (page, story etc) for the change to take effect. Well, it doesn't have to be that difficult, because here is a nice little script that will update all of the teasers at once."

Add comment | Visit site …

Degrading Script Tags

Reducing the number of tags required for loading an external javascript library by combining them into one tag. "Only one tag – and the semantics would work like this: The external script would attempt to be loaded (as normal). If the load and execution was error-free then the internal script would be executed as well. If the load or execution failed then the internal script would not be executed. "

Add comment | Visit site …

Aurora: What Is Internet’s Atomic Level?

"For Aurora we saw an opportunity to change the browser’s focus from the page to the individual “object”. Giving users the ability to interact directly with the atomic parts of a given web page offered greater personalization of their Internet experience. " This has interesting repercusions for webdesign as well.

Add comment | Visit site …

The Joker Action Figure

These toys set a new bar for realism.

Add comment | Visit site …

Google Chrome Process Manager

John Resig, jQuery creator & Mozilla hacker, writes about the significance of the process manager in Google Chrome: "The blame of bad performance or memory consumption no longer lies with the browser but with the site."

Add comment | Visit site …

Surface: een Natural User Interface

(dutch) An overview of the Natural User Interface, a term coined by Microsoft for their Surface concept.

Add comment | Visit site …

Official Google Blog: A fresh take on the browser

Should be released any time now, curious if the screenshots in the comic are like the browser.

Add comment | Visit site …

Mozilla Labs » Introducing Ubiquity

Ubiquity is "experiment into connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks more quickly and easily." A command-line for the web, connecting services through a hotkey.

Add comment | (1 comments) Visit site …

Mariët Ruiter 3150801: Kritische literatuursynopsis

Critical comparison of mine and Selwyn's vision on the Digital Divide.

Add comment | Visit site …

IEBlog : Internet Explorer 8 Beta 2 Now Available

Will Microsoft make new virtual machines available for testing purposes? I hate buying another Windows license just to get my testing setup of IE6, IE7 and IE8 complete…

Add comment | Visit site …

Subscribe

Or choose one of the single feeds:
Journal feed | Elsewhere feed