Mobilize Your Blogger Blog

If you've ever looked at your blog from your phone, you know that it can take ages to load. After the HTML, CSS, javascript, images and all the other widgets load, everything looks small and unreadable. The layout you so carefully planned for your desktop or laptop computer doesn't translate so well when viewed on a small telephone screen, even if it's on a Smart Phone (ie. iPhone, Blackberry, Android, etc.).



I never realized the importance of website mobility until I got my iPhone. When I'm out and about, on a bus or on CalTrain, I'm busy taking snapshots with Hipstamatic, checking my email, or surfing the web. When I read blogs on my iPhone, it's a challenge because most blogs are not mobilized.




Enter Our.City.Lights. How happy I was to find a mobile link on Diana's beautiful blog! When you click on the mobile link, you are directed to the Mippin version of her site. Mippin is a free service that converts your blog into its clean and lite mobile counterpart.



I followed suit and I opened a free Mippin account, customized some settings (see below) and within minutes, I had a cute mobile version of Pugly Pixel ready to go.



I think the transformation is remarkable and I'm happy that the Mippin version looks pretty good and is functional.



For completion's sake, here are some shortcomings I found with Mippin:

• Mippin only shows the latest 14 blog posts.
• All the images have black borders and you can't change it.
• Redirection isn't automatic. What I mean is, I still have to click a link to go to the mobile version. This is a problem because everything is so tiny, that it's hard to find the link to click on it. I address this issue in the Advanced section later, after the jump.
• ETA: In a single post, groups all images and all text and displays them separately. (Thanks for catching this, Melissa).

1. Open a Mippin account
2. Customize your mobile site if you wish (ie. logo, site name, header color, section color, link color, and text color).
3. Add a link to your blog which will direct your mobile readers to your new Mippin site when they click on it.

That's it! That's all you need to do to mobilize your blog and these instructions should work with any blog platform (ie. Wordpress, Blogger, Typepad, etc).

After you mobilize your blog, your readers can follow your site wherever they are. Now that more and more people have Smart Phones, it's smart to mobilize your blog.

In the next Mobilize Your Blog (Part 2) post, I'll show you how to mobilize your Wordpress blogs without Mippin.

Alright you guys, I hope you learned something new. I want to thank Diana for being on the cutting edge and inspiring me to mobilize.

Everything discussed below is optional. If you want to optimize your mobile blog a bit further and make it auto-redirect, for instance -- join me in the optional/advanced discussion after the jump.



Option #1 An Easy Name to Remember

If you're allowed to create subdomains on your account with your web-hosting provider, I suggest that you create an easy to remember URL for your mobile readers. This involves the creation of subdomains that look like this:

http://m.puglypixel.com

or this:

http://mobile.puglypixel.com

Both URLs will take you automatically to my Mippin site. The benefit of using this method is that your mobile readers can visit that address directly from their mobile phones with an easy to remember URL. The standard naming scheme for this type of subdomain would be to call it "m" as in mobile.


Option #2 Send Them There Automatically


Mippin does not handle the automatic redirection from your blog to your mobilized site. I wrote a short script to address this issue. My script handles the automatic redirection of blogs accessed from Smart Phones and Nokia phones (using the SymbianOS mobile browser). There are hundreds of browsers (user agents) for mobile phones and to write a script that would handle them all would be impractical. So, this script is focused on serving the latest wave: The Smart Phones.

The code shown below is Blogger-specific (because of the XML CDATA tags). I have a non-Blogger version, as well. Note that the script has only been tested on Wordpress and Blogger (Blogspot).

Get the script: redirect or redirect for Blogger

Do you need to change anything?

Answer: Yes. I ask that you change the value for MOBILE_URL. For example, to implement this code for my blog:

I would change this line from this:
var MOBILE_URL=“http://www.mippin.com/ourcitylights“;

to this:
var MOBILE_URL=“http://www.mippin.com/puglypixel“;



Where do you insert the script?

Answer: Insert this code into your HTML layout. For example, on Blogger, you need to go to the Design Tab and then click on Edit HTML and insert the Blogger-specific code into your layout, right after the <head> tag.

{ Brushed paint effect courtesy of Blog.SpoonGraphics. }