How to Create a Mobile Site with MoFuse

MoFuse is a service that lets you convert basically any site with a RSS feed, to a mobile site hosted by MoFuse. You can customize the design, setup your very own domain, and even add advertising to the mobile version of your site. This is a great option if you don’t feel comfortable hosting your mobile site yourself. And the best part is, MoFuse supports both traditional mobile phones, and the iPhone, which is really cool.

Getting Started

It is actually very simple to get your site setup with MoFuse. Just fill out the URL to your blog (or whatever), and let MoFuse detect it, on the front page. For our example, I’ll add a mobile version to my own site, and then I’ll customize it somewhat.

In the second step you’ll have to choose an URL for your mobile site, hosted under the mofuse.com domain. Mine is tdhedengren.mofuse.mobi“>tdhedengren.mofuse.mobi, which will work when I’ve finished setting up my mobile site. You’ll also get to pick a category for your mobile site, and play with a dummy version if you will.

If you haven’t used MoFuse before, you’ll be prompted to setup a user account as well. However, if you have, you should do the setup process from within the MoFuse Dashboard (i.e. you need to login first, click Launch a Mobile Site in the left menu). It is basically the same thing, however, so no worries.

Not very difficult, was it?

Customizing the Mobile Site

If you’re happy with the default look of you mobile site, you can skip the customization, however, I do encourage you to at least change the colors to match your current design, and possibly add a logo if you’ve got one. This is how my mobile site looks per default:

It looks decent enough, however, nothing spectacular. I want to carry my brand with me to the mobile screens as well, so let’s make it a little more tdhedengren.com, shall we? First of all, login to your MoFuse Dashboard, and click the site you want to edit. Starting with colors, click Design/Colors in the right column menu within. This will take us to a straight-forward page where you can edit background, header text, header background, text, and link color by entering HEX values in the boxes, or just click them to choose the color you want from the palette.

You can find your colors in your CSS file. I edited mine to go with the style on tdhedengren.com, clicked the Save button, and then clicked the Upload Logo link, which is also available to the right but called Your Logo instead.

My logo is simple. I created a 200 pixel wide one, but added some extra whitespace in the file to the top, since I want to avoid having it “hit” the top header, where my mobile site’s name is displayed. You’ll probably want to play a bit with that, but I went with 10 pixels extra whitespace above my actual logo.

Upload you logo, and then go back to the Design/Colors page. Now you’ll have options for header background color behind the logo, logo alignment, and of course if you want to show it at all. Edit accordingly, use the “refresh preview” link in the dummy preview below the actual settings, and click Save when you’re done. Now it looks like this:

Tweaking and Monetizing

We’re pretty much good to go now, but I’d like to tweak my site a little bit more. With my mobile site selected (i.e. clicked) in the MoFuse Dashboard, I click on Edit Homepage in the right column. This will let me write a little something to add under the header of my mobile site, or even on every mobile page should I want to. You get a simple WYISWYG editor to play with. Keep in mind that a lot of text will push down the links to the actual content, so keep it short. I just went with my standard catch-phrase “designer, writer, blogger” on the front page.

You can even add new pages, exclusive to your mobile site. Just click Add a New Page in the right column, and you get something similar to the Edit Homepage page. There are a bunch of more or less interesting add-ons for you to incorporate, play around if you will. I especially like the QR code, which might not be working across the world. It is basically an image you can print or whatever, and when someone takes a picture of it with their mobile camera, they’ll be directed to your mobile site. Nifty!

You might want to add a 57×57 pixel webclip icon for the iPhone and iPod touch. Click iPhone Settings in the right column, a wee bit down, and provide an URL to the icon file. You can turn on and off the iPhone version of your mobile site here as well, but why you’d want it off is beyond me.

One of the more interesting one is the Monetize option. This will let you embed ads on your mobile site, just by entering some details for either Google Adsense, or AdMob. Then you’re good to go. Mobile ads will probably not be a heavy hitter for you, but still, it might be something. For myself, I’ll leave it off, my site isn’t about ad dollars, and even if it were, I tend to look at mobile sites as a way to prolong the brand and, hopefully, get a faithful visitor on the traditional website as well.

<

Finally, you might want to redirect visitors using mobile devices to your mobile site, automatically. Click Automatic Redirect to the right, and fetch the PHP code to paste it according to the instructions. However, this code is experimental, but as far as I can tell it really shouldn’t harm or slow down your site much. Tests with it worked too, but use at your own risk, of course.

Setting Up Your Own Domain

I’m not happy with having tdhedengren.mofuse.mobi as my mobile URL. It is too long, and it doesn’t really work wonders for my brand. I want m.tdhedengren.com to lead to the mobile site, which is something of a standard solution for traditional websites having a mobile version: Put it on a subdomain, preferably m (short) but mobile is pretty common too.

You’ll need access to DNS records to pull this one off, which means that you’ll probably have to be hosting your own site (although some creative redirects might be able to solve this as well). Managing DNS records isn’t something most of us do, so you might want to talk to your webhost about this. Remember, screwing up the DNS means that your site won’t be working, and I’m not talking about just your mobile one, your main site might be affected as well. Proceed with caution!

Since I’m a madman, I’ll give it a go anyway. First of all, let’s click Custom Domain in the right hand menu, at the top. All you need to do there is to enter your custom domain, mine being m.tdhedengren.com, and click Save. This won’t point the domain in question to MoFuse and your mobile site, but it will let MoFuse know that it should expect it.

Now let’s point the subdomain, m.tdhedengren.com, to the mobile site. This is when it gets dangerous, since you’ll need to make a DNS entry for the subdomain. What you want to add is a CNAME entry for m, pointing to your MoFuse address, mine being tdhedengren.mofuse.mobi. Various DNS managers look and work in different ways, and my current host needed me to send in a support ticket to make the CNAME entry. Another host I’ve got access to, however, have a DNS manager that looks like this:

Please note the m CNAME pakten.mofuse.mobi part, which is the m.pakten.se subdomain pointing to pakten.mofuse.mobi.

Save, and then wait. It will take up to 48 hours for a DNS entry to go through across the world, although you’ll probably see result faster than that.

If you don’t want to fiddle with the DNS, you could do a subdomain redirect to your MoFuse URL. That would mean that anyone using your subdomain would be sent to your MoFuse URL, which is almost as good. Most webhosts offer subdomain redirects like this, so that shouldn’t be a problem to setup. You could also use the PHP script mentioned above to check what kind of device that are visiting your site, and serve the mobile version when appropriate that way

Welcome to the mobile web!

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.