I had the unexpected opportunity to present at the February BayCHI event a few months ago. For a year, I’d been mulling on a presentation that is a mouthful to say, “What Web Applications can Learn from the Harpsichord.” It’s not the typical “What you should know about HTML5/CSS3/JavaScript” presentation and I knew I couldn’t assume it would ever find an appropriate audience. However, when Christian Crumlish asked me if I had anything I’d want to talk about at BayCHI, it felt like an extraordinary stroke of luck.
If you’re wondering how someone starts pairing harpsichords with web application design, it might help to know that I started playing the violin when I was five and continued playing throughout school. I don’t consider myself an expert in classical music (and my former music theory teacher would undoubtedly agree) but I do know that most classical music pieces can be categorized into one of about seven historical periods and that most household composer names come from the Baroque, Classical, and Romantic musical periods.
Interestingly, most of those musical period labels weren’t applied until the mid-19th century, after Beethoven’s death. It’s not often that musicians, designers, or architects have the foresight to declare the arrival of a new stylistic period. In reality, styles evolve more organically and it’s usually the duty of future historians to argue about these divisions.
Ten years ago, we talked about the Internet boom followed by the bubble. Five years ago, we started calling ourselves Web 2.0. Now we talk about social media. And in my head, I keep wondering whether these divisions will still be applicable in future Web Application Design museums hopefully 20-30 years away.
It was this thought process that led me to wonder what would happen if you compared the development of classical music with the evolution of today’s web applications. I’ve spent the last few weeks mulling on how to translate and visually represent this thought within a coherent blog post.
I’d like to propose that today’s web apps are stuck in a Baroque-like era and that by looking at the similarities between the evolution of classical music and web applications, we can break free of our Baroque trappings and progress forward to the next Internet period.
Before diving into the particulars of what a Baroque era looks like, here’s what I recall from my high school music theory classes up through the Romantic period with a few audio snippets. The most important take-away is to note the steps leading up to the Baroque music explosion fueled by public demand, an instrumental boom, and an abundance of musicians.
Classical Music between 400-1820
 |
Medieval (400-1400)
Long period of research and development
A slow Medieval simmering of musical development primarily confined to the Church who develops the first handwritten musical notation system for Gregorian chant. Music generally consists of religious vocal chants.
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
|
 |
Renaissance (1400-1600)
First craftsmen and instruments
The printing press makes it easier to reproduce music and instructional books for playing musical instruments. Instrumental music is no longer limited to just accompaniment and new demand develops to design instruments with a fuller range of sounds.
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
|
 |
Baroque (1600-1750)
Mass adoption and experimentation
The Baroque period emphasizes broad experimentation with the goal of creating emotional impact through complexity, ornamentation, and textures. Baroque fugues (like Bach) and ornamented harpsichord music are characteristic compositions of this period. Formalized teaching methods arise to develop new musicians and composers.
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
|
 |
Classical (1750-1820)
Restraint and principles, craft to art
The Classical period aims to understanding underlying order and hierarchy for compositions. Instead of the melody and harmony sharing an equal role, composers prefer a single, audible melody with a secondary harmony accompaniment.
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
|
 |
Romantic (1820-1910)
Artistic maturity, full expression
Finally, the art form reaches full maturity in the Romantic era as more composers and musicians master how to flout Classical rules for the desired effect. More formalized compositional structures develop. The Romantic period achieves what the Baroque period sought out to do – achieve emotional impact through compositional grandeur. However, it needed the rules of the Classical period to do so. |
With that background, here’s how the classical music timeline might parallel the development of the Internet.
Medieval – Long period of research and development
|
Music400-1400
Internet1940-1991
- In 400 AD, the Church is the only organization with the money and resources to support music
- In the 1970′s, the government, more specifically DARPA headquarters, is the only organization who can afford computing technology research for defense, not entertainment, purposes
- Like Medieival music was initially limited to religious devotion, the Medieval Internet was initially intended for military research
|
Renaissance – first craftsmen and instruments
  |
Music1400-1600
Internet1991-2005
– During the Renaissance period, music development breaks away from the Church and as more Europeans are exposed to music, music-making becomes an industry craft. Similarly, the development of the Internet moves from academic and government institutions to predominantly industry in the 1990′s.
- Developing music becomes less expensive with the development of the printing press. Similarly, the lowering cost of personal computers provide the general public with a new opportunity to have a presence on the web. Venture capitalist fund a startup land grab.
|
Baroque – mass adoption and experimentation
  |
Music1600-1750
Internet2005-current
– The Baroque musical period represents the longest and broadest period of musical experimentation in European musical history ever with an emphasis on exerting an overwhelming emotional impact through ornamentation, a texture of voices, and a variety of instrument ensembles. With the Internet, web applications see an explosion of pixel treatments, mashups, api’s, and social media widgets. In both cases, there’s a sense of doing things because you can, not necessarily because you should.
– In both genres, technology continues to develop and best practices are formalized.
|
Personally, when I listen to harpsichord music from the Baroque period, not too much time passes before I start to think, “I think this harpsichord piece is just trying to play as many notes as possible.” Similarly, after browsing the Internet for a bit today I start to think, “I’m not sure I can withstand another mashup, rounded corner, or headline announcing a breakthrough platform.”
It’s easy to think that today’s Internet baroque period is confined to the glossy Web 2.0 style. For instance, if I look at this personalized MySpace page with its glitter tags, purple background, widgets, and musical embeds, it’s hard to argue that it doesn’t have Baroque leanings. It’s not so dissimilar from this 1777 Baroque San Cristobal Cathedral where the emphasis is on the amount of ornamentation, materials, and architectural techniques for emotional effect.
However, you see the same types of mashups happening at the UI level. Consider this Amazon.com book previewing UI. In this image, you’ll see a modal litebox preview with a drop-down menu (with expandable accordions) that can be dismissed by an ‘X’ close button. All of this is encapsulated with a next/previous photo viewer. And judging by the buttons at top, you can zoom too. I’m really not sure what to expect when I click on the “Expanded View” option in the top right-hand corner.
How many more interactive elements can we fit within this UI? This montage is fairly daunting considering this UI’s primary intent is just to flip the page of a book.
In the musical Baroque period, the emphasis shifted from developing instruments to developing ensembles like the Opera and string quartet. The ultimate Internet homepage was a very Baroque endeavor that aimed to create the best one-stop-shop with stock quotes, feeds, and personalized services though not necessarily doing any one individual service particularly well.
Now, the focus has evolved from ultimate homepages to social media integrations with the aim of making sharing and communicating easier. When you click on a sharing service in your favorite news site, it’s dizzying to watch your browser load a zillion icons to display the matrix of services eager to announce you’ve read (and perhaps liked) an article. It’s amazing that copying and pasting an article is still such an attractive alternative to most of these services. Again, just because you can connect with all of these services, does that mean you should?
So where do we go from here? Personally, I want to live to see the Classical and hopefully the Romantic phase of web application design. I hope that our craft will continue to evolve and that with enough Baroque trial and learning, we will develop enough confidence to exercise restraint and present more compelling experiences to our users.
