TypePad has little known feature which allows you to load a mobile phone-friendly version of a website. It’s as easy as accessing your website with /.m at the end of your link.
So if your site runs at www.newpathconsulting.com, your mobile-friendly site is at www.newpathconsulting.com/.m
See that .m at the end? That’s it! If you use that link your website will load in a very mobile friendly website. You can also modify the styles-mobile.css file and change the look and feel of this mobile-friendly version of every page and blog post of your website. Each page link or blog-post link prefixed with .m/ will get a mobile-friendly site.
So www.newpathconsulting.com/.m/npt.html loads our home page in a mobile friendly site.
Now, here’s the thing. People visiting your site will get the usual version of your site first. They have to click then to get the the mobile version of your site. Wouldn’t it be cool though if your site just detected that your visitor was using a mobile device like an iPhone, Blackberry, iPad or Kindle and just redirected auto-magically to your mobile-friendly site? Well you can do that, too!
Here’s what you do.
1. Go to http://detectmobilebrowsers.com and download the Javascript detect code.
2. Don’t freak. There is a ton of compact Javascript code here. Just look for the last line and replace the http://detectmobilebrowser.com/mobile text with your own website’s mobile-friendly link – like http://www.newpathconsulting.com/.m
3. Finally, and here’s the cool part. You can do this with a Basic or Advanced Template site. Make a “note” TypeList using the Library->TypeLists option.
4. Copy and paste your code into the Note field (leave the name blank), and make sure you put around your Javascript mobile detection code. So it will look something like
(function(a,b){if(/android.+mobile|avantgo|bada/|blackberry…
window.opera,’http://yourwebsite.com/.m‘);
5. Save the TypeList.
6. Go to the Design -> Content section and add your TypeList to your blog. Your blog will not change, but every page will now load this code library which will first load your regular site and if it is coming up on a mobile device, the site will switch to your mobile site.
Try it. It’s magic. And let us know if you need help.
