5 min read

Responsive Composition

Responsive web design and creating a context when presenting musical compositions on the internet.

A few years ago the web designer Ethan-Marcotte wrote a ground-breaking article that sparked a revolution in web design by outlining a method through which websites could flexibly adjust according to whether they were viewed on a smartphone, tablet, laptop or desktop. Inspired in part by John Allsop’s wonderful A Dao of Webdesign he proposed giving up the fixed control associated with print design and embracing the fluidity inherent to the web medium. The beauty of these developments meant that smartphone users no longer had to contend with zooming in on miniature versions of desktop sites. Text and images now adjusted automatically and could be viewed as comfortably as on any other device. More than just scaling to various screen sizes content could now be ‘choreographed’ to make appropriate use of the space available. The reduced screen estate of mobile platforms also turned out to be an advantage, encouraging designers to cut out distracting clutter and focus on essentials.

In terms of presenting music on the internet these developments spurred me on in my search for better ways to fill out the context around my compositions. While music can now easily be shared via services such as the excellent SoundCloud, and as enthusiastic as I am about the ease and quality of these possibilities, one always remains somewhat within the domain of ‘social media’ – which strongly colours the experience. This is not necessarily a bad thing, just a space one might wish to step out of at times. Cameron Koczon (in his introduction to the Insites collection of interviews) has noted how the 2D world of the web is very much is in need of ways of adding depth to its online relationships. We’ve gotten very good at now-centric storytelling, he points out, but often lack a sense of context.

What I find exciting about the responsive design approach is the means that it opens up precisely for creating a context for the sounds one is presenting. In the absence of a live performance texts and images, when presented as part of a thoughtful web design, can help establish the universe around a particular work. Not necessarily with fancy interactive bells and whistles – just simply the fact that you now have sound, text and image in the palm of your hand. If this combination is well put together a musical work can suddenly enter the territory traditionally associated with books: a private, one to one interaction with content.1

The shared experience of attending a concert can be profound. Nevertheless there may be aspects of a work that can be unfolded on the internet in a way that would not be possible in a performance situation. What I have in mind is a kind of responsive composition where rather than simply presenting some kind of ‘sonic-documention’ of a performance, the work adapts in relation to the medium in which it is being presented. I have taken my own first steps in this direction with pieces such as half-life and the Lydfabet sound-montage. The Lydfabet easily lends itself to the web in that it is an ‘electronic’ piece to start with and, being based on a series of poems arranged around the letters of the Danish alphabet, the fact that one can read and take in the graphic patterns of the texts as one listens to their sonic transformations is a welcome extension.

half-life on the other hand is a piece of music very much rooted in a performance situation. In this case the acoustic instruments are used to ‘amplify’ sounds coming from a set of loudspeakers rather than vice versa. The musicians amplify resonances, draw attention to specific details and provide a physical presence even when not playing. All this is of course lost in the case of listening to a recording of the work. Nevertheless the piece can take on another direction when presented on the web. The forty 40-second fragments that make up the work are each assigned a photograph that loosely corresponds to the location of the field recordings that issue forth from the loudspeakers. Location data is provided and more importantly the listener/viewer has the possibility of advancing to the next fragment at their own pace – something otherwise determined by the musicians in a live performance. What is lost on the one hand might be gained on the other. Neither the web nor the live version has precedence – both branches were present from the start.

Music has of course historically had a certain degree of responsiveness built into it. Musicians instinctively adapt to the acoustics they play in and composers have composed with the cathedrals, music-rooms or concert-halls their music is intended for, in mind. But even architecture, once regarded as the ultimate fixed art, has turned flexible. There now exist high tech concert-halls that adapt to the music that is played in them and it is this responsive architecture that in part inspired Ethan’s article on responsive web design in the first place.

A crucial aspect of the RWD approach is that rather than setting up different versions of a website targeted at specific devices, it is that a single site that fluidly adapts to the myriad of devices it might be viewed on. For now I can’t quite imagine how this should be implemented in the case of musical compositions – responsive websites are designed to be accessed via web browsers, and no matter the various makes, shapes and sizes, that provides a constant factor. In the case of music the jump from concert performance to internet presentation is radical – a leap from one medium to another.

Nevertheless I can’t help wondering how the “ebb and flow” typical of the web as a medium, and of (modern) life in general for that matter, might be more fully embraced when it comes to both creating musical compositions and presenting them on the net. That the identity of a work as something fluid stretching across different mediums more consciously might be integrated into the process of creating it.


  1. See also Oliver Reichenstein’s excellent analysis of the (invisible) frames that surround both digital and analogue reading experiences. 

Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Have you published a response to this? Send me a Webmention!

Hi, I’m <a rel="me" class="p-name u-url" href="https://rudigermeyer.com">Rudiger Meyer</a>, a composer interested in the play between music, sound, and&nbsp;media.