Vijith Assar

New York’s annual CMJ music festival is happening again this week. I’ve written about it before via short reviews of the litany of concerts held across the city, but this time I wanted to focus on the awesome daytime programming hosted at NYU before the shows commence each evening. So, for the Village Voice, a series of mock flow charts which help* you pick the right discussion panels to attend (* = they do not actually help).

A few interesting footnotes here:

First, we considered putting the charts together as giant image files, which is how this sort of thing is usually done, but eventually I successfully pitched the idea of building the charts right on the web page. This makes for a much more pleasant user experience, since traversing the decision tree is just like scrolling through an article without any cropping or resizing weirdness, and the content can be highlighted and copied just like any other text. It also reconfigures itself much more cooperatively for viewing on mobile devices than a static image file would.

In a way, it’s pretty simple — essentially, we just created a whole bunch of divs and applied tons of inline CSS to them, most notably setting the background images and the padding to create the illusion of interconnected lines and arrows flowing between them. This is generally frowned upon as a web design practice, but for a single-use scenario like this it actually works quite nicely, because I didn’t have to add any external stylesheet files to the CMS and it’ll remain remarkably stable as the Voice’s site evolves in the future.

But man, that’s a lot of inline CSS! For example, generating single box to put a question in requires all these rules (many of which are duplicated because they get split across a parent and child div):

width: 500px; min-height: 150px; padding-top: 70px; background:url(“6.png”) no-repeat center top; background-color: #F9FFB2; padding: 20px; border: 1px solid #333399; text-align:center; margin: 0 50px 0 50px; font-style: italic;

Worse yet, since it’s all stored in an inline attribute, this would need to be repeated in full every time you want to generate a box of that type. And if you later need to change something — say, the images aren’t lining up quite right, or you need more vertical space for text — you’d have to go back and manually fix every instance. So in order to make this easier, I wrote a little set of scripts in PHP which dynamically applied the CSS while looping through the content I wrote for the boxes. I’ve done a fair amount of both writing and coding over the past few years, but it was really neat to finally have a project in which both were so tightly woven together.

Second, please also note the awesome visual design work by my friend John Bylander, who first brought the rough demo charts I sent him to life with subtle color and typography tweaks, and then cobbled together image files late into the night.

And finally, a nod to my sources of inspiration for this: former Village Voice music editor Rob Harvilla, who back in 2007 wrote about the rapper Mims using diagrams to thunderous acclaim, and then in 2010 covered the CMJ panels with a series of snarky comments not unlike my own Q&A content here. And then there’s also the extensive timeline of future events from sci-fi movies as compiled by the Awl, where a close examination of the markup helped me figure out how best to approach the CSS here.

See you next year, I hope.