Preparing for Launch: Avoiding Browser Hell with BrowserStack
By Prof. Hacker
April 9, 2013
[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
We're sorry. Something went wrong.
We are unable to fully display the content of this page.
The most likely cause of this is a content blocker on your computer or network.
Please allow access to our site, and then refresh this page.
You may then be asked to log in, create an account if you don't already have one,
or subscribe.
If you continue to experience issues, please contact us at 202-466-1032 or help@chronicle.com
[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.
ADVERTISEMENT
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:
ADVERTISEMENT
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.
However, if I test it in Opera, it looks perfectly fine:
ADVERTISEMENT
In IE9 on Windows 7, both the archive page and the analysis page work correctly:
ADVERTISEMENT
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.