Make Your WordPress Website Mobile

Today’s hottest trend is to make your website mobile ready. The number of mobile users is skyrocketing and the use of tablets have grown faster in the last year than any other device. If you’re in an active business today, chances are many of your audience uses mobile devices. Wouldn’t it be awesome if they could access your content while on the road?

Generally, making a website “mobile-ready” involves thinking about that use from the start. The design has to be one that easily collapses into the 320px width and still look presentable. Buttons and links must be easily distinguished. Tabbing functions must properly be setup as there’s a chance the mobile device is not touchscreen.

Mobile in a WordPress World

For many of us, we’ve invested a lot of time and effort into making spectacular WordPress sites. But that stunning design often doesn’t translate to the mobile world nicely. Many WordPress designs require the use of certain CSS or Javascript that just aren’t compatible with the mobile engines.

Easy Way to Make Your WordPress Website Mobile

Thankfully, WordPress has tons of plugins that people have put time/effort/thought into creating. One of my favorites for mobile is WPTouch.

Just install and activate the plug-in and you’re site is mobile-ready! Yes, it is that easy.  And no, I don’t have any affiliation with the creator of this wonderful plugin.  I’m just really impressed with how this plugin works!

Moving beyond the Default

By default, WPTouch will simply display a mobile-friendly view of your latest posts. While mobile-friendly, it’s not every attractive.

To move beyond the simple setup, you need to make a few modifications under the Settings->WPtouch area. If you want, you can modify almost any aspect of the system through this interface. But for simplicity sake, we’ll just cover the basics to getting your site looking “prettier”.

Style & Color Options

Here you can pick a few different “backgrounds” for your mobile site as well as defining the colors and section backgrounds.

Logo Icon // Menu Items & Pages Icons

Here you can control which of your pages you’d like to have displayed and available through your mobile devise and what sort of icon you’d like to use to the left of that item.

The icons to pick from are directly above and you can create your own as long as you make the image 59×60 png and will display at 32×32.

 

Even more WPtouch customizations

I decided to take my WPtouch to the next level and instead of landing on the default list of posts, which really doesn’t give you any sense or idea of what I’m about, I created a default landing page for my mobile users.

To do this, simply go to your “Pages” and create a new page. Title it however you like and hide it from your normal website. Then navigate to your “General Settings” area and pick the page under the “WPtouch Home Page”.

Then, using the “magic” of a customized template for that page, I was able to really hone in on the messages I wanted to be displayed on that first page.

Go Pro

As with all WordPress plugins these days, there’s a pro version as well. The Pro version even further extends the functionality of your mobile-ready design. You have more features and control over the theme via the “child themes”. You can now have your website as an icon on the phone rather than just telling people to go to a particular URL through their phone browser. You can create custom mobile-apps, support extended menus, and have ore commenting features right through your phone. More support for iPad, which is the biggest tablet out there. And much more.

If you’re just starting out, the price might be a bit prohibitive at $49 for a single site. If you are working with a designer, it is well worth asking if they have access to this code already as part of their package to you. Some designers have licensed the developer’s copy and can install and setup a mobile site for you as part of their web design.

In general, with plugins as easy as WPTouch, there’s no reason your website shouldn’t be mobile-ready.

Need help?  Give me a shout and I’d be happy to help you get this plugin installed.

Did you use this plugin?  Leave us a comment below and let us know what you thought of it.


7 thoughts on “Make Your WordPress Website Mobile

    1. CreeksideCS

      It was actually really easy to do Timothy.  I was surprised.  I just purchased the Pro last night and I’ve yet to install it.  I was super excited to see some of the features and reviews on it so far.  I’ll definitely post an update as I figure the Pro version out.

      Reply
    1. CreeksideCS

      Hey Rebecca.  You actually might gain from the pro version.  They are said to have better support for different media types.  If you like to wait though, I just purchased a copy and will be setting it up on my own site over the next few weeks.  I can definitely give you more specific feedback shortly.

      Reply
  1. Lisa Mason

    Thanks so much for this. Very timely and important info to have. I manage about 45 WordPress sites, 4 of my own and it’s so important to be mobile these days. 

    Reply
    1. CreeksideCS

      Wow that’s a lot of sites to manage.  Even for me!  Have you tried WPTouch?  I just installed but haven’t configured the Pro version on this site last night.  Definitely way more things to play with on the pro version.

      Reply

Leave a Reply

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

CommentLuv badge