Preparing for Launch: Avoiding Browser Hell with BrowserStack

[This is a guest post by Joanna Swafford, a PhD candidate in English at the University of Virginia. She is currently working on her dissertation on the gendered intermediations of Victorian poetry and music. You can find her online at her blog and follow her on Twitter at @annieswafford.--@JBJ]

March 11th saw the pre-release of my digital project, Songs of the Victorians, an archive of parlor and art song settings of Victorian poems, and also a scholarly tool to facilitate interdisciplinary music and poetry scholarship. I had been building it for the last two years with the help of fellowships from NINES and the Scholars’ Lab, and it was a great experience to finally make the site public.

It was also a surprisingly challenging experience, as I had to figure out how to make the site display properly on a wide variety of browsers, operating systems, and iOS devices (iPad, iPod, etc.).

Before I jump in with details about the trials and tribulations of testing website compatibility, I’ll first explain a little more about my site and the programming and design challenges it presents. It is a part of the final chapter of my dissertation on Victorian poetry and music, and it will contain four songs: Michael William Balfe’s and Sir Arthur Somervell’s settings of “Come into the Garden, Maud” (both based on Alfred Lord Tennyson’s monodrama, Maud), Sir Arthur Sullivan’s version of Adelaide Procter’s “A Lost Chord,” and Caroline Norton’s “Juanita,” although for the limited release, it only includes “Juanita.” The site contains two components for each work: an archive of high-resolution images of the first edition printing with an audio file, and an article-length analysis of the song’s interpretation of the poem, with playable excerpts of relevant musical phrases to support the argument. When the song is played on either component, each measure of the score is highlighted in time with the music so that everyone, regardless of their ability to read music, can follow the score and the thread of the argument.

To incorporate audio, I needed to use a comparatively new feature of html, namely, the <audio> tag, which lets you embed an audio file and player in a website. I was disappointed to discover that no two browsers handled it in precisely the same way: Internet Explorer won’t recognize it at all in versions 8 and earlier (and inexplicably won’t render it in version 10), ios devices will only play the audio file if it is triggered by a user event, and Firefox will only play ogg vorbis, not mp3 files.

Such compatibility difficulties are often colloquially (and aptly) referred to as “browser hell.” I learned about some of these problems from researching the <audio> tag as I was developing Songs of the Victorians, but I learned most from an incredibly useful site for testing website compatability: BrowserStack.

BrowserStack lets users test websites on all different browsers and operating systems. I found this invaluable since I, like most people, don’t have immediate access to computers that run IE, Firefox, Safari, Chrome, Opera, and various iOS mobile browsers in all their incarnations. With BrowserStack, users can create a free trial account (which is limited to 30 minutes of testing time) and then enter the URL and the operating system/browser pair they would like to test as the following screenshot demonstrates:

Click for full size

When you hit “Start testing,” BrowserStack will run a virtual machine with the OS/browser pair you selected and stream the result directly to your browser. Here, I’m testing the archive page for Caroline Norton’s “Juanita” in IE10 on a Windows 8 OS. As you can see, the site shows up without the audio player.

Click for full size.

However, if I test it in Opera, it looks perfectly fine:

Click for full size.

In IE9 on Windows 7, both the archive page and the analysis page work correctly:

Click for full size.

BrowserStack has dozens of OS/browser pairs, including Mobile Safari on iOS, and even provides debugging tools wherever possible. It helped me figure out both what warnings I should put about browser compatibility on my site for the unfixable problems and what problems I could easily fix before the launch. It can even scan a site run on a local server so you can test a page that is not yet live!

I’d like to try to find a workaround so my site will function properly on old versions of IE and to figure out what undocumented bug keeps the newest version of IE from showing and playing audio files (and I’d love to hear any suggestions you readers might have), but for now, with BrowserStack as my guide, I feel like I’ve mostly navigated out of the many circles of “browser hell” and can continue moving towards a fuller release of Songs of the Victorians.

Photo STS-1 Launch by Flickr user NASA on The Commons / No known copyright restrictions