10 Years

HTML, Netscape and Table Layouts

October 2004. I had moved to Denmark a few months earlier and stood at the beginning of a new life-chapter. The first steps in learning the basics of HTML had been taken a few months prior to that (while still living in Holland) with the help of a lynda.com book borrowed from the wonderful public library in The Hague designed by Richard Meier.

That first design, using table layouts, took the Matmos website as a model. You can find it here. Their website hasn’t changed all that much since – a look at the source code reveals that it is still based on the simple HTML underpinnings that it was then. That made it easy to learn from.

I briefly tried working with Dreamweaver back then, but gave it up in favour of simply editing the files with TextEdit and (pre)viewing them directly in a browser before transferring them to the server with Fetch. There was a joy in the simplicity and directness of it all.¹ At one point I discovered that the Netscape browser I was using included a simple HTML editor for creating and editing web pages, and so used that for a while.²

Later on I learnt a little about CSS and could give up my old table based layout in favour of the more modern approach based on cascading stylesheets. I also came across Coda,³ Panic software’s delightful editor that integrates editing, previewing and publishing into a single well thought out development environment. “For people that code websites by hand” as they described it – that was me, and to a large extent still is.

Flash and Others Join the Party

From those humble beginnings the site has gone through various transformations. Raster-Noton, Samadhisound and Monolake took over from Matmos as a models. The Raster site was however flash based at the time – no peeking at the code there. Just the design. I made my own first forays into simple JavaScript enhancements for things like navigation and slideshows. I used the Delicious “play tagger” (whose small blue triangles can still be found on Ubu web) as an enhancement for playing MP3s.

As MySpace, YouTube and later SoundCloud made their appearance I was at first reluctant to venture out into those spaces. I felt that the pieces I was creating very much needed the context of the other things I had made in order to make sense. I slowly learnt to let go and found that I too could could find my place in those spaces and enjoy the advantages that they brought. The only thing was that I was spreading myself out. From a purely practical point of view not all my stuff was hosted on my server any longer – more about that later.

The Mobile Revolution

In mid 2012, after months of intensive work completing a large composition,⁴ I was ready to take a fresh look at the design of my site. I’d (finally) gotten an iPhone the year before (after years of service from a Nokia phone dating back to 2003!) and I’d noticed there were some strange issues with font sizing when viewed on the phone. It was time for a long overdue look into the current state of web technologies. The small screens clearly required a new approach.

One of the first things I downloaded onto my iPhone was an eBook of Emily Dickinson poems – I was inspired by the way in which the compactness of the poetry worked so well in the context of a small screen in the palm of my hand. I immediately set about creating a little eBook of my own – incorporating audio and text from the Lydfabet I had created with Vagn Steen a few years earlier. It was exciting to have a (relatively easy) way of getting something of my own creation onto this shiny new device.

An eBook wasn’t quite a website but it got me thinking differently about text on a small screen. I had started using my phone to work on texts, enjoying the possibility of using small pockets of time while out and about, and came across iA Writer. The ‘reduced to essentials’ aspect of the app appealed to me and suited my state mind as I embarked upon a new design chapter. It also introduced me to Markdown – an approach to text formatting that was perfectly suited to working on a small screen and writing for the web. Inspired by this new approach, I began planning my new website directly in iA Writer.

Shortly after embarking on that redesign I had the good fortune of coming across Ethan Marcotte’s Responsive Web Design article. Along with Trent Walton and Oliver Reichenstein’s articles on type and typography the pieces of the puzzle quickly began to fit into place and 6 weeks later, with the help of Joni Korpi’s Golden Grid Design as a starting point, I had my first responsive site up on the web.

A Responsive Mindset

Websites are defined as ‘responsive’ according to set of technical criteria, but it was the new way of thinking behind this approach that fired my imagination. Instead of dividing up the web and creating different sites for different devices a single ‘responsive’ site fluidly adapts to a myriad of potential situations. That got me thinking about ways in which an artwork might similarly take on different forms according context while retaining a core identity.

