HomeBlogging

How To Mobilize Your Blogger Blog!

How To Mobilize Your Blogger Blog!
Like Tweet Pin it Share Share Email

AnotherWindowsBlog is now mobile-ready! Do you care? Most likely not but it’s still cool to know that if someone were to visit my blog on their mobile phone’s browser, they will have a much smoother experience than when compared to loading my full site. Trust me, you do not want to load my full site on your mini-phone’s browser. I just have so much stuff going on at my site that loading it in my iPhone 3G’s Safari browser was just a nightmare. If something takes too long to load, guess what usually happens? The user will become frustrated and most likely head to another site vowing never to return back. First impression is very important and so when readers land on my blog in their mobile phone’s browser, I want them to know that my blog is mobile ready and reading my content is as easy as can be.

UPDATE (12/31/10): Blogger in Draft now offers its users a quick and painless method of mobilizing their blog. It doesn’t yet give you any customization options but it definitely gets the job done if all you want is to give your readers a mobilized version of your blog when read on smart phones. Check it out.

I spent the better half of a day looking for ways to mobilize AnotherWindowsBlog. There were some paid services and some free one’s. Because this is a small time blog, I immediately ruled out any paid services. This left me with a couple of choices in the “holy cow, it’s totally free!” department. I’ve always liked to keep things simple and if you’ve ever tried browsing websites on your smart phone’s mini browser, you would agree with me as well. A mobile version of a website should be easy to navigate, must be clutter-free and have fairly fast loading times. Most advertisement ad’s along with all sidebar elements should be stripped away or placed in a way as to not be obtrusive. Basically, you should be left with one main column and it is this one column that houses all of your website/blog main posts. To put in more simpler terms, it’s just you and the article, nothing more.

UPDATE: This article is all but largely obsolete. Many, if not all themes today are mobile friendly. This means that you don’t have to do a thing to ensure that your visitors get the best experience possible when visiting your blog from a mobile device. Because so many web traffic comes from mobile devices, you’ll want to pick a mobile friendly theme to ensure your visitors remain on your site for as long as possible!

Mobilizing Your Site

Mind you, I’m not a coder or HTML expert and I’m pretty darn sure I never will be. Therefore, I needed a simple way to create a mobile version of my blog. A little customization options wouldn’t hurt but nothing to fancy. In fact, I don’t want anything too fancy anyways because remember, we should keep it as simple as possible! After performing some Google searches, I came across some interesting services that aims to easily help you get a mobile version of your site up and running in no time.

Mobify

Mobify
Mobify

When I first saw Mobify, I thought it was perfect. It allowed us to customize our mobile blog so that it only includes items and components of our choosing from our main blog. For example, if you wanted a widget included in your mobile version, you can do that. If you didn’t want the header to be included, you could easily leave that out. In the editor mode, you’ll see your site in its full version. You simply use your mouse and click on parts you want included in your mobile version. The process is easy to understand and gives you a big level of customization.

Mobify Customize
Mobify Customize

When I finished with my selection and published the site, I checked it out on my iPhone and it looked like how it did in the preview. Good so far. But then when I clicked on the “Read More” link, it took me directly back to my original home page. Not what I wanted. There are solutions for this as I have read but it’s just not something I wanted to do. If you are familiar with HTML coding, Mobify should be your first stop in mobilizing your website. For users who want something more simplified, we need something else.

Zinadoo

Zinadoo
Zinadoo

Next up to bat was Zinadoo. After the simple sign-up process, you’ll get to pick a template for your mobile blog. Not a whole lot to choose from but you can customize your own if you wish too.

Zinadoo Template Selection
Zinadoo Template Selection

Finally, you’ll be presented with the site designer page (which takes some time to load) and here you’ll be able to fully customize how your mobile site will look. Here is wherein the problem lies for me yet again. Just too much customization options and features! It feels like I need to build everything from scratch. Not necessarily a bad thing for some users but it’s still not what I wanted!

Zinadoo Customize
Zinadoo Customize

FeedM8

Feedm8
Feedm8

Alright, so rather than fully “customizing” the mobile site myself, how about having a service that will automatically do it for me? There must be some way to do that right? Well, indeed there is. Enter FeedM8. All you need to do is simply enter your website’s URL and that’s it! Seriously, that’s it! FeedM8 will then automatically grab your site’s RSS feed, create a mobile version and give you a weblink for it.

Feedm8 Sample
Feedm8 Sample

Bad news however. While everything looked great on my iPhone’s browser, there were two big components missing: my blog pictures and my links! So, my pictures wouldn’t show up and my links were somehow removed as well. Not very cool if you ask me. While FeedM8 is extremely easy to use, its just “too” simple for my tastes. Remember, I wanted something that did everything automatically while still giving me “some” customization. FeedM8 only accomplished the former.

Wirenode

At this point, I was on the brink of giving up. But then I found another free service that aims to mobilize my blog. What the heck, I’ve already tried so many, what’s one more? Luckily I did because Wirenode had everything I wanted.

Wirenode
Wirenode

Sign-up was a breeze. Simply enter your site’s URL and Wirenode will use your RSS feed to create your mobile site similar to FeedM8. However, the similarities end there. Wirenode has a very simple interface and can be customized a bit (mainly the color of text and background). There are also a couple of themes you can choose from besides the default.

