How To Go Mobile With Your Blog

How does your blog look on a mobile phone? Have you checked? I have been using my iPhone a lot to catch up on my blog reading, and so I have seen the good, the bad, and the ugly. So I decided to take my cue from the blogs that looked best, and set up a mobile theme of my own.

In this post, I will tell you which mobile theme I think is the best, and how to set up the various options that it has available.

The first thing I noticed is that on a mobile phone, those pop-up windows and pop-up strips on the bottom of the blog are a real pain. They are hard to close, and the strips end up covering up the middle of what you are trying to read.

The best way around all these problems is to install a mobile theme on your blog. This theme will only be activated when someone reads your blog from their mobile device. Otherwise, your site will look as normal.

The theme I liked best, by far, was Wp-Touch. It is a free plugin, and it is very easy to install. Just install it like any other plugin.

It looks pretty nice just as it is, but you can make it a lot better by tweaking the settings after you upload and activate the plugin.

Here is what I did to the settings:

Site Title: It is nice to be able to shorten the title of your site, so it will fit into the heading without being chopped off.

Post Listing Options: Here I chose “Post Thumbnails”. If your regular theme supports thumbnails, you can set these when you upload an image into your post. This will put a thumbnail picture on each post on the main page, as you can see in the picture at the top of this post. Otherwise, the default of “Calendar Icons” looks nice too.

Underneath this is a list of checkboxes that you can play around with. These control what else displays on the main page.

If you click on the little arrow on the header, you will get a dropdown menu as shown at left.

Next, I will show you the settings to set up this dropdown menu.

Check the first three boxes to show Tags and Categories, and to have a Search option (not shown in this pic – you can barely see the Search option in the pic at the very top of this post).

In the screenshot above, you can see some of the icons they give you to use for the pages in your dropdown menu. You can also upload your own by pressing the “Upload Icon” button. I uploaded one called “Patsquare”, which I used for the Logo and Home Screen icon.

Menu List Sort Order: This is how your pages will be sorted.

Pages + Icons: You will see a list of all your pages. Check the box next to the ones that you want to see in the list. Then select an icon for each one.

In this next sections, if you want to show AdSense in your mobile theme, just fill in your AdSense publisher ID and channel.

Stats & Custom Code: Here you can put stats tracking code, such as for StatCounter or Google Analytics.

Tip: I set up a separate StatCounter project just for the mobile theme. This way I can easily see the stats for the mobile theme separately from the regular theme.

Finally, here is a picture of how nicely Wp-Touch formats the posts. Any images are automatically scaled to fit in the window.

Note: you will need to view your blog on your mobile phone, or borrow one if you don’t have one, in order to see how it looks when you adjust the Wp-Touch settings.

(All iPhone pictures are from the Gallery at the Wp-Touch Mobile site.)

So go ahead and get your site ready to be viewed on a mobile phone in a nice format!