It also brought home to me that making things for the web needn’t remain stuck in a print mindset – that the web might cover a continuum from regular web ‘pages’ to something closer to an ‘app’. Instead of throwing myself into app development (the first wave of app store euphoria was still strong at the time) I realised that I already had the means at my disposal for branching out some of my musical compositions into versions created specifically for the web. Native apps might offer sophisticated possibilities (especially when it came to tools) but the web seemed better suited for the content oriented bringing together of sound, text and image that I had in mind. It was within closer reach from a technical point of view and, importantly, was potentially accessible on all platforms.

I collected some of my thinking on this topic in a little article titled Responsive Composition. That article was the first step in setting up a blog on my website. Once that text was published ideas for others popped up and I enjoyed the knowledge that I now had an outlet for some of the thoughts swirling around in my head.

In Search of a CMS

The blog started to grow, and although HTML, CSS and a dash of JavaScript provided a wonderful playground, the amount of work involved in publishing a post – the previous/next links, creating an overview etc. suddenly started to add up. It was time to look into some kind of more practical way of managing my content.

I’d worked with Wordpress a little on another site (and had a little experience with Drupal) but found that it wasn’t for me. I felt too removed from the nuts and bolts of the system. Everything was being saved in a database in a way that wasn’t transparent to me. Stripping down all those layers was possible but seemed like more work than building something new from scratch. I was looking for something akin to shining light through a piece of film and having an image appear on a screen. There’s a certain magic in the directness of something like that. You can see exactly what’s going on and still be thrilled. Writing some code in a text editor and then having something appear in a browser window has a similar directness that I didn’t want to get too far away from, no matter how convenient the solutions. I was looking for something that could still be a playground, a place to experiment. Something more than a template waiting to be filled with content. I was looking for a good bicycle rather than a fancy automatic car with electric windows.

Interlude: Sir Tim Berners Lee

There is a wonderful lecture by inventor of the web Sir Tim Berners Lee in which he tells the story of the gradual path leading from his first experiments with electromagnets as a boy to building fully fledged computers. Born at the ‘right time’, he was fortunate enough to experience the development of electronic technology at pace that matched his own learning. By the time he had reached building a fully fledged computer he had hands-on understanding of all the intermediary steps – steps that were now hidden within the increasingly sophisticated microchips.

I too began by constructing electronic circuits as a boy but went off in the direction of synthesizers and ended up in music. I feel fortunate enough to have had my first taste of the web at a point at which creating and uploading a page of pure HTML was something you could still do from your browser. For most of us coming to computers without the benefit of Sir Tim’s solid background the workings of the shiny boxes we now work with on a daily basis are somewhat obscure. The same might often be said when it comes to editing sites or making things for the web.

The Quest Continues

My next steps in my quest for a CMS led me to look into static generators such as Jekyll (and frameworks for it such as Octopress) that help string together a site (essentially a set of HTML pages) without a heavy intermediary. The approach appealed to me but I held back a little since it was still seemed slightly nerdy to set up and while clearly an excellent solution for sites centred around texts, I wasn’t sure that it completely suited my needs.

The solution presented itself in the form of Kirby. Similar to Jekyll in that it is a file-based CMS, Kirby, being built on PHP, takes a step in the ‘dynamic’ direction. It helped me take my take my hard- and hand-coded HTML to the next level while remaining highly flexible and a pleasure to use.

There are always payoffs with such systems: While Markdown, for example, speeds up and simplifies the creation of writing texts with an HTML underpinning, it does add a (thin) layer between you and the HTML. Fortunately there is a great deal of transparency in how the two relate to each other and Markdown doesn’t exclude writing directly in HTML should you need to. Similarly Kirby provides a toolkit that makes PHP easier to manage without locking you into a single way of doing things. Besides a little starter kit that can be used as a point of departure, there are no templates to tweak or templating language to learn. You create your own templates using the same PHP underpinnings as the CMS.

