How to Make Your WordPress Blog Mobile Friendly

This is part of the Blogging for Grasshoppers series

If you talk to Howie Goldfarb anywhere – Twitter, here on his guest posts, or over at his own blog, you’ll know that he’s fixated on one thing.

(Well, actually he’s fixated on many things, but one thing kept coming back to me.)

Howie really really really believes in blogs being mobile friendly.

Of course, this makes sense, the way mobile is taking off.

But for people like you and me – or at least, me – who might not be particularly geeky, it can be a bit daunting.

After all, it takes enough guts, time and energy to get a blog started, and then to keep it going.

And now we have to “mobilize” it?!

I’d looked at WUL a few times on my BlackBerry (when I had one) and then on my iPhone, and all the things people say about non-mobile-optimized blogs were true.

The font was tiny.

It was unreadable.

It took waaay long to load.

The header, widgets and so on made it look very cluttered.

Dear oh dear oh dear oh dear!

So a couple of weeks ago, I decided to snoop around to see what I could find about optimizing one’s blog for mobile viewing that wouldn’t need me to suddenly acquire a Master’s in computer technology.

I looked at a few different sites, and I found wpbeginner’s article on 11 ways to create a mobile friendly site very useful.

Then I checked out a few different options, including Mobify, WordPress Mobile Edition and then (because I was getting bored very quickly) WPTouch.

Initially I tried to set up Mobify, but all the options overwhelmed me a little.

I really wanted something that was plug-and-play, and that, IMHO, Mobify is not.

So then I thought I’d try WPTouch instead.

I was stunned at how easy it was!

If you are ready to make your blog mobile-friendly… and really, there’s no reason why you shouldn’t be… my advice would be to use WPTouch (assuming, of course, you have a WordPress blog).

It’s very easy to set up – just install the plugin, activate it, and you’re off to the races.

However, here are a couple of things I did to customize it just a little that may be helpful to you.

1. Customize the general settings.

WPTouch will automatically populate the name of your blog, the footer message, and so on.

But you can change them all, so if you want a slightly more customized look, it’s very easy to do.

For example, I customized the footer message of the WUL mobile version with the © symbol instead of just text.

(And I did this in a very bootstrappy kinda way too.

I opened a Word document, inserted the symbol, and then pasted it into the WPTouch settings.)

2. Use a custom icon.

One of the things that’s very cool about WPTouch is that it has a nice selection of icons for you to use, that will show up in the mobile interface.

The default looks like a little notepad.

“Hmm,” I thought to myself.

“I have a favicon for WUL. How can I have that show up instead of the default icon?”

It’s really simple.

Assuming you already have a favorite icon, simply upload it to the Default and Custom Icon Pool in WPTouch’s settings (this will be below the Style & Color Options).

Save your settings, and then scroll down WPTouch’s settings page to the next set of options, which lets you set the logo icon, as well as menu items and icons for pages.

You should see your icon show up, and then select that.

See how neat that looks now, on the mobile version of WUL?

3. Customize your color palette.

This might seem a little back-asswards, but the reason I did it this way was so that I could ensure that the title text, header and sub-header background colors stayed within the WUL color family, so to speak.

And the best way for me to do that was to see how they looked once the custom icon was installed.

Now, you won’t have many options when it comes to customizing the actual background itself, but I don’t think that matters much.

All that you have to do, to customize the title text and so on colors is to replace the default hex color codes in the Style & Color Options section with the ones you want.

I found WPTouch’s interface for replacing the hex codes weird – it wouldn’t work for me.

So instead, I used this hex color code chart and generator from 2 Create a Website, and replaced WPTouch’s defaults with my selections (make sure you don’t double the # that goes before).

Easy peasy.

So now, when you read WUL on your mobile device (and you do, don’t you?) its branding is somewhat consistent with the “real” deal.

And you can see how neat and clean posts look on my iPhone.

There you go!

A really easy way to make your WordPress blog mobile friendly.

(And I did all this for my new foodie blog, Spicing Out as well, by the way, as you can see from the very first image in this post. If you love food, you should subscribe… heh!)

Was this helpful? Please let me know.

What other tips do you have on optimizing content for mobile?