I always love it when sites create a lightweight mobile version of their content. I have had many tries and failure to create a mobile version of cfhour.com. I could just never get certain parts right. However every failure brought me closer to what I was trying to accomplish.

The site is using Mango Blog. To create the mobile version I am using jQtouch and jQuery. This gives me the animation and interaction I am looking for in a familiar JavaScript framework. jQtouch is very easy to work with and is very straight forward in how to implement it. But, once you try and go a little off the reservation it gets a little complicated.

Where I kept getting tripped up was the dynamic loading. Every example I had seen used static content. The minor examples I saw were nothing near what I needed to accomplish. Then, a blog post came though from Ray Camden. He used a technique to load dynamic content I had never thought of.

Using this technique I was off and running. I quickly ran into a couple issues. My first issue was that once dynamic content loaded it would not reload. This was corrected with a configuration setting. After changing this setting I ran into what could be a memory overload. The setting to not cache the remote return causes every remote request to be added to the dom. The previous requests are left behind and no longer referenced.

Now, once I figured out how to get the data out of the database. I had to figure out what posts where shows and not just posts. Then get the comments for each post as well as the url to the mp3 file. All this was fairly simple, with the exception of the mp3 url.

Our shows are stored at blip.tv. The problem with that is they have bandwidth throttling on outgoing content. I wanted to overcome this. So, I had to find a way to call the initial mp3 url, detect the redirected url, strip the url vars that did the throttling, then return the final url.

This, at first, seemed quite difficult. But, with ColdFusion making hard things easy, it was actually quite, well, easy. So, first I hit the rss for the show to get the mp3 link using cffeed. I then take the link from the rss and use cfhttp to get the redirect url. This is done by a fancy attribute of cfhttp redirect="false". Normall behavior for cfhttp is to follow redirects. This setting stops that behavior and allows me to get what the redirect url would have been. I discovered this little jem doing a Google search and coming across an old blog post from Ben Nadel. Because of the nature of the redirect link's life this has to be done on every request for a shows detail.

There is one function I don't like but it is a limitation of my device (iPhone). When listening to a show the link loads in to safari then into the QuickTime player. I wish I could get it to play natively in what I built but that is apparently not possible.

So with all this, I released the first, working, version of the site in a mobile version. Since it's release, I have continued to make tweaks. I still don't have submitting comments working yet but I will get that done soon. I will also be altering the main site to detect that the user agent is a mobile device and redirect them to the mobile version.

I am also toying with the idea of converting this into a generic mobile site. This would strip the cfhour-ness out of it so that any Mango Blog could use it. This should not be that difficult once I get posting comments working.

If you are running Google Chrome or Safari (those work the best) you can check it out on your computer. But, it is better experienced if you have a mobile device, such as an iPhone.

http://www.cfhour.com/mobile

If you find any issues or have any questions, comments please let me know.

Till next time,

--Dave