One aspect of using a file-based system such as Kirby is that your content is structured in folders that correspond to the structure of your site. In my case each of the musical works I have created over the years has its own folder with the corresponding texts, sound-files, images and PDFs collected there. In contrast to a database such a set of files and folders is very close to the way I would organise them on my computer anyway. In that way the site is a little archive, the contents of which are easily accessible even when not viewed as a website. Since it is simply a set of plain text files written in Markdown the contents of the site can easily be opened and read on any platform, both now and with some degree of future-proofing. Since Kirby isn’t tied to a database it’s also very easy to move the entire site from one server to another (should I need to) as well as sync it between various computers.

Getting to know Kirby through Bastian Allgeier’s tutorials and blog posts was at once an introduction to PHP as well as a wide ranging course in site design communicated in a friendly, accessible way that didn’t assume as much knowledge as many of the Jekyll tutorials I had come across. There was also the added enjoyment of watching Kirby grow with each new instalment of the Kirby blog.

The sense of contact with the project is reinforced by Kirby’s simple yet innovative business model – an open source toolkit combined with a paid licence. It offers the advantages of an open codebase while at the same time making sure that the developer has the resources to continue investing time in the CMS. The possibility of direct contact with Bastian Allgeier himself when it comes to support and development questions brings home the human scale of the undertaking in an age in which the web is increasingly coloured by the anonymity of large corporations.⁵

And, as Chloe Weil pointed out, it’s important to use tools built by people who share one’s values:

Because the authors care about the same things I do, their tools come with features that anticipate problems I’d need to solve, so I don’t waste time and hair struggling against software.

The Long, Hard, Stupid Way

A big feature of much of what we find on the web nowadays is convenience. Platforms such as Wordpress or Squarespace make it easy for those who don’t wish to grapple with the technical aspects of the web to get their content ‘out there’. One might argue that the time spent learning technologies might be better spent creating what it is you create – new ‘content’ in whatever your field might be. There might however be something to be gained in doing things ‘the long, hard, stupid way’. While the investment in time has been large, I’ve enjoyed getting to grips with the technical aspects of the platform I’m using. Beyond the immediate thrill of learning, having an understanding of the tools I’m using changes my experience and way of using them.

Mandy Brown, in her article Index cards eloquently expresses a similar view:

The thing is, I like the geeky parts of publishing. That’s part of why I publish anything at all. Writing here was never just about sharing my writing but also about building systems for that writing: systems that could enable a particular kind of writing, which may even be unique to me (or as unique as anything gets, anyway). And so the process for how that writing comes together, and the tools I use to build it, are as important to me as the rhythm of any particular sentence.

Karen McGrane, in a her article for The Manual, takes a similar stance on not shying away from the complexities of technology:

By concealing complexity, we may miss opportunity for more powerful, meaningful engagement. Technology doesn’t have to be invisible; rather, its complexities can be made appropriately visible.

Convenience

Twitter co-founder Evan Williams is a technologist that has pioneered the path of convenience. Each of his projects, first blogging (with Blogger), then microblogging (with Twitter) and now long(er) form writing with Medium have been lauded for their democratising, empowering effect in bringing online publishing to the masses. I was duly impressed when Medium first appeared on the scene and learned much from their design – the layout and typography remain a fantastic example of how to create a good reading experience on the web. Much progress has been made over the course of the last two years, but especially at that point it was surprising how few managed to get it right.

I posted two articles on Medium, was fortunate enough to have one of them chosen as editor’s pick, and enjoyed the thrill of reaching a broad audience that I would otherwise not have come in contact with. The interesting thing is that I soon lost the drive to publish on their beautiful platform⁶ while finding that the impetus to publish on my own only increased. On my own site I have the feeling that each post is contributing to an ever growing whole. One that I am in charge of shaping. Medium, on the other hand, might suddenly change their design or be sold to a company I have no wish to be associated with:⁷ The price of convenience is that one is beholden to the platform one publishes on and, unlike Kirby, in the case of Medium I feel somewhat removed from the undertaking. While Medium certainly has a role to play, those conditions don’t feel like the appropriate container for my personal archive of thoughts and creations. Being my own platform provides each new post/work with the context of all the other things I publish/create: At once a record of my thoughts, a kind of continuous ‘note-to-self’, a playground and a platform for sharing with others.

