I’ve launched a new blog, prepaidphonenews.com, covering the US pay as you go mobile industry from a user’s perspective. The site grew out of a series of posts I wrote on WapReview that compared the various operator and MVNO prepaid offerings for both voice/SMS only and data users. Those posts have consistently been among the most popular on Wapreview so I decided to spin the prepaid coverage off to a dedicated site.
Prepaid Phone News is also an experiment in shoestring web publishing. Rather than going the self-hosted WordPress route that I use for WapReview and BoostApps, the new site is running on Google’s free (as in beer) Blogger platform. I was drawn to Blogger partly because it’s free but also because of its remarkable uptime. My other sites run on shared hosting and even with the best of hosts there are always some outages. Plus my self hosted WordPress sites seem to get hacked every now and then. I’m hoping that Google will do a better job of keeping my site up and exploit free than I could myself.
Another reason that Blogger is interesting to me are its new mobile templates. If you turn the mobile option on, iPhone and Android users are directed to an attractive touch friendly mobile version of your blog. Users of unsupported browsers can see the mobile version by appending ?m=1 to any Blogger URL. I tried the mobile version in a number of browsers and it seems to work well in Opera Mini and Mobile and with the Symbian, bada and WebOS browsers. It suspect it will work with any browser that supports JavaScript and can handle pages up to several hundred KB in size.
I wanted to redirect all capable mobile browsers to the mobile version of the new site but I haven’t got that working yet. I did find some JavaScript on the web that mostly worked. The only problem was that it kept kicking mobile users back to the mobile site even after they clicked the “View desktop site” link on the mobile pages.
I settled on adding a “View Mobile Version” link to the top of my desktop pages. If you want to do something similar you can adapt my code. First save a copy of your Blogger template just in case something goes wrong. Then search for the first and only occurrence of the <body> tag in the template and insert the following just below <body> :
<script language=’javascript’ type=’text/javascript’>
var h = "http://" + window.location.hostname + window.location.pathname;
document.write ("<div style=’padding:0 4px’><a href=’" + h + "?m=1′>View Mobile Version</a></div>");
</script>
The code above will dynamically create a link to Blogger’s mobile version of the current page in any browser that supports JavaScript.
So what about embedded WAP browsers which don’t do JavaScript? They won’t see the link and wouldn’t be able to handle Blogger’s mobile version anyway as it which requires JavaScript for navigation. I didn’t want to leave feature phone users out so I made a free lightweight version of the Blog using Mippin (you could also use Winksite or Wirenode, if you prefer). Then I added a link to the Mippin site enclosed in a <noscript> block immediately below the JavaScript. Here’s the complete code with the <noscript> portion in bold. You will need to change URL (in red) to point to your Mippin, etc. lite mobile site.
<script language=’javascript’ type=’text/javascript’>
var h = "http://" + window.location.hostname + window.location.pathname;
document.write ("<div style=’padding:0 4px’><a href=’" + h + "?m=1′>View Mobile Version</a></div>");
</script>
<noscript><div style=’padding:0 4px’><a href=’http://mippin.com/prepaid‘>View Mobile Version</a></div></noscript>
Only browsers that don’t support JavaScript will see the link in <noscript></noscript> block.
Here are the two mobile versions, Blogger’s on the left, Mippin’s on the right
If you want to try them in your browser, here are direct links:
prepaidphonenews.com/?m=1 – Blogger Mobile
mippin.com/prepaid – Mippin
Pingback: Tweets that mention PrepaidPhoneNews.com and Blogger Mobile Tricks | Wap Review -- Topsy.com