i whored for art…

Tag Archives: CSS

After many years of supernaut images being tiny with ragged right background captions, I’ve been slowly ditching it for supernaut teenage Instabanga big images. And finally I cleared out all the old styles and code, made new medium and large image galleries, redid the styles and scripts repeatedly, said goodbye to funky bodges. Kept the blazing deep pink tho’. 😍🤘💥❌💯‼️

I got sick of the tiny, Web1.0 images everywhere here, a hangover from the earliest days of supernaut, so I decided — ’cos I like visuality & pix — to make small, big. I thought it would be easy. Little did I know I also create and add to the pile of Technical Debt. So: most single images in the recent past are now huge-ified, 666px wide; recent image galleries which are not full of diverse image ratios are now evenly splitting the Number of the Beast. Older images and galleries should be retaining their previous diminutiveness, but who knows, 13 years of blog is difficult to homogenise. Mostly I got distracted with how to make portrait images not blow out of the available browser window space, which turns out to be a kinda traumatising process I didn’t achieve. Plus how to Lazy Load srcsets by preg_replacing the new WordPress caption shortcode. OMFG, Frances, WTF? All of which makes me think it might be time for yet another supernaut refresh. So much code. So many images. So much …

End of March, right when I’m throwing finally together my design portfolio (I swear I resisted, and now love having one), Emile asked if I might want to hurl together something for him. Something Web1.0, something like we’d handcode in HTML in the late-’90s, not quite something MySpace in the days of its browser-crashing gif-frenzy inferno, but definitely something that would be in its lineage; something tuner Nissan Skyline, unassuming on the surface, but all Fast & Furious: Tokyo Drift when you pop the hood. Something Helvetica, Neo-Grotesk, what’s getting called Brutalist right now, though not traipsing behind a fashion; this is Emile and when I was looking through years of his work putting his new website together, he has a deep love and understanding of the aesthetic, and the art and philosophy underpinning it.

First things first:

Emile: I have two websites. Can we make them one?
Frances: Yes!
Emile: Can we do all these other things?
Frances: OMG Yes!

Lucky I’d just done my portfolio, cos that gave me the framework to build on without having to bodge together fifty different functions and stuff. Saves a few hours there, which we made good use of in timezone-spanning conversations on typography, aesthetics, and usability.

First off, getting all those years of blog posts and work projects into a single database / website / organism. I used the hell out of interconnect/it’s Search & Replace DB script, merging, shuffling, shifting, getting rid of old code, jobs that would take a week or more to do by hand, done in seconds. We’d pretty much sorted out structure and functionality in a couple of afternoons; for a website that looks so simple, it was most of two weeks diligent work, back-and-forth conversations, picking away at details, (stripping and rebuilding, stancing, slamming, tuning … we are very good at turning all this into hoonage, especially with 24h Le Mans in the middle).

Obviously it had to be ‘Responsive’, look hella flush hectic antiseptic no matter what device, and for me (recently taking this stuff proper serious) it had to also be ‘Accessible’. I put those words in scare-quotes cos they’re kinda bullshit.

It occurred to me as I was finishing, that for a website to be neither responsive nor accessible — for example it looks crap if the screen size is too small or not ‘right’, or you can’t navigate with keyboard or screenreader — you have to actively remove this functionality. You have to break the website and override browser default behaviour. It’s a very active process to systematically remove basic functionality that’s been in web browsers since the beginning. You also have to actively not think, not empathise, intentionally not do or not know your job. Me for probably all of my earlier websites.

The funny thing is, it’s not really any additional work to make sure basic responsive and accessible design / functionality is present; the process of testing it always, always, always brings up usability issues, things I haven’t thought of, little points that become involved discussions about expectations, interactivity, culture, philosophy. Like ‘left and down’ is back in time, and ‘right and up’ forward; 下个礼拜 ／ 上个礼拜. Next week / last week. Yet the character for ‘next’ is xià, down, less than, lower; and ‘last’ (in the sense of ‘previous’) is shàng, up, more than, higher. So how to navigate between previous and next posts or projects turns into an open-ended contextual exchange on meaning.

And ‘responsive’, ‘accessible’? Basic, fundamental web design. Not something tacked on at the end.

