Danceradio.ca

An Ontario Canada based internet radio hub offering your fix of clubbin’ in the comfort of your own home. But you’re not just limited to your home or office. With their mobile player their channels can stream to you in your car, on a bus, on the subway, pretty much anywhere your mobile phone can go, you can bring Danceradio.ca with you!

I began work on this site in January of 2011. The boys were looking for a fresh clean redesign with a content management system that is easy to use and manipulate.

“What we are looking for is something that looks slick and clubby but is easy to update on the backend without having to know html.”

The First Draft

So I began to draw up some drafts. I use Photoshop CS5 to draft up my designs and used a 976px grid system to keep things flowing in a good layout. The boys directed me to their competition and pointed out characteristics of the site that they liked and disliked. Using this knowledge I crafted up my first design:

Danceradio.ca draft 1

This design clearly illustrates the music element and a clean club feel. However the crew felt it was a little too girly.

The nature of their music is the underground and after hours world of trance, beats, hip-hop and house music played by DJ’s around the globe. That being said, something a little more to the core of that style of music. Something darker with some neon touches more suited to the club scene of say, The Guvernment in Toronto or The Mod Club for example.

So back to the drawing board to re-evaluate the design and the overall goal of what they are looking to achieve.

Part of web and graphics design that makes you as the artist great it your clients eyes is your ability to accept critiscm (which almost always occurs on your first ever attempt) and your ability to listen to their remarks, soak them in and fully understand how you can improve upon your previous design.

You really want to nail it within 3 designs or you risk losing the client all together. They will feel that you’re just not grasping the concept and they’ll begin to explore other designers for someone who will “get it”.

Back to the drawing board

So after a day or two of research and designing my next draft, I hit a winner. They want the deep dark underground feel to their site in a “slick and clubby” design. A few graphical reconfigurations in Photoshop, a little toying around with color to bring in their logo and blend it nicely with the overall layout and a star is born.

darker, clubbier, a little less femine feel don't ya think?

This design became the winner. They loved the layout and the flow of the content. Drafting was complete and it was time to code out the details. As I designed this site on the Joomla 1.5 framework (1.6 was out, however was new and a little shaky in my opinion, so I stuck with stability). The main page is fully dynamic using PHP and MySQL programming to pull information from the Joomla databases for each sub-channel and each sub-channel, you guessed it, is its own installation of Joomla.

They boys at Danceradio.ca opted for separate installations of Joomla for each channel so that they could keep the content segregated and completely branded appropriately for the channels. Also they have a need for others to sign in and make changes to some of the content at restricted levels. While I could grant specific access to the different user levels (assign DJ X to an administrator level and DJ Y to an author level to restrict his access to writing articles only) we didn’t want Dj’s from the then “East” channel to know the login information for the then “Central” or “Sound Syndicate” when they have no business being in those channels backend systems.

The New Format

They’ve since moved to a new format wherein the channels are now branded “1” and “2”. “Sound Syndicate” remains the same as this channel is assigned to one of their clients in full. With this new format, I was commissioned to redesign and re-brand the channels and the homepage accordingly. And so the site was reborn with the new branding. East became 1, Central became 2 and Sound Syndicate remained the same.

The channel switch posed the issue of directory structure and possibly broken links out there on the web. If I move all East content into a new directory named 1 for proper branding, any article on the web pointing to http://www.danceradio.ca/east will be broken. So I utilized a little htaccess 301 redirect knowledge to re-point the visitors of east or central to the correct locations while maintaining SEO and ranks in the search engines.

And by the way, this image displays the full functionality of the home page of the site. Again, fully dynamic, it pulls content from the joomla installations and feeds the news feeds on this page to keep it always alive and full of action. Any new article posted to any channel is also posted in summary form on here automatically.

There is also the events feed that rotates between each channels past and upcoming events to keep you posted on what’s happening. The onAir boxes tell you what each channels audio stream is currently up to. And when you go into a channel, their audio stream is often accompanied by a live ustream video feed of the show that is live to air. Accompanied by a social media / chat box, you can talk with a global community of clubbers and dance music lovers alike about anything that comes to your mind.

Getting Mobile

The concept of being able to listen in live on your mobile device was HUGE for them. This was a must and it needed a silky smooth way of doing it. Scouring the net for ways to feed a live stream to a mobile phone (keep in mind the lack of support by the iPhone for Flash), I found a great solution. The mobile player option from any channel allows you to stream live to your Blackberry, Android or iPhone device. When you visit the site from an iPhone, you are greeted with a separate page, a sort of iPhone web app is displayed rather than the actual site.

This allows you to click a channel and get right to the music or to visit the website and browse its content. I programmed this using a little cookie insertion and checking. When you load up the site it checks to see if you’re on an iPhone or iOS device. If so you are redirected to this iPhone page. When you get there, a cookie is installed to indicate the check has completed and you’ve already seen the iPhone page. This way, when you click the option to view the site, the cookie is found by the browser and the iPhone check is skipped allowing you to view the full site.

In Closing…

The boys at Danceradio.ca have created a very cool social hangout on the web for the underground house music community. Just because your home, at work, or on a plane doesn’t mean the party is over. Tune in to Danceradio.ca to listen live with their thousands of fans and listeners across the globe.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s