Create a Mobile Website – Quick and Free!
I was recently presented with one of my favorite web challenges; How to do something for nothing.
One of my “starving musician” projects was selected to perform a showcase set at the Los Angeles Film Festival for music industry people. The artist’s website was designed using a large amount of Adobe Flash. The site looks great in a browser, but visiting via a mobile device delivers an awful rendering. Flash is not supported by most mobile machines, including iPhone and Android powered devices. Instead of delivering the rich media experience developed in Flash, mobile devices display the “Blue Cube” of death. Not a good first impression!
The site needed to automatically detect incoming mobile browser requests and redirect those devices to a mobile friendly site. With a budget of zero, and a time-line of 48 hours, this is how I accomplished the task.
Step One: Auto-detect mobile browsers – Scouring the web I discovered that there were a lot of people asking “how to” but not many solutions. I came across detectmobilebrowser.com which provides an Open Source (FREE) mobile browser detection script for multiple platforms including .net, .cfm, .php and several other implementation methods. I chose the Apache .htaccess route. The site creates a complete script you can copy and paste. The only tweak required to the code was the destination URL. You need to be careful if you are merging this code snip with your existing .htaccess file.
Step Two: Create a mobile friendly website – With the mobile browser detection script working, the next task was to find a quick free mobile site template to put up. I chose to deploy a stand-alone WordPress blog, and utilize the WPtouch Plugin to render a nice looking mobile website. This is a quick way to set up a fast (free) mobile site option, and the WPtouch mobile theme is flexible enough to to accommodate some customization. The free version was perfect for my quick project, but I ultimately upgraded to the WPtouch Pro version that offers additional theme and icon options.
WPtouch Setup – The WPtouch plugin allows you to designate the landing page. I created a nice “Mobile Home” that has more graphics then text. Looks nice on a hand-held device – not so great on an iPad. Remember, if you go this route you need to consider how you will display blog posts. In my case I created just one category and linked directly to that for “news and updates.” If you needed more than one category you could create page and parse all the blog posts into that page. The point here is this; you can’t link directly to the root of the blog if you designate a landing page because you get a looping redirect.
Hope this helps you with your project – Enjoy!
Hello friends,this is a nice site and I wanted to post a note to let you know, good job! Thanks.