Sometime in November, Hans emailed me and asked if I’d like to help build him a new website. “Of-fucking-Course!” He arrived in Berlin shortly after for two weeks, where we sat in Alte Kantine Wedding every day for quite a few hours. We started with putting together a framework for each project, and once that was up, I linked him to my laptop web server, him sitting on my right adding all the text, me bashing out code.
It took a pause from January ’til early-April, then another ’til May 15th, when we fiddled with the DNS and splurted it out into teh Interwebtubez: SOIT / Hans Van den Broeck.
Hans was someone I heard about when I was a student, They Kill We (Eat, Eat, Eat) the name in my head when I was bunking off to the library and reading Ballet International. I thought it sounded like the coolest shit out, and knew I was going to move to Europe to be in the middle of all that. Hans himself I met on my first trip to Europe, as a DanceWEBber at ImPulsTanz in Vienna where everything I’d imagined and hoped for on the continent was ten million times better. I didn’t do Hans’ workshop—stupid uninformed decision—but along with meeting Anna Tenta and Ivo, getting drunk with Hans on an all-night, cross-Vienna bender (I dunno, it might have even been two or three nights … those last few days …) was the formative experience for me at the festival. And that’s amidst seeing Jan Fabre / Troubelyn, Emio Greco, doing workshops with Frankfurt Ballet dancers, generally 6 weeks of unrelenting Mind=Blown!!!
I got to work with Hans on my final arrival in Europe, again at ImPulsTanz. He, Anuschka, Ivan, and Estelle snuck me out one evening for surprise Viennese birthday celebrations. I started regularly going to Brussels; it became a mandatory pleasure for drinking and eating, talking for hours together.
And I always thought his old website, the one he’d hand-built in iWeb—images with picture frames, odd sounds, text scapbooked around in different colours and sizes—I always thought that was one of my favourite websites ever. Because it looked like him; when you arrived, it could only be him.
When Hans asked me to design and build his new site, I said straight away, “I fucking loved your old site, it needs to be somehow like that, how it looks, the feeling of it.” We ransacked his scrapbooks (so many scrapbooks!)—one thing Hans is very good at is archiving, every work had at least enough, and for the more recent ones, far far more than we could possibly use. Then we got serious and dry: How to build a site that can be arranged in myriad ways while also having a manageable editing interface?
Ja, of course it’s in WordPress, and of course I used Advanced Custom Fields. Early on, I realised Flexible Content in ACF was the way to go. CSS gives amazing power to change design and layout, but not the order of things; jQuery and PHP can do that but not in a simple, flexible, drag-drop, non-code way that’s part of the editing process. Flexible Content fields for text, images, video, quotes, whatever could be dragged into any order; then I added some selectors for images, to change their alignment and size, which was the final key in building a structure that could result in a design where every page is somewhat different. Headings and the work info sidebar are exceptions to this, though it would be trivial to extend the structure to shift those also around wherever.
Then there was things like the coloured squares next to work titles, generated from categories and slapped together in some probably unholy mix of PHP, jQuery, and CSS. Or the video page. When Hans saw how videos are laid out in the WordPress admin editor, a grid of thumbnails, he said, “Yes. I want that! Can I have that?” It turned out to be pretty easy, just overwriting the standard WordPress video playlist shortcode for the video page in a function (using the admin editor code as a template), then arrange it all pretty like. The background images are just taking FlexSlider, stripping it down, then again using some styling.
What else? The randomly cycling quotes? Also ACF, PHP, some jQuery, including collision avoidance detection so the quote doesn’t run under the menu. And the menu uses an extremely nice piece of jQuery, BackgroundCheck, to compare the background colour to the menu and swap between light, dark, and neutral states so the text colour remains contrasty (not always but enough that I thought it was worth using).
For anyone curious, I’ve included a screenshot of editing a page with all the fields; and some of the templates, functions, and javascript files.
The font is Klartext Mono from Heimatdesign via Fontspring … Oh! and the index page quote was a placeholder that remains for now because Hans liked it. It’s from Mechthild of Magdeburg.