Wirenode Themes
Wirenode Themes

The best part about Wirenode’s editor is that it’s totally optional! Up to this point, my mobile site was already good to go without any customizations! Main reason once again, is due to simplicity. On the mobile site, you simply see my recent blog posts titles and once you click on one, you’ll be taken to that page in mobile format! The best news? My pictures as well as my links are all intact! The only negative part when viewing my site through Wirenode is that there is no Home page button! You simply have to keep pressing the Previous button until you reach back the home page. Also, there is a very small advertisement placed at the bottom but it’s only there on the home page. Once you start reading an article, it’s gone.
The editor is useful if you want to add in simple things like an image for your header or images just to spice things up a bit. Remember, the default interface is very simple and so some readers might think this to be too bland. By providing some image headers or footer, it should help a bit. You can also easily add in a new page should it be necessary.

Adding a new page didn’t really work for me unless I made that page the default home page. Only then would it show up. I tried to create a separate Contact page but it simply didn’t show up! When I made that Contact page as the default home page, it got displayed but once I went into my actual blog, there was no way for me to re-access the Contact page! Weird indeed! Therefore, I just decided to include my contact email at the bottom of the default home page!

Wirenode Editor
Wirenode Editor

Once everything is done, publish it and your finished! Sort of. Like most free services, you’ll be given a new domain for your mobile site. So, in order to access my mobile site on a mobile device, a reader would have to type in anotherwindowsblog.wirenode.mobi. As you can see, asking someone to type that long URL is suicidal to say the least. We need some way to automatically redirect users to that mobile domain when they are on mobile devices.

 

Mobile Redirection

 

It’s absolutely not required of you to perform this redirection procedure. Once you have published your mobile site with Wirenode, you’ll be given your own dedicated URL link pointing to the site. To have readers visit the mobile version of your site, they must either know it ahead of time (which means they’ll have to manually type in the URL) or you publish the link preferably in a very visible location somewhere on your home page. That way, users can click on the link and be taken to your mobile site.

Now that the mobilizing problem has been solved, my next problem was how to get the URL “anotherwindowsblog.wirenode.mobi” to automatically load when users visit www.anotherwindowsblog.com on their mobile phone. URL redirection isn’t a new or complicated feature and many sites and blogs use it. For example, if I was orginally maintaining a site called www.mysite1.com and one day I decided to change it to www.mysite2.com, I can use a redirection. So, when users type in the old URL, they will automatically be transferred to the new URL. That way, the site owner will not lose any old visitor traffic.
What I’m trying to accomplish is similar but a little more complicated. I need a way to redirect users to my mobile site whenever they type in my main blog’s URL (because that’s the URL they are familiar with) and only perform the redirection if they are on a mobile phone. Is this possible? Sure! After a little searching around, I learned that by using a little piece of Javascript coding, your site can determine the width of the user’s browser. Why is this important? Well, if you think about it, smart phone’s are small in size and therefore, their browser’s width and length measurements are small as well. Therefore, we can make an argument that basically says that if the user coming into my blog (www.anotherwindowsblog.com) is using a browser that has a width size of less than 600 pixels, which most likely indicates that they are coming in over a smart phone, then redirect them to this other site (which will be the mobile version created with Wirenode). Cool isn’t it?

There are many different script formats you can use besides Javascript but because I am using Blogger as my blogging platform, it plays nicely with it. However, the problem is that this method isn’t the best. Some phones can’t detect Java and so the parameter I’m about to show you will be ignored. If it is ignored, than my full website will load and I’m back at square one. Right now, I’m looking into an alternative method at detecting mobile users with a site called Detectmobilebrowser.com. I’m able to install the main code into my blog’s HTML but I have no idea how to actually redirect users using this method and coding! If someone knows how to do so, please I beg of you, teach me how!The Javascript code used will be:

<script type="'text/javascript'">
if (screen.width&lt;600)
window.location.replace
(&quot;http://anotherwindowsblog.wirenode.mobi&quot;)
</script>

You’ll obviously want to change the URL to point to your own mobile site. Also, you can change the width value of 600 to a different value too. Place this code right in the beginning of the head section in your blog’s HTML section like so:

Code Placement
Code Placement

The redirection is now done! As mentioned in the quote earlier, this method might not work with all smart phone’s out there. I only successfully tested this on my iPhone 3G. So, if any of you readers are using a different smart phone, please help me out! Simply visit www.anotherwindowsblog.com from your mobile browser and see if you get redirected to my mobile site. Whether successful or not, please let me know! I appreciate it!

In the End…

Although it was a bit frustrating at first, being able to finally mobilize my site is a great feeling. Not that I’m expecting many visitors to browse my blog via their smart phones but just the fact that “its there and configured” makes it seem really cool. The only worry I have right now is the redirection part. I’m glad it works on my iPhone but there are so many other smart phones out there from the likes of Motorola, Samsung, HTC, etc.
Again, if anyone knows how to work with the Javascript code at Detectmobilebrowser.com, please share your knowledge! If you know of a even better way to detect mobile browsers on the Blogger platform, than please share that information with us as well!

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × = 6