It has been said that one only really starts to get a handle on one’s thoughts when writing them down, that one only really begins to see something when attempting to draw it, or notice the subtleties of colours when attempting to paint them. That’s very much been my experience with web design – creating my own templates has brought me to look more carefully at the intricacies of typography and design: a never-ending process in which ones senses are continually being fine-tuned. Setting up my own site has made me think through the different functionalities as I have attempted to (re)create and integrate them.

To return to Mandy Brown’s aforementioned article:

If my goal was just to write and publish, this would be preposterous. There are far easier ways to go about that—and many of them are exceptionally well–designed… But that’s not my only goal: I also want to design the system my writing inhabits, and to maintain a proximity to the development process which can inform how that system evolves. That is, I want to be as close as possible to the forms, mechanisms, and methods by which my words are published.

Behind the Scenes

As much as I appreciate the aesthetic aspects of a site, I’ve increasingly come to consider the ‘behind the scenes’ aspects of web-design over an obsession with how it looks. Does the site contribute to the open web or is it a silo serving its own interests? Do I smell hedge-funds and venture capital? Does the software truly empower the author or is it enticing them into digital sharecropping?

Tracking is one example of a hidden aspect that is increasingly colouring my experience of sites and services. Unhappy with Google’s ever increasing reach into privacy on the web, I dropped using their analytics tools and simply ran my site ‘blind’ for a while. I’ve now included Piwik – an open source self-hosted analytics platform – and can once again get a little of an idea of who it is that comes into my shop. As with other aspects of web design, the simple act of taking something like that into one’s own hands gives a some insight into what it involves. With Piwik I can at least provide users with the possibility of easily opting out and can obscure the IP addresses so that I don’t have the responsibility of sitting with personally identifiable data.

I do however still make use of SoundCloud and Vimeo on my site and along with those embeds, Google Analytics, amongst others, once again makes it’s appearance. Opting out is possible – but there are quite a few loops to jump through.⁸ I find the omnipresence of tracking an unfortunate aspect of online life today and have been considering dropping those embeds from my site in favour of straight HTML5 audio and video elements. Perhaps a little less fancy, but weighed out by the attractiveness of maintaining a somewhat clean space on the web where visitors are, a least for a few moments, free of big brother’s omnipresent gaze.

At the same time, appealing as that cabin in the woods might be, it’s clear that we are inextricably part of the late capitalist world we live in, and active involvement in trying to change current systems and structures is perhaps a better strategy than retreating into a corner.

The Path Ahead

In that respect, one of the most inspiring developments I have come across in recent years is the Indieweb. Tools are being developed that not only help people publish on their own terms but also facilitate communication between those individual sites without recourse to centralised silos such as Twitter and Facebook. It offers an opportunity to regroup and collect those aspects of online life that have been spread out and placed in the hands of others over the past years.

The aim is to make indieweb tools available to a wider audience and I look forward to them becoming more commonplace. The availability of plugins for Wordpress and the development of platforms such as Known indicates a good start.

I’ve started out by marking up the HTML of my own site with some of the microformats that make it possible for other sites to communicate with mine when I refer to them. I’m particularly excited about developments such as fragmentions through which sites can directly incorporate commentaries and responses from other sites in a sophisticated way. Though the indieweb ethos is to show rather than tell, I can nevertheless say that I’m looking forward to incorporating webmentions and POSSEing tweets that originate from my own domain.

Culture and Technology

Alexis Madrigal, former editor at The Atlantic, points to the current relationship between culture and technology:

Life is occurring mediated by technology all the time now and as a result if you want to examine culture you have to know technology and if you want to examine technology you have to understand some of the cultural side of things—Alexis Madrigal

This site has provided me with a space, a little playground in which to carry out my own first explorations of that meeting ground between art, culture and technology. I’m counting on that what started before MySpace and Facebook made their appearance, will continue long after they have mutated into who knows what. Those sites have, at least for me, already come and gone, while the vision of an open decentralised web – a web that’s truly ‘for everyone’ as its inventor Sir Tim Berners Lee put it – stretches into the future.