Back to the design. System fonts! Something I’ve not done in years, being all web-font focussed these days. Another trip through the wombat warren of devices, operating systems, CSS declarations. It’s crazy impressive how deep people go in exploring this stuff. Emile Blue! A bit like International Klein Blue, and a bit like Web / HTM 4.01 Blue. But not! We worked this in with a very dark grey and very slightly off-white, bringing in and throwing out additional colours, and managing in the end to sort out all the interaction visual feedback though combinations of these three — like the white text on blue background for blockquotes. Super nice.

As usual, mad props to DreamHost for I dunno how many years of hosting (it was Emile who said to me, “Frances. Use DreamHost.”), WordPress for running Emile’s old and new sites (and all of mine), and Let’s Encrypt for awesome and free HTTPS. And to Emile for giving me the pleasure of making the website of one of my favourite artist.

When I’m using WordPress’ Status Post Format, I like to keep it to 140 characters, so it’s like a Tweet. But how many characters have I typed? Cos The Visual Editor only shows Word Count. So I took a look around and saw various ways of doing it, quite a few using regex to strip ‘unwanted characters’—but a space counts as a character! So I wrote my own, based loosely on what I’d been using for counting characters in the Excerpt, and from a few different plugins and bits of code. Turned out to be surprisingly easy and uncomplicated (I say that now, of course).

So, first I need a function to call a couple of files if I happen to be editing a Post or Page:

It’s a little bodgy, and if I had more than the 45 minutes to a) work out how the Visual Editor can be fiddled with, and b) write something that worked and looked ok—the bare minimum really—I’d do it slightly nice and maybe consider for a minute throwing it into a plugin (where it officially belongs). But I won’t. It does what I want: live updating of how many characters I’ve written in the Visual Editor, and shows it in a line underneath the Word Count (also aided me in delaying writing a residency application on the day it’s due).

Recent supernaut museum photography blogging got me thinking about image metadata (both Exif for camera-applied metadata, and IPTC for image-specific person-added metadata), and how I could set up a workflow to better implement this – particularly IPTC which is something I’d need to add and can partially automate, rather than Exif, which the camera adds – and how to persuade WordPress (or straight PHP / some method of database demonology) to scrape that and output it into Schema structured data.

I started doing heavy Schema work on tiptree.org as a way of making the huge amount of data comprehensible to search engines, and by extension, to humans, and have grown to like it a lot (also microformats, which WordPress uses) for making sense of what is otherwise a string of decontextualised words and media. I’d already schema-fied Dasniya’s blog, so mostly it was copy-pasting, then combining into supernaut’s structure – where the design had taken far too many liberties with accessibility and structured data.

So, now all posts spit out at least minimally useful structured data, and posts with images, galleries, or video spit out additional Schema structured data for those objects. Once I start using IPTC for my images, I’ll look at a way of including that in the Schema as well. (Though combining all that into useful objects from experience with Tiptree can be hilariously obtuse.)

On the accessibility side, I’d realised sometime in the past I’d been seriously shitty in supernaut’s design, basically a fucking horrible website to get around for anyone using keyboard navigation, screen-readers, or other methods non-trackpad + eyeballs. Accessibility is something I’ve been increasingly enjoying coding and designing for, along with structured data, particularly for websites that are highly designed and plain fucking arty – I find it gratifying to make hugely complex sites that remain structurally coherent and accessible no matter what device or method a person uses to access it – because there’s often an inverse relationship between design ‘woo!’ and usability ‘yay!’

So, keyboard navigation now is useable and hopefully much clearer, visual styling of user interaction also. Not as good as it could be, but getting there, and vaguely aiming for all of supernaut to be at least somewhat accessible – including and especially my museum visits.

I spent Sunday half immersed in Humans, and the Swedish original, Äkta människor, and half in code, following a passing musing to its conclusion. The former were and are quite brilliant; the latter was and is fiddly and peculiar, like all intersections of code and design. The latter began with me wondering exactly how difficult it might be to implement image overlays for supernaut without recourse to a plugin. This led to much reading and research, and deciding on Lightbox2 (instead of a plethora of others), taking half an hour to set up, and a few hours to get all nice looking (and nice-playing with caching). Of course it probably breaks all over the place, but the idea was to have the images fill as much of the browser as possible, with as little clutter as possible, and generally this seems to have happened.

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.

Post navigation

About

Miscellaneous Stuff

Currently in: Berlin

supernaut is Frances d’Ath. She has blogged here since 2004. You can find her performances and choreography at francesdath.info. Her design work is at francesdath.name. Frances would like to remind you that I am not my blog (though she likes WordPress very much).