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!

About David

David Tucker: Search Engine Optimization, Link Building Strategies, Off-Page SEO, Brand and Reputation Management Campaigns, Structural Analysis, and Analytics Consultant. Fighting the good fight against the search engines since InfoSeek and Alta Vista were the top Internet search portals. David has a strong background in technical, design, and hosting related issues. This provides RightNow clients with a layer of SEO that most organizations can not offer. In addition to SEO work, David has developed the RightNow online client reporting system, public website, email and auto-responder system, and the development + branding of the RightNow social media channels. When not working you can find David enjoying the outdoors in Maui, Hawaii

Comments

  1. Hello friends,this is a nice site and I wanted to post a note to let you know, good job! Thanks.

  2. yvonne.herbst@yahoo.com' Yvonne Herbst says:

    Very interesting — was your friend’s website already built on wordpress? I need to find this kind of solution for a website that was NOT initially built on wordpress — would love to know the answer and hope to hear from you!

  3. woutie.com@gmail.com' woutiecom says:

    wow, worked like a charm!
    Thanks for the info !

Speak Your Mind

*

Time limit is exhausted. Please reload CAPTCHA.