David Emery OnlineDynamic Design
10 November 2009
Back in the day – before we called everything ‘ajax’ even when it wasn’t – we had this buzzword called DHTML. The ‘D’ stood for ‘Dynamic’ and the inference was that by using Javascript you could make you static, boring HTML pages all wizzy and amazing by adding some ‘D’ to it, which inevitably actually meant adding some drop down menus into the navigation.
However, I’ve been thinking about something for a while which actually works on a similar principle – Dynamic Design.
Dynamic Design is exactly to design (and we’re talking web design here) as DHTML is to HTML – the improvement of a web page design using Javascipt. When I say ‘improvement’ I mean using JS to implement layouts that are simply impossible using normal CSS; ‘smart’ layouts that take into consideration things like the browser window size, content size, browser capabilities and available fonts.
I’ve been forging along this path for a while, most obviously with the design of this site and its dynamically resizing images, but at work we’ve just launched a new site that puts into practise a few of these ideas:
4AD Sessions (go have a look, resize your window etc – I’ll wait).
The 4AD Sessions project is an ongoing series of specially recorded videos featuring 4AD artists, the first being Tune-Yards – if you haven’t already it’s well worth a watch, as she’s a thoroughly compelling and unique artist, especially live.
As the focus was purely on video, placing it front and centre was obviously the priority, and this is where all the design decisions (and aforementioned wizzy JS) spring from. I wanted to get the video as big as possible when the user loaded the page, so first off the ‘player’ section of the page is put right at the top with the minimum of extra clutter – anything that’s not about playing the video (so keeping the playing track, track navigation and the artist & label branding) is moved to the information section below.
That information section is actually pushed off the screen for everyone, as the player at the top automatically (using JS) resizes itself to fit the browser window size. I’ve talked about this kind of thing before but it’s still very relevant – there is a page fold, and there’s no reason why you can’t utilise it.
Not only does the player resize to fit the max height, it does it while maintaing the aspect ratio of the video (in this case HD 1280×720). So, it’ll figure out the correct width given the height of the window (as long as there’s enough width for that of course, otherwise it’ll shrink the height instead). Here’s the clever bit though (and moves past what you could do using a clever Flash video component) – as it figures out the width for the video, it also makes all the other page elements (so the top branding, player information and main content) the correct width so they all line up correctly – the whole page is fluid width, but based on the max aspect correct size of the video.
This is the kind of thing I’m getting at when I say Dynamic Design – going way beyond not only what you can do in CSS, but beyond pretty much any other design environment that I can think of (the closest thing is desktop application UI, but that’s quite a different form of design in most cases). And of course, all this is progressive enhancement – it doesn’t need JS for the page and design to work, just to enhance it for those that have it available.
Hopefully you might get as excited by the possibilities as I am.