Xpression Website (Best Technical Achievement Entry)

2013 Student Radio Award Entry: Best Technical Achievement Award Category The Xpression FM Website: Enhanced for Mobile XpressionFM has encountered various issues with our web presence in recent years.

Because of various issues beyond our control, including the loss of our domain name (which was owned by a station manager from 12 years ago), and until recently, the fact that the design of our website is managed by Xmedia Online (a now-defunct student media society), we never had a website which fit the needs of our society. To make matters worse, none of our members have a background in computer science, with the exception of the 3 years’ blogging and HTML/CSS experience that I have (in case you are wondering, my degree is in Accounting and Finance).

Early in the 2012/2013 academic year, Ben Kaye (the Head of Marketing) and I discussed about the Xpression website (over a pint), and we thought it should look like going forward. With that, a challenge was given for me to try and design a new website that would fit the needs of a student radio station like XpressionFM. Talking with Ben and Jack (Station Manager), we wanted a website that can ease communication between our studio and our listeners. At the same time, we wanted the website to be easy to maintain – one that can be used without much technical knowledge. Crucially, because we know students today are using smartphones and tablets, we wanted this website to be compatible across different platforms.

In the end, we decided to use a Wordpress CMS (Content Management System) with a “responsive” theme – this meant that the website will adjust its layout in response to the width of the screen, making the theme ideal for mobile devices. In this way, the content of the page will fit the screen nicely without the need for visitors to doubletap or pinch on their mobile devices. The website also has plugins and widgets to help display what show and song is playing on air now, with the help of Myriad OCP. With the new website, we placed a greater emphasis on online and social media. Not only do we have a range of ways to get in touch with us, we also have Facebook and Twitter widgets to keep our visitors informed with our announcements, alongside our Soundcloud and AudioBoo widgets to let listeners hear clips that we have uploaded.

And because these are all based on iFrames and HTML5, they are compatible across different devices.

We also made a new page called “Xpression Rewind”– a whole page dedicated to Mixcloud widgets, allowing visitors to listen back to previous shows. Mixcloud is working on a HTML5 widget, which will make our “Rewind” page compatible with mobile devices soon.

The website can also act as our “web app”. When a user accesses our website from Safari on iOS, they are greeted with the option to “Add to Home Screen”. Tapping on this adds an icon to the home screen, similar to any other app from the App Store.

This will help us to maintain a presence on Exeter students’ pockets, without to cost of developing a dedicated iOS app.

The biggest issue faced by this project was to make our embedded streaming player compatible across multiple platforms. To illustrate the problem: Xpression has an

IceCast stream which uses the MPEG-3 codec. We were considering how we should package the stream. Specifically, we looked at a Flash Player and HTML5 Player solution.

While Flash is installed in most desktop browsers today, it will not work on mobile browsers such as Safari on iOS or Android browsers. As for HTML5, the new technology led to issues with older versions of Internet Explorer, as well as Firefox, owing to the MPEG-3 codec licensing (see flowchart for details). An attempt to introduce an OGG Stream to support Firefox and Opera led to further issues, as we found that the streaming player is unusable in most browsers in HTML5 mode – a sign that HTML 5 audio is still nascent and not completely reliable at the moment.

In the end, a solution was found. We went with a Flash Player by default, with a HTML5 “fall-back” for browsers without Adobe Flash (including mobile browsers).

Flash is still by far the most common desktop If, for some reason, a browser fails to support both, the streaming player will be replaced with a link to our “How to Listen” page, giving details on other ways to listen. As HTML5 Audio matures, it may be possible to reintroduce the OGG stream to support more browsers. But even as things stand, our streaming player can support 99.6% of devices that visit the Xpression Website.

This site is built on freely and readily available technologies (Wordpress, Responsive Theme, HTML5), with a focus on social media, and with cross-platform compatibility. It looks just as good on mobiles as it does on a desktop. But this has not been easy – making a website compatible across different browsers on multiple platforms can be challenging, especially when embracing new developments such as HTML5. But I believe it is essential for student radio stations to think about how their listeners will interact with the station’s web presence, and I hope I have achieved that with this website.

On a personal level, this project has deepened my knowledge in HTML5 and PHP. At a station level, the project has given Xpression FM a website that is suitable for a student radio station and its listeners. <SRA Rules indicate that the written entry has to be submitted by a text box on their website, while photos and charts have to be uploaded separately, so ignore the layout if you will.>

START

Does the browser support Flash?

Yes

•

Use Flash.

Desktop browsers with Adobe Flash. e.g.: Chrome, Internet Explorer, Firefox.

No

Does the browser support HTML5 Audio with MP3?

Yes

Use HTML 5 Audio Tag with MP3 Stream.

• Desktop browsers without Adobe Flash, that support MP3 e.g.: IE9+, Safari 5+, Chrome 6+.

• Mobile browsers with support for HTML5 and streaming MP3. e.g.: Chrome, Safari, Firefox, Internet Explorer

No

Future roadmap

Does the browser support HTML5 Audio with OGG?

Currently

Yes

Display error message, suggest checking “How to Listen” page.

Use HTML 5 Audio Tag with OGG Stream.

• Non-MP3 licensed desktop browsers, without Adobe Flash. e.g.: Firefox and Opera.

• Mobile browsers with support for HTML5 and streaming OGG. e.g.: Firefox Mobile, Opera Mobile.

No Legacy/unsupported browser. Suggest upgrade.

• Legacy browsers without Adobe Flash. e.g.: IE8, Chrome 5, Firefox 3.5, Safari 4, Opera 9 or earlier • Mobile browsers with no HTML5 Audio support. e.g.: iOS 2, Android 2.2 “Froyo” or earlier