Guide To Setup A Mobile Friendly Version Web Site Of Your WordPress/Blogger/TypePad/Other Blog

Recently we announced the launch of mobile friendly version of our blog. The mobile edition of the blog is accessible at the URL m.techdreams.org and you can preview the iPhone friendly version here.

Creating mobile friendly version of a blog is very simple with the help of MoFuse.com service. When we say simple, we really mean it. It is as simple as setting up a WordPress blog.

Based on our experience in creation of m.techdreams.org, we are writing this post to help others to set their own mobile version of their blogs.

What is Mofuse and Why Mofuse?

Mofuse is a free web service that allows anyone to create a mobile friendly web site for a blog (or any web site that has RSS feeds). It helps you in creation of iPhone friendly version and a common version for rest of the mobiles devices.

We have chosen Mofuse to launch the mobile site as it is recommended and used by popular blogs like Digital Inspiration, LiveSide and ReadWriteWeb. More over it is a free services :).

Creating a Mobile Friendly Version Of Your Blog

Lets see the steps required for creation of mobile friendly version

1) Point your browser to www.mofuse.com and sign up for a free account. Singing process is a very quick as they ask you to enter email and password. Once you submit the signup form you will be automatically logged in to the MoFuse service.

2) Now click on the link Launch a Mobile Site available in the left side bar menu; Displays  a New Mobile Site page

3) In the section Step1, enter name of your new mobile site, choose a mofuse.mobi sub-domain name that is appropriate to your blog(we’ve chosen techdreams.mofuse.mobi)  through which your mobile site is going to be accessible and select the category that suits your blog.

4) In the section Step 2, enter a name for the RSS feed of your blog and the URL through which your RSS feeds are accessible(ex:http://feeds.techdreams.org/td)

5) Accept the terms & condition in the step 3 click on Launch Your Mobile Site button. That’s all. Your mobile friends of your blog is ready. You can preview it by pointing your browser to the URL that you provided in the Step 4.

Changing Design/Colors of Mobile Site To Synch With Your Blog

As the basic mobile friendly version of your blog is ready, lets start tweaking its look and feel to synch with your blog design.

To change look and feel of the mobile site click on the link Design/Colors available under the right side menu bar section  Make It Unique.

Choose various color options and related to site header, text color, links color and even you can upload a custom logo for your new site. Make sure that the mobile site is going to look similar to your blog.

After tweaking the color values and uploading the image click on the link Refresh Preview to see how good is your new design. Are you not satisfied? Change them again.

Once you satisfied with the new design click on the Save button.

Creating a Custom Domain(like m.techdrems.org) For Your Mobile Site

So your mobile site is ready and the design is similar to your blog. Lets setup a custom domain if your blog is having a custom domain.

Instead of hosting the site as sub domain of mofuse.mobi (techdreams.mofuse.org) you can setup a custom domain(m.techdreams.org) for you mobile site.

Creating a custom domain is a two step activity and also it requires you to change DNS settings in your Domain Controller web site.

First step is to configure Mofuse settings. Click on the link Custom Domain link and enter the custom domain you would like to have for the mobile site. Hit the save button to persist the changes.

Tip: It is a general practice to choose “m” as the sub domain for mobile sites.

Second step is to configure DNS settings. Log in to your domain name controller web site (ex:Enom, Dreamhost, GoDaddy, etc) and add a CNAME entry that links your mobile site’s custom domain  and the mofuse.mobi sub domain.

As instructions to add CNAME record depends on the Administration panel user interface of your domain controller, we can not provide you instructions here. You can find the instructions for popular sites here & here or refer to help page of your domain controller web site. For our web site this is how the CNAME entry looks like

Hurrah!!! Your new mobile site is ready. You are all set to publish the site to the rest of the world. Go ahead and write a post to inform readers of your blog.

Note: After successfully adding the CNAME record you need to wait a day or two to access your mobile site using the custom domain. The waiting is unavoidable as the propagation of DNS settings across the globe takes time.